How to effortlessly improve website usability with mostly free tools

Have you ever felt frustrated after looking at a few sites in the hope of finding information that was important to you?

Users have no patience for sites without it. Yet Google rewards it and web experts recommend it. (Image source)

What is it?

Website usability. Given that we live in a digital world your website must be easy to read and use.

The good news is that it is not hard to achieve. Improving the usability of your site is not rocket science. You don’t need to know any code or technical stuff to give your users an enhanced experience.

These tips will help you increase time on site while it decreases bounce rate. They will also entice them to come back over and over again. All you need to do is implement them. You can download a list of tools to help implement this at the bottom of the post, so be sure to read all the way to the end.

Improve Readability

Readability is one of the most obvious website usability problems. If readability is an issue then there is a good chance that your visitors will abandon your site pretty quickly in other words you will lose potential customers and subscribers.

You can learn more about how to make your site more readable and usable by following these readability guidelines. White space, proper paragraph formatting and displaying of lists using bullet points contribute towards making the text more readable.

Design elements like the sidebar, banners and text boxes on your site can be placed in such a way that they do not distract users when they are going through your site.

Know Your Audience

Knowing your audience and the information that they will be looking for is the best place to start in terms of ensuring that the website is useable. Your job is to ensure that they are able to get to the information as easily as possible. This should be done in a couple of seconds or else they could hit the back button on their browser and be gone for good.

Consider taking the time to analyse each of your site pages by asking the following questions:

• Is it attractive to your audience
• Does the layout make it easy to find important information
• Will the information presented answer all questions and objections
• Use a tool like Optimizely to Visual Web Optimizer to test elements on a page to optimize elements that work for your audience.

Place Content Objectives Important to Visitors at the Top of the Page

A study found that the time that visitors spend reading content decreases sharply as they scroll below the fold. In fact 80% of the time people spent on the webpage was on content above the fold.

The same study also found that peoples viewing time increased significantly at the very bottom of the webpage. The recency effect which states that the last thing a person sees will stay on in their minds longer can play a significant role here.

Actionable Tips:

• Place important content at the top pf the page
• Place a call to action or relevant content at the bottom of the page to increase conversions
• Limit the amount of scrolling required, both horizontally and vertically to help get your key message across.

Optimize Website Usability For Distracted People

A Caltech study found that when people are rushed or distracted they make rapid decisions based on visual influences more than personal preferences. This bias tends to get stronger the more distracted a person is and when they don’t have a strong preference among options. (Image source)

So optimize the design of your site and page, so that people can find what they are looking for quickly and easily in a world that is full of distractions. For e-commerce sites this can play an especially crucial roles given the time-sensitive and distracting environments of online shopping.

Strategically Use Headings to Help Readers Who Scan Your Webpages

A usability study by Gerry McGovern a web content management expert revealed that people read web pages in blocks or sections. People tend to read content on the web in blocks looking for items that closely match what the person is looking for. He termed such activity as “block reading”.

Usability expert Jakob Nielsen’s eye tracking study supported this in that people tend to swivel their reading in a left right manner down in the page in what resembles a F shaped pattern.

So how do you structure your content to allow for such reading behaviour?

Here are a few actionable tips to help:

• Organize your thoughts and content with an outline
• Use headings to break up long articles into smaller sections so people can easily scan your content and find sub topics that are of interest to them. Bullet points also help achieve the same outcome. In fact a Click Tale study found that lists with bullet points tend to help fixate readers on the content for longer.
• Use headings that are keyword rich for each major point of your content to help those who skim and scan through your page
• Make the first 2 words in your heading count as people tend to read the first few words in a heading or link when scanning a page
• Place keywords preferably at the beginning of titles, headlings and links, using the passive voice.
• Consider using the inverted pyramid writing style to place important information at the top of your content.

Keep Your Message Clear and Consistent

Being consistent with the overall theme of your site and content goes without saying. There are still so many blogs that try to cover such a wide range of topics that they don’t really focus on anything.

