Written by:2009/07/21 09:05 AM
A Post By Bonnie Landau of LandauDesign
Usability on the web is such a big concept it has become its own industry. And yet it is the most-often ignored piece of a web design project. It takes less than 10 seconds for a user to be confused and frustrated by an unusable site, and they will quickly bounce right out of there. Use the following list as a way to determine if your site passes most-seen usability blunders.
When you designed the organization of your content and created your menu labels, were you thinking about your users? Is your site designed the way your company is structured, or is your site designed the way your customers see you? One of the biggest mistakes companies make is designing from the inside out – so your customers are lost because they don’t use the same terminology you do. Ask your customers how they refer to your products, services or how they see your company org chart. That is how you should organize your navigation.
People love colour, there is no question about that, but are you using neon colours on your site? Red, green, blue, hot pink – these are colours that literally hurt peoples’ eyes when they try to gaze upon them. If you’re using them in broad backgrounds – stop! If you’re using them in text links or small headings, you really need to reconsider. Readability is not just about contrast and colour. Certain colours effect people’s eyes, and they’re going to jump site if they have to squint to read your content.
Consistent link colours is key to intuitive navigating. On some sites the primary nav is one colour, the sidebar nav another and the in-text link another, and then because they think it looks cool they change the colour scheme on a different page. While the primary navigation may look different than the links in the body of your articles, there should be a colour correlation. For example, the background of your navigation might be blue with gray links, and so your in-content links would be blue with gray rollovers. Then users associate the colour blue with live links on the site. Use CSS to ensure the colouring of your links, hovers and visited links are consistent throughout the site.
People do not read online. I repeat, people don’t read online – they scan. Don’t believe me? Check out How Little do Users Read? <http://www.useit.com/alertbox/percent-text-read.html> by Jakob Nielsen. If you want users to get what you’re saying, you have to break up that text! Chunk up your information to make it easier to scan. Add the following elements to your pages so users will quickly find what is most important to them:
- More important points at the top of the page (people scan more as the move down the page)
- Short paragraphs
- Bulleted lists wherever possible
- Hyperlinks within paragraphs to emphasize points
- Use colours, lines and backgrounds to further chunk up the text
One of the amazing things about the web is how customizable it is for all of us. So why control the font size on your pages? If your CSS specifies your font in points, this does not give people the ability to change the size to their liking. Individuals with high-resolution monitors will end up with really tiny fonts, and they won’t be able to enlarge it. People who have a hard time seeing won’t stick around either. Build in flexibility so those who want to can customize their experience.
Many sites bury the contact link way deep in the footer in a tiny little font. Why hide it? Putting the contact link in an obscure place is not only annoying to users, it screams lack of customer service. And when the user finally finds that contact page, sometimes all they see is a contact form with fields to fill out. No address, no phone number, not even an email address revealed. Customers want to connect with you, and when you make it really hard they aren’t going to stick around for the effort. Give them a page that is honest and real. And for heaven’s sake, lift that link to the top of the page so people will find it easily.
Do you have content in PDF or other document format? Do you link directly to it? Do you make the user aware that they are about to download the file? Many sites simply put a link without an icon or even a “(PDF)” label so the user knows the link they are about to click on will download a file to their computer. Let the user know what is about to happen so they don’t get surprised and wonder, “Is that a safe file I just downloaded?”
Auto-play of video and audio has been shown to be one of the premium annoyances of web users; Especially if you don’t give them a way to turn it off. Better to let them make the choice to turn it on, or use something so short and sweet it turns itself off before they get annoyed.
Dead links are a pet peeve among those surfing the web. There is no greater disappointment than thinking you found just what you’re looking for, click, and oops, it’s not there anymore. Check your site every month to make sure your links are alive and well. Be diligent in providing a well-maintained site.
Early on in the world of the web people created these “under construction” pages with cute little animated gifts of construction workers. People no longer care if you’re working on it, they just want it. If it’s under construction, keep it under wraps. Like dead links, users suffer a moment of disappointment when they think they’ve found their source, only to find it’s an empty page. Better to leave it off until it’s done rather than raise their expectations.
Believe it or not, there are people who view web pages without seeing the photos. This could include people who cannot see, people who view with photos turned off because they have slow Internet connections or people using old or alternative browsers that don’t display images. Make sure to put ALT tags on every one of your images so the user knows what should be there when the photo isn’t. It’s a courtesy to individuals with disabilities, and good practice when it comes to web coding. It also helps you with indexing in the search engines.
There are conventions in the world of web design – stick to them! Users have a certain expectation of functionality and labelling, and when you go out on a limb in an effort to be “unique”, you will annoy them. Don’t use labels that are not part of the nomenclature. For example, I had a client who hated the word “home” and instead wanted to use “entrance” or “doorway”. Users are not going to know what this means. Also, your logo or company name should appear somewhere in the header, and it should be a link back to your home page. Do the expected so users don’t get frustrated by the unexpected.
Probably the biggest oversight in any web launch project is not asking real users their opinion. Ideally they should be brought in during the initial design phase, but at the very least they should be brought in before you launch. It does not take a lot of effort to ask a half dozen people what is or is not intuitive about your site. You may find some excellent suggestions, or you may be relieved to get a strong positive reaction and know your site is on the right track.
If you have one, you need to throw it in the water! Unless you’re an entertainment company whose job it is to present entertainment, splash screens are more annoyance than help. Some people say they want to do a great animation that “introduces” their company. Well fine, but wrap it in your navigation so those who don’t want to watch can quickly escape. People come to your site because they want information, and having to move through a splash screen is like having to wait at a red light on your way to a great movie. Even if you have a skip button, you just caused an interruption, and your user will venture forth with a grain of irritation, or perhaps leave you all together.
Bonnie Landau, from Landau Design, is a web designer and usability expert. She has been designing and developing web sites and custom web-based applications for over 12 years. Check out her blog for some great posts. She can be reached at bonnie@LandauDesign.com.
0 comment(s) so far...
Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.
The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.
Subscribe to The Brave Programmer by Email
Sign up with Disqus to enjoy a surprise box of features