uxzentrisch shows 18 great »Little Big Details«-Links from UXcamp Europe 2011

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.

Photo of the session
by @cappellmeister

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.

You may also want to follow us (@uxzentrisch) and also @littebigdetail on twitter.

  • 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«.
    If you know JavaScript you may want to help me create a jQuery Plugin that makes this a »no brainer«. Here is my alpha on GitHub. More about it’s objectives in the .js-file.
  • 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 :).

Last but not least: Thanks to @evalottchen for your great sketchnotes.

Tobias Jordans: Little Big Details @ UX Camp Europe 2011