Visceral design

November 29th, 2013

When I read Fosters article about visceral apps earlier this year it really spoke to me: this is exactly what we have been after ever since we started Touchwonders.

Making apps visceral means to design them in a way they really move the user. Often this happens on an unconscious level. In that case, they really like what is happening but find it hard to point out what it is.

I once noticed this with one of our customers during a presentation of one of our business to business apps. While he was in a discussion with others about some topic, he was playing with our app mindlessly. This was just a series of slides we had put in a row in a nice way. But the transition and animation worked so well, it was fun for him to control. That, to me, is the essence of designing visceral apps. And it is just as important in apps for business as in apps for consumers.

I was reminded of this, last week when we made a small improvement to Highstreet, one of the apps we're currently working on.

Highstreet is an e-commerce app for which our ambition is to create the very best user experience we can think of. In this example, the visceral effect I am referring to has to do with the cart. When the user adds a product a second time to the cart, we do not want to add it another time to the list. Instead we animate the product to show it was added another time.

The first version of this animation was ok. It worked to get the attention of the user. But we didn't like it enough. It was not visceral. So we gave it another try which you can see below.

The second animation, however subtle the difference, works much better. You almost want to keep adding the same product to the cart, just to see the little jump it makes. That urge is what visceral design is all about. When done well, it creates a sense of delight. And that is what you want your users to feel.