by John Siebert, President and CEO of Tranquil Blue
The term “user engagement” can refer to any action taken by a user on a website such as posting a comment or a search query, filling in a contact form, signing up for a newsletter, etc. It also includes the time each user spends on a given website.
Better user engagement leads to better conversion ratio, lower abandonment rates and potentially an increase in sales. But the question is, how can you drive user engagement on your site? From a web designer’s point of view, let’s take a look at seven great tips (in no particular order) that will help you in this direction.
Create a clutter-free interface
A clutter-free interface is the first step to drive user engagement on your website. Create balance between the visual elements and text on the site to make it readable for users. Make sure there is sufficient white space so that users can easily find information relevant to their interests. For instance, if they are looking for a “download” button on your website, they should be able to locate it easily and subsequently take the call to action.
Use visual storytelling
Visual storytelling is one of the best ways to engage your users. But then, it is also one of the most challenging tasks. Put on your thinking cap and make the website as interesting as you can for your end-users by using design techniques such as parallax scrolling.
Draw inspiration from Every Last Drop, a website which prompts users to keep scrolling to go through the site. (It also makes excellent use of parallax scrolling). Similarly, look for other examples and decide how you too can incorporate visual storytelling on your website.
(Image Credit: http://everylastdrop.co.uk/)
Prefer card-based design
Cards are one of the best ways to provide information on a website, especially for mobile devices. Use card-based design to present information in a compact, animated way and provide great user interaction; this in turn leads to better user engagement.
Let’s say you have a website that provides restaurant reviews and ratings to users. In this case, when the visitor searches for a particular restaurant, they can get a basic idea of the cuisine, ambience and other services on one side of the card. When they flip the card, they can get the address of the restaurant with a map and sharing buttons. This enhances UX and drives user engagement on your website.
Ahh.com is an apt example of a card based website design.
(Image Credit: http://www.ahh.com/)
Say no to stock photography
One aspect of web design that has been used to death is the use of stock photography.
You may have a limited budget for your website and have no other option but to select stock photography from numerous sources that are online. Even if this is the case, do you think those common images of suited professionals attending a board meeting or working mothers pointing animatedly at a desktop screen will have an impact on users? The answer is no, because they have surely seen similar images elsewhere – on other websites.
So, bid adieu to stock photography and use original photographs on your website by hiring the services of a professional photographer. High quality, original images on your website will increase its credibility, leading to better user engagement.
Replace Flash with HTML 5
HTML 5 is the order of the day. With its interesting features and functionalities, it has an edge over Flash and is being used to create scalable, responsive websites. In fact, some websites have completely done away with Flash in favor of HTML 5.
You can use HTML 5 to:
- Create interesting forms on your website by using a number of text inputs and various fields, which appeal to your users.
- Make content on your webpages more interactive with the <canvas> element that allows a number of animated interactions for the users. This helps you retain their attention when they are on the website.
- Get native support for audio and video elements by using HTML 5. This means users will not be compelled to download a plug-in to enjoy a great audio-visual experience on your website.
These points indicate that replacing Flash with HTML 5 makes a website ‘platform independent’ and increases user engagement by allowing users to interact with all functionalities of your website on any device.
Use a Hero Image
The Hero Image is a popular trend for minimal, responsive websites. These sites have a large photograph or video with a few lines of text or a headline that draws a user’s eye. More often than not, they also have a call-to-action in the form of a Ghost Button, which can be a subscription form, a sign up form or some links to other pages on the website. This is allows for remarkable use of space and doesn’t distract the users and yet, draws their attention.
Make sure that the Hero Image on your website is perfectly suited to the site’s purpose. Use a color palette that is in sync with your brand or business and choose high resolution images or video. As for the typography, select large and preferably custom fonts describing the featured product or service on the website in short. Also, you can use more than one Hero Image as a slideshow on the website to highlight various features of the same product or to showcase a collection of different products.
(Image Credit: http://www.smilebox.com/greetings.html)
Use call to action elements more than once
Use a call to action once on your website – said no one ever. Because visitors are short on time and most will just skim past most of the content, it’s better to have more than one call to action element on a web page. For instance, you can use a slide show on your website using Hero Images and prompt users to take a call to action. Alternatively, you can place buttons on the top fold of the page as well as the bottom fold, to remind users to take a call to action.
(Image Credit: http://www.fork-cms.com/)
Do you have any other point to add to this list? Feel free to share your opinion with us through your comments.
John Siebert is the President and CEO of Tranquil Blue – Website Designer Tampa that focuses on all kind of website design, mobile app development and search engine marketing.
Online Course: Advanced Responsive Web Design Techniques
These days everyone wants to add a cool jQuery feature to their web pages, the latest widget, or the newest CSS3 feature. But who has time to play detective and learn how to do all of those things? Wouldn’t it be easier if someone just pulled all of those amazing new web features together and showed you not only how to add them to your own site, but take them further because you actually understand them? That’s exactly what this course is going to do. For all of those times you’ve said, “How’d they do that?” when you saw the latest cool technique, this course will show you how. Learn more and register.