How to Create Insanely Cool UX Designs Using Micro-interactions?

1
How to Create Insanely Cool UX Designs Using
Micro-interactions?
2

• Micro-interactions are all around us!
  Applications, websites or appliances, all are
  micro-interaction-driven. Was turning off the
  alarm on your mobile phone,
• The first thing you did in the morning? Hey! You
  began your day with a micro-interaction. That is,
  you engaged with the user interface of your phone
  in a single moment.

3

• In fact, you would continue to engage in more
  such moments with your electronic devices
  throughout the day without even thinking about
  them because these moments are so small.
• Recognizing the invisibility of these
  micro-interactions is very crucial for designers.
  It enables them to improve user experience vastly
  by designing and differentiating a great product
  from a good product. Micro-interactions can
  literally make or break a product.

4

• Being a web design company, we at Helios
  Solutions pay attention to minute details as well
  as the big picture. As a result, we have always
  succeeded in exceeding client satisfaction with ou
  r products and services.

5
What is a micro-interaction?

• A contained product moment that revolves around a
  single use case that accomplishes one main task.
  It can be a single piece of functionality that
  exists on its own or it may exist around other
  pieces of larger features. It is intuitive and
  invisible we almost fail to notice it unless it
  goes horribly wrong. Wondering how?

6

• Imagine you are in a concert, seated spellbound
  listening to the captivating voice of the singer.
  Suddenly, the ringer of your phone is all over
  the place. You realize that the ringer-off button
  is hard to find when you urgently need to silence
  it. This is an example of micro-interaction
  (silencing the phone) creating ill experience not
  only for you but for people around you, as well.

7
How do micro-interactions differ from features?
8

• The model for micro-interactions They help us to
  bridge the gap between machines and humans by
  making the interactions intuitive.
• If you care about user experience, you have to
  care about micro-interactions. If the latter are
  poor then no matter how nicely you design your
  main features, they would be always surrounded by
  pain as well as frustration.

9

• We exist in a multi-platform environment and
  micro-interactions can fit well into it by
  creating small interactions on small devices.

10

• You can create signature moments by designing
  micro-interactions properly which in turn would
  not only boost adoption of your product or
  services but also customer loyalty. For example,
  the like-button in Facebook can be a signature
  moment.
• It helps you to check and ensure that whats fun
  doesnt become annoying after repeated use and
  thus enables you to keep user experience elegant
  and streamlined.

11

1. Trigger that initiates micro-interaction. It can
   be

12

• Lets take a look at the form from Disqus. When
  you begin to fill your email address, it starts
  to guess your name based on your email address.
  Although, this is a little thing but it is
  certainly very clever.
• System trigger  the system triggers on its own
  when a set of conditions are met.

13

• A very good example of system trigger is when you
  are reading on Instapaper and you tilt your phone
  and jerk it back, it brings up the rotation lock.
  Its like, hey! You may want this. You need not
  go and dig into a setting somewhere to find the
  same.
• Feedback that is generated by the rules. They are
  mostly visuals but can be aural too.
• GE Café appliances, for example, have used sound
  for each different actions like power on,
  notification, feature on , etc.

14

• Rules that determine how the micro-interaction
  functions. They are invisible and they decide
  what can be done and what cannot. It also
  determines how the micro-interaction responds to
  the trigger being activated.
• For instance, the rules of a lamp turn on when
  the switch is flipped and stay on at full
  brightness until the switch is flipped again.

15

• Loops and Modes that make up meta rules of
  micro-interaction. They are more effective as
  they can measure time every time.
• For example, on Facebook when you start making
  too many friends, it shows a warning like Please
  slow down.

16
(No Transcript)
17

• Bring the data forward
• Do not make users to get into the application in
  order to get the data.
• Example With Google chrome you can actually see
  what has been downloaded, how many things have
  been downloaded and also the progress of the
  things that has been downloaded without having to
  go into Google chrome. Moreover, you need not go
  to any other separate window as it shows you
  whats going on right there.

18

• 2. Prevent the human error
• Stop errors from happening! Even if they happen,
  what can you do to automatically start to fix
  those errors?
• Example In Gmail, if you write I have attached
  a file and you actually forget to attach then a
  window pops up with the message, Did you mean to
  attach files? Although it is creepy as Google
  is reading your mail, it is indeed effective in
  preventing human error.

19

• 3. Dont start from zero
• There is almost always something about the user,
  the context, the platform, the environment that
  you know what is going on.
• Example While you use navigation apps, after
  sometime they get to know your behaviour and
  start making suggestions or asking questions like
  Going home?

20

• 4. Use the overlooked
• You, as a designer, already have a lot of tools
  or elements that are already there. What if you
  can use those things instead of adding new things
  onto the screen or dashboard or to the control
  panel?
• Example In chrome, when you search a word on a
  web page, it just uses the often overlooked
  scroll bar rather than popping up another window.
  Convey the most with the least.

21

• 5. Speak human
• If your audience is non-technical then speak to
  them in the language of human. Try to figure out
  the basic message you need to convey and use the
  same words your users do.
• Example Threadless, the crowdsourced ecommerce
  company uses cart with faces that people could
  relate to. Sad face when the cart is empty and
  when you fill things into the cart, it changes to
  happy face.

22

• 6. Use the long loops
• How does your micro-interaction change when you
  extend it beyond a single instance of use? How
  does the micro-interactions adapt to the user
  behaviour after you visit it twice, ten times or
  may be a thousand times? How does the product
  evolve overtime?
• Example In the foursquare app, they have created
  a yearlong loop such that it thanks you even
  after years. Its kind of thanks for hanging out
  with us.

23

• Micro-interactions help you to consider each
  detail with care. Thus, it makes your audience
  feel that the product that they use is made with
  utmost attention and care. This enables you to
  build a long term relationship with your
  customers and boosts customer loyalty.  If you
  are interested to create a website that appeals
  to your audience, please talk to our team of
  designers.

24

• Hope it was a useful read! Do you think details
  are important? Can micro-interactions help you
  differentiate from your competitors? Let us begin
  a conversation please share your thoughts by
  leaving your comments below.

25

• You May Check This To Know More About
• Web Design Agency
• Ecommerce Development Company