Secret ingredients to quality software

SSW Foursquare

Rules to Better Websites - Navigation - 31 Rules

  1. Do you use underlines on links?

    It's very important that your links stand out from the background as well as the surrounding text.

    Always make links underlined - Users expect underlined texts to be a link; and links to be undelined. You can use a different color on underlines as a nice touch.

    Note: This is not necessary on obvious links, like menus or buttons.

    Never underline a text that isn't a link - Use bold if you need emphasis.

    Mouse hovering

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

    When you develop on SharePoint, you do not have a full copy of web.config in your Visual Studio project.

    Figure: Bad example - Never underline the text when it isn't a link

    For more information on this, please go to SSW website.

    Figure: Good Example - The link is nice and clear

    CSS - underlines or borders?

    The default implementation of underlines in CSS is:

    text-decoration:underline;

    Another way to add look-alike underlines is by adding border. In this case, you can even have a dotted underline. However, it's not recommended you use this method unless you are a designer and know what you are doing. It may create extra pixels in the interface, which can potentially cause other problems in your UI, for example:

    Figure: Bad example - the different border size pushes the content down

    border problem 2
    Figure: Bad example - borders going over the text area

  2. Do you use relevant words on your links?

    We know that the way your inbound links are worded does make a difference, they play an important factor when Google searches are made by search engine users.

    Having these relevant words on links also gives a more friendly experience to the users.

    For example, if a website had millions of inbound links that described it as "Movies for Free", when someone searches for "free movies" on Google, it would point to the,.

    So what does this mean? All those links that are pointing to pages on your website displayed as 'More', 'Link', 'This' or 'Click Here' aren't doing you any favors when it comes to increasing your Google rankings.

    "For tips and tricks to increase your Google Ranking click here"

    Figure: Bad Example #1 - Link does not increase your rankings

    "Link for tips and tricks to increase your Google Ranking"

    Figure: Bad Example #2 - Link does not increase your rankings

    "For tips and tricks to increase your Google Ranking read this"

    Figure: Bad Example #3 - Link does not increase your rankings

    "For tips and tricks to increase your Google Ranking go to https://www.ssw.com.au/rules/rules-to-better-google-rankings"

    Figure: Bad Example #4 - Link is the whole URL

    "For tips and tricks to increase your Google Rankings go to our Rules to Better Google Rankings"

    Figure: Good Example - Descriptive link

  3. Do you 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.

    Figure: Visited links are marked different from unvisited.

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

    A:visited { color: purple; }
  4. The active menu item should stand out from the others. This way you make it easy for users to know where they are at in the website.

    active state bad
    Figure: Bad Example – you can't tell where you are in the site

    active state good
    Figure: Good Example – it’s easy to see where you are at

  5. 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.

    longmenu
    Figure: Bad Example - Long drop down menu requires scrolling and difficult to see at a glance.

    megamenu
    Figure: Good Example - Links are grouped into distinct category

    mobilemenu
    Figure: Bear in mind that mobile menus are limited

  6. Do you add breadcrumb to every page?

    Keep a breadcrumb on every page is necessary. With this navigation tool, users can easily location themselves and find the targets quickly. But don't link yourself!

    Figure: The breadcrumb

    So every page should have a SiteMapPath Control.<asp:SiteMapPath ID="SiteMapPath1" runat="server" SiteMapProvider="SiteMapProvider1"/> Figure: SiteMapPath Control (Note: Code Auditor checks for the yellow highlighted text)

  7. Do you display information consistently?

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

    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.

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

    1. URL
    2. Page Title
    3. Navigation

    BadPageName
    Figure: Bad example - Inconsistency everywhere!

    GoodPageName
    Figure: Good example - Title, Header and Navigation Menu item have the same text.

  9. Do you make 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.

    Figure: Bad Example - I have no way of knowing that this link allows me to edit my details

    Figure: Good Example - I'm pretty certain where this link will take me...

    This rule also has relevance to improve your Google ranking.

  10. 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!)
  11. 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.

    BadTitle
    Figure: Bad example - A page with the default title

    GoodTitle
    Figure: Good example - A page with a good title

  12. 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.

    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?"

  13. 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 offers competitive, high performance hosting plans. We use Windows Servers with the latest security patches and SQL Server 2005 SP1. Our Data center has multiple 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 offers competitive, high performance hosting plans. We use Windows 2003 Servers with the latest security patches and SQL Server 2005 SP1. Our Data center has multiple connections to major backbones, and our support staff are Microsoft Certified.

    Figure: Good example - One link results in clear and readable text

  14. Do you avoid linking a page to itself?

    If you have a link on a page that takes you back to the same page, then that is a weird experience. So don't include a link to the very page you are on.

    Exceptions are:

    • Permalink – Because it enables a user to get a link to the current page or bookmark.
    • Logo on the homepage – It’s widely known that clicking on the logo will take you to the homepage and it shouldn’t change if you are already on the homepage. People often click on it to reload the page.
    • Menu items – However you should visually indicate on what page you are on.
  15. Do you know to hyperlink your phone numbers?

    These days more than 50% of people use mobile devices to browse websites.

    Therefore, it is very important to hyperlink your phone number to increase the rate of conversion and improve the mobile user experience. This enables click and call, and eliminates the need to copy and paste phone numbers.

    Devices and computers that don’t have phone functionality will either open a phone app or add the number to a contact list.

    <a href="tel:+61299533000">+61 2 9953 3000</a>

    Figure: Good example – This is the syntax to hyperlink phone numbers

  16. 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, of which Amazon is exemplary. A great shopping application includes the following breadcrumbs:

    • 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.

    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

    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.

    amazonshopping
    Figure: This is how headings should look

    virgin flight navigation
    Figure: Virgin Australia uses a more subtle approach

  17. When creating links, you should follow a few basic rules:

    • If your link is an internal link, then it should keep the default behaviour, navigating within the same tab
    • If the link is external, it should:

      • Open in a new tab
      • Be visually clear to the user that it will lead them away from the current site, that way it is not a surprise.

    Google is by far the best but try other search engines as well.

    Figure: Bad example - Without visual indication

    Google is by far the best but try other search engines as well.

    Figure: Good example - With visual indication

    It should be inserted by CSS as following:

    a[href*=&quot;//&quot;]&#58;not([href*=&quot;mysite.com&quot;]):after {
    content&#58; url(https://www.ssw.com.au/ssw/images/external.gif);     
    padding-left: 4px;
    }

    Figure: Icon can be added via CSS using a simple declaration

  18. Do you make external links open on a new tab?

    External links should open in a new tab (by using HTML's target="_blank"). Since browsers implemented tabs (replacing new window), it's considered a good practice to open external links in a different tab.

    Main reasons are:

    • Avoiding 'Back-Button Fatigue';
    • Keeping 'User Flow';
    • Keeping a good track of Analytics
    <a href="http://support.microsoft.com/support">Support</a>

    Figure: Bad example - External link opening on the same tab

    <a href="http://support.microsoft.com/support" target="_blank">Support</a>

    Figure: Good example - External link opening in a new tab 

  19. Do you save clicking through?

    You should always avoid forcing users to click to another page if possible. Additional information can be shown on hover as a tooltip, or applications allow for inline editing.

    Clickingthrough
    Figure: Good example - Information is shown on hover, not an additional link

  20. 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! For the following file/link types, use icons:

    You should also use an icon to make external links clear.

    Figure: Bad Example - The user would expect all these hyperlinks to work the same way

    Figure: Good Example - The pdf icon (before a hyperlink) indicates it is not a web page

    Match the extension of the <a> tag on your CSS. The padding is to give it some space before the text (where the icon will be).

    (Recommended) Using font icons, like FontAwesome

    Find the icon unicode at FontAwesome icons page and replace on the CSS "content" value.

    a[href$='.pdf']:before
        content: "\F08B ";
        font-family: FontAwesome;
        padding-right: 4px;
        display: inline-block;
    }

    Using images

    Add the icon image to your server and add the path as background URL.

    a[href$='.pdf'] 
    { 
    background: transparent url(/images/icon_pdf.gif) center left no-repeat; 
    padding-left: 20 px; 
    }
  21. Don't surprise users! Put a lock icon to indicate the link is a password protected page and login required.

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

  22. 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.
  23. 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.

    Figure: Bad Example - because the combos can be set to autopostback and should not have a "Show" button.

    Figure: Good Example - because the combo boxes have fixed values and can autopostback.

    Figure: Bad Example - because the text boxes do not have fixed data and thus should have a "Show" button.

    Figure: Good Example - because there is a "Show" button as the text boxes do not contained fixed data.

    Figure: Good Example - because the combos can be set to autopostback while the text boxes have the "Show" button available.

  24. 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.
  25. 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 sign in page, the user has to sign in again though he's already logged in.

    Figure: Bad Example - Linked to the login page.

    Figure: Good Example - Linked to the default page.

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

    Figure: Good Example - This menu clearly shows which items have submenus

    WorleyParson submenus were also designed with this in mind.

  27. Forgot Password - Do you 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.

  28. 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'.

    Figure: 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.

  29. 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 AjaxControls
    Figure: Bad example - An Ajax control which automatically disables the save button would make this message unnecessary.

  30. Do you give an option to widen a search?

    You must be careful when combining search and filtering functionality as this can lead to unexpected search results, which can easily confuse if not infuriate your users. Therefore you should always, give the option to widen the search when a filter is applied.

    ![Find more (1).png](Find more (1).png)

    Bad: Search is not reminding the user about the fact that a built-in filter is applied to the search result

    SearchOption Good

    Good: Search reminds the user that the search criteria can be widen to show more result

  31. If you have a date for any event appearing on your website, you should make it as easy as possible for the user to add it to their Outlook calendar. This is why we use ICS links for all dates on our site.

    Next User Group Meeting: Wednesday, 15 February 2006 5:45 PM

    Figure: Bad Example - User cannot add a reminder

    Next User Group Meeting:Wednesday, 15 February 2006 5:45 PMAdd Outlook reminder

    Figure: Good Example - User can click and add a reminder

    By clicking the calendar link, users can easily add the event to their own calendars.

    You have 2 options - VCS and ICS. Both let you add appointments to your calendar. We use ICS because it allows collaborating information between personal information management programs like Microsoft Outlook, Mozilla Calendar, Mac OS, etc. over the Internet, independently of differences between program vendors or operating systems, which is not allowed with VCS.

    It is always preferred to use icons to give users a proper idea about the file. Users can quickly get the idea by just looking at the icon.

We open source. Powered by GitHub