Blog / Usability for Websites: An Overview and Cheatsheet
Usability refers to the quality of a user’s experience when interacting with products or systems, including websites, software, devices, or applications. Usability is about effectiveness, efficiency, and the overall satisfaction of the user.
Table of Contents
- How Do We Talk About Usability?
- Why Is Usability Important?
- User Facts
- Your Role in Friendly, Usable Sites
- 8 Critical User Expectations
- Elements That Make Websites Useful
- 7 Website Conventions to Use
- Don’t Forget About Content
- So, What Are Usability Best Practices?
How Do We Talk About Usability?
Let’s start with the terms that often associated with Website Usability: UI and UX. UX is user experience. UI is user interface.
UX is an analytical term that is more technical in nature. It is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and logical interaction between the customer and product. UX is responsible for being hands-on with the process of research, development, content, and AB testing to achieve quality results.
User Interface or UI is responsible for the transference of a product’s development research, content, and layout into an attractive, guiding, and responsive experience for users. It’s like information visualization.
UI is what guides the user through a products’ interface via interactive elements and across all platforms. UI elements include input controls (buttons, text fields, drop down lists, date fields), navigational components (bread crumbs, search fields, pagination, icons), informational components (tool tips, icons, progress bars, message boxes), and containers such as accordions.
Why Is Usability Important?
Because of users.
Take a look at Jeff Bezos, Founder & CEO of Amazon, thinks:
“We see our customers as invited guests to a party, and we are the hosts. It’s our job every day to make every important aspect of the customer experience a little bit better.”
Understanding general facts about users helps designers and developers create friendly, usable sites. In general:
- Users are speed demons and want information now.
- Users are goal oriented.
- Today’s users have high expectations for usability because the “big” websites such as Amazon, Overstock, Ebay, Priceline, or even Grouponre are designed to be highly usable.
Your Role in Friendly, Usable Sites
Although you may have the most beautiful website in the whole wide world, if users can’t figure out what it is you sell or how to get to the information they want, your company did not do its job. If you want to ensure better website usability, think like a user and remember:
- Empathy is key. We are all web users after all.
- Your website is a form of customer service, and it should be as friendly and helpful as an in-store experience.
- To help users accomplish their goals, so that they may help you accomplish yours.
- Your website isn’t the most important thing in your users’ lives; users want to accomplish their goals and move on.
8 Critical User Expectations
1. Create an Easy Way for Your Users to Contact You
- Nothing is more frustrating than not being able to contact a company about a purchase, more information, or setting up an appointment. Always provide details and various methods of contact and have your contact information available and visible on your site.
2. How Much Does It Cost?
- Users conduct online research about the products and services they want before they make a purchase or sign any agreement. Don’t hide prices. Put them up front in order to get rid of financial anxiety.
3. Responsive & Mobile Readiness
- In 2016, 59% of mobile Internet users went online using either their mobile device or phone. Users want fully responsive website design. 57% of users say they won’t recommend a business with a poorly-designed mobile site.
4. Fast Website Speed
- A website that loads fast is imperative. If you already have a responsive website, but your website loads at slow speeds, users are statistically more likely to leave for content that’s provided faster. Human attention spans have decreased from 12 seconds in 2000 to 8 seconds in 2013.
- It’s worth mentioning that Plug Ins used by many third party sources, such as Word Press, Wix, and others cause sites to load very slowly. Be aware of loading times.
5. Brand Oriented Imagery (Not Stock Imagery)
- Users expect brand-oriented imagery. They want imagery to tell the brand story. We live in a visual society, and we remember images seen over text read almost 4 to 1. That means 80% of what we see and 20% of what we read is actually retained.
- Futhermore the imagery must be relevant. Why show a picture of a city, if what your selling is horserides?
6. Website & Online Security
- Today, users expect (and demand) website security, and more and more sites are implementing site security. In fact, the use of Secured Socket Layers (SSLs) is continuing to grow by 48% year after year.
- Why is this important? SSL (Secure Sockets Layer) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all data passed between the web server and browsers remain private and integral. SSL is an industry standard and is used by millions of websites in the protection of their online transactions with their customers.
- Keeps data secure between servers
- Increases your Google Rankings
- Builds/Enhances customer trust
- Improves conversion rates
- Google currently provides higher search engine placements to websites with SSL certificates.
7. Efficient Website Layout
- Users expect website layouts to be efficient. Users want to get to the content quickly and efficiently without barriers. Consider the three click rule where users find their way to desired info within three clicks.
8. Professional Website Design
- Users expect good website design. This isn’t 1993 when having a website (no matter how ugly or poorly designed) put you at the forefront of the war against the competition. This is 2018, and the total number of websites is at one billion. Compete by being smart.
Elements That Make Websites Useful
- Meet your users where they are – phones, tablets, and desktops
- We use responsive design to ensure that websites are highly usable on various screen sizes. For example, websites can flex to format content for smaller screens.
- In 2018, be responsible. Be responsive.
- Don’t assume that mobile users are looking for different information from desktop users. The same information should be accessible on all device types.
Accessibility / ADA compliance
- Following accessibility guidelines ensures that users with various visual or other impairments can access your content.
- A low vision user may need to navigate to your contact page
- A blind user may need to check your product selections
- To reach a wider, yet often ignored, audience, use design and coding techniques to ensure that websites can be browsed by users with low vision or who need to use screen reader software
- For example, it is wise to use high contrast text with large fonts for website copy and to use alt text to describe images for screen reader software.
- Plus, Google gives a higher ranking to ADA compliant sites.
More about ADA compliance and web accessibility
- Because it’s getting real: ADA Website Compliance
- ADA Compliance: Stay within the Law
- Writing content for visually-impaired users and ADA compliance
- Using a screen reader to test your website’s accessibility
Use website conventions
- Users come to your site with pre-existing assumptions about how things should work – there are conventions they’ve subconsciously noticed while surfing other sites, shape how they try to use your site.
- Don’t reinvent the wheel
- Following standard conventions also helps users feel good when they can accomplish their goal in the way they expect
- For example, use obvious labels like “About” and “Products” for your navigation menu. Make your links and buttons stand out. Put layout elements in the places users expect.
7 Website Conventions to Use
1. Logo Placement
This is a big one when following website conventions. Logos should be placed highest up on the page and 99% of the time, placed on the left side of the page. Sometimes, it’s acceptable to place the logo top center, but when in doubt, align left. Now let’s talk size. Your logo is already in one of the most important spots on the page, so there is no need to make it bigger. The logo should also always link back to the homepage.
2. Main Navigation
Site navigation is an important website convention for users to find the information they are looking for. With that being said, main navigation should be placed along of the top of the page, either to the right of the logo or below the logo. Less is more. We suggest anywhere from 5-7 navigational elements in the first level of navigation and absolutely no more than three levels for sub navigation. This will prevent users from being overwhelmed with your content and help them find what they’re looking for more easily.
3. Content Hierarchy
Website conventions for website content is to create a content hierarchy. Usually, this means using H1, H2, H3 or paragraphs and bullets. Headings should be keyword-focused to aid with SEO and bring relevant visitors to your web pages through organic search.
4. Using a Grid
A grid system is a structure made up of a series of horizontal and vertical lines that intersect and are used to organize and arrange content and images. Not only does a grid system allow you to achieve consistency but it also creates flow and hierarchy on a page.
5. Link Styling
Link styling involves interior and exterior text links and buttons. Cross linking between pages and linking to other sources is a common practice but to differentiate link text from page content, you’ll want to use a different color for each. Page text is usually some shade of black, whereas link text should be a brighter color and, sometimes, bold or underlined. We typically recommend using the company’s primary or secondary color for links.
Think about your buttons. They should have some sort of background and hover effect where they change color when you go over them. Buttons should be used for more important calls to action where the user should Do This Now! On the other hand, link text can be used within paragraphs of information.
Colors should be determined in your company’s brand standards. Always follow your brand standards to improve brand awareness. But if your company does not have brand standards then we recommend using 2-3 colors and 1-3 neutrals (white, black, gray). Keep it simple to convey more. Always connect your branding on and off the web.
Don’t Forget About Content
We know that users don’t read, they scan. So, content should be brief and full of useful. Use bullets, tables, headings, links, buttons, and graphics to break your content into digestible pieces. Use “Next steps” buttons and links to direct your customer to the next action you want them to take, e.g., buy this, call us, take this survey. Use clear labels that describe what the button or link will do. Give users the content they need, in the place where they expect to find it. And, finally, never bait and switch.
So, What Are Usability Best Practices?
- Know your users, understand their goals, skills, preferences, and tendencies.
- Keep the interface simple — the best interfaces are almost invisible to the user
- Use clear language (remove any ambiguity or too much language); be precise and say what you need to say.
- Create consistency and use common UI elements (e.g., all calls to action are blue; all inside page links are red; etc.) Just use common elements that will make a user feel more comfortable surfing the site.
- Be purposeful in page layout — structure the page based on importance and consider spatial relationships.
- Strategically use color and texture to your advantage (to direct or redirect attention to important items).
- Use typography to create hierarchy and clarity (H1, H2, H3, etc.).
- Make sure the site communicates what’s happening (use breadcrumbs for site location; use actions, changing in state (roll-overs or alerts saying you will be moving off-site), or error messages (please complete the form, may I help you find …, etc.).
- Reduce user burden by using auto complete forms (which is especially useful in product requests)
Usability is about serving your customer online. To gain more traffic over your competitors, make your site usable over “cool”. Remember, Google ranks well designed and thought out sites using certain protocols such as ADA compliance and SSL higher than non-compliant sites. Plus, organic SEO helps maintain site ranking.
Is your online presence highly usable? We offer usability reviews and usability-aware design services. Let’s talk about how we can help.