Usability Checklist for Successful Websites

Many people judge the quality of an unfamiliar company based on the user-friendliness of a website. This might not be fair, but for online shops, the website is the only way of getting to know a new company. Companies therefore have to make sure that websites leave a good impression on users: an impression that leads to building trust, conveying values, and selling products and services.

The following checklist can be used to quickly check if your website meets the basic requirements for good usability.

Accessibility

The accessibility of a website means that the site is usable for everyone, no matter which browser or device you use, and no matter what physical impairments you may have (for example visual impairment or color blindness). No one should be excluded from accessing the offers on your website.

✓ Loading time less than 2 seconds

A website should load quickly and without “flicker effects”, which are caused by images and videos that have to reload. A fast loading time creates a positive user experience, and in the best case scenario, your website should load in less than 2 seconds.

Tip: Page speed should be tested regularly, and there are many tools available for this, such as Google Pagespeed, pingdom.com and Ryte.

Figure 1: Check loading times with Ryte

✓ Clear contrast

Once the page is loaded, the user will immediately start to orientate themselves. There should be a clear contrast between background and text, otherwise important information could get lost, discouraging the user from reading on.

Watch out: Particularly with banners, texts may not be completely legible due to the underlying image content.

Figure 2: The text is easy to read. (Source)

Figure 3: Here, the user has to look more closely.

✓ Font size & spacing is clear

As well as having clear contrast, it’s important that the text is easy to read in terms of font and spacing.

Tip: H1 headlines should be displayed in the base font size 3em.

✓ JavaScript effects are used sensibly

Interface developers are currently in an optimistic mood as new JavaScript and CSS animations are available as add-ons almost daily. As was the case 15 years ago with Flash, utilization of these animations has to be balanced, and you should consider how much memory such animations take up.

For users with weaker computers and smartphones, memory-intensive animations lead to slowdowns and malfunctioning of the website. Bear in mind that the animations should be implemented discreetly, in a way that encourages learning and is technically unobtrusive. On tablets in particular, scrolling is quick, and the user will just see empty content if the animation of "in-flying" elements does not happen fast enough.

Tip: Do not use unnecessary parallax scrolling and fade-in animations via JavaScript, and reduce the number of JS-libraries to 2-3.

✓ Tidy impression

Giving a tidy impression is also an important factor for website usability. The page should be aligned with a grid, and all headlines and texts should follow this grid. This gives the impression of a competent and organized website, increasing the user’s confidence in the website.

✓ Mobile website is easily accessible

Ensuring your mobile website is easily accessible can be made easier with easy to implement prefabricated frameworks and templates. Mistakes can happen, especially when integrating videos, pictures and tables. Here, you have to pay attention to the correct portrayal in portrait mode on smartphones, as this is the most common for mobile use. This can be easily checked with tools like Browserstack.com or testobject.com.

Figure 4: Check mobile accessibility with Browserstack.com

Identity

Along with Coca Cola and Marlboro, Apple is one of the world's most easily recognizable brands, in particular due to clear brand and CI management. If websites should be established as brands, or as a way of presenting the brands, it’s important to observe the guidelines for brand management – the great side effect of this is that brand management guidelines also ensure improved usability and user guidance.

Figure 5: Lead brands: even without logo and claim, it's possible to work out who is being advertised here.

✓ Logo is clearly recognizable

When users call up a page, their eyes wander to the top left for a few milliseconds, simply to find out who the provider is, and whether they have landed on the right page.

Make sure your logo isn’t too small, as small logos won’t be perceived as easily. If your logo isn’t visible enough, users will have less trust in your website.

✓ A tagline is available and explains the page

A tagline summarizes the content of the site in a condensed form, helping the user to classify the content. The better the user understands the context, the sooner they will purchase items.

Figure 6: Without a clear tagline, it's not 100% clear what the user is being offered (Source)

✓ Homepage can be grapsed in 5 seconds

Usability tests always show the same user behavior on homepages. The users call up the page, scroll down for 2 to 3 seconds, and then back up again.

Then the exploration phase starts on the homepage. The elements are "learnt": users remember what text, images and links look like, how the navigation works and where the content is placed. Users should be able to record this information in 5 seconds.

Tip: Particular caution and a good sense of design is required for various content types such as slideshows or forms. These must be recognized as interactive elements within 5 seconds.

✓ Company information is easy to find

Smaller and lesser-known companies are often judged on the basis of their contact or "About Us" page. This page should be easy to find, ideally as a link in the main navigation on the right-hand side, or at the end of the mobile menu.

✓ Contact information is easy to find

