Be Less Annoying: Reduce Bounce Rates through Better Web Design

According to the almighty Google, bounce rate is defined as “the percentage of single-page visits or visits in which the person left your site from the entrance (landing) page“. Basically, those users who leave your site right after they hit it — without checking anything else out. Bounce rate is a true measure of your site’s engagement. There are a bunch of factors that are involved with a lowering bounce rate, the main one being having relevant content, but even relevant content doesn’t stand a chance with a very poor web design.

Truly, the real killers of engagement are distractions and annoyances. As a whole, anything that the user gets distracted with or annoyed by will drive them away. Distractions can be anything from an overuse of animations to a blinding color scheme. Eliminating distractions will keep users focused and engaged on the content and purpose of the site design. Annoyances are just those elements that irritate users like poor navigation, error messages and unreadable typography.

A properly designed site can reduce bounce rate and increase engagement significantly. To avoid going into crazy detail about proper web design, I’ve tried to boil down how design elements can directly lower bounce rate and there are really six elements that go into reducing bounce rate:

• Good UI
• High Quality, Relevant Imagery
• Engaging Color Scheme
• Readable Type
• Consistent Branding
• Responsive Feedback

1 – Good UI

The quickest way to annoy a user is to design a site that has an unusable or bad user interface. Start at the top with the sites main navigation; design the site navigation to be easy to use, make sure labels are clear and easy to understand. Also, make sure that your navigation is simple and not cluttered with unnecessary stuff.

Positioning of typical site elements should be predictable and easy to find. Search boxes, navigation, logos and social sharing buttons should be positioned in typical and predictable places. If a user hits your site and can’t find these basic standard elements they are more likely to jump.

Forms are often a huge culprit in high bounce rates. Design your forms so that they are quick and easy to complete. Like navigation, make sure labels are clear and easy to understand and use form colors that engage the user. Breaking up long forms into multiple, smaller forms and letting the user know where they are and how much further they have to go, reduces bounce rates also by keeping the user engaged.

2 – High Quality, Relevant Imagery

For some reason, it seems like it’s always easy to spot stock photography. Maybe it’s because most stock photography is cheesy (you know, everybody is always smiling into the camera) or maybe it’s because the user just saw the same girl on three different billboards on the way home from work.

When users see and recognize general stock photos they tend to feel like the site is fake or cheesy. Relevant photographs let the user know that you care about the experience and that you want to show them what is important to you. Also, bad photos — even relevant ones — can drive the user away for the same reason. Great photography is always a wise investment. Hire good photographers to take product, location and staff images.

I don’t mean to demean stock photos, I actually use them quite a bit. Just make sure to choose relevant, non-cheesy photos that will not distract or annoy your user. Also, color correct those stock photos to blend in better with your sites color scheme. This will allow those photos to feel more relevant to the site even if they are just smiling, happy, thumbs up style stock photos.

3 – Engaging Color Scheme

The only thing worse than auto-start audio and video is an obnoxious, blinding color scheme. Unless your designing a children’s site, super bright color schemes are just simply annoying and will kill your bounce rate. I don’t know about you, but when a web site loads and I have to quickly squint and turn down my display brightness I’m usually gone fairly quickly there after.

Design and create a color scheme that complements your content. Your color scheme doesn’t always need to be soothing blues and greens, but it needs to be appropriate to what the site is offering. If your designing a health food site, go ahead and use the blue and green but if you are designing a motorcycle site you may want to consider silvers, reds and yellows on darker backgrounds. One thing I also try to do is pull color schemes from products, logos or imagery provided by the client.

Another important thing to consider when choosing an engaging color scheme for your site design is to check out the competition. See what color schemes they are using. Chances are, if the site has been around for a while they’ve done some bounce rate testing themselves and may have figured out some color schemes that work better.

4 – Readable Type

This is a no brainer when designing for lower bounce rates: make sure the user can read all the headlines, paragraphs and links clearly. Choose legible fonts that can be read quickly and easily. Make sure font colors are easy to read — don’t use a pink font color on a red or orange background for instance. Fonts, font colors and font sizes are critical to readability; scripty and handwritten fonts are bad ideas for long paragraphs or smaller sized text. Use appropriate headline and paragraph font color and sizes so that the user feels comfortable and doesn’t have to strain their eyes to read.

Proper letter and line spacing is also important to readability. If characters are squashed together it’s harder for the user’s eyes to distinguish each letter. Generally, you don’t have to worry about letter spacing if you are using standard web fonts. Line spacing, especially in large paragraphs, is very important to readability. Make sure hanging characters don’t hang down and overlap other lines of text or that bold text doesn’t shift the line height up or down creating a weird, eye catching negative space between lines.

5 – Consistent Branding

We already talked about engaging color schemes, but another element that goes hand in hand with this is consistent branding. Colors, logos, types, links, buttons, inputs, selects, backgrounds: all go together to create a consistent branding or theme. Users tend to bounce if things start to get cluttered or disconnected and branding your website is probably the best way to combat this.

Along with making sure logos are present on all pages and that color schemes flow throughout, keeping the same formatting from page to page will also help to enforce your brand. Keep the same content and side bar widths, keep the background colors and textures the same throughout and also keeping headers and footers the same throughout will help lower bounce rates.

Headers and footers are great ways to brand the design and keep users around. Not only do they offer a simple way to keep consistency, they offer a vehicle for consistent colors schemes and logos to be displayed — oh, and they also generally contain most of your sites’ navigational elements too.

6 – Responsive Feedback

The last key element in engaging your users and keeping them hanging around on your site is to make sure you give the user feedback. Not necessarily encouraging words, but direct feedback as they move around the site. Design good hover states for links and buttons to let the user know things can be clicked on. Navigation between pages and links between pages should give clear feedback that they can be clicked and used to go to other pages.

Besides hover states, give users clear instructions on filling out forms or any other process and let them know when they have accomplished a task. Well designed error states are great at reducing bounce rates but simply having an error state may actually increase frustration and irritation. When using error states, try to give the user instant feedback right there in the input field. Avoid the error pop ups after the user clicks the submit button.

Be positive with your feedback. If you are using messages to guide or instruct the user through a task be positive with your messages. Avoid messages that use words like “error”, “wrong” or “must” and try to use a more positive, natural and human response that won’t make the user feel like an idiot. If the user is treated like an idiot they are bound to jet — just like most of us do when a smarmy used car salesman insults our intelligence by trying to sell us an extended warranty.

Conclusion

Bounce rates are important to any website and it’s not just for the SEO or marketing guy to worry about. A major portion of why users bounce is directly related to the design and experience of the site itself. Whatever you do, just try to avoid using anything annoying or distracting and make your designs inviting and comfortable for the user.