It is better to have 100 targeted visitors per day and convert 10 than to have 1000 people visit your site and convert none. This way it is easier to build lasting relationships with people whom you know are interested in what you say and do.

Keep Your Copy Down To The Essentials

While long copy has its place, more often than not with most web pages you just need to get a point across.

No one really has the time to read a thesis on every page of your website, so be sure to pare your content down to the essentials by keeping the following in mind.

• Get to the point
• Have just one purpose for each page
• State the purpose as briefly and concisely as possible

For example, your homepage could simply state your core marketing message and invite people to explore the service like this one on Kissmetrics.com

Background Color and Contrast

It is well known that colors affect a user’s psychology and experience in different ways and articles like this one provide insights into the psychology behind color selection of major brands. (Image source)

Techwyse conducted some research into how important color contrast is in guiding a visitor and found that a non-informational element about pricing on the frontpage got the most attention because of its color contrast compared to the rest of the page.

Colors imply a subconscious meaning to people and so in choosing color for your brand you are sending out a particular message to your audience.

How do you select the right colors?

1. Work around your favourite colors and make them the dominant color of your site.
2. Use a mixture of your favourite color and neutral colors
3. Get some professional input or have a professional do it for you.

Strategically Use and Place Images

Marketing Experiments ran a test on a SAP page as you can see in the image above that showed a 62% increase in conversions. What caused the difference in conversion rates?

Images and clearer calls to action.

Human beings are by and large visual beings. So having the right images that appeal to your audience can make all the difference as newspapers have learnt over the years.

The use or lack of high quality images can make the difference between converting visitors or losing them. Image placement is also important as is sizing and clarity of images.

Make Navigation Simple

With the increasing use of mobile devices to access sites, your site not only needs to be responsive but have an easy navigation to it as well. Research by User Interface Engineering, Inc., indicates that 60% of the time people cannot find the information they seek on a Web site.  Forrester Research estimates that about 50% of potential sales are lost because users can’t find information. So, how can we help users get to what they need?

It can be as simple as picking an easy layout and using it on all webpages.

A general rule of thumb to follow in the design of a site is that people should be able to find what they are looking for within 3 clicks. In fact people should be able to take one look at your site to know what it’s about and how to navigate. In order to make this happen make sure that –

• The site is organized in a simple way with related information in silos or categories
• Language used in easily understood by your target audience
• Have separate landing page for each category and have links to products or services detailed there.
• Give people more than one way to get what they want. Some may use your navigation bar, other may want to browse and yet others may have a questions want answered. Give them options

Make Links User Friendly

Hyperlinks used properly can aid readability and usability of a site. How can you ensure it is done properly?

Here are a few tips:

• Use a different color for links so they stand out from the rest of the text.
• Indicate which links have already been visited by the user by styling the visitedCSS selector differently from normal links.
• Use the title attribute to give hyperlinks additional context and let users know what to expect when they click a link.

Position Important Information Strategically

Several studies including this one have shown that the left side of a website tends to get a bigger part of a visitors attention. In fact as much 69% of the viewing time is spent on the left hand side of a webpage as compared to the right hand side.

A phenomenon that is commonly occurring called banner blindness can lead to a loss in conversions. This happens when people subconsciously or consciously ignore parts of the webpage because it looks like advertising. This phenomenon is probably due to the fact that we are constantly confronted with thousands of ads, resulting in us tuning out of similar such messages.

Studies have shown that users don’t fixate on ads. They want to get their information fast and will ignore advertising in the process. A good design and proper positioning of key elements can help overcome these issues.

Reduce Webpage Load Time

How quickly your webpage loads can have a big impact on your websites performance, usability and overall search engine optimization. (Image source)

According to Kissmetrics 40% of visitors will abandon a site that takes more than 3 seconds to load and a 1 second delay in page response can result in a 7% reduction in conversions.

To get an overall idea of how fast your page loads a good place to start would be Google’s PageSpeed Insights tool. The tool will grade your website out of a max score of 100 and provide a list of things that can be improved.

