There is a very famous Irish saying which goes like this- ‘Don’t look back unless you can smile; don’t look ahead unless you can dream.’ The year 2016 saw some amazing design innovations which makes us all the more excited about the year ahead- new interactions, new elements, new animations. But first, let’s have a quick look at what made us go hearts-in-the-eyes last year.
Microinteractions in UI
Micro interactions are the new must-haves for every website and mobile apps. You can do away with less functionalities but not with a drab website. The idea behind microinteractions is not only to make your product look beautiful, but to craft something which is able to solve user’s problem, entertain, take feedback and explain functionality fast and effectively, without compromising on the user’s pain points.
This year’s most famous addition was the array of emotional options given by Facebook while liking a post.
You can laugh, cry, be angry or fall in love with the news feed. However small, this interaction made a good deal of difference to user experience. There was no way (earlier) to express that you do not like a particular post/image. Now, including this microinteraction has resulted in capturing instant feedback and making interaction much more rewarding.
Another classic example is the pull-to-refresh interaction which gives a visual cue to the user that the content is getting updated.
The animation adds a human touch to the interaction and makes the user feel connected, as if they are interacting with some real object. And no doubt, anything which is real and attractive, tends to boost user experience.
Animations in scrolling
This year saw some excellent scroll animations- colorful, interactive, informative as well as catchy. So if you have a story to tell and you want your visitor to keep moving- scroll animations should top on your creative bucket list. Nasa Prospect, a website developed by student designers tells an interesting story of two explorers from Earth who are on a space expedition to find the leftovers of human music. As you scroll down, you will notice the change in the music as their journey continues.
Similarly, BizBrain is a clean, sophisticated website with content just enough to convey the message- where does coffee come from? While you scroll, the amazing transitions make it easy to grasp the process and statistical data.
Moreover, these animations are aesthetically pleasant and magnetic. Just as here, long scrolling is fun and adds a perfect narrative.
This enhances user experience who is able to smoothly transition from one chunk of information to another digestible bite.
However, scrolling is still discovering its way as some people find the long scroll irritating. So the fight between why it’s hot and why it’s not is still on. But as long as you are creative and you care for your users, scrolling is one thing which can get turn your users into your fans.
Animation in tutorials
Animations are not just about making your app aesthetically attractive but it’s about helping your user make progress. More than making a beautiful animation, it is important to make it more user friendly. It should not hamper the current call-to-actions.
Apart from the traditional approaches to make user onboarding interactive, this year saw designers experimenting with animations in tutorials. Tutorials are an important part of user engagement and it is absolutely essential to provide them with an impeccably stylistic animation which takes them to another level.
A perfect example would be of Byju’s which is a fun learning app in the education technology sector. The amazing animations in video tutorials have established that learning is fun and more engaging with animated explanations.
Diversification of landing pages
The year 2016 saw a mild shift from ‘home’ page to ‘landing’ page which received appreciation from both designers and users. The transition from one page to another is comparatively easy and it doesn’t irritate people.
Often it becomes too overwhelming for the user to absorb all the information in one go. So dividing the services into different blocks saves their time and effort.
A very apt example here would be of Lyft– a mobile-based American transportation company which connects passengers to drivers. Their landing page is user friendly and they have separated passengers with drivers. As you scroll down, you can also see FAQs which builds the trust of the user, followed by a CTA button.
Video animation in landing pages
Landing page videos are an absolute delight if you want to demonstrate your expertise in the services you offer. If built with the right approach, they are entertaining and informative.
The effectiveness of landing page videos is exciting but the trend has not yet gained much popularity because of its expensiveness. Invision, which is a very popular prototyping tool used by designers is the best example to show this website trend. For a naive person who has accidentally landed on its page, the video is gripping.
The video shows people interacting, engaged at their workstations. It shows the company culture and serves the catchy headline- ‘Design better. Faster. Together.’
Bold and Capital typography
2016 was the year which experimented with bold typography. There is a study which says that humans have an attention span of about 8 seconds. So to hold the entire experience together, it’s important to catch user’s attention and create visual connections.
The global design community has brought lots of new typefaces with core consideration in divulging the crux of the message. A simple but dramatic typography is bound to ‘hold’ users.
Take a look at this website- Wealthy.
The bold typography is catchy and it instantly informs user about the core message. Once you land on the page, it is impossible to not-read the text.
Presenting products with videos
A picture is worth a thousand words; true. But then what’s the worth of a video? Surely it’s a much powerful source to connect with users. A video explaining the products and services is likely to gain more attention from users as compared to an image.
Why? Because a video quickly explains the most significant facet of the product and enables the users to differentiate between what deserves their time and attention and what does not.
Koovs is an e-commerce website which deals in online shopping of apparels. It follows a video approach to give a complete view of their products( apparel, bags etc.). This showcase of product in a video format gives a much better visual appeal and a real-time shopping experience.
Use of Bright and dark color palettes
The importance of selecting the right color palette in website design is no secret. Color matters and there is no way you can overlook emotions associated with colors while designing.
One popular trend which needs a mention for this year is the use of bright and dark color palettes. Unlike the previous trends where designers worked with only a handful of colors, this year saw the trend of using the whole color palette, experimenting with innovative approaches and adding creativity in font colors, theme colors and background colors.
See this combination here on this website- Dude I need a Truck. The choice of white font color over gray background is catchy and it is impossible to miss out the red “Learn more” button.
So as Ray Eames once said- ‘What works good is better than what looks good, because what works good lasts.’ Nobody will ever hate a beautiful design. But if you make it too clever, it will annoy people. So, hold your horses and drain all those complex animations. Just keep it simple, silly!