What trends do you need to employ responsibly? Why are they so dangerous? What are the ways to escape the risk? You’ll find answers to all of the above questions in this article, written by creative web design and marketing experts from TemplateMonster.com, a powerful marketplace with a variety of digital products including best WordPress themes for all tastes and purposes that go along with tons of free eBooks and professional 24/7 support.
You have to remember that you shouldn’t use trends blindly. Trend is not a synonym for a good UX. Without creating the proper effect for the user, even a good-looking site turns into a less than satisfactory one. Of course, there are a variety of cool trends, and their number is constantly growing. Each year dictates new rules and trends in the sphere of visual design, and it seems that they can boost your online business but that happens only if you use them with caution.
Trends can turn into dangerous ones when they are used thoughtlessly. To implement them correctly, follow these golden rules:
- don’t overuse;
- ask yourself: “Do my users really need this design element?”;
- make sure that a trend is relevant.
The infographic below shows the most risky trends and discusses their pros & cons. What will you find useful in it? The tips show you how to avoid all those risks and get a trendy site without compromising its UX.
Glaring Colors
Color psychology is the key when it comes to engaging the users. Vibrant colors add energetic tone to the layout while pastel ones create a relaxing feel. If your business requires a site in bright colors, make sure that you use them wisely.
Risks:
- work as bright flashes and can make people's eyes bleed (metaphorically speaking!);
- cause poor readability when they are used near the text.
Tips:
- balance with dark/neutral colors;
- use sparingly to draw attention, guide the user;
- avoid using as the main background;
- avoid using near the main text copy.
Tiny Details
Such decorative elements as geometric shapes, patterns, lines, circles make layouts visually interesting. It’s better to use them for some purpose, like pointing out, separating or balancing the text. Otherwise, they can be seen as digital noise.
Risks:
- can compete with the main text or navigation.
Tips:
- use against monochrome background;
- implement in minimal layouts;
- make sure they don’t aggravate readability.
Animation
Rich UI with animation is a hot trend these days. Full-screen moving images and small hover effects add attractiveness to a website, but it doesn’t mean that you should overuse them. Otherwise, you get a heavy website with increased loading time that challenges users’ patience.
Risks:
- delayed interaction with the site, because of a long animation load time;
- distracts users;
- confuses them.
Tips:
- make it subtle;
- not confusing;
- make it smooth, not jumpy or mechanical;
- make it fast;
- avoid mixing up too many effects;
- don’t overload your site with it.
Parallax
Users find a site with parallax to be more fun, when it is tastefully used, of course. The latter means a reasonable number of floating elements which will not cause motion sickness.
Risks:
- can be disorienting for users;
- is more mobile, than web-oriented;
- is not SEO-friendly;
- is slow to load.
- use it sparingly;
- use a reasonable number of floating elements; use subtlety to point out small elements (product imagery/pull quotes);
- avoid using on word-heavy content or eCommerce sites.
Alternative Layouts
Atypical compositions are good and trendy until they bring complete chaos to the design. Irregular layouts with overlapping elements should be wisely balanced to create a well thought-out visual hierarchy instead of a mess.
Risks:
- makes it hard to scan/find the content;
- can turn the design into chaos.
Tips:
- balance with well-structured blocks;
- keep grouped elements in proximity;
- separate text blocks clearly;
- use overlapping elements with contrasting types;
- don’t use for content-oriented sites.
Petite Typography
Looks highly modish and makes the text stand out. Is usually surrounded by negative space. Try to use sparingly, in short paragraphs in order not to make the user’s eyes pop.
Risks:
- affects readability;
- can be lost on the page.
Tips:
- surround it with negative space;
- make it visible with a contrast between colors/images;
- use typography size not less than 13pt.
Unusual Navigation
Experimental navigation patterns are the best solution for low content sites where they can bring creative interaction. If you choose this type of navigation, make sure that it is clear, perfectly-linked and user-friendly.
Risks:
- can mislead.
Tips:
- should be intuitive;
- accessible from every page;
- best for small/medium sites.
Stock Photos
Stock photos are cliché, they do nothing to differentiate your business from its competitors. They are used on hundreds of other sites and don’t look professional. Today it’s better to forget about stock and choose only real photos. Remember that most shoppers prefer custom photos.
Risks:
- have a bad reputation;
- look unreal;
- are unemotional;
- don’t engage.
Tips:
- choose better stock imagery;
- make artful edits;
- try to avoid them.
Infinite Scrolling
This is a good practice for various galleries and shops, but can turn into a usability nightmare when it is not executed properly. The user feels disoriented when he doesn’t see his current location on the site and when he is not provided with navigation options to move forward.
Risks:
- can be disorienting;
- is bad for page load time.
Tips:
- suggest call-to-actions, tooltips to point out navigation options;
- offer a sticky footer, menu;
- best for social media sites, blogs, shops;
- avoid truly endless sites.
Pop-ups
We are all tired of the aggressive pop-ups. During the last year they have turned into one of the most-hated UI elements. Properly designed, they show good conversion, but they irritate the visitors. It’s really hard to display enough information in the pop-up without distracting the users.
Risks:
- zero engagement;
- are aggressive;
- may increase bounce rate.
Tips:
- design as non-intrusive as possible;
- make them simple, distinctive, valuable;
- be aware of timing and position;
- avoid entry pop-ups;
- avoid asking for contact details;
- run A/B tests on how best to communicate with users.
Hamburger
Originally designed for the mobile interface, this type of menu should be applied on the desktop wisely . A hidden menu is hard to find, especially if the user is not acquainted with this icon. People spend time looking for this menu on the page and it’s not ideal for a user-friendly experience.
Risks:
- is hard to find sometimes;
- is confusing when it has too many options inside.
Tips:
- use a recognizable icon;
- bring menu into focus;
- support various browsers for correct display of the icon.
Video Background
Background with moving visuals is engaging, but makes it tough to read and digest the content placed above. Apart from that it affects the site load time. When showcasing the products of your company and telling its story, be aware of the length of the video and readability of the content.
Risks:
- bad readability of the content above;
- endless videos;
- no control buttons;
- makes sites heavy.
Tips:
- choose contrasting content color;
- compress the video as much as you can;
- use short looping videos;
- avoid audio, it’s annoying;
- offer a pause button.
Over to You
All the trends mentioned above are subject to some form of criticism today, but it doesn’t mean that they cannot be implemented in designs. By being aware of their dangers, you can easily reduce the side effects. Actually, it’s up to you which trend to use and how to implement it in your design. The golden rule you have to keep in mind - you shouldn’t sacrifice user experience of the site for the sake of looking fashionable.
