| Having poor website usability is like driving your car | | | | descriptive, and to the point. |
| without a map through an area that you've never | | | | Feedback on Location |
| visited before. Unless you have an incredible aptitude | | | | When creating a website, it is important to |
| for finding your way around, you're going to get lost. | | | | constantly provide feedback to the visitor regarding |
| In addition, the more that you drive around, the | | | | their current location. There are several ways to go |
| more frustrated you're going to become. The | | | | about doing this: |
| possibility that you'll never want to return to that | | | | - Use "breadcrumbs"; breadcrumbs provide a path for |
| area increases significantly as the frustration is | | | | the user to follow back to the starting/entry point of |
| compounded. The same holds true for a website that | | | | a website and are often displayed horizontally at the |
| possesses poor usability. Not only is the visitor going | | | | top of the content area on a web page |
| to have a difficult time finding their way around, but | | | | - Match the hyperlink text to the destination page's |
| they could become extremely frustrated and never | | | | heading |
| want to return to your website again. A lot of | | | | - Create URLs that relate to the users location on |
| websites have great usability - why settle for one | | | | the website |
| that induces headaches and forces the visitor to | | | | - Change the color, style, size, etc. of the currently |
| think too hard? | | | | active hyperlink |
| Shocking (but not surprising) usability statistics | | | | - Change the color of visited hyperlinks |
| According to Usability.gov (an official U.S. Government | | | | Flash Navigation: Proceed with Caution |
| Web site managed by the U.S. Department of Health | | | | Flash navigation should generally be avoided since it is |
| & Human Services): | | | | bad for search engine optimization. However, if you're |
| - Research by User Interface Engineering, Inc., shows | | | | going to use Flash navigation, then at least provide |
| that people cannot find the information they seek on | | | | text links in a visible location for those visitors still |
| a Web site about 60 percent of the time. | | | | using older computers and browsers which do not |
| - Studies by Forrester Research estimate that | | | | have Flash. |
| approximately 50 percent of potential sales are lost | | | | In addition, do not use Flash rollover effects that can |
| because users can't find information and that 40 | | | | confuse the visitors or make them wait for more |
| percent of users do not return to a site when their | | | | than 2 seconds. There is nothing more frustrating |
| first visit is a negative experience. | | | | than trying to navigate through a website with |
| - A study by Zona Research found that 62 percent | | | | rollover transitions that last for 5 or 10 seconds. |
| of Web shoppers give up looking for the item they | | | | Site maps |
| want to buy online. | | | | We're not talking about XML sitemaps for the search |
| - According to Elizabeth Millard, "The best sites we've | | | | engines. Although its not a bad idea to regularly |
| found are usable only 42 percent of the time." | | | | submit an XML site map to the search engines, an |
| Although statistics are not always 100% accurate, | | | | HTML site map should also be used as a navigational |
| these numbers illustrate the importance of having | | | | tool for visitors. Displayed in either a table of |
| strong website usability. Whether you sell a product | | | | contents or a simple index, a site map should list all of |
| online or are trying to build a readership base around | | | | the relevant hyperlinks of a website in an organized |
| your blogging website, usability should be your | | | | fashion. |
| number one priority. | | | | Be sure to indent secondary hyperlinks if they appear |
| The Many Parts to Website Navigation Usability | | | | under a primary navigational category, tertiary |
| Implementing a successful navigational system on | | | | hyperlinks if they appear under a secondary |
| your website is not a hard thing to do. However, a | | | | category, and so on and so forth. |
| few simple mistakes and your website usability will be | | | | Finally, make sure that your anchor text on hyperlinks |
| severely compromised. Compromised usability will lead | | | | are descriptive so that visitors will find exactly what |
| to higher bounce rates (visitors quickly exiting your | | | | they're expecting to find when they click on a |
| website without visiting any additional pages besides | | | | hyperlink. Site map anchor text should be longer than |
| the page that they arrived on (the landing page)), | | | | main navigational hyperlinks and is recommended in |
| fewer sales, and generally unhappy and confused | | | | the chance that some of the web pages listed in the |
| visitors. Avoiding navigational confusion is an | | | | site map have similar topics (and chances are they |
| extremely important part of website usability. | | | | will). |
| Without navigation, it would be difficult for visitors to | | | | The Dos |
| explore a website. There are many factors involved | | | | - the same navigational menu should appear on every |
| in creating successful, usable navigational menus. | | | | web page of your website |
| These include: | | | | - the main navigational menu should have a consistent |
| - Universal Navigation - navigation appears on every | | | | placement, preferably in the upper-left section of the |
| web page | | | | website (for vertical navigational menus) or directly |
| - Placement Consistency - navigation appears in the | | | | underneath the logo near the top of the page (for |
| same location on web pages | | | | horizontal navigational menus) |
| - The Importance of Text - text for navigation - | | | | - provide location-based feedback by using |
| good, images for navigation - bad | | | | breadcrumbs, matching the hyperlink text to the |
| - Feedback on Location - breadcrumbs, hyperlink | | | | destination page's heading, etc. |
| styles, colors, etc | | | | - provide a table of contents or simple index by |
| - Flash Navigation - a sensitive subject | | | | creating a site map listing all relevant links on the |
| - Site maps - hyperlink hierarchical outline of website | | | | website in an organized, hierarchical fashion |
| on one page | | | | - use descriptive keywords for the anchor text and |
| Universal Navigation | | | | page name so that visitors get what they expect |
| The simplest way to cut down on navigational | | | | when clicking on a hyperlink |
| confusion is to include your navigational hierarchy on | | | | - if you're going to use Flash navigation, then provide |
| every single page of your website (universal | | | | the same navigational elements in text link form on |
| navigation). Not only is this good for Search Engine | | | | your website for those who do not have Flash |
| Optimization since it allows the search engine spiders | | | | enabled on their computer |
| to easily access most of the pages on your website | | | | The Donts |
| no matter what page they are on, but it guarantees | | | | - don't use confusing or lengthy Flash transitions for |
| that your website will not have any "dead end | | | | your navigation; people hate to wait and people hate |
| pages". A dead end page is a web page that is | | | | being confused |
| reached by clicking on a hyperlink within a website, | | | | - always use descriptive text for your anchor text or |
| but which has no hyperlinks to other pages. The | | | | Flash navigation - don't rely on images to |
| visitor is stuck on the web page with nowhere to go | | | | communicate your hyperlinks content |
| unless they use the browsers "Back" feature or close | | | | - don't allow your visitors to arrive at dead end web |
| out of the window and website completely. | | | | pages or orphan pages; include your main navigation |
| Placement Consistency | | | | on every page of your website |
| To further minimize navigational confusion, keep your | | | | - don't position navigation in different areas on your |
| navigation in the same location on every page of | | | | website; keep the positioning consistent on all of the |
| your website, preferably in the upper-left section of | | | | web pages |
| the website. By doing so, visitors will not have to | | | | - don't make navigation the same color, font, and |
| guess where to look each time they visit a new | | | | size as your body text - navigational text should |
| page. Surprises (such as a random placement of the | | | | always stand out |
| navigational menu) are bad and should be avoided at | | | | - don't play a sound clip each time an item in your |
| all costs. Some websites have two different | | | | navigation is rolled over with the mouse cursor; as |
| navigational menus: one for the home page and one | | | | mentioned above, people do not enjoy surprises. if |
| for the rest of the website. If possible, use the same | | | | you're going to use sound, then always include some |
| navigational menu that is located on the home page | | | | sort of warning or indication so that the visitor can |
| on the entire website. This will cut down on confusion | | | | adjust their volume accordingly |
| and the element of surprise. | | | | A Piece of the Puzzle |
| The Importance of Text | | | | Website navigation usability is only a part of the |
| Textual navigation can be basic and boring, but the | | | | website usability puzzle. Factors such as accessibility, |
| point of navigation is to easily communicate the | | | | hardware and software, the homepage, page layout, |
| subject of each hyperlink. When someone uses | | | | scrolling and paging, headings, links, text appearance, |
| strictly images (commonly referred to as "Mystery | | | | and lists are all important factors that must be taken |
| Meat Navigation"), they are forcing the visitor to | | | | into consideration when designing a usable website. |
| translate what they think the image means. People | | | | However, without usable navigation, your visitors will |
| interpret images differently and it is for this very | | | | become confused, frustrated, and may eventually |
| reason that using images with no text for navigation | | | | leave your website in the search of something more |
| is a terrible idea. Keep your hyperlink text short, | | | | straight forward and usable. |