Drop a line

Have a tip, or just want to say hi? Just use the form to the right!


123 Street Avenue, City Town, 99999

(123) 555-6789



You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.


Tension in interface design

Liam Spradlin

Visual tension is an interesting element of design. It's one of the few elements that is almost guaranteed to invoke a feeling, either comfortable or uneasy, from the viewer. For those unaware, visual tension refers to the feeling that a static image is unstable or dynamic. Imagine a ball frozen midway through its roll down the slope of a triangle. Although the image is static, the feeling is that the ball will or should continue moving.

As Steven Bradley explains about the triangle/ball example, if we imagine the ball rolling down a mountain and see this snapshot, we know it can't possibly be stable - after all, gravity is pulling it down. Stability isn't achieved until the ball is resting on the horizontal plane. This feeling of instability is visual tension.

Recently, as I was trying to learn more about when and how to use visual tension in design, it struck me that interface design is a perfect place for some well-implemented tension. I tried to think of instances where I had seen visual tension applied to interface, and immediately thought of the Google Now Launcher.

The launcher's left-most screen is the "Google Now" screen, where a list of predictive cards floats up underneath the search header. Since it's the left-most screen, swiping left can't dismiss cards - instead, it would take you back to a home screen. But what if a user swipes right and then left on a card? In GNL's current iteration, the card moves, but it's not easy to move, and it snaps back into place.

This is great tension. Imagine if this touch weren't here - you swipe right a little, then swipe left but the card doesn't move. Your finger just slides right over it. That doesn't feel appropriate, particularly if we - like Google - are working from the assumption that interface elements should have predictable, familiar, physical behaviors. The suggestion is that this card should work like a card in real life. If you touch a piece of paper with your finger and slide it back and forth, it moves. Likewise, the card should move.

But the subtle rubber band effect here is saying "you shouldn't do that." It gives the user the sense that the card is real and predictable in its physical behavior, but also gently discourages what the user is doing, because it won't accomplish the goal the user wants.

It seems to me that - unless you're designing a game or game-like interaction - visual tension in interface design is best used in instances where the user is actively interacting, as a hint, a clue, or a suggestion of physical properties. But this is a topic still under consideration. With notions of "material" interfaces now becoming more popular, it's an area ripe for exploration.