UX Lx 2013: Delightful Interactions

UX Lx 2013: Delightful Interactions

At this year’s UX Lx, one of the big themes discussed was the small little details that make or break a product/service.

In the morning, we had Dan Saffer with his presentation “Microinteractions: Design with Details”, and in the afternoon Giles Colborne took the stage with “Designing for Delight”. Both speakers tackled this large (yet apparently small) topic from different angles: Saffer outlined its relevance with a more detailed look, while Colborne approached it in a more holistic way, contributing with examples outside of the technological domain. Because these two presentations share a lot of common ground, I decided to publish a single blog post with notes from both of them.

For someone not familiar with this theme, these notes should serve as a great introduction. The key takeaway: never underestimate the “little things”.

 

“Microinteractions: Design with Details” by Dan Saffer

  • [Started with background music from Symphony No. 9 by Gustav Mahler]
  • The sad case of patron X: a story about a ringing iPhone during a symphony performance. The fellow in the first row just got his first iPhone and did not know it was his ring tone, let alone how to silence it. Silencing your phone is a microinteraction. In the story, this small, ordinary interaction eventually became a huge issue for everyone in the room. Bottom line: never underestimate the “little things”.
  • Design is not just about solving wicked problems. Change the world from the bottom-up by solving the big problems with small details.
  • Microinteractions are contained product moments. They can be the product (e.g., toasters; Convertbot app) or a detail of the product (e.g., Highrise app invites you to play a game of tic-tac-toe while it loads your account database in the background).
  • Mirointeractions are shallow, thin, rapid, and often forgettable.
  • If you care about user experience, you should care about microinteractions. If microinteractions are poor, the main features are surrounded by pain and frustration. Example: microinteractions in the first Android version were poor [by the way, visit the current Android website and check out the little animated android mascot when you hover the footer].
  • Microinteractions can be signature moments. Example: Remember “You've got mail”? They created a movie out of it!
  • Small interactions work well on small devices and can help to create an ecosystem of devices.

 

Designing with details:

  • The microinteractions model is made up of: triggers, rules, feedback, and loops & modes.
  • Triggers can be manual or system.
    • Good practice: bring the data forward. Bad example: iOS weather icon is always 73 and sunny, not helpful. Good examples: Windows live tiles work well; Google Chrome shows you a download counter and progress indicator.
    • Manual triggers are intentionally performed by the user. Examples: Disqus signup form pre-fills your name based on your e-mail; on Akismet’s website, when you right-click the logo it offers you the various downloadable versions of the logo.
    • System triggers are intuited from user behavior. Examples: Nest shows you the temperature when you approach the device; Instapaper app offers you a rotation lock if you accidentally rotate your device.
  • Rules determine what can or cannot be done.
    • Good practice: use them to help prevent human error. Example: Gmail’s “Did you mean to attach files?” helper.
    • Another good practice: do not start from zero, there is always something you know about the user to set smart defaults. Examples: Waze app suggests driving routes based on user behavior; auto-select credit card type based on card number.
  • Feedback (or the lack of) is what allows us to learn the rules.
    • Good practice: Use the overlooked. Example: Google Chrome marks the position of searched matches on the scrollbar.
    • Another good practice: speak human. Examples: Threadless shopping cart face turns from sad to happy when you fill it with items; Boxee logo goes to sleep when network goes down; Dropbox suggests you ‘grab a snickers’ when there is a long upload time remaining.
  • Loops & modes: measure things over time to know when to use loops and do not use modes unless user behavior requires it.
    • Good practice: use long loops. Examples: Spotify fades text for songs that have been added a long time ago; Google Chrome update indicator changes color when its been neglected for a long time.
  • Look for existing microinteractions in your product. Change triggers, rules, feedback and loops to improve the experience.
  • Design is in the details.


“Designing for Delight” by Giles Colborne

You can follow my notes alongside the slides from Giles Colborne’s talk, available here.

What is delight?

  • How can we delight our customers? What do other designers think is delightful?
  • If Google Chrome thinks a security certificate is dodgy then it displays a skull and crossbones instead of a padlock. This example is interesting, but not delightful.
  • Even the best designers get rather evasive when asked to justify this stuff: “Its hard to prove the ROI on some small moment of delight in a design that requires a little extra time and attention (although I do believe that you will see a negative ROI when it does not happen).” I want to deliver ROI.
  • When did a product or service delight you? I collected stories from people about delightful experiences, and what they told me was completely different from the experts’ view.
  • The stories followed a common pattern: anxiety > resolved effortlessly > delight. These stories are about companies that were ready to solve the problems and save their customers.
  • When creating experiences, it is not just about eliminating negatives emotions. Sometimes you have to enhance them: enhanced anxiety > ending surprisingly > delight. However, you have to choose carefully when and where to apply this concept (you should not enhance the anxiety of online banking)!
  • “Extras” should always be relevant and delivered with a personal touch: problem > relevant extras > delight.
  • In Emotional Design, Donald Norman wrote about a simple framework that is helpful in understanding this. The brain is divided in three layers: visceral (sensations and reflexes), behavioral (doing things and feeling emotions) and reflective (higher thought). Designs please us on each of these levels. The stories about delight were all on the behavior level, not reflective or visceral.
  • This type of delight has value that can be easily proven: discussion forums, online rating systems (e.g., TripAdvisor) or net promoter score.

 

How can we design for delight?

  • You have to see where people stress naturally, and add moments of delight to those moments. Anxiety seems to be a useful indicator of potential for delight. Stories of stress tend to be remembered and shared. Behavioral delight sells itself through word of mouth.
  • See where all competitors still fail. Little points of stress in a process are “absolute gold” for designers. Resolve them effortlessly and delight has ROI.
  • Looks for points of anxiety — experienced or remembered.
  • If appropriate (e.g. games), enhance that feeling.
  • Pick one to fix now.
  • Fix it completely.
  • If possible, find solutions that are effortless, personal, clever, superior.
  • Measure ROI through word of mouth.
  • Remember that delight fades away, so keep it up.

To stay updated on everything micro and delightful, you can follow Dan Saffer and Giles Colborne on Twitter.

Continue to stay tuned to this series, and please share your thoughts about this talk on the comments section below. What other tools can we use to measure the ROI of microinteractions/delightful moments? When was the last time a product or service experience delighted you?

You may also like…