Micro-interactions that drastically improve a user experience_

 

Mobile users are an increasingly dominant aspect of the international marketplace; with an impact BND article revealing that 80% of all Internet users own a smartphone and that users spend approximately 69% of their media time on smartphones[1]. As such, marketers need to adapt their content to appeal to these socially active prospective consumers.

In addition to making your brand’s content responsive for all manner of mobile devices, companies also need to adapt to the ever-changing functions of these smart phones and tablets. For instance, the latest iPhone X does not have a home button so users must solely interact with websites via a touch screen interface. This is where animation gestures can prove essential. Animation gestures can be used to help users understand how they are supposed to interact with a site, such as indicating to users when they need to swipe left or right to view a video, scroll down to read a post or tap the screen to purchase a service. To help your business make the most of these micro-interactions, we have created the following guide on the best ways to implement animated gestures throughout your company’s website.


What are animation gestures?

When Apple introduced the world to their very first touch smart phone in 2007, there were only a few basic movements that users could make. However, over the past decade iOS and Android designers have developed a diverse array of animation gestures. In essence, these animation gestures are the movements made by a user in order to activate a specific control or to access content within a mobile interface; from tapping and touching their screens to swiping, sliding, pinching and dragging parts of a web page. When you consider more complicated animation gestures such as double tapping as well as shaking, tilting, moving and rotating the device itself, the possibilities of animation gestures are endless!

 

Each of these animation gestures has a specific purpose within a website or app. Businesses need to choose the right animation gestures and implement them efficiently so that users can quickly and easily access their preferred content. This efficiency is especially important when you consider that, according to Google research, 61% of users are unlikely to return to a mobile site that they have had trouble accessing and 40% will visit a competitor’s site instead[2].


The benefits of animation gestures

As modern technologies advance to integrate more touch screen, voice recognition and button-less features within Internet-enabled devices, gestures are quickly becoming the new clicks. These animated gestures help to free up screen space which would otherwise be required to house clickable buttons. In this manner, animation gestures enable you to make the most of your website and app designs; focusing on creating an aesthetically pleasing and engaging design which is unhindered by cumbersome and out-of-place click buttons.

Animation gestures are also highly intuitive; once a user learns how to activate a gesture, it becomes an integral part of their user experience. Moreover, gestures equip marketers with a broader range of options through which to pique user interest. As opposed to the basic on/off, open/close features of clicks, tap and swipe gestures have a wealth of uses including zooming in and out, selecting or submitting applications, scrolling, panning, accepting or dismissing notifications, refreshing a page, opening the menu, activating features and enabling or disabling functions. The list goes on!

 

Animation gestures can help you design a vibrant website for your brand with smooth, seamless animations and accessible content with which users will actively want to engage. Animation gestures also provide you with more free space for displaying valuable content and eliminate unnecessary functions so your potential consumers can interact with your website or app with minimal distractions.


How to use animation gestures

When it comes to choosing the right gestures for your business site, it is important to opt for animation gestures that will be easy for users to recognise. After all, gestures are unique in the fact that they have a universal quality with regards to mobile usage. A study carried out by Dan Mauney, the former Director of Human Factors & Research at Human Centric, revealed that the gestures people use worldwide have very strong similarities. As one Just In Mind article explains;

“After surveying 40 people in 9 countries tasked with carrying out every-day mobile actions through gestures, Mauney’s take-away was that, while small differences exist, there are deep commonalities between the gestures people use to perform certain actions, regardless of their culture or touchscreen device experience: for example, the majority of people will try to delete an item by simply dragging it off screen”[3].

Consequently, the best way to educate users on how to use your website’s specific animation gestures is through hint motions. These visual clues indicate to users that they need to swipe, tap, drag or pinch a particular part of the page to access their preferred content. You could even provide a simple walkthrough for new users that offers a quick and easy set of instructions on how to navigate your site. Make a small 3 to 5 step guide which clearly displays the most important animation gestures on your site. Any more steps and you risk losing the attention of your users. Rather than listing detailed instructions all throughout your site, you could simply offer subtle hints and transitions as they explore your site such as ‘Swipe Right Here’ or ‘Tap Below’. These simple text commands will encourage users to explore your site in greater detail without confusion.

Ultimately, when it comes to designing animation gestures, less is always more. A successful animation gesture should have a visual cue which encourages users to initiate an action, followed by a routine response to this cue, such as the performance of an action, and finally a reward which provides the user with a benefit for completing the routine such as a unique video, image or relevant post. An ideal example is Twitter’s blue bell notification. The clear blue icon against a white background indicates that there is a new notification, the number within the bell informs the user how many notifications they have, and upon activating this animation gesture the user is immediately presented with a list of their most recent notifications.

These animation gestures should form a natural part of your brand’s website design; unifying the theme of your website by smoothly transitioning to relevant content that will be beneficial to your users. Successful animation gestures should be predictable yet engaging so that users instantly understand their purpose and that they help users to better engage with your brand content. You can learn more about how to implement these animation gestures throughout your brand website by contacting our Cloud Ten team today.


Sources 

[1] https://www.impactbnd.com/blog/mobile-marketing-statistics

[2] https://www.impactbnd.com/blog/mobile-marketing-statistics

[3] https://www.justinmind.com/blog/mobile-gestures-5-tips-for-intuitive-and-interactive-ui-design/

http://www.frankelinteractive.com/blog/5-benefits-of-visual-branding-that-every-brand-should-know

http://homeroadfilms.com/blog/benefits-of-animation-in-marketing/

https://www.justinmind.com/blog/tap-or-swipe-mobile-gestures-which-one-should-you-design-with/