Visceral & Contextual Transitions

John Gruber of Daring Fireball fame (as if he needs an introduction) linked to an excellent article written by Rob Foster at Mysterious Trousers. If you haven’t already, definitely take a gander (go ahead, I’ll wait for you to finish).

In summary, the article focuses on the gut or visceral reaction created when interacting with mobile apps. Specifically, apps that include subtle effects and/or transitions to build suspense/potential whereby the user anticipates and then experiences some sort of release or kinetic energy (e.g., pull to refresh, rubber banding).

Too often as UX/UI designs we design for the mind and lose site of the visceral elements that also play into what makes an app so darn great and fun to use.

Additionally, Pasquale D’ Silva recently articulated what he describes as Transitional Interfaces. His argument is that animations can be functional too (and not just sweet sweet mouth watering eye candy) in order to give context within an interface.

What happens when I click this button?
Does this menu just appear when clicked?
Did something just happen?
I missed that.

His most simplistic example is having slide-in/slide-out effects attached to list items when one is added and/or deleted from the UI. Be sure to check out the rest of his examples and nifty animated .GIF images that illustrate his point beautifully. If those examples don’t make you realize the benefits, then I’m not sure what will.

(As an aside: Chris Coyier over at CSS-Tricks took Pasquale’s examples and developed them using CSS transitions/animations – it’s definitely worth a look.)

My takeaway is this, two of the benefits of using subtle transitions/animations are: contextual and visceral.

Sure we should strive to make our designs pixel perfect, incorporate white space accordingly and develop a sensible hierarchy to the elements within an interface. But we would be wise to take it one step further – We should sweat the small stuff and then sweat it some more. Ask yourself, would a transition help provide context to the user for this interaction? Would a subtle animation provide a positive visceral or gut reaction when using the application?

Moving forward, I know I will.

Update (July 8th, 2013): With the unveiling of iOS 7, contextual and visceral transitions are going to become expected by users. Like Jeremy Olson, I’m looking forward to getting my feet wet:

Although I think we should try to give our apps a unique look through subtle twists on the iOS 7 design language, I’m excited to focus more on making our apps unique by experimenting with novel interaction models, transitions, and physicality, making our apps a lot more visceral.

Comments are closed.