Micro-interactions and micro-prompts in the interface

Micro-interactions and micro-prompts in the interface 3r33333.  
3r33333.  
The experience of using micro-interactions is introduced into our life with the experience we have lived through and is developed throughout our life. We just replenish this piggy bank with new knowledge. Our business is to use these well-established rules and associations in our products and learn how to use them. 3r33333.  
Nathan Riley 3r33333.  
3r33333.  
3r3306. Microinteraction in humor through design and text 3r3307. 3r33333.  
Our favorite habr uses this example, having readers to it, at the same time retaining all the serious and constructive meaning of the information conveyed. 3r33333.  
3r33333.  
In the screenshot below is the cap of the official community of Habr Vkontakte. 3r33333.  
3r33333.  
3r33333.  
3r33333.  
Just a separate delight is worthy of the habr test page before registration, which in turn is an excellent example of this technique. 3r33333.  
3r33333.  
YOTA has a tremendous interaction with customers, Yota does not put forward advantages, conditions, tariffs, they made a brilliant move based on the expectations of the client on their inner voice, reflecting their essence without offers. At the moment, instead of proposals and slogans, we see the inscription "Yota Advertising" or "Yota Advertising here." 3r33333.  
Yota played on the emotions of the humor of its viewers, so that advertising became memorable. 3r33333.  
3r33333.  
3r33150. 3r33333.  
3r33333.  
In turn, humor is a rather slippery path, it leads to a palace of trust and disposition, such interaction experience can be called quite successful and enchanting, but by playing notes of humor and fun, you can accidentally fake and give a composition that will be rejected by the company and impose a label of incompetence and not professionalism, God forbid to offend someone’s feelings, trying to break out on the waves of HYIP, interacting with customers in this way. 3r33333.  
3r33333.  
3r3306. Visual microinteractions and requests 3r3307. 3r33333.  
With a resource designed to sell a product or service, it is not uncommon to see an emphasis on conversion elements or animation that has attracting attention, this example can be considered a good solution. 3r33333.  
3r33333.  
In turn, drawing attention to oneself throughout the entire time, constant flickering, long animation, or focus only on oneself, excluding the possibility of switching attention to other elements in a painless way, can be considered as bad examples. 3r33333.  
A successful animation should be barely noticeable, but at the same time attracting attention a second time, the duration of the animation should last no more than 0.4 sec and switch attention to other elements. 3r33333.  
3r33333.  
It is worth remembering the important rule of design: Design should solve problems, animation in turn should play functional roles and not visually aesthetic. Having elements of animation in the product that do not solve any specific problem, it makes sense to abandon their use without any hesitation. 3r33333.  
3r33333.  
3r33177. 3r33333.  
3r33333.  
Shot 3r3182. Chris Gannon
3r33333.  
3r33333.  
3r3306. Color micro-interaction due to associations and attention 3r3307. 3r33333.  
Also, color microinteraction can be called switching the lock button on the iphone, thanks to the appearance of an orange color inside the button, playing on associations 3r33316.  
colors from the real world, looking at the laid experience of user interaction, we understand the association and conclude that now the phone is in silent mode. 3r33333.  
3r33333.  
The same move takes place in the color positioning of elements based on the user's attention and having painted important elements, buttons, text in eye-catching colors with regard to user patterns, it is important to understand the general concept and stick to harmony in disposable elements, not scatter attention on all sides of the monitor. An important aspect in microinteraction in colors on the site is the meaning and emotional coloring used in the interface elements. It is also worth remembering about the cold and warm groups of secondary colors and the rules for their use. 3r33333.  
3r33333.  
3r3202. 3r33333.  
3r33333.  
Shot Romain Passelande 3r33333.  
3r33333.  
3r3306. Micro-interactions and requests as a relief to Usability
3r33333.  
Microinteraction should help to focus on the resource, suggest its functionality, and painlessly teach new user experience. One of the most unimportant aspects is accelerating and simplifying the previously long procedures to achieve certain actions, reducing the number and load of actions to achieve the same result. 3r33333.  
3r33333.  
Not all of us like to fill in the fields on the found resources in order to register or enter the site. Autofilling leads to a pleasant user experience, making it easier and faster for everyday use. Autocomplete can be called microinteraction, and the button to use autocomplete by request, this request is one of the best examples, the user gets to meet their needs through a single button click. 3r33333.  
3r33333.  
3r3306. A bit of gamification in microinteractions 3r3307. 3r33333.  
Micro-interactions showing the importance of the work done, this is one of the ways to improve usability by the gamification method. Having shown the importance of the done action, the resource makes it clear that he spends time and effort on carrying out some kind of action or calculations made by the user. 3r33333.  
3r33333.  
For example: on our beloved and idolized Habré, when sending an account confirmation email to the mail, the upload is loaded, indicating that the action 3r33316.  
it is processed and done for the user, understanding the importance and efforts of the performed user action plays an important role in shaping the opinion about the product. 3r33333.  
3r33333.  
Of course, we all understand that Ajax forms do not need time to download and send a message about the letter to the server. 3r33333.  
3r33333.  
In the example below, we see the same picture only on the “Configure the Key House” page. 3r33333.  
3r33333.  
3r33333.  
3r33333.  
On the portals that need to enter the necessary user information, you should ask the user to enter data by the appearance of non-intrusive message windows describing the improvements that the client will receive in using the product, whether it be the introduction of his geolocation to view the upcoming exhibitions of contemporary art. 3r33333.  
3r33333.  
This example is a request useful to the user. You should not force the user to enter information that he does not want and in no case does not cut off access to all or most of the functionality of the service. The realization that the client is not limited but they want to give more in exchange for a small service on his part will be a huge plus in forming an opinion about the resource. And as we know, the opinion does not depend on the length of time spent on the use of micro-interactions, and the number of good and bad experiences. Formation occurs from the highest point of ease of use of the resource and the least enjoyable moment of using the resource, forming the average value of only 2 sensation parameter. 3r33333.  
3r33333.  
3r3306. Habits of microinteraction
3r33333.  
It is important to conduct micro-interactions, especially specific ones, through the thread of the entire design, and to solve similar problems with already developed interactions. Developing user habits through the more frequent use of certain micro-interactions favorably affects the user experience within your product. 3r33333.  
3r33333.  
3r3306. Easy to animate and wait for action
3r33333.  
Any perfect user action should be as clear and familiar as possible, as will be the actions after the user performs it. 3r33333.  
3r33333.  
The benefit is not to overload the user's attention; the played animation should be less simple and clear, without unnecessary movements and incomprehensible actions for the user. 3r33333.  
To quote the above, “A successful animation should be barely noticeable but attracting attention, the duration of the animation should not last more than 0.4 sec.” 3r33333.  
3r33333.  
An example of a good, understandable animation. 3r33333.  
3r33333.  
3r33333.  
3r33333.  
An example of a beautiful, aesthetically pleasing animation, but overloaded and not completely clear. 3r33333.  
3r33333.  
3r33333.  
3r33333.  
Animation Baptiste Briel 3r33333.  
3r33333.  
3r3306. Conclusion 3r3307. 3r33333.  
Play on the principles of construction, inherent in the associations and established principles of construction, actions and interactions with certain elements. 3r33333.  
3r33333.  
Each trifle is worthy of deep analytical and logical analysis in interaction with the user, the emotional load, the emotion of the information conveyed, the painlessness of the actions performed. 3r33333.  
3r33333.  
Repeating, I say, we like what we know and what we understand. Whateverthe interface was beautiful not to be remembered that first of all it should be comfortable, functional and solve problems. At the next level in the hierarchy of importance is the aesthetic component of the product.
+ 0 -

Add comment