Thanks to everyone who joined my session about little big interaction design details and thanks for the active discussion that we had! It was a pleasure. Here’s a quick recap of the session.
This post includes all the links that we looked at and some more :). Did you think of a great UI detail that we did not cover in the session? Please send it to us – we write in german and this is where you find all our »Detailverliebt« posts. Or consider submitting it on littlebigdetails.com (all english) which is a great project by the guys that are currently working on gidsy.com.
- Amazon (uxzentrisch) – takeaway: Connect your user data with their shopping experience. Give users all information to make an informed decision.
- Dropdown with preview (uxzentrisch) – takeaway: Use a preview to enable your user to make a fast, informed decision.
- Facebook: Choose language (uxzentrisch) – takeaway: Your system has (lots of) information about the user and his/her preferences. Use this information to help your users work faster.
- iPhone counter (uxzentrisch) – takeaway: Use a smart default instead of error messages. Keep the user’s feeling of control and guide their attention by using animation.
- Autocomplete e-mail domain (uxzentrisch) – takeaway: I don’t know if thats really necessary, its just realy nicely done… :)
- iPhone new mail (theinvisibl) + iPhone screen animation (littlebigdetails) – takeaway: Don’t let things get in the way of the user’s current interaction. Make it feel right, even if it requires complex logic…
- Chrome tab closing (littlebigdetails) – takeaway: Even stuff we do every day can be greatly improved…
- Column formatting in OS X (littlebigdetails) – takeaway: »…« is not the only way to deal with changing widths. Resize can also include a reformat.
Example by @evalottchen: You may want to use this to display more detailed information (acronym > full word)
- Creditcard detection (littlebigdetails) – takeaway: When there is a pattern to some complicated input, show it to your users in an unobtrusive way.
- Hover on teaser (littlebigdetails) – takeaway: When more than one element of a teaser is linked to a specific URL, the interaction should highlight all elements to indicate: »that’s the same link«.
- Disable the login button (littlebigdetails) – takeaway: There is always a better way that to show a dialogue box!
- E-mail resizes in input field (littlebigdetails) – takeaway: Such a great, simple idea!
- GMail favicon (littlebigdetails) – takeaway: Maybe use different icons for your front- and backend?
And by the way, some browser even support favicons that are generated dynamically with the HTML5 canvas element.
- Character count (littlebigdetails) – takeaway: A great way to clear the UI by using space that only appears in a situation, when the extra information starts to become relevant.
- iTunes icon color (iTunes 9) – takeaway: No error message, no tooltip, just a color change – reduce as far as possible.
- Tumblr signup (littlebigdetails) – takeaway: Use different screen layouts to get the best landing page for each user.
- Addon: Have a look at minutes.io, a new project by my friend Gregor. It has quite some nice interaction design details like the keybord shortcut tip on the minutes page.
- Addon: Looking for more nice interaction details? Have a look at the screencasts in my article about onepage-websites. They are full of it – and most of it is good :).