Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

October 10, 2014

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.


October 10, 2014

More Decks by uxindia

Other Decks in Design


  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-

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide