Web Usability: A beginners guide and refresher course

In the last 20 years we have learned a lot about web user interface design through research, study, and just using the web.

As a basic definition, web usability is the process of making websites & web applications easier and more efficient for the user to use.

In this post I am mainly going to be talking about desktop web usability. Many of the principles that I talk about might carry over to mobile interface design however many of them will not.

Web Typography

I can’t even begin to cover everything you need to know about web typography in this post. Entire grad courses, books, and research studies exist on this industry. In addition itt has been an industry in and of itself for centuries.

Web typography is a new world that we are still learning a lot about compared to the world of print. Through basic feedback, research and user testing we as an industry have learned so much more about what works and what doesn’t in the world of web typography.

Web typography contrast & color

A rule of thumb when selecting text and background color for your site is never use pure black and white within your design. Try to use a slightly darker shade of white and a lighter shade of black if you are going to use black and white. In general it is a good idea to use a background color that is much duller than your text color. This will prevent the user from being distracted by the background color and allow them to more easily focus on the text.

Letter spacing

Most fonts are shipped with a recommended spacing and in general should not be tampered with. Lots of websites try to adjust this parameter and it ends up coming out not so great.

Get off MY case

Case matters, big time. Develop a case standard for your site and stick to it. In general it is a good idea to stick to standard sentence case for the body of your text. Avoid CAPS at all costs, it MAKES YOU LOOK ANGRY. Try to avoid any urges you might have to do anything crazy like l33t sPeaK. That is of course your website is an underground warez community.

Form labels

ISO 9241 section 17 recommends capitalizing the first word of the label and no other letters thereafter. Basically the same as you would in an actual sentence.

There are of course a number of studies that recommend their own group of standards. This study from 2005 which talks exactly about form labels basically says you can use several different case standards, just make sure it is consistent. You will find that consistency is a theme in web usability, and usability in general. 

Smashing magazine also did an epicly epic guide in 2011 on form usability.

Heading case, size and readability

This is another topic that is greatly debated amongst web designers. A study by Website Criteria suggests that using initial case (Capitalizing only the first word of the heading) is the best way to go. Their research says that initial case makes it much easier for users to scan when reading and is less likely to disrupt a users reading.

Again, consistency is the name of the game. Heading case is one area that I have personally had a very hard time with sticking to myself. In the early days of my blogging I used to capitalize each word of my heading. A few months ago I switched to initial case (but find myself slipping back and forgetting all the time!)

Choosing a different style font for your headings is perfectly acceptable. It is OK to get a little crazy with your headings, but always keep readability in mind. In general keep your sites to 2 fonts, maybe 3 total but no more than 3. It should go without saying that the heading should be larger than the body text. Here is one great Stack Overflow thread about heading size standards.

 

Headings should be straightforward and easy to read. They should be representative of the body of content below it. Headings help users that are on your site and just want to skim (a great portion), skim more easily.

Font Size

This is another topic of great debate amongst web designers. 10 years ago web designers used 10-14px font for design. Now it is much more like 14-16px (or more) is the new suggested average for body text in web typography. This number always varies depending on the font being used. Some fonts are enormous at 16px others are quite small at that size. Sure, there are exceptions to the rule and you will always have people that will argue this topic. Take a look at what is out there and decide for yourself.

Hyperlinks

I know this is an SEO blog, so please forget everything you’ve learned about anchor text for just a minute in terms of SEO.

Links primarily exist on the world wide web for 2 reasons:

1. to help users navigate your site internally
2. to reference something your website states on another site

 

Hyperlink color & style

We’ve come a long way since blue underlined links & purple visited links as a standard. While these colors might be a little stale when it comes to modern design, it definitely is a standard. Whatever the case may be, make sure you differentiate the design of your links and visited links. In addition, try to avoid using the underline HTML tag in normal body text, this might confuse users into thinking it is a link.

Users should never have to guess where a link is or scan through a page in order to find a link.

