Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Ux design – role of microinteraction with examples

Microinteraction is one of the unique ways, with human-centred approach to designing, to enhance the overall experience of a user. Microinteractions are every miniscule action that offers a helping hand to users and can make the experience between the user and a device more fun, easy, effective and human.

To be more precise, microinteractions are interactions with certain digital platform or product to accomplish a single task. They guide a user through a flow of actions/tasks in an intuitive and effective way.

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Ux design – role of microinteraction with examples

  1. 1. Empowering Businesses with world-class IT solutions since 2007 Visit: www.technousa.com
  2. 2. Visit: www.technousa.com
  3. 3. Technousa is a world-class IT company that empowers businesses with world-class IT solutions since 2007. Technousa, an ISO 9001:2008 certified company, works as a partner with its clients with an objective to deliver profitable solutions. Technousa broadly offers these services - Mobile & Web Application Development, UX Design, Marketing and Branding, IT & Business Consulting and related Services. Visit: www.technousa.com
  4. 4. The content on the following slides are excerpts from the article http://bit.ly/microinteractions-web-design-ux-examples-guide ( UX Design – Role of Microinteraction with Examples ) You may want to read the article in detail. Or Proceed further for a quick reading. Visit: www.technousa.com
  5. 5. Presents Visit: www.technousa.com
  6. 6. UX Design – Role of Microinteraction with Examples Visit: www.technousa.com
  7. 7. Microinteraction is one of the unique ways, with human-centred approach to designing, to enhance the overall experience of a user. Microinteractions are every miniscule action that offers a helping hand to users and can make the experience between the user and a device more fun, easy, effective and human. To be more precise, microinteractions are interactions with certain digital platform or product to accomplish a single task. They guide a user through a flow of actions/tasks in an intuitive and effective way. Visit: www.technousa.com continued….
  8. 8. Microinteractions are everywhere, from the toggle of an on-off switch to skipping from one song to the next on a music player to liking a social media post to replying to a text message. This shows that microinteractions help users navigate the interface, and perform essential functions like: • Communicate feedback or result of an action. • Prevent errors. • Accomplishing a task. • Controlling an ongoing process, like song pause. • Manipulating/ Adjusting settings. Visit: www.technousa.com
  9. 9. Visit: www.technousa.com
  10. 10. Visit: www.technousa.com Microinteractions into 4 components
  11. 11. Dan Saffer in his book ‘Microinteractions: Designing with Details’, breaks down Microinteractions into 4 components: Trigger: Event that initiate the start of microinteraction. Manual Trigger and System Trigger are the two groups of Trigger. Manual Trigger, as the name suggests, are Microinteractions that happens when someone interacts with a product deliberately. Pushes of a button, wave of a hand are few examples under manual trigger. Whereas System triggers happen when some conditions are met – pop up notification of a text message. Rules: After a trigger is performed, rules define the parameters that are to be followed. In other words, what happens when you push the call to action button, is decided by rules component. Visit: www.technousa.com continued….
  12. 12. Feedback: After the verification of the microinteraction, a signal is send to the user that their action has been acknowledged. It can be a sound, vibration, a message or anything else. Loops and Modes: A loop determines the length of a microinteraction. It determines whether the interaction repeats or changes over time. Modes changes the typical way things function and operate. Visit: www.technousa.com
  13. 13. The importance of micro-interaction can’t be denied. These are the details that make users love or hate an app or website. Every minor detail deserves close attention. Micro-interactions provide users with needed feedback and the understanding of ongoing processes, making an interface approachable no matter how complicated the logic behind it may be. This simple usability helps one differentiate to choose one app over the other Let’s discuss some Key points to keep in mind while designing Microinteractions: Don’t over design: You need to maintain consistency and flow in microinteractions along with the design. They should serve a purpose - the prominent aspect of microinteraction. Simplicity is the Key: Design should be simple and not complicated than the action. Try to maintain simple type, colors, design and language. Aim to communicate the message quickly and effectively. continued…. Visit: www.technousa.com
  14. 14. High Response Time: Users get annoyed if it takes too long for Microinteraction to activate. A near immediate response time is ideally to keep the user from getting bored. Human Touch: Provide human effect as and when required; Text should be interactive and shouldn’t sound like a machine output. . Keep it helpful and light-hearted. A Look into each Detail: As microinteractions are small, every element of the design matters. Make sure every detail is cross checked properly. Try to Balance Visual Harmony: If you are planning to maintain some color scheme in your app, try to balance the same with microinteraction. A visual connectivity between the parent design and microinteraction should come across to viewers clearly. Visit: www.technousa.com
  15. 15. Visit: www.technousa.com A Dig into some beautiful examples that offer a broader overview of microinteractions: continued….
  16. 16. Visit: www.technousa.com The most basic and frequently used microinteraction is the pull- release-to-refresh interaction in apps like Facebook, Twitter, Gmail and more. Just keep on loading more info every other second. Such a benefit extended via microinteractions. Refresh
  17. 17. Visit: www.technousa.com This is one the interesting microinteractions supported by Google. With this it is possible to read any content from all over the world , regardless of language. This feature epitomize how powerful microinteractions can be, a simple click helps in understanding any language across the world. Google Translate
  18. 18. Visit: www.technousa.com Used by almost every online store, this interaction is used to better showcase their items to viewers. A number of product images are shown and when a user clicks on an image he gets to see the larger picture. None of us has every thought about such an important effect is offered by microinteraction. Zoom-In
  19. 19. Visit: www.technousa.com All of us are active on Facebook and most often use the Facebook emoticons to express our emotions and gestures on various posts. This highlights the other side of microinteraction – making them both fun and functional. Effective interaction engages and inform at the same time. Facebook Emoticons
  20. 20. Visit: www.technousa.com Swiping through pictures in Tinder app is one of the most easily recognizable microinteractions that convey a sign that one approves/likes or dislikes something. Tinder’s Swipe
  21. 21. Visit: www.technousa.com Many IM providers like Hangout have included real-time typing and help a user to know that the other side is replying. It creates a little anxiety in the user to know what’s the reply would be. Keep Typing
  22. 22. Visit: www.technousa.com Google offers one more very helpful interaction for its users auto fill. With this it becomes quite easy for a user to look out for relevant searches and moreover it saves time too (some seconds’ at least). Google Auto fill
  23. 23. Visit: www.technousa.com Microinteractions may be small but they are one of the fundamental parts of web design and any website without microinteraction will lack human touch and engagement. Small experiences and design features can have huge impact on the impressions and emotions users get while interacting with website or app. One needs to be careful while designing microinteractions and needs to get down to each and every detail in order to make human computer interaction easier and interactive. Microinteractions do have a considerable impact and can make or break your design.
  24. 24. Visit: www.technousa.com
  25. 25. Visit: www.technousa.com Call us: US & Canada: 001 (716-941-7348) UK & Europe: +44-020-3002-7885 India: +91-011-47097432 Email: sales@technousa.com Contact Us: Visit: www.technousa.com

×