28 October, 2016

Microinteractions: Designing the Little Details


Last week, I was in Auckland and Wellington, speaking on User Experience (UX) and teaching UX Design courses at two WeTest Conferences in Auckland and Wellington. I also had a rare opportunity to teach/speak at large corporates like Bank of New Zealand and Assurity Consulting. I am blown away by the lovely interactions I had and the new bridge I created with many in New Zealand. 

Token of Thanks
I extend my heartfelt gratitude to Katrina Clokie for inviting me to WeTest Conference. I never ever imagined that a chance meeting with Katrina at CAST 2013, which was my first self-funded trip to a US conference would bring us together again. I would also like to thank the Conference Organizers Katrina Clokie, Aaron Hodder, Shirley Tricker and Daniel Domnavand for conducting a world-class conference, for taking care of the little details for international speakers and introducing me to a super awesome community in New Zealand which is so passionate, warm, curious, learning-focussed and yet humble. This conference and my interactions will truly remain close to my heart for getting the ‘Conference based Microinteractions’ right! 

Teaching UX
It was a fabulous experience to teach UX Courses at the other end of the planet. At the end of these talks/workshops, many people walked up to me and shared many *pain points* in their daily line of work. For example, one of the workshop organisers, Merridy said, “Pari, I am going to put up a board indicating ‘Toilets’ on the door and avoid frustrating our visitors.” One of the conference organisers Shirley mentioned, “The motion detector lamb in our service apartment doesn’t light up instantly and expects a tribal dance which needs to be fixed.” I was thrilled to see people pick up this concept so quickly and apply it at work. 

Ctrl+Alt+Delete
Have you ever wondered why you need ‘Ctrl+Alt+Delete’ to lock/unlock windows? Did you ever wonder why we couldn’t have a single key to do the same task? In my early days of school, I was told to believe that 3 keys were given as a security measure (God knows how this could prevent hackers though!). However, Bill Gates confessed that having three keys was a mistake. “It was a mistake,” Gates admits to an audience left laughing at his honesty. “We could have had a single button, but the guy who did the IBM keyboard design didn’t wanna give us our single button.” David Bradley, an engineer who worked on the original IBM PC, invented the combination which was originally designed to reboot a PC. This brings us to microinteractions. 

Microinteractions
Microinteractions is a concept introduced by Dan Saffer in his acclaimed book, ‘Microinteractions’. By definition,
A microinteraction is a contained product moment that does one task well.

Every time you change a setting, update a device or post a tweet, you are engaging with a microinteraction. They are everywhere and they just need some *noticing*. Microinteractions are so simple that we don’t notice them until something goes wrong. Yet, they are incredibly important in creating delightful experiences for users. 

Structure of a Microinteraction
A beautifully crafted microinteraction contains four main parts: Trigger, Rules, Feedback and Loops & Modes. 

Trigger
A trigger initiates a microinteraction. For example, turning ON a lamp needs someone to press the switch. 

Rules
The rules determine what can happen, what cannot happen and the sequence of events that might happen. 



For example, what should happen when a user presses the switch in a particular direction (Up/Down), is determined by rules defined for this lamp. 

Feedback
Feedback lets people know what’s happening. In his book, ‘The Design of Everyday Things’, Don Norman writes,
“Sending back to the user, information about what action has actually been done, what result has been accomplished is a well-known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback.”

Feedback gives each action an immediate and obvious effect to avoid pain to the user. 

Loops and Modes
Loop is a cycle and mode is a state. Consider ‘Memories’ feature on Facebook. Facebook app constantly loops into your account to check if you have posted something on this day, 1 year, 2 years, 3 years….. X years ago. If the condition turns out to be true, a message pops up to remind you of your memory and your willingness to share your memory. 


If you share the memory, the state of your timeline changes, by showing you a memory in addition to other posts on your timeline. To summarize, loops & modes form the meta-rules of a microinteraction. 

Sketchnote
While there are different components that form a good microinteraction, one should remember that each one must be applied based on the context. Putting a hard rule saying, ‘Every microinteraction has to follow the set guidelines may turn out to be painpoints rather than delightful experiences.’ TEST Yvonne Tse, who works at Assurity Consulting in New Zealand attended my talk on ‘Microinteractions’ at WeTest Conference, Wellington. She created a lovely sketch note that is very close to what I covered in my talk. Take a look. 


Show That You Care!
Users today, have scores of options to choose from. All they want in return for their loyalty is that you care. In the words of Dan Saffer,


What microinteractions have made you happy today?