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. Read More

The movement is the massage

Cooper hosted an IxDA-SF event last summer in which Punchcut‘s Christian Robertson discussed motion design, and the ways in which it can provide meaning in user interfaces. His presentation was specific to his experience designing for mobile devices, but many of his insights apply to a much broader perspective and, since then, they’ve remained in the back of my head.

Prior to joining Cooper as a visual designer, I was a motion graphics designer. For a long time, these two experiences were disconnected. I took interaction design classes and motion design classes in school, but they were separate lines of thought. One was rational; the other, evocative.

Recently, I worked on a consumer product in which the interface movements and animations were the foundations of the experience. The real lesson for me in this process was that thinking about, and designing, what happens between screen states. Even when there isn’t a mandate for you to consider motion in your product, incorporating it can yield a design that is more complete, more understandable, and more meaningful.

This was a huge duh-moment for me. Looking at a typical design framework, we see discrete places (or states), snapshots in time and space. We architect this way because it is efficient and breaks the flow down into digestible parts. But when we ignore the path between A and B, we risk disorienting and confusing the user.

no transition.gif
Scrolling a menu with no transition.

with transition.gif
Scrolling a menu, transition included.

The example Christian used in his presentation was the subway: You get on at one place, and you are essentially teleported to another place. You arrive without really knowing how you got there.

Humans look for, and respond to, movement. We evolved to spot predators in our periphery and track the movement of prey. This instinctual attention is what motion design can leverage in order to make a behavior feel more “intuitive.” When users can see how the screen gets from state A to B, we (as designers) can worry less about them getting lost. When designers think about how the screen gets from state A to B, we can understand the system of behavior at a more detailed level. The movement becomes the meaning. Read More

Remembering to remember


You are shopping on Amazon. You add something to your cart, and you decide to checkout. Amazon asks you for your account information. “Enter your e-mail address,” it says. You do. Underneath that are two radio buttons. One says “I am a new customer.” The other says “I am a returning customer,” and offers a field for your password. You click, or tab, to the next field and enter your password. You hit enter, or click the sign in button — it makes no difference to Amazon because this is what it replies:

You clicked on the button indicating you’re a new customer, but you also provided a password. If you’re a new customer, please do not enter a password yet (we’ll ask you to create one later). If you’re a returning customer, please click on the button indicating that you already have a password, then type in your password.

You are confused and dismayed. You did NOT click on the button indicating you are a new customer! (What button?! The only button in the page says “Sign in!”) You realize the default on this login page is set to “new customer.” You wonder why it does not understand your intentions. It could see that you have entered a password, yet it did not bother to query the database; or, why did it not simply toggle the radio button as you tabbed or clicked into the password field?

You get the feeling Amazon holds some kind of institutional animosity towards you, like being sent to the back of the line at the DMV because you made a slight error on one of their forms.

But you forget about this, until the next time, and the time after that…

Read More

Countdown to a spanking

XP: Are you SURE you don’t want to restart now?

A constant thorn in my side from our use of Windows XP as our primary workstations is the Automatic Updates feature. In explaining my frustration to others, I’ve inevitably compared it to very similar behavior in Mac OS X, which for some reason does not drive me insane. I’ve been unable to put my finger on the difference until just this morning. Where OS X also presents a modal (non-closeable) dialog that requires an action, Windows floats that dialog above everything else, forcing the issue. With OS X, I can happily continue about my day, and decide to restart only when it is convenient for me. XP on the other hand, requires a ‘Restart Now’ or a ‘Restart Later’ before it gets out of my way, and choosing ‘Restart Later’ begins a Sisyphean cycle of misery until finally the computer has had enough of your sandbagging and counts down an automatic restart, like a mother counting down the time you have left before you get a spanking.

What a difference being able to click away makes. Read More

The secret life of elevators


Several months back, the New Yorker ran a fascinating article about elevators that explored multiple issues–engineering, architecture, ethnography, economics–and shed light onto the “why” of the elevator design problem we featured in a recent episode of The Drawing Board.

In elevatoring, as in life, the essential variables are time and space. A well-elevatored building gets you up and down quickly, without giving up too much square footage to elevator banks. Especially with super-tall towers, the amount of core space that one must devote to elevators, in order to convey so many people so high, can make a building architecturally or economically infeasible.

As designers we can be dismissive about the why behind the problems we encounter; it’s often enough for us that an interaction feels patently hostile. At best we file it under “implementation model” and move on; at worst we assume those design decisions don’t have any rationale behind them and neglect to consider it further.

It’s easy to become jaded after seeing so many examples of poorly-made software, and while it’s possible to come up with a decent solution without digging any deeper, it’s critical we understand the why if we really want to marshal the potential of technology to serve human needs. Also, besides informing our work, exploring the whys often reveals fascinating stories that give us insight into the underlying processes, and help us sympathize with the people that created them. Read More

Foldit: distributed gaming as research tool

Foldit Screen

Foldit, a game made by two medical researchers in collaboration with some computer scientists and with consultation from some game designers, taps into people’s intuition where raw computer processing power isn’t enough. Think distributed computing like the Stanford Chemistry Department’s Folding@Home, but instead of donating idle CPU cycles to perform scientific research, you play a game that helps researchers understand human pattern recognition.

According to UW associate professor of computer science and engineering Zoran Popovic in Science Daily:

Some people are just able to look at the game and in less than two minutes, get to the top score. They can’t even explain what they’re doing, but somehow they’re able to do it.

One of the most interesting parts is that they’ve incorporated competition into the game: between gamers playing for a high score, and actual research groups trying to solve problems. I think a lot about how graphic/visual/interaction design could similarly channel human energy in productive ways. There’s got to be another example of this somewhere, right? Read More

Typography and the user interface

There is a quiet issue that nags at the computer industry. While processing
speed and computational flexibility have grown at incredible rates, our displays,
the most human-facing elements of our digital lives, lag behind.

Addressing an audience of information designers, Edward Tufte once explained
that the fundamental challenge with presenting information is that the world
we live in is high-resolution and multi-dimensional, yet all of our displays
are most decidedly not. And while Tufte was initially referring to the problems
of displaying rich data on paper, he was quick to point out that digital displays
suffer the same problem but to an even greater degree. It may be tricky to
map multiple axes of information (time, temperature, dollars, color, widgets
sold, etc.) onto a two dimensional representation, but your difficulties are
only compounded when you add the considerable handicap of reducing the target
display resolution to a fraction of that of an equally sized piece of paper1.

Read More