Good Usability for Websites and Its 4 Great Elements

Implementing good usability for websites is critical when over 70% of visitors are likely to come back to a site if it has good usability. Following up on our bad usability post, this article will go over what good usability for websites looks like when applied correctly. The 4 main elements of good usability for websites are:

• Neat Navigation,
• Vigorous Visuals,
• Plain Language Content,
• Mobile-friendly.

Usability and Accessibility

What is Usability?

What is Accessibility?

Accessibility is the state of being able to find, get access to, and use safely and without difficulty. People need accessibility to something in order to use it. A website with bad accessibility will have few users and even fewer customers.

Accessibility is not just a kindness to others with disabilities; it is a legal right as of the Americans with Disabilities Act of 1990, a long list of legal terms and rights that notes and includes:

• Discrimination against disabled individuals happens in employment, education, transportation, communication, entertainment/pleasure, health services, and access to other public services.
• No one shall discriminate against hiring a qualified individual on the basis of disability in regard to job application, the hiring process, promotions, or firing of employees.
• No one can be discriminated against based on a disability when enjoying goods, services, facilities, or other accommodations of any kind of commerce or public accommodation.
• Any state can be held accountable in an action in Federal or State court for a violation of this act.

The Act above was originally written in 1990 and was amended more than 10 years ago. As such, this act was not written with the internet in mind and, like many laws, needs to be caught up to the modern day of the fast-paced surfing and browsing. Given that access to the internet is a public service in libraries and the like and that the majority of websites provide goods, services, or some other kind of public trade or business, this act does and should apply to websites and the internet. This means that web developers and designers should keep the disabilities of consumers in mind when making their websites.

There are six main types of disabilities: 

• Cognitive, 
• Physical (including hand-eye coordination), 
• Reading, 
• Auditory, 
• Visual (including color-blind), 
• Speech.

As well as the disabilities above, I would like to add that those that have poor and/or spotty internet access and/or are using older computers or other devices also need to be considered when designing a website to be usable. How long does your site need to load? Multiply that by 5 or 10, and then try to guess how long your customers are willing to wait for your site’s pages to load. It might actually be a bit longer than you might think, but long loading pages will diminish your credibility and you will lose customers this way.

Elements of Good Usability for Websites

The main elements of good usability for websites are navigation, visuals, plain language content, and being mobile-friendly.

Navigation

The first element of good usability for websites is getting around the site. Whether we’re talking about the layout of a page or the entire site, a layout is the path a user travels to find what they are looking for (most of the time a user is on a site for a specific purpose rather than just curiously exploring). Find the items or actions that users most want to find or complete (possibly by using a red route matrix) and make sure that it is easy and clear for your users to find and complete them.

As a general rule, keep 3-5 similar elements and items together. Make sure that the way you organize/categorize elements is logical and easy to pick up on. This helps with the feeling of unison in the design and gives a sense of what to expect that helps users find things easily. You may want to make an organization graph of your method and elements to make sure everything is easy to find and the method is intuitive to users. Also, use proper information architecture organization to make details easier to find.

Menus are like salt; use enough that you can tell that they are there but not so much that it overwhelms everything around them (and the customer as well). Place the main menu at the top of the site, and make sure it is on just about every page. Place a footer menu at the bottom of the site; this should have either less options than the main menu or many more options, containing less used pages. It largely depends on the size of the website.

Red routes are the main tasks or objectives that users want to complete. They will change based on the type of organization that makes and the type of users that use the product. Not only should you keep in mind the tasks that users want to accomplish but also the pathway they need to get through to do so. A red route matrix is a good way to visually show how often or how critical individual red routes are.

Buttons and links help website and app designers guide users from page to page, leading them through the site. Buttons can be designed a number of ways, but are usually a different color than the background and circle or oval shape. Buttons can be personalized further to give them a unique feel to make the website design more personalized for the brand.

Vigorous Visuals

A font is the design or a consistent way that letters in words are written. The critical effects of the type of font that content is written in are: the readability of it, the tone and character of it, the mood or emotion of it, the personality, and the branding.  Picking specific fonts will build certain expectations, so pick one that matches your tone and your (or your businesses) personality while still being easy to read by those with reading disabilities. Keep the font size nice and large both on desktops and mobiles for those with visual disabilities.

Use images to reinforce facts, topics, and other information. Images include cartoons, graphics, graphs, and photographs (yes, stock images too). Since most people are visual learners, use beautiful yet relevant images to reinforce ideas of the text. It is best to use/make your own to avoid copyright and make your site unique. Whatever images you use should be large and clear without being garish or overwhelming. If possible images, particularly cartoons and graphics should be flatter rather than 3D; this makes the image smoother and more a part of the overall design.

Be consistent with common placements of common UI elements. There are user interface (UI) elements that have widely accepted and expected placements and setups in websites and apps. For example, most websites that have profiles have the login/logout on the top left of the site, and most sites have their logo and/or name on the top left of the site. Since this means that users have known expectations about common UI elements, this is helpful for navigation. Set up websites using common placements for elements and users will find them quicker and more naturally (you won’t have to guide them as much).

Plain Language Content

The next element of usability for websites is whether it can be easily read. Plain Language is content that is written to ensure that the reader can easily scan a document,  understand its main points, find specific details quickly, and use the document as intended. This is critical for technical writers, bloggers, and other content creators.

Titles of pages should be accurately descriptive of what the page is for and what the content contains. Make sure that they are easy to find, read, and understand, keeping the rules about font types and size and colors in mind.

Headings help users find specific subtopics within a topic. They are usually designated by number (heading 1, heading 2, etc.). Heading 1 is for main topics or whatever the highest level of organization is other than the title. Heading 2 is for the second level of organization, usually subtopics. The different levels of headers are denoted by change of size (the first level is the biggest, the second is the second biggest, etc.) and sometimes different colors, shades of a color, or fonts.

Try to keep content written at or below a 6th grade reading level. This reduces discrimination of those with reading disabilities or those whose first language is not the one your are writing in. When possible, use second person in writing instructions and manuals. Use ‘you’ and avoid using words like ‘the user’ or ‘they’ when addressing your primary audience. This also makes your writing more friendly to your readers. 

Use bulleted and numbered lists to organize lists of information. Keep the indent of these lists consistent to help guide your reader through your document. Only use numbered lists when there is a reason to do so, like when the information is presented chronologically or steps of a process need to be done in a specific order.

Mobile Friendly

A newer feature of phones, tablets, and other devices is dark mode. Dark mode inverts colors of white background and black text so that the background is black and the text is white. Make sure your site is dark mode-friendly by making sure the main colors of titles, headings, menus, and logos are still easily read on a black background.

Above all, make sure that websites are still easy to use by users on different devices. Nothing irritates users than buttons that are covered by text or images that overlap text content. WordPress allows web designers to see what their website looks like on different devices and different sizes. Use this! Mobile ecommerce has already overtaken desktops in online shopping. 

Summary

Usability is the ability to operate something the way it was intended easily, safely, and without much instruction or other help. All websites should be usable by both consumers and their owners to provide the best experience possible (and, hopefully, be very profitable for both parties). To do this, the elements of websites need to be findable and accessible to consumers. The 4 main elements of good usability for websites are:

• Neat Navigation,
• Verifiable Visuals,
• Plain Language Content,
• Mobile friendly.