Oct 31 2012

40 Excellent Examples of Attention to Detail that fill us with Delight

featured

As consumers of the web, we have become fairly accustomed to what we can reasonably expect out of a site. And as creators of the web, we (all of us!) have become fairly adept at meeting viable baselines. But let’s not kid ourselves – crafting an amazing user experience takes work. Everything from a budget to team chemistry can construct roadblocks between a project’s conception and an extraordinary end-result. Magical things can happen when the stars align…and they usually catch us off guard.

This is a celebration of some of those little moments of delight – the moments that, when you realize what is happening, you can’t help but smile like you just bit into a jelly donut.

Things that are useful

1. Github
Hinging on the fact that credit card issuers have agreed-upon patterns for their numbers, your credit card type is automatically determined while you enter the card number. (Visa always starts with a 4, for example).

2. Google Calendar
Can’t remember the date? Glance at the favicon on Google’s calendar for a quick reminder.

3. Cloud App
When you press the button to log in, the button appearance changes to an inactive state and the text updates to read “Logging In.” This instant feedback while the request is being processed reassures the user that the click was heard and things are happening in the background.

4. Square
Though it’s something that should be considered standard practice, we all love it when a form efficiently communicates when something is amiss. Square is a great example of form validation that provides helpful messaging, instead of blanket error messages.

5. Yahoo
Bad news, time travelers: Yahoo’s signup form errors when you try to sign up with a birthday that hasn’t happened, yet. Their cheeky response surfaces before you submit the form via some JavaScript that is always watching so you can fix the errors before a proper “submit.”

6. Designspiration
Looking for something specific? Just start typing and their beautiful search experience takes over the screen. Seriously, just start typing.

7. Burton
Not only does it look good, Burton’s dazzling search experience includes a great auto-complete feature and instantly updating results as you type.

8. Fab
At first glance, the search box seems fairly pedestrian. But when you click on it, it expands to a useable width, the irrelevant navigation items disappear to remove clutter, and quick links for common search patterns in price, color, and category are added.

9. Fancy
That’s not just their identity sitting in the expected top left corner. On hover, it slides down to further perpetuate the popsicle stick branding. And clicking takes the viewer to a random product.

10. Piccsy Pitchdeck
“Where am I?” The 1 pixel bar under the sticky top-level navigation elegantly solves this common problem introduced with the recent long-scroll design trend by slowly filling with color as you move down the page. It acts as both a progress bar and an indicator for the section you are currently viewing.

11. Simple
In the spirit of keeping things simple, Simple added keyboard navigation for their homepage that is, frankly, simple. For example, typing “s” flips the card over and activates the login form. Check out the legend in the footer for the rest.

12. Beatport
The player that sits at the top of the site is immune to navigating around the site. It allows the visitor to build a list of tracks to audition so they can take action when something catches their ear, instead of constantly pressing play. Oh, and there are well-documented keyboard shortcuts to make the player even easier to use.

13. Zappos
Creating a helpful 404 page is one thing, but this is on another level. Instead of merely providing useful links, Zappos reinforces how to navigate the site for visitors by having the penguin point to common places.

14. Flowh
This little detail pops up occasionally on different sites and each time I see it, I am beyond delighted. Social event aggregator Flowh uses an analogue clock icon next to each event’s time. The clever part? The clock shows the actual time of the event.

15. Goodreads
When viewing a book on Goodreads, the icon next to the rating details is an actual representation of the real ratings for that book.

16. Zendesk
In their new “agent” view, Zendesk added an ajax-driven notification when another agent is looking at the same ticket. In our office, handling SlideDeck support, this has been a much welcomed feature.

17. Akismet
“I need that company’s logo. I know! I’ll just grab it from their site.” Akismet steps in front of a right-click on their logo and directs the visitor to the official press kit versions of their logo. This is a great step in preserving their visual identity by encouraging consistency.

18. Dropbox
After initiating the download for Dropbox, the instructions page tailors the instructions to the browser you’re using.

19. Soundcloud
When a sound is being played in Soundcloud, the title bar updates to reflect the artist and sound you’re hearing. It’s great for quick reference if you’re wallowing in the comments on the track or on another browser tab.

20. Google maps
When viewing a map, the satellite and map toggle in the top right corner isn’t simply an icon. It is an actual representation of the map behind it.

Things that are cosmetic (and result in smiles)

21. Smashing Magazine
The top navigation elements are an excellent example of a trend that is quickly becoming standard practice – leveraging the power of CSS3 transitions to “soften” common interface interactions, like easing in the hover state. It’s subtle, but adds a reactive warmth to the digital playground.

22. Google
Step one: make sure your Google profile includes your birthday (editable through Google+). Step two: visit Google’s homepage on your birthday. Step three: feel loved by Google.

23. Tumblr
Maybe age is just a number, but Tumblr still wants the 30+ crowd to remember how young they are. If the age you input when signing up is over 29, the phrasing changes from “years old” to “years young.”

24. Tumblr
Another one from the Tumblr crew – if you inspect the source code, you’ll find an ASCII version of the Tumblr logo near the top. 100% useless and 100% awesome.

25. Kickstarter
This little Kickstarter gem has been around for a while, but is absolutely still worth mentioning. Scroll to the bottom and click the scissors. Repeat a few times for the surprise!

26. IMDB
When the dreaded 404 rears its head on IMDB, the visitor is greeted with a movie quotation that is, generally, related to an “uh oh” moment in a handful of great films.

27. Vimeo
If you navigate to a Vimeo page that doesn’t exist, the title bar updates to read “VimeUhOh.” Adorable.

