Ux design – role of microinteraction with examples

Empowering Businesses with world-class IT solutions since 2007
Visit: www.technousa.com

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.

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.

Presents

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.
continued….

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.

Microinteractions into 4 components

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.
continued….

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.

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….

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.

A Dig into some beautiful examples that offer a broader overview of
microinteractions:
continued….

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

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

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

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

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

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

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

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.

Call us: US & Canada: 001 (716-941-7348)
UK & Europe: +44-020-3002-7885
India: +91-011-47097432
Email: sales@technousa.com
Contact Us:

Ux design – role of microinteraction with examples

Recommended

Recommended

More Related Content

Similar to Ux design – role of microinteraction with examples

Similar to Ux design – role of microinteraction with examples (20)

Recently uploaded

Recently uploaded (20)

Ux design – role of microinteraction with examples