We have already mentioned the importance of usability in website development. Usability defines certain principles according to which the site has to be laid out, structured, and navigated. It’s how convenient and easy the website appears to a visitor.
Unfortunately, many websites may not be considered usable as they turn off a lot of potential customers just because it’s hard to find a menu or a product price list, or to navigate through different sections. These seemingly insignificant flaws sometimes turn out to be really critical, especially for small businesses, and have no right to remain unfixed. It’s great if you have worked hard on functionality, but what’s the use of it if no one will like to work with the site because it’s inconvenient or unattractive? Any web project should be optimized for search engines but also simple to navigate, clear, and easy to use.
The following tips will help you test your site for usability. It’s very important that you use a smart usability approach in developing your website when creating the technical requirements.
Content
I believe that work on any project starts with content. Content defines a website structure, and the structure defines the way the site will be navigated. Clear and simple navigation requires certain graphical and technical solutions. Content always shows the most efficient path to building a project.
First, put all your content on paper in a clear and logical sequence and create a clear logical structure, like you are building a house. If this is an online store, it’s pretty easy to understand what comes first and what follows. On every page of your site visitors have to be absolutely sure about three things: where they are, where they’ve come from, and where they can go next. Your customers have to be one click away from the page where they either find the information they need or understand what they have to do to get to this information.
You need to think like a first time visitor. For example, if your products are soaps, body wash gels, as well as candles, and you believe that soaps is one section and candles and gels are another one, don’t show your visitors candles first on a page the link to which was named “body wash gels”. Don’t ever be confusing.
One of many common mistakes is placing as much information as you possibly can on one page. The maximum number of clicks to scroll down the page containing business information should not exceed three. Ideally, your visitor shouldn’t be clicking more than once to get to all important information in one section. If all information you wanted to give your visitor doesn’t meet this requirement, you either have to split it into smaller blocks and organize subsections under the main menu, or rewrite the block so they would only have necessary information. Ideally, all your content has to be organized in different sections according to the logic of the content structure. If different sections of your website have a cross-related content, there should be links to that related content.
It’s a good practice to put additional links to documents outside of your project. Say, if you are selling a book about Beethoven it will be good to have a link to related documents, like an official site of Beethoven fans or an article in Wikipedia. This paragraph is a perfect illustration to this advice. Help your visitors find the important information about what they are looking for, and they will appreciate it. Don’t be afraid that your visitors won’t come back. If they liked your product and want to do business with you, as soon as they are done reading about Beethoven they will immediately get back and buy your book. Link! But be moderate; don’t let your visitors drown in the ocean of links. Two or three related links per page is enough.
One last thing about the links to additional resources. You don’t have to do it. Do it if you like it but be consistent. If you did it on one page of your website, put it as a rule for the whole project. If you don’t want to link, just don’t.
When it comes to articles, the requirements change. An article may take several scroll-down clicks, but if it’s too long (more than five Word pages), it will make sense to allow a visitor to download it in Word, PDF, or an archive (ZIP, RAR) or at least to break it into blocks and publish smaller blocks in separate HTML files. It will be also good for search engine optimization, because some of search engines like smaller contents.
However, the size of a page, especially when it comes to an index page, should not be too small. Experts say that the minimum content of the title page of your website has to have at least 250 words (It’s just about the size of the previous three paragraphs.) It’s not only important for the visitor’s convenience, but also for search engines indexing.
Content Appearance
The common rule you have to follow is to make it clear to your visitors what is going on, where they are headed, and how to operate the content. It’s better if all links of your site are underlined; however, for a change, you may use other ways to distinguish a hyperlink from a simple text, for example, make it a different color. What’s important is to be consistent and make all links on your website look the same. It’s a bad practice to let all your links to be underlined and all of a sudden to make non-linked text underlined, too. Or make a button-like image which doesn’t have a link to it. You should not allow any type of unclear signals on your website. In other words, don’t mislead your customers because being mislead once, they may get frustrated and start expecting the site itself to be misleading. This is not the image you expect them to have about your business.
Test your site for colors very carefully. Remember that your website is not only being viewed, but it’s also being read. Make it as convenient for the readers as possible: choose contrast colors for background and text, a font size that is big enough. The main colors of the site are very important. It’s easier to read dark text on a light background, so if you have a lot of content, choose a dark-on-light color scheme. Some projects with little text, especially artistic ones, such as photo portfolios, look really great on a dark background. Then you may use light font colors. But still remember about the contrast.
Bright colors are great, and it’s very good if your project is bright. However, bright colors are never either dark or light enough to make a good background. If you want a lot of color on your website, make sure that it’s either a background for a light color field with dark text, or just use those bright colors as elements in the design of your project. Remember that eyes get tired easily if there are a lot of bright colors around the text, so if your project has lots of texts, try to limit bright spots by using them in small design elements.
Navigation
Navigation is very important, because it is mostly responsible for how user-friendly you site is. According to surveys, up to 95% dissatisfied website visitors were dissatisfied with inadequate navigation.
However you decide to place your menu – horizontally or vertically, – the most important thing is to keep it in the same spot on every page of your site, and keep its look the same. Your visitors have to know where they have come from, where they are, and how they may get back. Your logo, the name of your company, or the web project has to link to the main page from every document of the website except the main page itself. All the links leading to the page you are currently on have to be disabled on this page, It means that if you are currently in the Website Design section, you won’t be able to click on the menu item that leads to the Website Design section. Go to the top of this page and try, you will see what I am talking about.
Don’t be afraid of creating multilevel menus. It’s better to break the content into smaller blocks and create submenus instead of filling your pages with tons of information. If you have a long list of products in the store matching particular search criteria, it would be very nice to allow customers to choose between seeing all items on one page or dividing the list into fractions, for example, 10, 20, or 50 items per page, and design a search result page according to this module.
For online stores, a very good practice is to show some important information about the product like size and price in the search result, and then to allow visitors to view a page with a bigger image and a full description of the product. When it comes to a complicated or multilevel structure of your content, it’s very important to have a comprehensive system of links. When you lead a customer more than two steps deep from the first page, they may easily forget where they came from and how to return there.
Besides a classic visual highlighting of a menu item to show the whole tree of a menu structure which is visible on each page of a website, there is a great solution that does not require an appearance of the menu tree: a path. It’s a line somewhere on the top of a page which contains the whole path your customer has made from the index page. For example, she is now in the section Women’s Apparel, subsection Tops, another subsection Cotton on a page showing a White Short Sleeve T-shirt. The path will look this way: Women’s Apparel: Tops: Cotton: White Short Sleeve T-shirt. All items in the path have to link to their parent sections, so the customer is always one click away from every section she passed on the way to the document she’s looking at, and one look away from understanding where she is, how she got there, and how she can get back.
It’s very important to inform your visitors if the link leads to the document in a format different from HTML. It is courteous to give them a choice of downloading a Word document, PDF, or an archive (ZIP, RAR) and make sure that you let them know it before they click the link. It’s especially important if a link will force launching an application. A lot of users may be discouraged by the fact that you are forcing them to do what they didn’t agree to. This may be a big turn off. A good addition to this type of warning may be a size of a document which is being downloaded or type of application to be launched.
Here is the example:
Usability and Navigation: How to Make it Work. Author: Natasha Chernyavskaya. © Artographica.com. Download or open in PDF, 31,1K (if opened will launch Adobe Acrobat) | Download in ZIP archive, 26,2K.
I personally don’t like when a link opens in a new window, no matter if it’s an internal or an external link. But no matter why you open links in a new window, warn your visitors about it.
To Splash or Not to Splash?
Some website owners like splash (intro) pages. Some are so obsessed with them they insist on those intros to be first pages of their websites no matter what. The worst scenario is a Flash or a movie that lets a visitor nothing to do but wait till it ends. If you have a splash like that, you may say good-buy to up to 98% of your visitors (and potential buyers!).
A moderate kind of splash is a Flash movie with a link Skip Intro that leads to the actual first page of the website. It’s better; however, it will cause loosing many customers as well. Research shows that no matter what your intro page looks like or says, up to 95% visitors will leave without clicking the Skip button, or finishing watching the movie, or reading the intro text if it doesn’t contain any valuable information. Why having this type of intro to your website if your visitors hit the Skip button anyway?
Some website owners believe that it’s cool to have this type of an Intro page. But, sincerely, what’s the use of it? Most of these splashes are just sets of slogans like Our Company is the Best! Deal With Us and You Will Win! If your intro doesn’t give any specific information about your company like what kinds of services you provide, how your clients may benefit from them, how much they cost, etc, your intro is completely useless. Besides, all this information has to be present on the index page of your site in a text format anyway. So, why make your visitors read it twice?
Some of splash lovers also don’t understand one very important thing: search engines can’t read text you have coded inside your flash movies! Their job is to go to the index page of your website. So, how do they deal with indexing of your first page? They check it, find nothing, and move to your competitor’s site! Do you want the delay in putting your website in the search results in the search engines? The splash is the way to go!
Now, about active content such as Flash movies with sound and any type of motion. It’s a bad idea to make your visitors listen to something unless they decide to do so. Imagine you are relaxed at home, listening to the music you like, navigating the net, looking for some products to buy or services to order. You click on a website’s link in a search engine thinking that it may be what you are looking for. Suddenly, you hear in your headphones something you really don’t want to hear – music or voice, it doesn’t matter. Will you be amazed by an incredible technology the website used to talk to you? Or will you start looking for a switch to turn off the sound of the movie to be able to read the site peacefully? The easiest way for you to restore peace is closing the window and forgetting about that website forever.
If you want to put some movie, interview, or show on your website, you may do so. But it should not start automatically as soon as visitors open the page. You may offer them to first view or download a demo. You have to provide visitors with the ability to turn it off at any time, adjust the volume, or play it again.
(This article was written in 2007, but strangely enough, we still come across websites and applications that have usability issues.)