UX14 - It's All About The Details (Vasudha Chandak)

“The details are not the details. They make the design.” — Charles Eames.

The difference between an awesome and Okish product are these details. No matter what type of app or website you’re developing, by taking a microscopic approach to user experience and interface design, you can make things clearer, useful and give your users a WOW experience. Small details go a long way. Micro-interactions is about those critical details that make the difference between a friendly experience and traumatic anxiety.

This talk focuses on a fresh way in designing the delightful details by

1. Focusing on the structure of micro-interactions: Triggers-Rules-Feedback-Loops & Modes.

2. Real life examples of WOW experiences.

3. Identify opportunities for adding the delightful details in your websites and apps.

Transcript

1. What is Micro-Interactions
   According to Saffer, it’s a product use case
   boiled down to a single moment, focused on a
   single task. Unlocking your smartphone is a
   micro-interaction; so is the chiming sound that
   plays when you boot up Windows or OS X.
   

   View Slide

2. Structure of Micro- Interactions
   • A Trigger initiates a micro-interaction.
   • The Rules determine what happens.
   • Feedback lets people know what’s happening.
   • Loops and Modes determine the meta-rules of
   the micro- interaction.
   

   View Slide

3. Commonly use Micro- Interactions
   • AOL’s You’ve Got Mail
   • Autocomplete
   • Autocorrect
   • Blue Screen of Death
   • Control-Alt-Delete
   • Cut and Paste
   

   View Slide

4. Micro- Interactions are good for
   • Accomplishing a single task,
   • Connecting devices together,
   • Adjusting a setting,
   • Viewing or creating a small piece of content
   like a status message,
   • Turning a feature or function on or off etc
   

   View Slide

5. Rules for creating great details
   • Don’t Start From Zero. You almost always
   know something about the user, the context,
   or the platform that can change the product
   for the better. Start from that.
   • Bring The Data Forward. What information is
   inside the micro-interaction that you can pull
   forward so that users can see it at a glance?
   Why do I need to go inside my finance app to
   see how much amount is left for the month?
   

   View Slide

6. • Speak Human. Feedback is for human beings,
   so address them as such. Use the words your
   users use.
   • Use Long Loops. How does your product adapt
   over time? What’s it like when the user comes
   back tomorrow? Or the 10th time?
   • Prevent human error. Don’t allow (or better
   yet, fix) actions that would break the micro-
   interaction.
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide