5 Web Design Trends for 2016 (and Beyond) that Will Supercharge Your Conversions
When a unique visitor finally makes it to your website, you have one shot to capture their attention.
This is where your site design comes into play. The quality of your site design will determine whether users stick around or not. But not every design decision actually contributes to conversions. In fact, some new design trends can actually harm your conversion rate.
In this post, I’ll look at 5 design trends for 2016 you should be using to supercharge your conversions.
- Use Hero Images Effectively
Hero images are large images you see when you land on a website. They look something like this:
Angie Schottmuller described a hero shot as “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade a customer”.
Over the last few years, more and more businesses have started using these hero images to add visual flair to their sites. From a design perspective, these images make perfect sense: they are bold, striking and immediately capture attention. When you have just 50 seconds to make an impression on your audience, such imagery is particularly effective. There’s just one problem: these images take up valuable space – usually above the fold – without doing anything to persuade and convert users.
Here is one such bad example:
The hero image might be striking, but it doesn’t tell the viewer much about the website or what the business does. Understand that a hero image isn’t simply a large photo on a homepage; it’s a large photo of a solution to a problem that your business deals with. It gives clarity and context to your visitors.
Here is a good example of a hero image:
This is a much better example since it clearly shows what Sweet Basil is about – food. They’ve also used right amount of text to help navigate to other pages on the website.
If conversions are your goal, here are a few ways you can better make use of hero images:
Use hero images to show your product
Take a look at this image from Hammock Town:
Hammock Town sells unique “hammock swings”. Describing this product textually isn’t particularly effective. Showing off how they are used, however, gives customers a much better idea of what to expect. Besides looking great, hero images like these also help persuade customers.
Use hero images to show a product in context
See this image on Uber’s homepage:
Uber doesn’t sell itself on its technology; it sells itself on the idea of giving you a better commute and giving drivers alternative means of income. Showing off how Uber actually works in context – a driver and a rider in a car – is much more effective than simply showing a screenshot of the Uber app.
Use hero images to evoke emotions
Happiness, satisfaction, contentment – hero images are a great way to reflect, evoke and amplify the emotions you want your users to feel. For Zenefits, making it easy for businesses to run HR is a key goal. And streamlined HR = happier businesses. To reflect this emotion, Zenefits uses an image of a smiling woman on its homepage:
Surely you’d want your HR people to be as happy as the pictured model? Such hero images are far more persuasive than an image that simply looks good.
- Use “Split Screen” to Segment Users
Another modern web design trend you can use is to create a “split screen” designs to segment your users into two or more categories. These designs work best for businesses that offer several types of services or products. By giving your users the option to choose one or more option above the fold, you not only ensure that your customers land on the correct landing page but also gather valuable data on user choices.
For example, Baesman splits its entire offerings into two broad categories and presents them as a split screen:
This not only ensures that users land on the right page, but also tells Baesman which offerings customers prefer more.
Here’s another example from Peugeot’s motion-emotion campaign:
You don’t have to limit yourself to just two sections. O3 World for example, managed to split the homepage into 4 parts.
- Drop the “one pager” design to improve retargeting
A common new trend in web design is to use a “one pager” site where all the important information is condensed to a single page. This single page might have information about the business’ product, pricing and team members
While such sites are easy to develop and maintain (since there is just one page), they eventually affect your conversion rates for a simple reason: there is no easy way to use retargeting. For example, suppose you want to start a retargeting campaign for every user who lands on your site, checks out the pricing and leaves. With a conventional site, this would be easy enough. You can simply track all users who land on your homepage and click the “Pricing” link. You can even track this behavior in Google Analytics.
You can then add these visitors to a retargeting list and show them ads with a discount coupon. This way, you can convert prospective customers who didn’t hit the buy button because of price concerns. However, with a one-pager site, there is no easy way to create such retargeting lists. Since clicking the “Pricing” button would simply take the visitor to another section of the same page, you can’t track their behavior and create custom retargeting campaigns. Keep this in mind the next time you create a one-pager site.
- Ditch the “Hamburger Menu” for More Pageviews and Conversions
Hamburger menu is the 3 line icon that is meant to replace the menu bar. It is supposed to make the website navigation easier on smaller screens.
No doubt this trend has seen a lot of uptake in the last few years, but it is actual impact on conversions is largely negative. While it can help condense bloated menus, it almost always leads to fewer clicks and issues with discoverability.
For example, one test by ExisWeb showed that on mobiles, a conventional menu with a border performed far better than the hamburger menu:
In another test, creating a hamburger-style toggle menu drastically decreased daily engagement:
Yet another test between hamburger menu and conventional ‘tabs’ showed that tabs significantly outperform the hamburger menu:
The answer is clear: if you care about clicks, engagement, and conversions, you should stay far away from the hamburger menu design trend.
- Use Hover Animations to Highlight Information
The idea behind hover animations is simple: when a user hovers over a specific element, an animation reveals some previously hidden information. Users are usually unaware about the feature so when they hover around the element, they get a (delightful) surprise. This is great for grabbing the user’s attention and highlighting information.
For example, on Wistia’s About Page, when you hover over to the individual profile that person starts dancing.
If you want everyone to dance simultaneously, just type dance and they will adhere.
Human’s about page also takes advantage of hovering. When you hover over to someone’s picture it shows a brief bio.
This design trend is a clever way to not only add some interactivity to your site but also highlight information you want users to focus on.
Conclusion
A number of new web design trends have popped up over the last few years. However, instead of blindly following every new trend, ask yourself if the design change actually moves your conversion goals.
The trends I’ve highlighted above will not only help your website look better, but will also improve your overall conversions.
Author: Khalid Saleh
Khalid Saleh is the co-founder and CEO of Invesp Conversion Optimization, a leading provider of conversion optimization services and Figpii, an easy to use tool that includes everything you need to increase the conversion rate of your website. His Amazon.com best-selling book, Conversion Optimization: The Art and Science of Converting Prospects into Customers, offers companies a methodology for capturing more customers by creating a fully-integrated marketing strategy that has a lasting impact on any organization.