Modern web design is so much more than creating something “that looks nice”. A web design has got to be engaging and hold the user’s interest and guide them in carrying out a certain action, or series of actions for that matter. Fundamental design techniques such as balance, hierarchy, colour, contrast, form, shape, unity/harmony etc help us achieve this engagement, and it’s why “design” (deployed properly) can be so valuable. Web design in 2015 requires us to design interactions, to develop narratives and explore the relationship between the decisions of our users and our designs. It also allows us to be iterative, to test user’s responses and see where they click. In this article I’ll look at 8 web design techniques that will help to drastically improve user engagement on your website.

1) Scrolling page animations

Subtle animations added to content as you scroll down a web page can help focus the user’s attention and really draw them into your story as they scroll down your website. The key with this technique is to use it sparingly, as used in abundance it can have the opposite effect, and really distract from your message. This WordPress theme shows how the technique can look. scrolling

2) Background videos

Full width background videos are becoming increasing commonplace on the web. Often implemented within banners on the homepage they can be extremely powerful at really driving across a companies intended message and grabbing a visitors immediate attention. Skillshare do this well with the video in the header showing how students have put into practise skills they’ve learned from their online courses. header-video

3) Intro/explainer videos

Another good engagement device can be the use of introductory videos. Nest do this nicely on their homepage if you click the ‘play’ icon in the header. These are particularly useful if you sell a service or if you want to portray a more personal touch to your visitors. Quite often a short welcome / intro to your company website from the Managing Director can help connect visitors with your company and people. nest-video

4) Parallax scrolling effects

Telling a story with your content as the user scrolls down the page is a great way to engage them. Pairing this up with a “parallax scrolling” background effect whereby background elements move over one another to reveal other areas of content and imagery really help to make the user experience of a page much more engaging. parallax

5) The strategic implementation of call-to-action buttons

Correct placement of CTA’s can make all the difference when it comes to conversion. Integral to a functioning website, an effective button has the ability to trigger a customer to sign-up, join, buy now, share, download, view etc. When used in combination with accent colours they have the ability to draw attention, increasing engagement and sparking action. To be successful it’s all about, location, size and colour. Charity Water do this nicely as you scroll down on their homepage. call-to-actions2

6) Off canvas elements

One of the freedoms afforded by designing for screen is that entire sections of content can live outside the viewport, only to be shown when a certain pre-determined event occurs. One of the most common examples of this behaviour is with the off-canvas navigation-menu. This technique combined with the utilisation of iconography and also custom transitions which can do much more than just speed-up and slow-down the change can not just engage users but also when used properly are an invaluable space saver. Check out Uber’s current homepage to see their implementation of the site menu. off-canvas-elements

7) Fixed headers

Ease of navigation is vital for a successful website design. Research shows that users will not hesitate to leave the site and find another to explore if they have difficulty immediately finding what they’re looking for. Having a websites navigation links permanently visible as the user scrolls down the page can be neat little trick for keeping users engaged and preventing them from leaving due to laziness or even frustration. We did this on the McMaster Yachts’ website. mcmaster-tom

8) Including social sharing opportunities

It is often assumed that the first page of a website someone will see is the homepage, but this is not the case. People will most likely find your website from a variety of locations, from blog posts, entries on social media or comments on review sites etc. To increase traffic, page rank in search engines & drive conversions, it is important not only to participate in, but also actively encourage this kind of audience participation and engagement. Just as with a successful call-to-action the more visible your social buttons are, the more users will interact with them. These methods are also a great way to provide a bridge for an ongoing connection, encouraging users to return once they have long departed from your website. blg-pst-5

To conclude: You should be measuring user engagement

So that was 8 web design techniques that can help you improve user engagement on your website. But how do you actually measure that engagement?

Heatmaps & screen recordings

blg-pst-4 Once a website goes live the temptation is to just leave it, see how well it functions over an extended period of time and update it at a date well in the future. The reality is that web design tools like CrazyeggHotjar & Google Analytics can immediately help measure how well the site is performing, identify design issues and assist you in making key design tweaks that can have a sizeable impact on conversions. Taking a much more iterative approach to your web design project is one of the most effective ways to improve user engagement.

Subscribe to our newsletter!

Get the latest tips and advice through the Authentic Style newsletter

Please enable JavaScript in your browser to complete this form.

by subscribing you’ll receive periodic emails from us with helpful website tips.

Let’s create something
great together.

All great things start with a chat. Use the adjacent form or our project planner to get things started.

Project Planner

We’re currently accepting projects
Please enable JavaScript in your browser to complete this form.

Authentic Insights