Support Usage on Mobile Devices

Your site may not have been built initially with mobile device usage in mind. However given the increasing trend of people using their mobile devices to read emails and browse sites it needs to be readable and functional across such devices as well. (Image source)

The best solution would be update your website to a fully responsive design, however it can be a huge undertaking. However you don’t have to wait till traffic starts to drop off before making some basic changes to improve the mobile experience.

Here are a few actionable tips:

• Remove features that require flash or plugins. If your video players use them replace them with a YouTube embed video or HTML5.
• Make your calls to action bigger.
• Put some space between links rather than using a bullet point list, so they are easy to hit on a mobile device.
• Use fluid development techniques. Use percentages and “em” to define content and font sizes. When using fluid layouts, set a max-width to ensure that the line length does not exceed 50-75 characters on large screens.
• Configure the viewport and size content accordingly. You’ll be surprized how many issues can be addressed with this fix. Apple and Mozilla provide details on how to configure the viewport.
• Make small optimizations by using media queries. Use a few simple media queries (tips from W3C or Mozilla) in your CSS to deliver better mobile experiences to your users.
• If you have a WordPress site consider using a plugin like WP Touch.

Simplify Forms

Web forms on a website can be a source of frustration that can reduce conversions. A web form is in many ways the first step towards building trust between the visitor and you. They are offering their details in exchange for something from you. So it is important that their experience with the web form is simple and easy.

Here are some commonly occurring issues that can be addressed to improve the usability of your web forms.

• Collect the information you critically need and no more. A user should be able to intuitively understand why you need each piece of information you’re collecting. If you ask for more than they expect, you could lose their trust. For example if you had just been introduced to someone new at a social gathering and were asked for your middle name – how would you feel? Guarded, bit confused, wary?
• Don’t make filling in fields that aren’t required mandatory. For example if you are asking for a person’s birthday then you shouldn’t make it mandatory. If you would like to have that information in order to send out special offers then state the reason as to why you are requesting it.
• Group related information. If you must have a long web form, then provide a visual break between related field groups.
• Place labels above the field. Based on a eye tracking study having a single column form with field ables top aligned works best. The reason being that it cuts the visual focus points of a user in half, reducing the mental efforts required to complete a form.
• Replace the default “submit” text. Change the default text on the “submit” button to something that is relevant to your audience and your message.
• Properly assign “tabindex” in your HTML. This allows users to quickly and efficiently tab between fields, speeding up the process of filling in the form.

Add Site Search

No matter how good your sites navigation is, there will always be a percentage of users who will not be able to find what they’re looking for. Adding site search is a great way to allow users to quickly find the content that they want. The Relevanssi plugin for wordpress sites or Google Site Search are great ways to incorporate this function into your site.

Apart from improving the usability of your site, such tools also offers an insight into your users’ needs and based on the keywords used, what content needs to be added or what needs to be made more accessible, if it is hard to find.

Customize your Analytics

To increase the performance of your site you need to understand the current performance of your site. In other words you need to look beyond bounce rates, time on site and page visits to what actions people are engaging in on the pages of your site. Are they watching videos, sharing content on social media etc. (Image source)

In order to discover this you will need to customize the analytics of your site to track these forms of conversion.

If you are using Google Analytics you can find resources to learn how to track conversions.

Making website usability work for you

Making your website easier to use is not hard and these simple steps can get you on your way to a more engaging site. It doesn’t require specialized skills or advanced training and best of all when implemented it will improve people’s perception of your brand.

All that’s required is to think about your site in a different frame of mind.

Think of it as the window in your storefront.

• It should be inviting and attractive to the right people
• People should know exactly what your business is about without having to think about it
• They should be able to find what they are looking for without hunting

Approach it from that perspective and usability will be simple and provide better conversions.

I have provided a list of tools that can help with testing the key areas mentioned above as well as others. Each of these tools are simple to use and makes usability testing and conversion optimization really simple.