Audio

Music and other audio elements are excellent features for a website. They can also annoy your users very quickly. I absolutely hate when I am surfing the net to find some loud audio automatically being played. The worst part of the experience is that I have to go out of my way to shut it off. Most users will not even bother to mute the audio, as exiting the webpage will do the same effect. Websites with audio can provide a wonderful experience for the users, but can easily provide the opposite effect.

Audio Usability Issues

Starting Audio Automatically

I know you might think you have some strong reasons for starting some audio automatically. But why not let the user choose to decide if they would like to hear it? What about YouTube, you might ask. That is completely fine because the user expects YouTube to play audio when they click the link to the video. Another difference is that YouTube does not play audio on their home page, but allows you to follow links to videos. If you have ads with video on your website, make sure they do not start automatically. Please never play audio as soon as the user arrives on your website.

Sound Levels

If you decide to place audio or music on your website, then you should consider some things first. I would expect that users are much more irritated with loud audio than silent audio. What I mean is the audio you embed should have the ability to be really loud, but the volume should be set on like 30%. How annoying are those sound clips that when you turn up your speakers to 100% you can barely hear it? Volume is not something you can standardize. Users will have their volume on different levels, but it is far better to error on the video starting too quiet as opposed to bursting their eardrums. If they cannot hear it, they can just turn it up.

Hearing Impaired Users

There are people in the world that will never hear the sound of your website. If you have an important video for your website, you might want to consider writing the words out for them. Then, you can provide a link to the written text of the video. You might even want to create an option from them to turn on captions or subtitles. These users will be very thankful for you effort and will most likely tell their friends about your website.

While most websites do not include audio on their website, audio can benefit your users. It provides another unique way to connect with your users. However, you can easily commit some serious usability issues that would make users run away from your website and never look back. With audio, always think of it as being an opt-in strategy and not an opt-out process. Sometimes, we just do not feel like listening to the website. We just want to read the text and drink our coffee.

Visually Impaired

Most people have never heard of ADA compliance, but do you know you can be in serious trouble if your website is not ADA compliant. Your company could be buried in lawsuits at this very moment if visually impaired users cannot use your website. ADA stands for the Americans with Disabilities act. You might think this only applies to Americans, but think about how many people from the United States visit your website. However, it is the idea behind the ADA that is important not the actual legalities of it. Visually impaired people are neglected from many websites, but why not invite them to your page and increase your users? Have you actually thought about those people?

You might think that visually impaired people or people who are blind cannot use the web because it has a visual requirement. You couldn’t be further from the truth. I would actually bet money that I know someone who can read faster than you and she is blind. Take a break and search for “screen readers” or “JAWS”, better yet go to youtube.com and watch a video. I promise you that you will leave impressed.

I must clarify what I describe as visually impaired. This is not simply a classification of people who cannot see, but those that have defects in their ability to see. Color blind is another visual impairment. Have you looked at the contrast of your website? Take a screen shot of your website and open up some image software. Remove the colors from the screen shot. If you can see everything, you have at least tailored to those with color blindness.

What about those people that can see, but not very well. Developers and designer love to try to push work off on the browsers. What I mean is that you should not depend on people zooming in their browsers into your content. Try making your smallest font at least 12px and up to 16px. Now, use your browser and make the font size bigger. Did your website just break when you changed it to 20px? While I would not even tell you to try to support everything a browser can do to your website (we are only human), it is useful though to try to handle more than the average settings. Start thinking about all of the visual impairments and what those people really see when they visit your website.

Introduction

What is the point of a website if no one can use it? Usability is the study of how to make your website more useful to your users. Sadly, that definition does not emphasize the importance of usability on the web. Think about some of the best websites you know, Facebook, YouTube, Google, etc. With these sites, we often take all of their features that work fluently without any problems for granted. However, consider some of the worst websites that you have visited. Where is the navigation? What am I supposed to do on this form? I HATE popups! What evil person created this website? These might be some of the thoughts that come to your mind on websites with terrible usability.

Now, usability is not exactly the easiest thing in the world to teach. Why, you might ask? First, usability is difficult to define. User experience design, interaction design, etc all have similar definitions and cloud the field of usability. Granted, they all are slightly different in exactly how they approach situations and what elements they give the most focus. But, we will combine all of these ideas into one simplified term of usability.

It is not like a programming language where you can just put a certain hat on and code. No, usability is like a mindset that you use and cannot/should not turn off. You create your websites for users, right? You want people to love your website and your content. You can be the best writer in the world, but if you cannot build a site that is usable, you are wasting your time. A mind focused on usability should be as much a part of you as your right hand.

I will be showing you plenty of case examples where usability can be improved. Certainly, my attempt is to provide a robust overview to help you get into the mindset of a usability expert, but you must accept it. You will get frustrated with all of the extra work it takes to make a website more useful. You might even start questioning the point of going the “extra mile” for your website. I promise you that most of the time, the “extra mile” is worth it.

Usability is one of those things that people try to implement after building a website, which I guess is better than not investing in usability at all. However, usability should be involved in the entire development process. With all of the tangents and rambling to the side, let’s start building our mindset of usability on the web.

Navigation