Visiting a website does not always have a commercial purpose. Existing or future customers may want to contact a company. Can phone numbers, directions, email addresses or other contact information be accessed quickly on the page?

Especially with responsive websites, it’s very common, particularly in smartphone mode, to have to scroll for a long time to to access the information or links that are in the footer. Telephone numbers should also be displayed correctly so that calls can be made directly from smartphones; it’s therefore advisable to place a call button next to the mobile menu.

Navigation

The faster users understand how to navigate a page, the more time they can spend on the content, and the quicker they understand what it's about. Only those who understand the content will end up purchasing.

Meaningful elements that are easy to click on support the user’s journey through the website, and therefore make conversions and purchases more likely.

✓ Main navigation clearly visible

If the main navigation clearly distinguishes itself from the surrounding elements such as trust symbols, telephone numbers or advertising spaces, these elements are much easier to recognize.

Tip: Sufficient white space around the main navigation can also make individual elements easier to recognize. Hiding the main navigation behind the hamburger button as is commonly used for mobile devices has now become more widely used for desktop, but the navigation speed has decreased.

For mobile, the hamburger button is now established as a sign of good usability pattern, and should therefore definitely be used.

✓ Understandable navigation points

A website has 2 tasks: to meet and create demand. Visitors who know exactly what they want will use the main navigation or search to navigate their way through the website.

Tip: It is therefore important that the menu items clearly describe where the link leads to. For example, for a hotel website, the menu item "Pictures" is better than "Impressions".

✓ Number of menu items 5+2

The human short-term memory can remember 5 things without much effort.

Tip: If you want users to find out quickly what your website offers, you should avoid using more than 7 menu entries in the navigation. The ideal number is between 5 and 7. In expanded DropDowns, you can use more as the users have a stronger focus, and read more slowly.

✓ Logo linked to homepage

Users are expected to be able to access the homepage by clicking on the logo of a website. These are learned patterns - so-called user expectations.

Tip: There are currently a lot of templates that no longer offer this feature. Therefore, you should check this function on all devices and screen sizes.

✓ Consistent and clearly recognizable links

Many websites use text links, buttons and images as links. It’s important to always use the same variant for the same function so that the user doesn’t get confused. The best effect is still achieved with blue, underlined text links, as this is a well-established trend, and users will therefore be used to this.

Content

In many cases, content is more important than design and layout. Whoever addresses the customers’ problems will get the most attention and be heard. In order for users to be able to perceive the arguments, they should be clearly recognizable and easily accessible.

✓ Descriptive headings

Headlines guide the visitors. The more appealing and emotional a headline is, the higher the chance of the user reading and remaining on the page. This also applies to the B2C and B2B segments. The headlines should clearly indicate what the content is about.

✓ Consistent color design

People unconsciously get used to a certain environment. Colors and forms play an important role in this process. The more harmonious the colors coordinate with each other, the more advantageous.

**Figure 7:**The shade of orange should be consistent (Source)

✓ Consistent typography

A website should convey organization. In addition to grid alignment, this can be achieved by using well-balanced fonts.

Tip: Make sure that each heading (H1 to H6) is defined properly, and that you have a standard, unified typeface. A maximum of 2 fonts should be used on one page and in the images. To find the right pairings for Google fonts, you can use this Fontpair tool.

✓ Pop-ups don't disturb the flow

Popups or fade-ins over the entire screen annoy most visitors, especially on mobile. Google has also reacted to this and now devalues mobile pages with pop-ups.

Tip: If necessary, popups should only be used in those parts of the website where the user journey and path to conversion is not disturbed. For example, it is essential to avoid popups in checkout processes.

✓ Content is split into clear paragraphs

People don't read everything on a website. They skim over content and stop to read something properly when it seems interesting. It is therefore important to break your content down into individual paragraphs.

Tip: A simple rule from journalists is: "One paragraph per thought."

✓ Paragraphs have clear headings

To enable the user to enter and evaluate the content of a paragraph before starting to read, it makes sense to give each paragraph a heading.

Tip: The headline should briefly summarize the content and arouse curiosity. As a website operator, you can use the headline to address the users, and more effectively convey arguments in favor of purchasing.

✓ Conversion target clearly formulated

When users come to the end of a web page, they should be directed to another page. Therefore, clear calls to action or further links should be placed at the bottom of all pages, as this is the only way for users to stay on the site.

Conclusion

The goal of every website should be to get users to take a certain action: the Call To Action. Good usability and the implementation of these tips creates the basis for increasing your conversion rate. If the user finds your site easy and clear to navigate and use, they are more likely to stay longer on your website.

This article was originally published in the German Ryte Magazine by Kai Radanitsch