Avoid using any kind of “hover effects” including using a different color when you mouse over the link. This makes your page appear much more cluttered and confusing.

Anchortext wording and placement

Try to be as specific as possible with your anchor text. Avoid anchoring your links with things like:

• click here
• download now
• check it out

While there are certain cases such as buttons and labels where you cannot avoid this, in general it is a good idea to use descriptive anchor text.

Hyperlink titles: the forgotten parameter

Link titles are a magnificent way to help your user figure out where a link is pointing them. Sure, they can try to decipher a URL at the bottom of a browser, but a link with a friendly title will add a tool-tip like popup for most browsers (hover over this link).

Domains & permalink structure

It is a good idea to find a domain name that is the same name of your company. Sometimes this is not available, so choose some sort of variation or ad “company” or something else to the end of it. Don’t use “SEO friendly” (they aren’t even friendly anymore) domains such as “your-city-industry.com” it is just tacky.

Permalink structure

A word on permalinks. There are times when all a user has is a URL, so you want to make sure that your permalink accurately reflects the page it is assigned to. Avoid using a permalink structure such as:

https://www.example.com/products/455564id.html

Instead, use more descriptive permalinks such as:

https://www.example.com/products/green-denim-shorts.html

Choosing a domain name

For most people a .com will do just fine. There are certain situations where another domain will not only suffice, but can actually inhibit user adoption if not implemented.

Example A: A new school opens and develops a website. Instead of opting for a .edu domain they went for a .net. A school with a non-.edu address can appear extremely uncredible to potential students and parents and can have a negative impact on the school in many different ways.

Example B: A new company develops a website and chooses a .org domain because the .com is not available. To many users a .org domain is reserved for special organizations & non-profits. This can send the wrong message to many users and leave a bad taste in their mouth.

Always do your due diligence when choosing a domain name. In early 2014 100’s of new domain extensions were approved. While many of these new extensions may appear to be created for your industry, we still do not know the impact that they will have.

Again, be weary of these new domain extensions. Choosing a domain name for many businesses is a permanent decision.

If you must, check out a full list of new domain extensions.

Home, about us & contact pages

The web has come far in 25 years, but 2 staples that have stayed the same since the beginning are the home, contact and about us pages. Hiding these pages by using trendy & awkward labeling or odd placement can cause a ton of confusion for your users. In other words, if it ain’t broke, don’t fix it.

Always have a clear path to the “about your company” and “contact” pages. Hiding these pages can send the wrong message to your users and cause them to become frustrated or distrusting of your company.

As for the home button, it should always be there. If using a top horizontal menu, I would advise you to put it on the left.

Furthermore a lot of websites have been using the “logo” as the “home” button. While I do think this is being adopted by many more users, I would not recommend ditching the home button for the logo just yet. Linking the website logo to the homepage might be a helpful tool for some users, but it should never be used as a substitute for a “home” button.

Menu and navigation

Your top navigation menu should contain links to the most important and most popular pages on your site. They should be labeled with standard wording used throughout the web such as “Home, About Us, Products, and “Contact.” The menu should look the same throughout the entire site, and should not change depending on what page you are on.

Don’t label your menu “A Quirky Design Studio” when you really should just say “About Us” or “Company.” Feel free to get crazy on the page itself with copy, design and photography, but keep your labels straightforward.

Take a look at these 2 menus. One of them makes sense and is easy to navigate, the other one is very confusing and labeled with confusing wording.

Mega-menus have been in-use for a very long time now. Some research says that these mega-menus work well for site navigation. Amazon has been using these mega-menus as long as I can remember, and they are doing something right.

Another recent trend a lot of web designers are using is the “pop out” menu. This gives the website a much cleaner and “full screen” type of look than the traditional horizontal menu.

Medium.com is one example of a website that uses a slide-out sidebar navigation menu. They use their logo as the primary point of navigation, which pops out a section on the left hand side of the page when activated.

 

