SSW Rules to Better Websites - Navigation

Do you remember to change the default title of a newly created page?

Figure: Bad - A page with the default title

Figure: Good - A page with a good title

Navigation: Do you use underlines where you shouldn't?

Every user knows that an underline means a link. Never underline when the text isn't a link.

Figure: Never Underline the text when it isn't a link (with sincere apologies to Scott Guthrie...)

Navigation: Always underline a link and include a rollover

Always make links perfectly clear, by underlining them and including a mouse rollover in a contrasting colour.

Go to SSW <-- Not Good

Go to SSW <-- Good

Navigation: Do you make sure users can see Visited Links?

Figure: Distinguish visited links

When there are lots of links on a page, showing which link has been visited would help a user who is going through links in the page. This is usually done by changing the colour of the visited links.

The HTML standard method is to include the "Visited" attribute in the "<A>" tag. However, the common method used today is including a style sheet rule. The pseudo attribute :visited to the A tag allows the specification of a different formatting for visited links. For example, in (ssw.css)

A:visited
{
color: purple;
}

Figure: Link Colours

Do you leave your users Bread Crumbs instead of "Return to" links?

Breadcrumbs are a navigation element that allows users to know what section a web page is in therefore avoiding the situation where the user is "lost" especially if the website has a lot of categories and each categories is a few level deep. They are also useful as they help visitors to your site learn it's structure.

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.

Bread crumbs make it easier for users to navigate your site and should always be used instead of "Return to" links when there is a need to navigate between pages that are hierarchically sorted.

Figure: Bad navigation as it only allows user to move one page back

Figure: Breadcrumbs allows user to quickly identify where this page is located

Breadcrumbs are also useful to offer shorcut links for users to "jump" to previous categories.

Navigation: Do you display information consistently?

Figure: Click on "More" and the next page begins with the same information

Navigating around a site can be challenging when web-masters aren't consistent with the way they treat information. When you move from link to link, the last thing you want is the user to become even a little disorientated. A good way to avoid this is to treat the link and the next page consistently. Otherwise websites become a mysterious adventure....

As an example whenever you see a description of an SSW product or service, it always has the same format of information. 1) A "Marketing-ish" description in one sentence which explains the benefits of using the software. 2) A longer paragraph with more information.

When you link to this page you use the same text layout as above and a "more" hyperlink to the same page. The resulting effect is when the user clicks on the "More" hyperlink, the page will begin with exactly the same information again. This ensures the user is never confused when navigating from one link to another, and sees the connections when moving 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.

Do you avoid displaying out of date information?

Anyone who has maintained a website knows that it can be a fair amount of work. If your visitors see outdated information, it can mean certain "death" as the visitor will probably not come back again (what's the point? - it is unlikely you will have current information)! Your site needs to be regularly maintained and updated if you want to keep your visitors. The reality is that you won't always be able to update your pages regularly, so it's a great idea to write them with this in mind, making them seem current even when you haven't touched them in months.

A good way to do this is to use language like 'today' and 'new'. A good example of a website that looks current even though it hasn't been modified in years is http://www.DBCombo.com/ - notice how there is a 'what's new' link in the left nav.

Figure: Use words like 'today' and 'new' to make your web page seem current

It is also a good practice to hide entire 'new' section on the webpage if there is no new content coming. For example, there is an 'Upcoming Events' section on SSW website home page. When there is no new events coming, the home page could look like the following,

Figure: Page before empty Upcoming Events is hidden

as you can see, the empty 'Upcoming Events' section is redundant. To solve the problem, apply the following code.

                    
                    In Default.aspx, make sure the division control has the attribute "runat=server"
                        :
                    <div id="div_upcoming_events" runat="server">
                        Upcoming Event 1
                        Upcoming Event 2
                                .
                                .
                                .
                    </div>
                    
                    In code behind Default.aspx.vb, add :
                    Dim isEventsComing As Boolean = False
                                .
                                .
                                .
                        'set isEventsComing=true if there is any coming event
                                .
                                .
                                .              
                    If Not isEventsComing Then
                        'hide the section
                        div_upcoming_events.Attributes.Add("style", "display:none")
                    Else
                        'display the section
                        div_upcoming_events.Attributes.Add("style", "display:block")
                    End If
                

After hiding the empty 'Upcoming Events' section, the page looks like below, notice the 'Newsletter' section has been brought up.

Figure: Page after empty Upcoming Events is hidden

Navigation: Do you make sure your page name is consistent in three places?

It's a good idea to make sure your page names consistent.

Figure: Good: Title, Header and Navigation Menu item all have the same text.

Navigation: Are your links intuitive?

Hyperlinks are the foundation to website navigation. It's got to be as easy as possible for users to get around your site - they don't want surprises. An intuitive hyperlink is one where the link itself explains what will happen when it is clicked.

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

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

This rule also has relevance to improve your Google ranking.

Do you believe that content is king?

No matter how much website information is out there, there are still people who randomly create sites which look pretty but do nothing or even worse, have valuable information but look so bad or are so slow to load that no-one ever sees them. Years ago, when the Internet started to catch on, people liked the "cool" sites and the "awesome" graphics and were prepared to wait for them. They didn't care that the content was slim, they were just thrilled to be looking at pretty sites. As the Internet evolved, so too did its surfers.

These days surfers want information and they want it quickly. They are done with "pretty" sites and want the useful ones instead. For example, if you are cat lover and had two sites to choose from - one had lots of cute pictures of cats, the other just one picture but a lot of information about how to care for cats, the food they prefer, the different breeds etc - which one would you go back to? You would probably look at the graphic rich site first, just out of curiosity and immediately forget about it afterwards, but you would then continue to go back to the site which has all the information about cats regardless of the fact that it doesn't have a lot of pictures!

Navigation: Do you avoid Frames?

Frames used to be very popular but now it has become annoying to surfers. When your site uses frames, it means you have two or more screens operating at the same time but often working independently of each other. Frames are basically a method of displaying more than one Web page at once. You know when a site uses frames because there are scrolling bars not only to the right of your screen but also in the website to enable your visitor to scroll one area while the other remains unchanged. The problem with frames is that they can be complicated to program and the surfer can get frustrated from having to click on all these separate windows and not being able to maximise his/her viewing. Instead, part of the site is always "dead." For instance, if all the information you want is in one screen, the other screen is useless to you - dead - but you can't get rid of it. It is taking up unnecessary space. Frames are also hard to print and link to. In addition to that, frames can just be plain ugly - something you should avoid!

Other problems with Frames include:

1. The URL is lost - meaning I can't copy it, email it, or bookmark the page
2. I can't simply edit the page in FrontPage from the browser. To me this is a show stopper
3. When Google returns the page from a search, it doesn't return the frame around it, so all your effort on formatting is lost when people reach your site through a search engine (and who gets there any other way?)

Bottom line we find most of our projects don't have a need for frames.

NOTE: You can fix frames so that every page has a distinct URL (as the site above does). So if a customer wants fixed nav bars then you should modify the following code:

<frameset rows="125,*" border="0" framespacing="0" frameborder="0">
<!-- This dynamic script makes the menu page context-aware -->
<frame noresize src='FramesMenu.aspx?page=<%= Request("page") %>' scrolling=no>
<!--This dynamic script just shows the page, simple!-->
<frame noresize src='<%= Request("page") %>' name="main">
</frameset>

Figure: Add this code to use Frames and also have distinct URL's

Navigation: Are the 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!)
   

