Shruti Sharma

2016 Review of Top Design Trends for Interfaces

2016 Design Reviews

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.

Microinteractions in UI
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.

pull-to-refresh interaction
Image credits

 

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.

 Animations in scrolling

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.

Bold and Capital typography

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.

Use of Bright and dark color palettes

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.

 

Conclusion

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!

 

Related Articles

#Design

Make it Easy to Scan Your Pages

Nobody is going to spend more time on your site if your data is not relevant and scanable, and if the user is unable to finding the information he is looking for, he would move to another site What we can do: We... Read more
#Design

Why Scrolling is Better than Paging

These days, everyone wants to see information or content with as little 'clicks' as possible So, we should design websites in a way so that users can scroll down to see the content without having to click too often The... Read more