O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Microinteractions in web and mobile design

1.184 visualizações

Publicada em

A keynote about Microinteractions in web and mobile design, explaining what they are, different approaches, structure (triggers, rules, feedback and modes) and examples.

Publicada em: Design

Microinteractions in web and mobile design

  1. 1. Microinteractions: Designing With Details
  2. 2. 1- Designing Microinteractions 1.1. What are (and not) M.I. 1.2. M.I. can be big. 1.3. The secret history of M.I. 1.4. M.I. as a philosophy.
  3. 3. 1.1. What Are And (Not) M.I.? WHAT ARE MICROINTERACTIONS? - “Are the functional interactive details of a product” those who makes a product enjoyable, engaging and easy to use. - Some of them are practically invisible. - The difference between a product you like and a product you tolerate, are the microinteractions included in it.
  4. 4. Gilt.Com (Form) “When entering your email address in the sign up form, the input field auto completes common domains”.
  5. 5. 1.1. What Are And (Not) M.I.? WHAT MICROINTERACTIONS ARE NOT: - “Features”. - Microinteractions differ from features in size and scope. - Features tends to be complex, time consuming and cognitively engaging. - Microinteractions on the other hand are simple, brief, and should be nearly effortless.
  6. 6. 1.1. What Are And (Not) M.I.? FOR WHAT ARE MICROINTERACTIONS GOOD FOR? - Accomplishing a single task. - Connecting devices together. - Adjusting a setting. - Turning a feature or function on or off.
  7. 7. Google (Translate) “The second time you listen to a translation, it is dictated at a slower speed”.
  8. 8. 1.2. M.I. Can Be Big. M.I. CAN BE PART OF A PRODUCT, OR THE PRODUCT ITSELF - Toaster: Function: Toast, the whole device is powered by a single interaction “Press a button”, “Toast toasted”. - Similarity small apps can be made of only one interaction; many mobile and desktop apps do just one thing, but well. Example: converting measurements, being a calculator or showing the weather. - “Microinteractions are the glue that can tie together features across mobile devices TV, desktop and laptop computers and the web”. - Microinteractions force designers to work simply, and to focus on details.
  9. 9. Dark Sky (iPhone app) “The main function of the app is to display the weather, also giving information about temperature, chances of rain, and humidity”.
  10. 10. Menu Bar (Mac Os X) “The menu bar in Mac Os X is full of icons each of which launches a microinteraction".
  11. 11. 1.3. The History Of M.I. GYPSY - In 1974 Larry Tesler began working on an application for Xerox Alto computer called Gypsy. - Made use of mouse and GUI. - Larry’s mission—was to reduce the modality of the interface, so that users wouldn’t have to switch to a separate mode to perform actions. - One of those functions was moving text from one part of the document to another. then find and select the text to move, then finally press the Escape key to execute the copy.
  12. 12. 1.3. The History Of M.I. GYPSY - Larry knew there was a better way to perform this action, so he designed one that not only made use of the mouse, but radically simplified this microinteraction. - In “Gypsy”, the user could select a piece of text, press the “Copy” function key, then select the destination, and finally press the “Paste” function key.
  13. 13. Xerox Bravo “The precursor of “Gypsy”, and the first microinteraction, copy and paste”
  14. 14. 1.4. M.I. As A Philosophy. There are three ways to incorporate M.I. into products or systems: 1-MICROINTERACTIONS AS SIGNATURE MOMENTS -Think about them on a case by case basis, during the course of a design process or when simply refining your product try to identify possible microinteractions. - “Signature Moments” are those microinteractions that are product diferentiatiator, they help to create customer loyalty and recognition.
  15. 15. MENU M.I. As Signature Moment (iPod Scroll Wheel) “Signature moments” are those MI, that are product differentiators, such as the original iPod scroll wheel to help you navigate through the different songs and menus of the music player”.
  16. 16. M.I. As Signature Moment (Facebook Like Button) “The Like Button on Facebook, is now so well known, that it’s part of the brand”.
  17. 17. 1.3. M.I. As A Philosophy. The second way to think about M.I: is to reduce more complex applications to individual products built around one microinteraction: 2- MICROINTERACTIONS AS PRODUCT STRATEGY - Your product does one thing and one thing well. (Reduce product to its essence). - How many startups work or began, Instagram to Nest. - MVP can be one microinteraction.
  18. 18. 1.3. M.I. As A Philosophy. The third way to think about microinteractions is: 3- MAKE PRODUCT AS A SUM OF MICROINTERACTIONS - That’s what Charles Eames meant when he said “the details are the design”. - Treat every piece of functionality as a set of microinteractions. - The beauty of designing products this way is that it mirrors the smaller more agile way of working that many companies are embracing.
  19. 19. Products As Sum Of M.I. (Google Maps) “Whether viewing the standard (Plan) or Satellite view of Google Maps, the widget for changing the views shows the map and the other view behind it”.
  20. 20. 2 - The Structure Of Microinteractions 2.1. Triggers 2.2. Rules 2.3. Feedback 2.4. Loops and Modes
  21. 21. 2.1. Triggers DEFINITION AND TYPES OF TRIGGERS: “A trigger is what initiates a micro interaction” There's two kind of triggers: Manual Triggers: User initiated, and can be a control, an icon, a form or a voice, touch or gestural command System Initiated Triggers: When a certain set of conditions are met.
  22. 22. Manual Trigger: (Iphone Unlock) “The label on the iPhone slide to unlock trigger vanishes as you slide”.
  23. 23. System Trigger (Notifications) “One of the most interesting features of the recently launched Basecamp 3 is Work Can Wait, which gives users the ability to choose the hours during which they want to receive notifications”.
  24. 24. 2.1. Triggers HOW TO CREATE EFFECTIVE TRIGGERS? - Make it consistent: Triggers must always perform the same action in time. - Bring the data forward: show essential information from inside the microinteraction when possible, such as unread messages, or ongoing processes. - Don’t break visual affordances: If the trigger looks like a button, it has to looks like a button. - Rule of thumbs: The more used a microinteractiion, the more visible the trigger should be.
  25. 25. 2.2. Rules DEFINITION & CHARACTERISTICS Rules, creates a nontechnical model of the microinteraction, they define what can and cannot be done, and in what order. - Rules, reflects constraints, (business, technical and contextual). - The most important part of the rules is the goal the application or system tries to perform.
  26. 26. 2.2. Rules CHARACTERISTICS Rules, determine: a) How the microinteraction responds to the trigger being activated, What happens when the icon is clicked?) b) What control the user has. Can the user cancel a download? c) The sequence in which actions take place and the timing, For example, before the search button becomes active users have to enter text d) What data is being used and from where, Geolocation? Weather, Time?
  27. 27. Rules For The Simplest M.I. (Turning On A Light) 1- When the switch is thrown, the light turns and stays on. 2- If the switch is thrown again, turn the lights off.
  28. 28. Example Of Rules: (Mail Chimp). “Mail chimp, shows what can’t be done by stretching the chimps arm so far that it pops off when you try to make an email too wide”.
  29. 29. 2.2. Rules HOW TO CREATE EFFECTIVE RULES: - Don’t start from zero: use what you know about the user, the platform, or the environment to improve the microinteraction. - Remove complexity: reduce controls to the minimum. - Reduce options and make smart defaults: more options means more rules.
  30. 30. 2.2. Rules HOW TO CREATE EFFECTIVE RULES? Define states for each object, how do the items change over time or with interactivity. - The main use of rules, are as a tool to prevent errors, make human errors impossible. - Keep copy short, don’t use instructional text if a label is suffice.
  31. 31. Effective Rules: Don’t Start From Zero. After the trigger has been initiated, allow the system to get data to help you to improve the microinteraction.
  32. 32. 2.3. Feedback DEFINITION: - “Feedback is the backward process who helps to understand the rules of the microinteraction". - It’s function is understand what information the user needs to know and when, the more information, the better feedback will be.
  33. 33. Feedback: (Progress Bar).
  34. 34. 2.3. Feedback HOW TO CREATE EFFECTIVE FEEDBACK? - Determine what message do you want to convey with feedback, then select the correct channel for than message. - Be human. - Use pre-exisiting UI elements, to convey feedback messages, - Don’t make feeback arbitrary. - Whenever possible, have visual feedback for every user initiated action, & add sound and haptics, for emphasis and alerts.
  35. 35. Effective Feedback: “Be Human” Humans respond to faces, the Treadless shopping cart face turns from frowning to happy when you put items on it.
  36. 36. Effective Feedback: “Visual, Sound, Haptics” HAPTICSSOUNDVISUAL
  37. 37. 2.4. Loops And Modes DEFINITION: Loops: “Is a cycle that repeats for a set duration” (minutes, seconds, years) Modes: “Define routes to show how a micro interaction should behave”. Sometimes are necessary, but they should be only used to avoid infrequent actions which would clutter the main purpose of the microinteraction, the best example of modes is the “Settings” menu.
  38. 38. Loops: “Moo.Com” “Moo starts a timing loop after an order has been placed, to show users how long do they have to edit a placed order”.
  39. 39. Modes: (Weather Apps). When you select cities, to get data on them, you are not performing the main action of the microinteraction. It’s a deviation of the rules.
  40. 40. 2.4. Loops And Modes HOW TO CREATE EFFECTIVE LOOPS AND MODES - Use loops to extend the life of a microinteraction. - Only have a mode when there is a infrequent action that might otherwise clutter the microinteraction. - If you must have a mode make it it's own screen, when possible. - Use long loops to give the microinteraction memory or to progressively disclosure or reduce aspects of the microinteraction over time.
  41. 41. Effective Loops: “Progressive Disclosure: “Duolingo uses an interactive way of progressive disclosure to show users how the app works: users are encouraged to jump in and do a quick test in the selected language”.
  42. 42. 3 - Putting It All Together. 3.1. Microinteractions in a Mobile App (Clock Alarm)
  43. 43. 3.1. M.I. In A Mobile App OVERVIEW: - The microinteraction is the entire app, all the app does is to allow the user to set a time for an alarm to go go off. - The first thing to think about is what the goal: To be alerted, (most of the times woken up).
  44. 44. 3.1. M.I. In A Mobile App (Clock Alarm): TRIGGER: - Standard icon who lives on the iPhone screen. - Trigger needs a label, which in our case is the name of the app:
  45. 45. 3.1. M.I. In A Mobile App (Clock Alarm) RULES Some of the rules that can be set are: 1- If the user has to set the same alarm for three days in a row 2- If the country the phone is in uses 24-hour format use that. 3- Display any set alarms, show the time until it goes off. 4- The alarm goes off at a specific time. 5- If after a week the user has never pressed snooze, remove it from the alert.
  46. 46. 3.1. M.I. In A Mobile App (Clock Alarm): FEEDBACK - Mainly visual, click of the hours and minutes as you set the alarm. - Another piece of feedback is the alarm itself, letting use pick up different tones, or maybe tones from iTunes.
  47. 47. 3.1. M.I. In A Mobile App (Clock Alarm): LOOPS AND MODES - Loops, the alarm itself is several loops at once, the snooze is a count controlled loop, also long loops. - Mode here would be the settings of the alarm time, e.g. let them to customise the duration of snooze.
  48. 48. Thank You!