While medium.com is known for being very “clean” and has been praised by UI folks everywhere, my one complaint is the menu is a little hard to find. This could be repaired by using the new symbol for menu:

It is important that we continue to adopt these new standards as they become more widely adopted by users.

Some folks over at ux.stackexchange.com were kind enough to chime in with their thoughts about using this icon.  User ChelseD stated:

“Actually, my company recently did a bunch of field research, and the results were completely mixed, even across age and experience — most knew of the symbol, but most misinterpreted its meaning. We hypothesized this happens because of how the symbol is used across larger platforms such as Google Chrome and Facebook, i.e., it’s not always used to mean the same thing, which makes it confusing for a lot of people.”

Sitemaps

In addition to being a staple of search engine optimization, a sitemap is a staple of website usability. Sitemaps are a great way for users of your website to learn about the hierarchy of your pages.

XML Sitemaps might be great for SEO, but a user-friendly sitemap accessible to your users can help the browser who can’t find what they are looking for.

Breadcrumbs

A technology popularized by schema that is popping up a lot lately. This technology is not only great for search engine optimization but is a great browsing aid to your users as well.

Breadcrumbs should not distract the user from browsing nor should it dominate the page.

Site Speed

Site speed is another hot topic in the SEO industry. One of the main reasons why it is so hot, is because Google loves sites that have great usability. In 2009 Akamai concluded that almost 50% of all internet users expect websites to load in 2 seconds or less.

That statistic makes sense, as a web consumer one of my biggest frustrations is a website that takes too long to load. More often than not if I have to wait longer than a few seconds, I will leave the site – even if I want the product or service it is offering.

If you are running a WordPress CMS and are looking to speed up your site, I wrote a full guide on how to speed up your WordPress site.

Images

Use high quality and original images whenever possible. Try to avoid stock images on important pages.

Make sure your photos serve a purpose, don’t just use a photo for decoration.

The Square.com homepage is an excellent example of using imagery to serve a functional purpose.

One click glance at this image and you can get an idea of what this company does.

Alt tags and image title tags

Both of these parameters are not only great for SEO but are very helpful for users as well. In addition to just generally being helpful, to disabled users having an image title in place and means all the difference in the world.

Like menus and headings, use descriptive text to describe what the image is. Try to avoid general wording such as “image 2” and always avoid “SEO title tags” such as “SEO Blog” and such.

Image borders

In some cases adding a border to an image will improve the sites overall appearance. For instance an image with a white background placed on a site with a white background can blend in with the text. This can cause the text and the image to look “jumbled.” Simply adding  a border to some of your images will help your site look more uniformed and clean.

Final thoughts

There is fine line between web usability and complete obsession / insanity. For example, I could have spent a full week prepping this post to publish, getting everything tweaked just exactly right, fine tuning every margin within the post, etc. On the other hand, I wanted to get this post published. I have a full time job and a lot of other things I want to write about so it is important that I spent my time wisely.

I’ve found that the more I read and learn about usability the more I find myself integrating “best practices” within everything I do, rather than having to go back and fix things at a later date.

Although this post was lengthy, it doesn’t even begin to touch on everything you need to know about web usability. There are hundreds of books, guides, and eBooks written about typography alone. There were a ton of more topics on usability that I wanted to cover in this post but I really wanted it to be a beginners post that covers the basics.

Web Usability Resources

Nielsen Norman – top notch group of professionals in the usability niche. You don’t get any better than these guys.

Usability.gov – Government agency with a bunch of cool resources.

“Don’t Make Me Think” – Book by Steve Krug, (one of the industries most well known experts) all about web usability

Smashing Magazine – another great resource

UX.StackExchange.com – If you have a question about UX this is the place to go.

 

Download this Guide on PDF

If you would prefer to read this guide on good old fashioned PDF, you can download this guide here.

Enjoy!