28. This is Spinal Tap on IMDB
Playing off of one of the iconic jokes from the movie, IMDB’s listing for This Is Spinal Tap includes a rating that goes up to 11. Ha!

29. Coda 2 – For all of us who cringe when a word isn’t correctly pluralized, Panic’s checkout process includes logic to update from “1 copy” to “2 copies.”

30. Colllor – The identity and the favicon update to reflect the color(s) you are viewing. It’s a seemingly obvious move, but a really awesome touch.

31. Simple – The blue guilloche at the top of the page is dynamically created each time the page is loaded as a clever little homage to the common security practice on printed material.

32. Foundation – On the download page for Zurb’s Foundation framework, if you check “HTML Templates” under the “Additional Layers” heading, a handful of previews of layouts appear. Seems obvious enough, but upon inspecting the code, you’ll see that these previews are being built by actual HTML elements, not images. Resize your browser to a mobile size for the fireworks.

33. Google+ – When organizing your circles in Google+, if you drag more than 1 person at a time (shift+click to select multiples), the cards are skeuomorphically stacked and held together with a paper clip and a tag is added to show how many you have selected.

34. Mutual mobile – This little detail is incredibly easy to overlook. Watch the blue brand mark in the top left after clicking a new item in the top navigation. A shine passes over it while the new page loads.

35. Foursquare – When you land on the Foursquare homepage, the map in the background is of your physical location. It’s based on your ISP, so it’s likely to be a little off, but it should be in the general area.

36. 37signals – When landing on the homepage, you are greeted with a “Happy {day of the week}” in the top left corner. To be honest, as somebody who frequently doesn’t know what day it is, I almost put this in the “useful” list.

37. Fast Company’s Design Blog – Navigating social APIs can be tedious, especially if you want to provide a consistent user experience. Fastcodesign handles this brilliantly. They’ve stayed within the limitations of the APIs by using the provided buttons behind a layer of their own design and interaction.

38. Axure – When you hit the Axure homepage for the first time, you’re liable to be overwhelmed. They help point you in the right direction by providing an instant focal point with the little jumping “why” guy. It’s difficult not to want to click on him and find out what secrets he’s hawking.

39. Simple – As you hover over the different features and sections, the website and app images update with what it looks like when you actually use the service. Personal favorite: “Photo Deposit” when the phone physically moves to reveal the check behind it.

40. ThinkGeek – Finally, in honor of Halloween, take a scroll to the absolute bottom of the page. As you near the footer, you’ll see a spooky background emerge.

This is by no means and exhaustive list. There are even some great blogs (like Little Big Details) dedicated to the subject. Can you think of other little details on the web that incite delight?

About the Author:

Bradley is a developer and designer at dt (the UX house that makes stuff like SlideDeck and Hello Bar). He loves typography. Oh, and he's on Google+

Leave a Response

12 Responses

  1. Oct 31 2012
    Shawn

    How have I never noticed the favicon in Google Calendar!?! Great round up here, Bradley. There are several design elements here I hadn’t noticed on some of the sites I regularly visit…

  2. Oct 31 2012
    Dan

    Wow, awesome list! You must know the easter bunny. I can’t believe I just said that.

  3. Nov 01 2012
    Paul Mountney

    This is indeed an awesome list, Bradley. Tha is for sharing it. As soon as I get my laptop back from the shop, I’m gunna be looking closely at the source code for these pages

  4. Nov 01 2012
    Trevor

    Thanks for this post. Its great to be reminded how important the little details are – even though they can be missed or taken for granted, but often take extra time and care to include.

  5. Pingback: 4 Important Details that Create Intuitive Mobile Experiences

  6. Pingback: How to Win Friends and Influence Users through Emotional Design - The Industry

  7. Jan 15 2013
    sashashae

    Hi guys! Random question, so at the top of the posting, I see you have a featured image that looks the same as the Featured Slideshow on the homepage..how did you use the Slidedeck to create that feature in the Post?

    I use Slidedeck 2 and WordPress and would love to know how to accomplish that task. Also, is there any plans to allow us to be able to move the Title positions on the slideshows? I am currently using the Fashion Deck, and while I love it, I notice a lot of times it falls right in the middle of the faces of my photos or it covers up most of the photo. It would be great if we were able to select show Top Left/Top Right or Bottom Left/Bottom Right or Center and so forth.

    • Jan 15 2013
      Jason Amunwa

      Hi sashashae

      When you use “Your Posts” as a content source for SlideDeck 2, you can specify where the image for the slide gets pulled from for the slide background. Just check the configuration menu under the content source, in the SlideDeck Editing screen!

      As for configuring the titles placement, it’s something we discussed, but we found that it’s really tricky to offer options like that without making it really easy to screw up the positioning for the rest of the slides in the deck. Feel free to suggest it in our feature request forum, though!

      http://dtelepathy.zendesk.com/forums/20554367-feature-request

  8. May 26 2013
    Rob Bailey

    Hi Bradley,

    Fantastic list, you must have spent a lot of time locating these fantastic examples, unless you’re like me and bookmark anything you find that you think is cool! I used to work as a freelancer and had the attitude that if the customer was happy then the design was good enough. After working in an agency, I’ve learned to take a bit more pride in my work. You’d be surprised how taking that extra bit of time to put in some javascript that alerts the user that something is actually happening after they’ve clicked a button really affects the users experience of the site, like in your Cloud App example.

    Thanks for this, will be following your posts from now on,

    Rob.

    One again