Secret ingredients to quality software

  • Services
    • Products
      • Training
        • User Group
          • Rules
            • About Us
              • SSW TV
              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. 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"

                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.

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

                Figure: Good Example - Links are grouped into distinct category

                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 a 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 repetead 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 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

                Figure: Bad example - Inconsistency everywhere!

                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.

                Figure: Bad example - A page with the default title

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

              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;;]):after {
                content&#58; url(;     
                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="">Support</a>

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

                <a href="" 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.

                <a href="">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.

                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.

                    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)

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

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

                WorleyParson submenus were also designed with this in mind.

              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.

                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:


                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