In his Delightful Details talk at An Event Apart in Chicago IL 2013 Adrian Holovaty shared many examples of detailed interactions in error states, content pages, and more on the Web. Here are my notes from his talk:
- Delightful design empathizes with its audience. Put yourself in your user's shoes: what are they thinking about, what is important to them?
- Anticipate what questions people may have, make concierge-quality suggestions (based on what we know about them), provide comfort via familiarity.
- When dates and times are relevant in a site, provide some context. It may not be obvious where date/time are important up front. Whenever there's a date, turn it into the user's date (time zone) so it is more meaningful for them.
- Examples: let people know what time it is in your office on your contact form so they know when they can contact you. You can also allow people to search for locations open now. Facebook goes a bit further and includes weather information for events when they are coming up. Pro flowers includes little tips on when holidays occur when you are selecting delivery dates.
- If you have a "today" view on any of your sites, let people know when the date is about to shift (midnight) to the next day.
- Google Maps changes the shadows of buildings throughout the day when you are looking at a map. This help contextualize things even further.
- Examples: YouTube tells you when a band you are viewing is playing near you. Amazon changes the passport and Kindle text of their product images per country. Threadless tells you up front wether or not they ship to your country. Yelp! changes distance away to blocks in New York but uses miles in Chicago.
- Error handling: 404 pages are a great place to geek but super edge cases are even better places for delightful details.
- Examples: When creating a Google account, if you use two periods in a row, it will ask if you are a fan of punctuation. Mint tells you to avoid shouting when you use ALL CAPS in your inputs. Yahoo! asks if you are from the future if you enter a birthdate beyond today. Kicksend catches common typos for email addresses like gmail.com. Flickr tells you your post on Twitter is betting boring if you use too many characters. Instapaper special cases two common errors on their site to help you get a bookmarklet set up correctly.
- A lot of these details are trivial to implement but create really nice moments of delight for users.
- Mailcheck.js tests for common misspellings of emails. This lead to an decrease of 50% email bounce rates.
- Inferences predict what users might want to do next.
- Pre-fetch and pre-render and ways to load things before people need them if you are sure they'll need them next.
- Examples: Photoshop uses the height & width of an image in your clipboard to start a new file. Twitter suggests you grab their mobile app when you sign out on the desktop. Google Calendar sets different help text based on where you click: day, hours, etc. ThinkGeek allows you to unsubscribe just during the holidays when they send lots of email. eBay reminds you when you bought an item before when you visit that product page. Flickr others you download options when your right click on an image. Professional photo sites offer you to buy a photos when you right click on it. OSX suggest you download an app if you don't have one for a specific file type.
- Poetica does an MX record check when you enter a valid email address, then offers you the ability to sign in with Google if you use Google for your email.
- Soundcloud includes a message in the Javascript console telling people about job openings at the company.
- User education: use edge case situations to teach people how to use your site.
- Examples: Google Chrome suggests you use Incognito mode if you clear your cookies several times in one day. iTunes tells you when music is available for free if you try to download it. Soundslice captures Ctrl-S keyboard controls and tells you yhat you don't need to save -it happens automatically.
- Squishiness: be reasonable and allow for "give".
- Examples: 37Signals shows more or less text about their blog based on the size of your browser window. Amazon and iTunes allow you to stay in a semi-logged in state when you access your account. Flickr stops snapping map markers to a grid if you try to position off the grid a few times.
- The next frontier is changing content to reflect people's current time and location. Some extra-markup could be used to adjust content to be more contextually relevant: past events, time zones, etc.