Many factors influence how well a website converts, whether it’s converting visitors to readers, customers, or just loyal fans. In this article we will explore a few simple areas where we can improve your website’s overall usability, increasing the user experience and ultimately leading to more conversions.

These strategies can be applied to blogs, landing pages and business sites alike—including ecommerce, business-to-business (B2B), business-to-consumer (B2C), etc. Specifically we will look at navigation, typography and hierarchy of information, predictability in user interfaces and layout.

Clear and present navigation

Avoid proprietary or brand names

It’s easy to get wrapped up in your own business and want to be clever with your words. Remember, visitors to your site aren’t necessarily familiar with your business, the terms you use, and the branded names of your products. Even if repeat customers know these terms you want your site to appeal to new prospects. For navigation elements avoid using proprietary names, that out of context, carry no inherent meaning.

Avoid generic labels

On the other end of the spectrum, avoid using terms that are too generic. Labels like Products, Services, and Who We Are don’t actually inform the visitor and require a click to learn anything. It is much better to use descriptive labels, giving the visitor a clear sense of what they are about to click on.

If you’re having trouble finding the right term(s) to label pages try a tool such as the Google Keyword Planner. It can be powerful in discovering what your audience is actually searching for. It isn’t always easy to write the perfect label. Balancing the length of the label with descriptive text can be a challenge, especially if your the design of your site puts physical limitations on your menu.

Nothing beats actually testing your assumptions on real people. Optimal Workshop offers a product called Treejack that lets you have real people test your information architecture, in plain text, for findability—essentially whether your labels make sense or not.

Place core business items first, omit boring corporate stuff that no one cares about

One of the most common requests I receive when working on information architecture, or navigation, is to include pages like Our Company, About Us, or Who We Are. Not only are these requested in the top level, but often before the pages that actually generate revenue.

Especially among entrepreneurs and small business owners, it is easy to feel you need to validate who you are and your experience. The trouble is most people don’t actually care. Prioritize pages that actually move visitors along the path to becoming customers. Done right, about pages can be powerful and aid in conversion, but try to keep the mindset that people come to your website to find a solution a problem, not learn more about you. My recommendations vary depending on the type of website, but in general, these pages are better linked to in the footer, a secondary level navigation, or nested within the top level.

Big click targets, especially for mobile/touch use

Today more than ever it is important to keep your site optimized for mobile traffic and touch interfaces. With a wider array of devices entering the market daily, touch screen doesn’t necessarily mean mobile. Either use a theme, or instruct your designer/developer to ensure the target area, that is the actual clickable portion of links, buttons, and navigation labels, are large enough that visitors can click/touch them easily and don’t click the wrong one. Along with this, it is important to maintain enough space between these elements to reduce the risk of a wrong click.

Typography and hierarchy

Typographic hierarchy for scanning

Choosing a typeface (or font) that is easy to read and contains some variety in weights (i.e. thin, regular, and bold) sets you up for displaying content that is easy and pleasant to read.

Here are a few key points for ensuring good hierarchy to make your content easy to read:

  • Font choice(s). Limit the number of fonts to a maximum of two. If you do choose two, ensure they are different enough that it makes sense to use them. There are plenty of fonts available that have enough variety within them that you can use one. Using a heavy or bold for headlines, for example, and the regular weight for body text.
  • Font sizes. The base font size, that is the font size of a standard paragraph, should be large enough that it is comfortable to read at an appropriate distance from the screen. These days that tends to be 16 px and up. When setting sizes for headlines, quotes, etc. be intentional. There needs to be a change in size that is clear. For example, if the body text is 16 px and subheadings (H2 in HTML) are 18 px, there won’t be a noticeable difference and you aren’t aiding the reader. This is what’s known as a typographic scale. In HTML you have up to six heading levels to work with, from H1–H6, so there is plenty of room to introduce variety to your page.
  • Spacing. Using appropriate space between lines, paragraphs, headings, images, and other elements to pace the content and increase legibility (see Mark Bolton’s article http://alistapart.com/article/whitespace).

Writing for the web

A nice typeface will only take you so far, like putting lipstick on a pig. Writing for the web is inherently different than writing books, academic papers, etc. People tend to scan online, so breaking text up with headings, lists, graphics, etc. not only gives the readers’ eyes a break, but it helps those who scan determine if it is worth the read.

Hierarchy of Information

The order in which you present content on your site, or page, is fundamental to how the visitor reads it. In the past we used to talk about the “fold” constantly. The fold is the line at which where content is cut off due to the height of the window or screen. Happening less and less, designers, team members and clients used to argue about what needs to be above the fold—calls-to-action, contact information, carousels (sliders or slideshows). For the most part the fold has become much less important. People are used to scrolling, and many sites go to great lengths to make the scrolling experience customized.

Though we place less emphasis on the fold, mostly due to the ever growing number of devices with different screen sizes, the basic concept still rings true—put the most important information first.

How do you know what is most important? Determine the primary goal of the site or page and then measure every piece of content against the question “Does this work toward achieving my primary goal?”

If you’re thinking about the homepage on your site, then you likely have more than one goal. Try to prioritize these goals, and keep that order in mind when choosing what to include next.

Mobile first FTW

A recent movement within web design and development that can be helpful is mobile first. The approach is simple, design and build websites for the smallest screen first, then optimize for larger displays. When you approach a website this way you quickly find that mobile first goes deeper than simply the design and code behind a website. When you restrict yourself to the smallest screen every piece of content needs to be incredibly valuable to warrant occupying space on the screen. This can be helpful when you have multiple goals and are struggling to determine which deserves more space or prominence. Restricted to a smart-phone screen, what message, or action, do you want visitors to see/do first?

Look like a website

A design pattern is a general reusable solution to a common problem. In web design this generally refers to an approach to common interface elements such as navigation, forms, and buttons. What that really means is make sure your menu looks like a menu, buttons look like buttons and links look like links.

What it does not mean is you should you copy the design of these elements from other sites. There is an underlying language being used that conveys the contextual meaning of elements on a page. For example, fields in a form typically have some kind of border, quite possibly a white background, and maybe even look indented into the page. Buttons are definitely recognizable when they have rounded corners, are styled to look like they are raised off of the page, use contrasting colours, and are placed in good proximity to a form or otherwise related element.

To reiterate, that doesn’t mean all buttons should have rounded corners and look “bubbly.” With the trend of flat design these elements are diverting more from standards of a few years back. The important thing to remember is, if it’s clickable, make sure it looks like you can click it.

Layout that has a flow

The layout should support all the work above, tying it all together. The layout of the page should emphasize the hierarchy, provide enough white space that sections are clear, call-to-actions stand out and the visitor should have a clear sense of when to move their eye. A layout done well will gently guide the visitor along a path you have designed, giving them the content they need at appropriate times to nudge them along a sales path, to a clear and irresistible call-to-action.

Conclusion

To summarize, we covered four topics to increase the usability of your website or landing page that will help your site stand out against competitors, provide a pleasurable experience for visitors, and ultimately lead to more conversions.

  • Use clear, descriptive language when labeling navigation
  • Utilize good typography and hierarchy to present your message clearly and efficiently
  • Follow common and standard practices to ensure your website is both predictable and intuitive
  • Tie it all together with a layout that has a clear path and guides the visitor to a single action