Skip Navigation LinksHome > SSW Standards > Rules > SSW Rules to Better Websites - Navigation

What others have to say about us
See what people think about this product I've been putting together Development Guidelines for my employer and in the process have reviewed many published standards (in the .Net arena) from around the world. In each category, the suggestions at SSW are always among the best. See what people think about this product
- Leon Bambrick,
 

Do you agree with them all? Are we missing some? Email us your tips, thoughts or arguments. Let us know what you think.

Indicates important rule

  1. Do you use underlines only on links?

    Every user under 40 expects underlined text to be a hyperlink.Never underline text that isn't a link.

    Websites - Underline no hyperlink
    Figure: Never Underline the text when it isn't a link (even Scott Guthrie agrees)
    We have a program called SSW Code Auditor to check for this rule.
  2. Do you underline links (and include a rollover)?

    Always make links perfectly clear.

    It's very important that your links stand out from the background as well as the surrounding text. A solid underline and a contrasting color is the usually the best choice, but the exact method is not important as long as the end result stands out. A link should not only be discoverable upon accidental hovering.

    Rollovers are important as they offer visual feedback to a user that this link that will take them somewhere. While there are a myriad of ways to do this; you can't go wrong with a simple text color change.

    Bad Example: This link is hard to recognise.
    Good Example: This link is obvious.
    We have a program called SSW Code Auditor to check for this rule.
  3. Navigation: Do you distinguish Visited Links?

    Visited Links
    Figure: Distinguish visited links

    Distinguishing visited links is very helpful to show where users have been before. Visited links should still stand out but not as obvious as unvisited ones. Give visited links a less saturated colour to give that “used?look and be careful not to overuse css techniques on visited links.

    Specifying style for visited links is very simple. Just add this to your CSS file:

    A:visited
    {
    color: purple;
    }
    Figure: specify different colours for visited links

    SharePoint does not currently support this font colour change(when it should). Instead we have to show visited links by changing font size, which is not ideal.

  4. Do you use Mega-menu navigation to improve usability?

    So you started your site with simple navigation but then you find yourself a few years later with site navigation that is saturated with links and everything looks messy.

    Mega menu allows you to present your links in groups and make use of typography, icons and supporting images to explain user's choices.

    By dividing site navigation into groups users will have better view of your site's structure at a glance and thus presenting them with meaningful choices. You can also group key pages together and give them emphasis.

    Of course, don't use a mega dropdown menu just because you can. Turning your normal navigation into mega-menu whilst keeping it as one continuous level is generally a no-no. in the same manner, just because mega-menus have room, doesn't mean you should overload them.

    long dropdown menu
    Bad Example: Long drop down menu requires scrolling and difficult to see at a glance.
    mega menu
    Good Example: Links are grouped into distinct category
  5. Do use Breadcrumbs instead of "Return to" links?

    Breadcrumbs allow easier browsing experience especially for content-heavy sites where it’s too easy for users to get lost within pages of complex navigation. In addition to telling users “You are here? breadcrumbs help your site visitors to learn about your site structure because it’s indicated by the breadcrumb path.

    We always favour breadcrumbs over a single “Return to…” links because users can jump to parent categories.

    The term "breadcrumb" comes from the fairy tale of Hansel and Gretel, where they leave pieces of bread while going through the woods, so that they can return back simply by following the trail of breadcrumbs.

    Home > SSW Standards > SSW Rules > Rules To Better Website Navigation
    Figure: Bad example - poor navigation and it only allows user to move one page back
    Home > SSW Standards > SSW Rules > Rules To Better Website Navigation
    Figure: Good example - Breadcrumbs allow user to quickly identify where this page is located
    We have a program called SSW Code Auditor to check for this rule.
  6. Do you display information consistently?

    When redirecting users to another page make sure that the text is consistent between the two pages.

    Consistent Information
    Figure: Good example - Click "More" and the next page begins with the same information

    As an example, the SSW website follows a consistent order: a summary of the product/service and its benefit followed by a longer paragraph with more information. When we want to redirect users to a page we simply use the summary part of that page as narrative on the other page (e.g. events list). As a result, user will have a nice flow between pages when navigating around the site. See a live example.

    Please Note: the figure here is intended to show the consistency in the text, the use of a link called More is not desirable as per our Google Rule Do your links have relevancy to the page you're linking to?

    Please Note #2: This is about the text being consistent. However you should also keep your links consistent.

  7. Do you make sure your page name is consistent in three places?

    It's a good idea to make sure your page names are consistent between:

    1. URL
    2. Page Title
    3. Navigation
    Figure: Bad example - Inconsistancy everywhere!
    Figure: Good example - Title, Header and Navigation Menu item have the same text.
  8. Are your links intuitive?

    Hyperlinks are the foundation to website navigation. Without it, the internet is merely a series of unconnected documents. An intuitive hyperlink is one where the link explains what will happen when it is clicked where they will take the user.

    Websites - Not Intuitive Hyperlinks
    Figure: Bad Example - I have no way of knowing that this link allows me to edit my details
    Websites - Intuitive Hyperlinks
    Figure: Bad example - I'm pretty certain where this link will take me...

    This rule also has relevance to improve your Google ranking.

  9. Do you put all essential links in your website on your navigation bar?

    There are certain links on a website which you want to make VERY simple for users to find. I hate hunting around on a site for a phone numbers. These are the basics which should be easily accessible from every page:

    • Home page (top left corner)
    • Contact Us (with a phone number, not a form.submit!)
    • News (especially for journalists)
    • Directions (so prospects and clients can come and visit!)
       
  10. Do you remember to change the default title of a newly created page?

    Your site visitors should never see Untitled Page on their browser. When creating a new page, remember to change the default page title. This rule applies whether you are using a Master Page or not.
    Page with a good title
    Figure: Bad example - A page with the default title
    Page with a good title
    Figure: Good example - A page with a good title
  11. Navigation: Do you make your pages easy to access?

    A web page should not be more than 4 levels deep. Use a drop-down menu to help users get to these pages quicker. For larger site, you may want to consider mega dropdown menu.

    There is no point of having a web page if it is too hard for the user to access from the main menu or from multiple links on your site.

    Drop-down menu
    Figure: Have a useful navigation system

    It is important to remember that Menu links are intended as shortcuts to pages, while Breadcrumbs are "where am I?"

  12. Navigation: Do you avoid redundant linking (aka single link to single location)?

    Often pages have 2 or 3 links pointing to the same page - all fairly close to each other, like in one or two paragraphs. It is a good idea to never have multiple links to the *exact* same page for the following reasons:

    • Every link distracts the user from reading the main text content
    • They confuse the user as they have to decide which link to click first (and then end up to the same place anyway)
    • They are annoying when the user is trying to be thorough and read the related content and they are repeatedly directed to the same page
    SSW Web Hosting
    SSW offers competitive, high performance Windows hosting plans. We use Windows 2003 Servers with the latest security patches and SQL Server 2005 SP1. Our Data center has multiple redundant connections to major backbones, and our support staff are Microsoft Certified. View more about our hosting plans
    Figure: Bad example - Redundant links nearby that point to the same page
    SSW Web Hosting
    SSW offers competitive, high performance Windows hosting plans. We use Windows 2003 Servers with the latest security patches and SQL Server 2005 SP1. Our Data center has multiple redundant connections to major backbones, and our support staff are Microsoft Certified.
    Figure: Good example - One link results in clear and readable text
    We have a program called SSW Code Auditor to check for this rule.
  13. Navigation: Do your wizards include a 'Wizard Breadcrumb'?

    Headings that direct the user around your web page are important as it gives the user the feeling of confident in using your web page. The user will tend to feel lost and unsure in what he/she should be doing next, if a website dose not directs them properly. Good navigation through directing headings removes this feeling and gives the user confidence. This rule becomes especially important when it comes to shopping applications. Showing the user where they are up to in buying products, previous steps and the next step in the process, gives the user the confidence that they are doing the right steps in purchasing a product. Allowing the user to go back to previous steps allows them to change or review a previous choice. Showing the user where they are up to and what is next shows the user what is left in the process in purchasing a product. Amazon is a very good example of a good shopping Application.

    SSW Example:

    • Product Basket - Add/Remove products in your shopping Basket
    • Shipping Details - Enter where you would like products shipped
    • Payment Details - Select how you pay and enter details
    • Confirmation of Purchase - Display information about their purchase
    Example Header
    Figure: Simple Header that tells the user where they have come from

    Amazon Example:

    • Welcome Icon - Ordering from Amazon.com is quick and easy
    • Address Icon - Choose a shipping address
    • Ship Icon - Choose your shipping options
    • Pay Icon - Select a payment method

    The following heading from Amazon shows the user at what stage of the ordering process they are at and what they can expect next.This covers the whole billing process.

    Amazon Shopping
    Figure: This is how headings should look
  14. Navigation: Do you make external links clear?

    When I create links I follow a few basic rules:

    1. If a link is to an external site, a visual indication should be provided to the user like this: This is a link to another site

      Search Engines ( http://www.google.com is by far the best but try other search engines as well)
      Figure:Bad example-Without visual indication
      Search Engines (http://www.google.com is by far the best but try other search engines as well)
      Figure:Good example-With visual indication
    2. All external links should open in a New Window - so the user doesn't lose the original site they were at.

      When we have a page that opens in a new window BUT doesn't leave our site e.g.

      <a href="http://www.ssw.com.au/whatever.asp?id=123" target="_blank">
      we give the user a visual indication so they are not surprised. But this is pretty rare.

      Rules to successful projects
      Figure:Bad example - Without visual indication
      Rules to successful projects
      Figure:Good example - With visual indication
    3. External links should always go through a Redirect file to allow monitoring of click-throughs. We store all redirects in a redirect folder - /ssw/Redirect/[SubCategoryAsRequired] to avoid reducing our Google Ranking.

      Developer Note: Do not use META refresh - instead, use server-side code (such as an ASP Response.Redirect), as this will send the proper "Object moved" message to the client and the redirect will be picked up by SSW Link Auditor. There is also the possibility that the user has disabled META refreshes in the browser security options, as the redirect is performed on the client, not the server.

      Microsoft Knowledge Base - http://support.microsoft.com/support (Great for issues/bugs in your programs)
      Figure:Bad example - Go through a direct link
      Microsoft Knowledge Base - http://support.microsoft.com/support (Great for issues/bugs in your programs)
      Figure:Good example - Go through a redirect file
      <%
      Response.Redirect("http://www.link.com")
      %>
      Figure: Sample Code for a Redirect File
    4. External link images should be inserted by CSS and not embedded in the page source.

      Figure:Bad example - Why is this in my source code?
      Figure:Good example - Icon is added by CSS via a simple declaration.

    We have a program called SSW Code Auditor to check for this rule.
  15. Do you save clicking through?

    Figure:Good example - Information is shown on hover, not an additional link
  16. Navigation: Do you use icons not to surprise users? (aka use the correct image for files)

    When a user clicks on a hyperlink they expect to open an html file. If you click on a hyperlink (but it is actually a .doc file) you wait and wait while it takes forever to instantiate an instance of Microsoft Word in the background.

    Don't surprise users use the following icons:

    File Type Example
    PDF Icon PDF This is a PDF file
    JPG Icon JPG This is a Image file
    DOC or DOT Icon DOC This is a Word Document file
    XLS Icon XLS This is an Excel Spreadsheet file
    PPT Icon PPT This is a PowerPoint file
    TXT Icon TXT This is a Text file
    AVI,MOV,MPG etc. Icon MOV This is a Video file
    WAV,WMA,MP3 etc. Icon MP3 This is a Music file
    SNP Icon SNP This is an Access Database snapshot file (discontinued and not recommended)
    EPS Icon EPS This is an EPS file
    ICS or VCS Icon VCS This is a calendar file
    EXE or ZIP DownloadThis is an executable or zip file
    mailto: Icon MailTo This will send an email
    XML / RSS Icon XML This will subscribe to RSS
    ODF Icon ODF This is an Outlook Item Template
    Page This is a link to password protected page
    Figure:  Don't surprise users.  Warn them by using the following icons


    Image good link
    Figure: FYI there are the same images used by Google at GoogleDesktopSideBar.htm

    Image bad link
    Figure: Bad Example - The user would expect all these hyperlinks to work the same way
    Image good link
    Figure: Good Example - The pdf icon (before a hyperlink) indicates it is not a web page
    We have a program called SSW Code Auditor to check for this rule.
  17. Navigation: Do you use an icon so a password prompt should never be a surprise?

    Password prompt as a surprise
    Figure: Bad because when you click "Building 100" you get a password prompt as a surprise

    Don't surprise users put a lock icon to indicate the link is a password protected page and login required. This icon is one of the icons that we use to avoid surprising users

  18. Do you have a 'Related Links' section?

    Do you make sure you have a 'Related Links' section at the bottom of each page? This will avoid problems like:

    1. Orphan pages. You should always give your visitors somewhere to go on each page and never leave them at a "dead end." Some people will actually bookmark certain pages in your site and return directly there, rather than go through the home page. If that page is an "orphan" and not linked to another page in your site, your visitor will leave thinking you have nothing else to offer and nowhere to get there if you do and you may have missed out on a sale.

    2. Long Pages. Surfers tend not to scroll too much so if you have all your information on one page and your visitors have to continually scroll down, they may get bored and go elsewhere. As a result, they could miss vital information. All important content should be at the top of the page and if you have a lot of information, link it to another page so visitors can see at a glance the information available.

  19. Do your controls autopostback?

    When visitors are navigating through your site and they need to make a selection from a control with fixed values, it is best to have the control automatically post back. This makes navigating your site quicker as the user does not have to click other buttons to see the changes which they have made. It is also important to remember that controls which do not have set values, such as text boxes, should have a "Show" button available to click once the visitor is finished entering their data.

    Combo boxes with fixed values
    Figure: GOOD because the combo boxes have fixed values and can autopostback.
    Bad
    Figure: BAD because the combos can be set to autopostback and should not have a "Show" button.
    Good
    Figure: GOOD because there is a "Show" button as the text boxes do not contained fixed data.
    Bad
    Figure: BAD because the text boxes do not have fixed data and thus should have a "Show" button.
    Good
    Figure: GOOD because the combos can be set to autopostback while the text boxes have the "Show" button available.
  20. Do you avoid email harvesting or spamming by using images?

    Do you want to avoid email harvesting or spamming? This will avoid such spamming problems:

    1. Email Address display. Simply use email images e.g.

    2. Email Address link for mailto. Use JavaScript function for generating mailto from encrypted text. e.g.

  21. Do you know when to use full stops at the end of bullet points?

    There are two types of bullet list. The first type of bullet list is the most common, where each bullet point is a sentence fragment that will form a complete sentence if read together with the introductory line. For this type, place full stop at the end of the last point. For example:

    UI may refer to:

    • User interface
    • User interaction.

    The second type is when each bullet point is a full sentence. It features a capital letter at the start and a full stop at the end of each bullet point. For example:

    User Interface Fundamentals:

    • Your design should make simple, common tasks simple to do, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.
    • Your design should keep all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with too many alternatives or confuse them with unneeded information.
    • Your design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
  22. Do you avoid linking users to the login page directly?

    When you are adding a hyperlink which links to a web application that requires a login, do not use the login page (login.asp or login.aspx or login.php) for the value of the "href" attribute, use the default page (or other pages) instead.

    Thus, if a user is already logged in, he will go to the default page. If not, the page will redirect him to the login page. But if you use the login page, the user has to sign in again though he's already logged in.

    Bad
    Figure: BAD - it's using the login page.
    Good
    Figure: GOOD -it's using the default page.
  23. Does your menu use an icon to indicate if there is a sub menu?

    Too many sites expect the user to hover and wait to 'discover' if there are sub menus. Use an icon and avoid the surprises.

    Good
    Figure: Good - WorleyParson submenus were designed with this in mind.
  24. Forgot Password - Don't ask them to enter their email and click a button again. Read their mind!

    Unfortunately here is the normal routine to get an email with your password.

    1. You go to a Login form, enter your email and password, and click the 'Login' button.
    2. You get a validation message like 'Incorrect Password'.
    3. Then you have to click a 'Forgot Password' link to go to another 'Get Password' form, and then they almost always ask you to enter your email again and then click 'Get Password' button.
    Question:
    Why do 99% of the web sites out there, ask you to
    - Enter you email again (they have already got it)
    - Then click 'Get Password' (you have already clicked the link 'Forgot Password')
    
    Answer: 
    Because they are not trying to read your mind.
    
    The goal should be:

    Be more efficient and user-friendly and save them a step. Please DO NOT bother users to do any more redundant work.

    Instead enter their email when they click 'Forgot Password' link.

  25. Login Security - Do you know the correct error message for an incorrect user name or password?

    When a user fails to sign in due to invalid email or password, you might have the well intention of letting them know by telling them exactly which one is invalid.

    However this is not secure. It makes it easier for bad guys (e.g., hacker) to get access to your account and do malicious things to the site and with your information.

    The more secure message should be 'Invalid email or password'.

    Good message for invalid account
    Good example - for security reasons, you don't say if it was an invalid user name or password.

    See Login.aspx for a real example.

  26. Do you avoid letting the screen go white?

    use jQuery or Ajax controls whenever possible to send requests without feedback on the process. This is to avoid a "white" blank page, while the page reloads. Similar ideas are like a save button that disables after the first click so it can't be hit multiple times.

    Bad example - An Ajax control which automatically disables the save button would make this message unnecessary.

Acknowledgements

Adam Cogan
Tristan Kurniawan


Benefit from our knowledge and experience!

SSW is the industry leader in Custom Software Development, Software Auditing & Developer Training.

Call us on +61 2 9953 3000 or email us for a free consultation

What does it cost? I’m not in Australia. Can you still help?