It is the little things in life that count, according to the old adage, and this is certainly true as far as user experience is concerned. The devil really is in the detail.
All too often some minor oversight on a website makes me furrow my brow, but more and more websites are taking a microscopic approach to user experience and interface design, and the results can be useful, amusing, fun, and functional.
I thought I’d share some of my favourites, as well as a bunch from Little Big Details, a fantastic website that collects these examples of smart user-focused design. It has hundreds to browse through, so if you're interested in UX design then do check it out.
The White Stuff’s moody checkout icon
Note the sad face on the little shopping cart icon when you first visit The White Stuff’s website.
Add an item into your basket and hey presto, that frown is turned upside down.
Last.fm’s colour flip
In the header last.fm offers you the chance to ‘Paint It Black’.
Click it to go monochrome.
Expedia’s use of social proof and persuasion
Expedia creates perceived demand by telling you how many people are looking (and have looked) at the hotel you’re interested in.
iPlayer cranks up the volume
BBC iPlayer embraces the spirit of Spinal Tap. See also the IMDB rating scale for that marvellous movie.
Buffer lets you rewrite headlines
Buffer will use selected / highlighted text on a page to be the caption in your tweet. For those times when a quote is better than the headline.
Dribbble’s browse by colour functionality
Dribbble.com displays a colour palette alongside an image. The colours of the image are represented, allowing you to drill down and browse other images with similar hues.
Boxee’s logo takes a nap
The usual green logo turns orange and falls asleep when the device isn’t connected to the internet.
Make Me A Cocktail takes a guess
Click ‘search’ without typing anything into the search box and it will suggest a random cocktail.
Bit.ly becomes your biggest fan
Drag the bookmark and the Bit.ly b̶i̶r̶d̶ puffer fish will cheer you on.
StreetView hangs ten
The StreetView icon in Google Maps is provided with a surfboard when you look at a map of Hawaii.
Skype’s font-inspired sulk
Skype hates Comic Sans, like the rest of us. Notice the sad face…
Meetup widens the net
Meetup automatically expands your search criteria in the event that no results are found.
Vimeo understands human nature
Vimeo knows that humans are often resistant to change.
The Amsterdam Museum knows what day it is
The Amsterdam Museum shows you the opening hours in its header for today.
…so does 37 Signals
If you visit 37 Signals today it will wish you a ‘Happy Monday’.
Ebay uses data to inform its UI
Ebay remembers your order history and will change the button from ‘Buy Now’ to ‘Buy Another’.
I love the emotion, the persuasion, the knowing wink, and the way that small details as shown in the above examples can make you feel engaged and happy when using websites.
What other examples are there that you have seen? Please leave a comment below if you spot anything!
Reader comments (18)
2:30PM on 8th October 2012
Brilliant post. Really love the "Make me a cocktail app" ‘search’ content.
4:56PM on 8th October 2012
I worked in a bar for 2 years, the "Make me a cocktail app" would have come in handy! Interesting post :)
8:27PM on 8th October 2012
I think the bit.ly "bird" might actually be a puffer fish. Hard to see though.
10:00PM on 8th October 2012
I think another site that pays attention is Conversion Voodoo. Their site's homepage constantly changes depending on the time of day. Really cool. Also notice their contact us form. VERY COOL!!
www.conversionvoodoo.com
Head of Usability & Conversion at PRWD
10:36PM on 8th October 2012
Great post and examples Chris. Taking the social proof & persuasion element a step further for online hotel bookings, Booking.com combine a variety of messages (xx people looking at this hotel, latest booking made xxx and how many rooms are left) to really push people down the right path. My full article on their different persuasive techniques on this blog is here for reference: http://econsultancy.com/uk/blog/8151-booking-com-improving-conversion-with-best-practice-persuasive-design
VP Marketing at EIP Concepts, Inc.
11:51PM on 8th October 2012
Great compilation and insight into "the little things" that make all the difference.
Account Manager / Social Media Lead at Revolution Digital
1:12AM on 9th October 2012
Great article!
8:14AM on 9th October 2012
The moody icon on The White Shop's check out page is a nice little detail. It shows how quirky the brand is and makes visitors think twice about leaving the site.
Digital Marketing Executive at Koozai
9:12AM on 9th October 2012
Good examples. Nice little touches like this can go a long way, they help add a little personality into a website but I also noticed that these are reflective of the brand itself.
I particularly like the idea of automatically displaying the opening times, that would be very useful sometimes.
Ecommerce Director at King of Servers Ltd
9:19AM on 9th October 2012
Great post Chris. As well as improving the user experience these little touches help inject that bit of personality that brings a website/company to life and make it stick in peoples minds long after their visit.
Co-founder & Design Director at Super User Studio Ltd
10:41AM on 9th October 2012
Great post. Little details make products more human.
10:41AM on 9th October 2012
This one should be the winner:
iOS 6 adjusts metallic button reflections as you tilt your phone
http://www.theverge.com/2012/6/13/3082329/ios-6-button-tilt-change-reflection
Managing Director at Syzygy
10:50AM on 9th October 2012
Great post, but I question the logic in your last example "eBay uses Data to inform its UI". Changing the copy prompt on the Buy button to "Buy Another" is misleading in my eyes. I'd presume I was about to buy two items and that eBay had miscalculated the quantities in the my order. Be interesting to see how the conversion stats net out on this test. To improve the UI further, you need to tell me I've bought one of these same products before on X date, then the new button has context.
1:57PM on 9th October 2012
This is great but cant replicate the GGL surfer! :-( Not even on .com
5:50PM on 9th October 2012
I visited Macy's website recently to find out when a store was open. Turns out, they make it really easy. When you pull up the store locator, it says "Today's Hours: ... Tomorrow's Hours: ..." and then provides a link for a full schedule. I didn't have to even remember what day it was - very helpful.
http://www1.macys.com/store/locator/index.ognc?action=locatorSearch&ZipCode=05401&City=&State=NOSELECTION&LOCATOR_BUTTON.x=0&LOCATOR_BUTTON.y=0&LOCATOR_BUTTON=LOCATOR_BUTTON
11:54PM on 15th October 2012
I would argue that Buy Another instead of Buy now could create a confusing experience where users might think they are ordering two items.
Digital Marketing Executive at Koozai
12:44PM on 17th October 2012
The devil is in the detail! It is good to highlight such small yet important details that can really make a difference to the site.
Users like the personal touch of websites so I think the shopping bag with the smile, the ability to customise and the suggestion when you don't know what to search for are good signs that the company wants to keep it's users happy.
I also think the 'X people viewing' and 'X many left' are great for speeding up decisions and improving conversion rates.
7:58PM on 24th March 2013
There is definately a great deal to know about this subject.
I really like all of the points you've made.
Log in to post a comment