SSW Foursquare

Rules to Better Websites - Navigation - 33 Rules

  1. Do you use underlines on links?

    Ensure your links are easily distinguishable from the background and surrounding text by always making them underlined. Users expect underlined texts to be a link; and links to be underlined.

    Keep in mind:

    • Underlines are not necessary on obvious links, like menu items or buttons
    • Never underline a text that isn't a link - Use bold or another styling if you need emphasis.

    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

    Tip: You can use a different color on underlines as a nice touch.

    Mouse hovering effect

    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. Hover the good example above to see this working.

    The basic CSS for changing the link color on hover is:

    a:hover { 
        color: #cc4141;
    }

    CSS - Avoid borders on text

    The default implementation of underlines in CSS is:

    text-decoration: underline;

    Another way to add look-alike underlines is by adding border-bottom: 1px;, for example. 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:

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

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

  2. SEO - Do you use descriptive links?

    We know that the way your inbound links are worded does make a difference. They play an important factor for search engine results and for the users.

    Having descriptive links with relevant words improves your website SEO and gives a more friendly experience to 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 this website.

    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 - Generic words on links won't help your website rankings

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

    Figure: Bad example #2 - Generic words on links won't help your website rankings

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

    Figure: Bad example #3 - Generic words on links won't help your website rankings

    Also, if you make your the link the entire URL, it won't be very readable to users. You should replace it with a descriptive sentence using relevant words.

    "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 - Whole URL on links won't help your users

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

    Figure: Good example - Descriptive links will help your website rankings and the users

  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. This is default on most browsers, but after adding custom styling to your website, you may need to include it.

    Tip: Give visited links a less saturated colour to give that "used" look.

    Figure: Good example - Visited links are marked different from unvisited

    Specifying style for visited links is very simple. Just add the HEX color code to your CSS file as per:

    a:visited { color: #xxxxxx; }

    Warning: Be careful not to overuse CSS attributes on visited links - a color change is enough.

  4. Do you visually indicate the page you are at on the menu (aka active state)?

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

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

    Keeping a breadcrumb trail on every page is necessary. It is a navigation tool so users can easily locate themselves and find what they are looking for quickly. But don't link a page to itself!

    Integrating a breadcrumb trail on webpages brings these benefits:

    • provides users with a clear and visual navigational path - they understand their location within the website's structure
    • enhanced user navigation
    • easy to backtrack to previous pages and explore related content
    • reduced effort required to navigate through complex websites
    • allows users to quickly access information - more engagement
    • improves overall website usability

    Additionally, breadcrumbs contribute to better search engine optimization, as they provide search engines with a clear understanding of the website's hierarchy, helping to improve website visibility and rankings in search results.

    breadcrumb short good
    Figure: Good example - Breadcrumb has many benefits

  7. Do you simplify breadcrumbs?

    Breadcrumbs are an essential part of website navigation, providing users with a trail of links to indicate their location within a site's hierarchy. To maximize their effectiveness, it's important to keep breadcrumbs short and concise. By simplifying them, we reduce confusion and make them easier to understand, improving the overall user experience.

    Shortening breadcrumbs helps prevent information overload, ensuring that users can quickly scan and comprehend the trail without feeling overwhelmed by long and repeated texts. Some ways to achieve that:

    • Replace "Home" with an icon
    • Keep only the main words for categories
    • Replace the current page title with "This Page"

    breadcrumb long bad
    Figure: Bad example - Long breadcrumb with repeated words

    breadcrumb short good
    Figure: Good example - Short breadcrumb makes it simple to read

  8. Do your wizards include a 'Wizard Breadcrumb'?

    Breadcrumbs guide users through your website interactions. They are important as they give the user a sense of confidence in using your application. The user will tend to feel lost and unsure of what to do next if a application does not guide them properly. Good navigation through directional headings removes this feeling and gives the user confidence. This rule is especially important when it comes to design an e-commerce check out process, or a software set up wizard.

    A great wizard should includes a 'Wizard Breadcrumb', that gives the user the confidence that they are progressing as expected in the process.

    It should do the following:

    • Show the user where they are up to, previous steps, and the next steps in the process. This gives the user an idea of how long the process will take
    • Allow the user to go back to previous steps allows them to change or review a previous choice

    It should have the following:

    • Clear and intuitive interface - An interface that is easy to understand and use, with clear instructions and user-friendly design
    • Step by step guidance - Guide users through the process of setting up a new company with clear, concise instructions that are easy to follow

    sugarlearning wizard
    Figure: Good example - SugarLearning's "Create your company" wizard

    booking wizard
    Figure: Good example - The heading from booking.com 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

    virginblue wizard
    Figure: Good example - Virgin Australia uses a more subtle but also effective approach

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

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

    BadPageName
    Figure: Bad example - Inconsistency everywhere!

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

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

  12. 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!)
  13. 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.

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

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

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

  15. 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 1 or 2 paragraphs. Multiple links to the exact same page should be avoided because they:

    • Distract users from reading the main text content
    • Confuse users as they have to decide which link to click first (and then end up to the same place anyway)
    • Annoy users when they are repeatedly directed to the same page

    The exception is if you have the links in different sections of the page (e.g. 1 in the content, 1 in the "Related" section).

    It is a good idea to not have multiple links to the exact same page section.

    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 pointing 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 - 1 link results in clear and readable text

  16. Do you avoid linking a page to itself?

    A link on a page that takes you to the very same page is a weird experience. Don't include a link to the page you are on.

    Exceptions can be:

    • Permalinks – Because it enables a user to get a link to the current page or bookmark.
    • The 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.
  17. Do you use the right anchor names?

    An anchor name is the value of either the name or id attribute when used in the context of anchors.

    It is often that developers find themselves using the anchor names incorrectly.

    According to SSW and W3C, anchor names must observe the following rules:

    • Anchor names must be unique within a document
    • ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")
    • Anchor name cannot start with #
  18. Do you add hyperlinks to phone numbers?

    Mobile device usage has been on the rise for years, driven by the increasing popularity and capabilities of smartphones and tablets. It's safe to say that, in the past years, the majority of internet users globally were accessing websites through mobile devices.

    Note: The exact percentage can vary based on geographic regions and demographics.

    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

  19. Do you visually indicate when a link is external?

    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

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

  21. Do you avoid absolute internal links?

    It is generally advisable to avoid using absolute internal links whenever possible. Absolute links include the full URL, including the domain name, when linking to internal pages within the same website.

    Using absolute internal links can lead to challenges during website migration or domain name changes. If the website's domain or URL structure is modified, all absolute links within the website would require updating. This can be a time-consuming and error-prone process, potentially resulting in broken links and a negative user experience.

    Using relative internal links, which specify the path to the linked page relative to the current page, is often preferred as it offers more flexibility and can prevent issues when migrating or changing domain names. Relative links are less prone to breaking and make it easier to maintain the website's structure and navigation.

    When using absolute URLs for internal links, the browser needs to make additional requests to the server, even when navigating between pages within the same site. These requests involve fetching the entire HTML document specified in the absolute URL, including unnecessary data such as headers and footers.

    On the other hand, when employing relative URLs, the browser can navigate directly to the linked page by adjusting the path relative to the current page. This eliminates the need for additional server requests and results in faster page loads. In the context of static site hosting, where every aspect of the website is pre-rendered and served as static files, optimizing internal links with relative URLs can significantly enhance the overall performance and user experience.

    <a href="https://ssw.com.au/Company/ContactUs/">Contact us</a>

    Figure: Bad example - Using absolute paths for internal links

    <a href="/Company/ContactUs/">Contact us</a>

    Figure: Good example - Using relative paths for internal links

    While there may be some scenarios where absolute internal links are necessary, like on newsletters, it is generally advisable for website developers to prioritize the use of relative links. Relative links offer greater flexibility, ease of maintenance, and scalability, ultimately contributing to a more robust and user-friendly website.

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

  23. Do you use icons on files' links to not to surprise users?

    When a user clicks a hyperlink, they expect a webpage to open. If they click on a link that is actually a .doc/.docx file, they might encounter the unexpected experience of having Microsoft Word open in the background.

    Don't surprise users! Use icons next to links to show different types of links/files.

    link with icons bad
    Figure: Bad example - Users would expect all these hyperlinks to work the same way

    link with icons good
    Figure: Good example - The PDF icon indicates one of the links is not a webpage

    Use CSS to match the extension at the end of the <a> tag. Don't forget to add some padding to give it some space before the text (where the icon will be).

    Using icon fonts saves time and hassle during the development process. It replaces the need to create/buy images, and upload them to the server.They will also look good on any screen resolution or display.

    ✅ UI - Consistent icons
    ✅ Fast to load (lightweight as no image)
    ✅ Free $
    ✅ Can be used in any size
    ✅ Large choice of icons (even more than UI Fabric!)
    ❌ Requires code (Inject CSS)

    To implement use one of the different ways to set up Font Awesome. Then 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;
    }

    Figure: Replace the content string with the Unicode value from the Font Awesome site

    Option B: Using images

    Create or buy a collection of icons that match your website style. The benefit is the ability to have custom and multi-colored icons, that can look exactly like a software logo for example. But it's usually not worth the hassle.

    You will add each icon image to your server, and then add the path as background URL in the CSS file.

    ❌ UI - Hard to get all icons consistent
    ❌ Slow (injecting images)
    ❌ Paid $ (icon collection required if you want them to have a nice and consistent UI)
    ❌ Maintenance of needing to upload to server
    ❌ Requires code (Inject CSS)

    a[href$='.pdf'] 
    { 
    background: transparent url(/images/icon_pdf.gif) center left no-repeat; 
    padding-left: 20 px; 
    }

    Figure: Replace the path in background URL with each icon image

  24. Do you use an icon so a password prompt should never be a surprise?

    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

  25. Do you have a section for related links?

    Make sure you have a 'Related Links' section at the bottom of each page. This helps avoiding:

    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 - Users don't want to scroll too much. If you have all your information in one page, visitors will 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.
  26. Do you avoid linking users to the sign in 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, they will go to the default page.If not, the page will redirect them to the login page.But if you use the sign in page, the user has to sign in again though they're already logged in.

    Figure: Bad Example - Linked to the login page.

    Figure: Good Example - Linked to the default page.

  27. Do you indicate menu items that have 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.

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

  28. Login Security - Do you know the appropriate error message for an invalid username or password entry?

    When a user fails to sign in due to an 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 (hackers) to get access to your account and do malicious things using your information.

    A more secure and prudent approach involves delivering a message that simply states 'Invalid email or password.' This intentionally avoids disclosing which specific credential is incorrect, thereby enhancing security by limiting the information exposed to potential threats.

    GoodLoginError
    Figure: Good example - For security reasons, leave it open if it was an invalid username or password

  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. Calendar - Does your website make it easy for your users to add an event to their calendar?

    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.

  32. Do you know to not include UNC paths in URLs?

    UNC (Uniform Naming Convention) is a naming system used in Microsoft Windows operating systems to specify the location of a file or folder on a shared network resource. However, UNC paths should not be used in URLs as they are typically used to specify file paths on a local network rather than web resources.

    In a URL, the path component specifies the path to the resource on the web server, and it is relative to the server's document root directory. While it may be possible to include a UNC path in a URL, doing so would likely result in an error, as web servers are not designed to handle UNC paths.

    An example of a UNC path is:

    \\server\share\folder\file.txt

    Additionally, including a UNC path in a URL could be a security risk, as it could potentially expose sensitive information about the server's network configuration. Therefore, you should not include UNC paths in URLs.

  33. Do you avoid including full stop or slash at the end of URLs?

    Including a full stop or slash at the end of a URL does not necessarily make it invalid or non-functional. However, it's worth noting that different web servers and applications may interpret URLs differently, and some implementations might treat a full stop or slash at the end differently or consider it as part of the URL.

    In general, it is good practice to avoid including unnecessary characters at the end of URLs to ensure compatibility across different systems and prevent any potential confusion or misinterpretation.

    It's recommended to follow the standard URL conventions and structure URLs without trailing periods or slashes unless they serve a specific purpose or are required for a particular system or application.

We open source. Powered by GitHub