top of page
  • Writer's pictureSebin George

UI UX Design can be enhanced using micro interactions and this is how

Updated: Jan 30


enhance ux ui design_microinteractions

In its most basic sense, microinteractions are individual moments in the product design that accomplish a particular task, while enhancing what is intended to be the natural product flow. They are what bridge UI and UX, where functionality meets design – and they are everywhere.

We as consumers see and interact with these interactive UI components daily, even without knowing. A ‘Like’ button is one of the simplest examples. A few others are:

  • A simple scroll bar that appears in the user interface as you scroll the mouse

  • Swiping left to clear a notification on your iPhone home screen

  • Ability to see that the other person is ‘typing’ on messaging apps

  • A progress bar indicating the download percentage

  • Pull to refresh, to reload the content on the screen of a mobile application screens

  • Interactive error pages like the dinosaur game on google chrome

Microinteractions are helpful because they provide feedback to the user by letting them know the status of an interaction, like a loading bar, for instance. Helping users see direct, real-time results of their interactions enhance the usability and the sense of direct manipulation to which users respond favorably — when they press a button, they immediately know action has been triggered through the user interface, giving a sense of control. Often, microinteractions and good UI UX design determine the platform's success.



The best, most elegant microinteractions are often those that allow users a variety of verbs with the fewest possible nouns.- Dan Saffer

Structure to follow for microinteractions


microinteractions_structure

Microinteractions work on a standard four steps. These are;


1- Trigger: a trigger is the start of the micro-interactions. It can be initiated by the user or the system itself.

User-initiated microinteractions can be pressing a button, swiping, scrolling, or clicking; system-initiated triggers, on the other hand, happen when certain qualifications are met, and the system decides to initiate a trigger. For example, a pop-up animation, or a notification can be system triggered. Check out the microinteractions on Neointeraction design to understand the concept better.

2- Rules: UI UX rules determine what happens after the trigger is initiated.

3- Feedback: is what motion happens once the trigger is initiated, basically, everything the user hears sees, or feels (e.g. vibration motion) counts as feedback. For example, when you swipe, that is a trigger; and the animation you see on the screen (changing of the colors, highlights, or the screen in an animated way) is the feedback.

4- Loops & Modes: determine the meta-rules of the microinteraction, they are needed when the conditions of the microinteractions change. They may not be a part of the initial design, but they are essential for user satisfaction.


Cool examples of Microinteractions


  1. Swipe

  2. Scroll

  3. Uploading Screens

  4. CTA

  5. Downloading Screen

  6. Typing

  7. Hovering over something

  8. Grayscale Switcher by Kate Laguta


Example_of_microinteractions


Salient Points


  • Micro-interactions are feedback meant to communicate that something is happening based on the user's action.

  • Trigger: a trigger is the start of the micro-interactions. It can be initiated by the user or the system itself.

  • Rules: UI UX rules determine what motion happens after the trigger is initiated.

  • Feedback: is what happens once the trigger is initiated, basically, everything the user hears sees, or feels (e.g. vibration motion) counts as feedback.

  • Loops & Modes: determine the meta-rules of the microinteraction, they are needed when the conditions of the microinteractions change.

Get your next project designed with microinteractions to draw in your audience by hiring UI UX developers and designers from the Neointeraction team.



Comentarios


Los comentarios se han desactivado.
bottom of page