Navigation: Have you named your title tags appropriately?

When you add a URL to your favourites the name that Internet Explorer uses to save your favourite URL is affected by the title tags in your code. See below

Figure: You don't want to see a favourite that doesn't describe the page

Figure: This is more appropriate

Figure: Make it the same as the title (preferred)

Navigation: Do you make your pages easy to access?

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.

A web page should not be more than 4 levels deep. That means that a visitor should be able to access any page with less than 4 clicks from the homepage. SSW web site addresses this problem by incorporating a dropdown navigation bar on every page.

Figure: Have a useful navigation system

Navigation: Do you avoid having redundant links that points to the same page?

I often see pages have 2 or 3 links 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

Navigation: Does your heading tell the user what to do?

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

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 on which site he is and what he has to expect next. This covers the whole billing process.

Figure: This is how headings should look

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

Navigation: Do you use icons not to surprise users?

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	This is a PDF file
JPG	This is a Image file
DOC or DOT	This is a Word Document file
XLS	This is an Excel Spreadsheet file
PPT	This is a PowerPoint file
TXT	This is a Text file
AVI,MOV,MPG etc.	This is a Video file
WAV,WMA,MP3 etc.	This is a Music file
SNP	This is an Access Database snapshot file
EPS	This is an EPS file
ICS or VCS	This is a calendar file
EXE or ZIP	This is an executable or zip file
mailto:	Send email to Adam
XML / RSS	Subscribe to RSS

Note: Google also uses the same images at http://desktop.google.com/features.html#sidebar

Figure: Bad Example - Hyperlink only.

Figure: Good Example - Use icon before a hyperlink.

Navigation: Do you use an icon so a password prompt should never be a surprise?

Figure: Bad because when you click on "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.

Do you use avoid scrolling marquees and flashing text?

Before the Internet really took off, a Netscape programmer incorporated a new command into his Web page. It basically caused text to blink on and off. The programmer meant it as a joke to prove that while you can pretty much program anything for the Web, would you really want to?! Unfortunately for the programmer, it wasn't perceived as a joke but rather as a nifty new command and it proliferated many websites before the word got out - it's a joke, don't use it. Too many people forgot to think that just because they can do it, it doesn't mean they should.

The same goes for scrolling marquees - the text which scrolls along the top or bottom of your page, usually promoting something. It also comes under the category you shouldn't do it just because you can. Neither one of these commands add anything useful to a site and at best, they are distracting and at worse, take up loading time and can cause your visitor to leave. The other problem with marquees is that while they work in Internet Explorer, they don't in Netscape Navigator. Instead, your text remains in the one place and can look out of place as a result. Again, this is the mark of an amateur and should be avoided.

Do you use a white background?

Many people like to use a black background on their websites. The graphics will then stand out better, particularly if they have bright colours.

Unfortunately, there are a couple of problems with this:

1. White text on a black background is hard to read and very off-putting.
2. Because it is hard to read, many people then try to print it out, hoping it will improve readability.

This means using a lot of black printer toner because of the black background, something some people can get peeved about. Your site is then avoided because it is costly and hard to read.

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.

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: GOOD because the combo boxes have fixed values and can autopostback.

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

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

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

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

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.

Do you ommit full stops from the end of bullet points?

Technically bullet points with multiple sentences should terminate with a full stop, however if there is a series of bullet points and only one has multiple sentences, the full stops will look odd. It is better to just remove all full stops from the end of all bullet points. This will maintain a consistent look.

Do you avoid linking users to the login page directly?