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.


http://www.technousa.com/blog/microinteractions-web-design-ux-examples-guide

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 microinteractionshould 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 Facebookemoticons 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.


http://www.technousa.com/psd-to-html-xhtml-conversion-service-company

http://www.technousa.com/psd-to-html-xhtml-conversion-service-company


Call us: US & Canada: 001 (716-941-7348)

UK & Europe: +44-020-3002-7885

India: +91-011-47097432

Email: [email protected]

Contact Us:


http://www.technousa.com/

mailto:[email protected]