Alternate dimensions
If you’re a typical designer working in the software world, the majority of products you’ll create will have strictly two dimensional interfaces — length & width only, pixels on the screen. As interfaces have evolved over the years many have gained a very simple kind of "depth": lighting effects, drop shadowing, and modeled surfaces. But they are (ironically) strictly surface effects: aids to perceiving flat objects on a flat screen in discreet layers. The illusion of depth is useful for managing a limited amount of space, and contributes to a more detailed and "real"-feeling experience. Yet like piled sheets of paper, they have depth but are not in any meaningful way three dimensional objects.
An alternate dimension that can be added to our otherwise flat interfaces is time.
A useful way to frame almost any design problem is through the act of storytelling. A mobile phone design includes the story of how someone navigates through their contacts; a chart in an annual report tells the story of how well the company has performed in the past year. Time is integral to telling comprehensible stories, because it allows for a beginning, middle, and end. Animation in our interfaces connects the dots for users in a very direct way.
Mac OS X's stacks feature: Collections of icons "stacked" on top of one another. Their visual utility is limited when still, but the story is clear once you see* the pile expand.
Unsurprisingly, information graphics and data visualization gain a tremendous amount of explanatory power with the addition of time (and motion). A print publisher that has embraced the extra dimensions that come with online publishing is the New York Times. Their interactive graphic features often contain information that would be challenging to explain in paper format.
Comparing the "flight path" of two vectors.
By increasing the amount of data displayed while telling a more fluid story, time (and motion) can offer an opportunity to add depth _and_ clarity, simultaneously. What are other good examples of integrating time as an additional dimension?
* It's tempting to assume that the interaction is clear for our users because it is clear in our own minds; but not providing a cohesive story (i.e., showing the animation) makes understanding difficult.
4 Comments
I don't understand the flight path image. Maybe it's me, but this article feels unfinished, like there are 5 more paragraphs that aren't showing.. :/
I could use some more examples and some more background on why time as an extra dimension is good in designing interactions.
Interesting though :)
Another interesting example of this is Google's Gapminder. The play button in the lower left and the time slider along the bottom really help turn static graphs into a great storytelling device. Try it out on a couple of maps to see what I mean.
Cartographer Alan MacEachren (see his book How Maps Work, 1995) has done a fair amount of thinking along these lines for geographic information systems, which is directly applicable to other graphic representations of data. Among the ways to encode data with animation, there are:
Sequence, being the order of the frames in the animation cycle. This is good for encoding temporal position, representing changes of something over time (like your business cycle example above), but it can also be used to indicate ranking on any attribute (e.g., like an animated Top 10 list).
Rate, being how quickly things change in the animation. This is good for representing degree or rate of activity. For example, one can imagine a browser throbber where the speed at which it completes its animation cycle is proportional to the bits per second transferred.
Step Size, or the “jumpiness” of the animation (amount of change per frame) is probably good for things like indicating the smoothness or efficiency of a process. For example, a browser’s throbber can use jumpier animation to represent a poorly responding server to help the user distinguish between slow downloads due to server demands from those due limited bandwidth.
Synchronization, which is the degree multiple simultaneous animations are at the same frame at the same time. This should be a good for representing the coordination of processes.
Another NYT example of using animation to display change over time.
Post a comment