One of the biggest mistakes that developers make is creating a navigational structure that has poor usability. If people love your content, they want to read more. How do they read more? They first have to use your navigation to get to the other content. Let’s face it, you enjoy having users visiting more pages and they enjoy reading great content.

Sometimes, you might have a massive amount of content and you want easy access to that content. So, creating a big navigation that holds all of these links is a good idea right? WRONG! What about nesting them in menus that the user can hover over? Well, that depends on how many levels you need. If you think you need more than one additional level, I would argue with you all day about why it is a terrible idea. I understand the need to reduce clicks for the user, but you should not create additional work for your user.

Navigation Failures

Hover Navigation

With only one additional level, there is nothing wrong with hover navigation. The user has a big target to get to additional links. Adding another level of navigation places the user on this “path” to find links, which becomes extremely frustrating. If I had a dollar for every time my wrist twitched out of a menu at the third level, well I might be on the beach somewhere.

If you have a good amount of related links, you should consider creating a landing page for that category of links. You can provide much more useful features on an entire page than you can by creating multiple levels in a hover navigation. Yes, it does create an additional click for the user. However, it also gives you a chance to tailor the links for the user. If I am searching for related content, odds are a link is not going to match exactly what I want. I would like to click a category that has organized the next set of links and highlights the best ones. Go to your favorite news website and you will see that none of them try to put all of the content in hover menus.

Usability navigation failure

Moving Navigation

Moving navigation is comprised of those awkward accordion navigations and those navigations that move when you hover over them. The accordion effectively confuses the user because when they click a “link”, they want to go to another page. Instead, the accordion just shows more links. The moving elements are those that when you hover over the link, content shifts around it to give the link focus or show more links. Basically, it is the same negative behavior as the accordion navigation. Stick with the traditional behavior of navigation. People like to point and click, not point follow, follow more, and then click. Remember, users should not have to work to read your content.

Hidden Navigation

Possibly the most neglected and the worst impact on your website is hidden navigation. Web developers have this curse of knowledge where they know exactly where everything is and how to use it. Breaking news… the users did not build the website and do not know how to use it. First time users should be so used to your navigation that it would like they have visited your website one hundred times before. Hidden navigation is not simply placing your navigation at the bottom of the website (this is fine for legal and contact information). It also occurs when you have your links surrounded by ads and other random content that makes them appear invisible. Ask a friend or stranger to navigate your website to make sure that it is intuitive and visible.

In my experience, we learn from the mistakes of others more than we learn from the success of others. Sure, you can look at all of the amazing websites with great features, but those features can easily become overwhelming. Also, you might try to implement them, but fail to consider a few small details and end up with the most useless feature on your website. Look at the failures of other websites and develop a mindset and not a checklist of how design your navigation. One of my favorite websites is Web Pages That Suck. Yes, the title is a little cruel, but honestly, those developers deserve it. The link has a list of navigation failures that I think you will find useful by seeing ideas that do not work.

Navigation is as old as the internet. People have become used to a consistent navigation structure. Navigation on top or on the left is very standard. Do not make your users struggle to navigate your website, as a happy user is a more visiting user.

Forms

HTML only allows us so many ways to provide features for our users, and thank goodness for that. Forms provide an excellent way to receive information from the user. Forms are also a great place to fail in terms of usability. Have you ever filled out a form to realize that it was either broken or just not working for some reason? Completely frustrating! It is almost like you were robbed of your time.

Form Basics

Form Submission

If all else fails, the form should submit their information and do something with it. They might have worked their tails off to fill out the information, but you better make it worth there time. When a user submits a form and receives a 404, I would bet some big money that you never see them again. If you have ever tried to submit your website to some web directories, you might have already punched a few holes in your computer because of their forms. Always, always, always, make the form work. Even if your user struggles and makes it through other obstacles of the form, they should be rewarded knowing that their information went somewhere.

Odd Elements

If you are using radio buttons, make sure they are connected. Do not allow your users to select yes and no or they will confuse themselves. Radio buttons are intended to be only one selected. Multi-select boxes are confusing for most users. “I can select more than one item in this box? How?” We might be some serious tech junkies, but our users probably are not. Also, it usually is not the best idea to create your own form elements using JavaScript. Again, users love consistency and feeling like they know how to do something. Always think about what elements you need to get the appropriate information from the user. Stick with the simplest elements that are the most common.

Visually Impaired

Have you ever heard of the label form input? If not, you have made your forms almost useless for anyone with visual impairments. Labels can be associated with a particular form element that tells the user what the form element wants. So, if you have a textfield that wants the user’s name, you can have a label that is set to the id of the textfield that says “Name”. The impaired user can march right through your form and provide you information. Try to craft your forms for all of your possible users.

Form Focus and Tabbing

Typically, browsers handle how to tab through forms and they do a great job most of the time. However, it is sometimes a good idea to focus the first form element when the page loads or at least be the first element tabbed into by the user. Browsers guess the tab order based on the order of the HTML. So, if you do some tricky HTML Forms with floating divs or something the browser might not create the appropriate tab index. Research the “tabindex” HTML attribute to reinforce the order you would like the user to move through the form.

Forms with great usability can make or break your website. Maybe not as important as navigation, forms are probably still in the top three important parts of your website. Requiring input from the user already requires them to do work, so you should try to make the work as easy as possible for them.