8. UX Delight
In my previous articles I explained the UX first step – UX Research, UX second step – UX Plan, Third step Explore UX, fourth step UX Communication, Fifth step Create UX, Sixth step – UX Feedback and Seventh step – Finalise UX and In this article I discussed how to create UX delight with micro copy this will help you to embrace the brand personality, with micro interactions like sync data, set alarm or pick a password your app engaging more with your app product. This micro interaction is possible with high level of UI transitions / animation. Let’s read in detail below :-
All these steps are part of the UX process and I categorized these steps into 9 steps, I hope you will enjoy this eighth step. Join our newsletter and we will keep you updated with next steps.
8.1 Micro Copy: A Glimpse of the Personality
Design is for the people. Unless they connect to it, the purpose is not accomplished. Create such kind of personality of the product to which the people respond positively. This will, in turn, promote the product through word of mouth. One effective way of connecting with the users on a deeper level is emotional design. A product must hold a promise for the user and should have functional, reliable and usable factors before it is topped up with a layer of pleasure. This coating of pleasure is emotional design. Emotional design steps in when a unique product is created that cross the barriers of the original style and then eventually with repeated use become a body of work and has the personality layer.
Elements
The main aim of the design is to instill positivity. This will leave the users with positive memories and they would want to use the product in the future as well. This pleasurable layer also makes them liberal with forgiving design mistakes, especially when they are in a relaxed state. Here is how you can induce positive emotions-
- Surprise- Doing something unexpected just takes them aback.
- Uniqueness- Let it be different in its own way.
- Attention- Regard the users. Offer rewards or help even if it doesn’t give results.
- Attraction- Capture with an attractive product
- Anticipation- Let the users expect. Reveal bits and pieces before the launch.
- Exclusivity- It should be exclusive. Only a characteristic of the selected group.
- Responsive- Give a response when it is least expected. Reactions work.
Emotional design triggers the emotional brain, which further perceives a positive outlook towards the product. Some examples are mimicking emotions through a smile, paying attention with the help of music, adding edgy humor, copy, etc. which help to create an edge via the positive route.
8.2 MicroInteractions: Small Packets that Serve Big
MicroInteraction consists of product moments that focus on a single use case; the one which revolves around the main task. This means whenever we pick a password, log in, like something or set a status, etc., we are undergoing a MicroInteractions. These are the quintessential types that can be found everywhere, in all the devices we carry, in our apps on the phones, also the environments we are present. Most of the appliances and apps are governed by MicroInteractions. These are beneficial for –
- Achieving a single main task
- Linking the devices together
- Working with a single piece of data
- Managing an ongoing process, for example, music volume
- Accommodating a setting
- Looking at the creation of small pieces of content, like status messages
- Able or disable a feature
MicroInteraction even though small in nature play an important role and are present in our environment around us. But due to lack of awareness, we fail to notice unless and until something goes wrong. Don’t go by their size and vision; their role is much bigger. In fact, MicroInteraction is the factor that separates something you love from something you tolerate.
They deserve all the credit for making our lives easier, fun and all the more interesting. MicroInteractions spell effectiveness not only through its size but also form. A perfect MicroInteraction pays attention to the trigger; from where it all begins, to rules; which tells the events, to feedback; where people know what is going on and to loops and modes, wherein lies all the meta-rules.
8.3 Transitions: Go Via Animations
In order to capture the audience or to highlight the object, add elements to the animated stuff and change the speed of its movement, right from the start till the end. By accelerating or decelerating the speed asymmetrically, a more natural and delightful motion comes across through the product. Make sure the changes in the speed go with the flow as abrupt changes are loud and create a sort of hindrance as well. Linear motion is a big no-no and must be avoided.
Changes in speed also influence the entry and the exit and draw attention. During transitions plan the portion that would take all the focus. Do not speed up when there is an entry or slow down during exit as it can distract the user. While drawing in on animations, it is important to understand all the definitions as fixed earlier so as to avoid any sort of confusion. The UX dictionary already has stated the meaning of some terms commonly used.
The animation tools now use keyframes that go effective in motion building. It has eased in and ease out feature which dictates the motion while entering and exiting the transitions respectively. Curved motion is better off than the linear path and should be preferred over it. Curves depict the trend of change over a period of time for a particular range. For a perfect flow, select the curve that best suits in the character of the motion.
Credits –
1. Images – Dribbble.com
2. http://www.google.co.in/design/spec/animation/authentic-motion.html#
3. http://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details
4. https://econsultancy.com/blog/65585-15-delicious-ux-micro-interactions-or-clunks-from-iphone-apps/
5. http://www.smashingmagazine.com/2012/07/the-personality-layer/
6. http://www.smashingmagazine.com/2013/06/five-ways-prevent-bad-microcopy/
7. https://www.interaction-design.org/ux-daily/171/what-is-micro-copy-and-how-do-we-deliver-good-ux-with-it