The clunk is nothing to do with being clunky.

A clunk is, as defined by Ashley Friedlein, a door clunk, a design detail within the user experience that lends a user satisfaction. It could be called a micro-interaction. The clunk is feedback, it's often skeuomorphic.

I had fun using the few apps on my iPhone 4S to find some features that embody the clunk. Some of them are pretty simple but see what you think and please add your own.

NB: I'm aware that my header image is a door closer (designed to avoid the clunk).

1. The BBC iPlayer Radio app: station select

This is by far my favourite. Look how each station bounces into or out of place, as if gravity is acting on the dial.

2. The Airbnb app: menu transition

A lovely touch that is there simply to feel nice. A simple slide across would work, but it wouldn't release as much serotonin.

(see Airbnb speak at November's Festival of Marketing in London)

3. The Barbican Pop Art exhibition app: content transition

I can sit and do this on my phone for hours. It's a free app, too!

4. The Duolingo app: word shuffle

The pleasure in playing Duolingo is not just the crazy sentences it shoots at you, but how nice it is to interact with. See here how I miss a word and then slot it into place.

5. The iPhone home screen: swipe highlight

An everyday piece of user experience, the little gleam that runs across the swipe-to-unlock call to action.

6. The KLM app: flight select

Note the bars that correspond to flight price.

7. The Airbnb app: guest select 

James Bond-esque.

8. The Trainline app: seat reservation

Look how the text changes when I select to reserve a seat. Does this deserve to be called elegant? It is to me.

 

9. The Trainline app: date and time select

More from the Trainline. It's important the customer picks the right date and time. Look how the 'today' and 'tomorrow' markers are highlighted when the appropriate date is selected.

10. The Guardian app: live article indicators

There's nothing a bit of gifery can't improve.

11. The Guardian: loading icon and article select

In this case, nothing new loads, but you can see the nice icon and then when I scroll down and select an article, the way it subtly pops out. There's little to disappoint in this Guardian app.

12. The Easyjet app: flight select

The great thing about this is not just in using all the space on the phone display to make booking easier, but also the fact that this emphasises the date of travel and reduces mistakes.

13. The BBC News app: category removal

This is familiar to iOS users and ensures users don't remove anything by accident.

14. The Google authenticator app: countdown colours

This is about as simple as it gets, the auth code changing colour to red and then flashing when it's about to expire. Simple but useful to the user, who otherwise might miss the mark and enter the wrong code.

15. The Barclays app: skeuomorphic buttons (pushed down to indicate selection)

Again, very simple. Some designers prefercolour to indicate selection but I find this method less confusing.

Ben Davis

Published 15 October, 2014 by Ben Davis @ Econsultancy

Ben Davis is Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1175 more posts from this author

You might be interested in

Comments (1)

Avatar-blank-50x50

Natalja Sapoznikova, UX/UI Designer at Diatom Enterprises

Yes, micro-interactions really can help to improve user experience and the whole feel of the app.

http://www.diatomenterprises.com/interaction-design-and-micro-interactions/

12 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.