SSW Rules to Better Websites - Layout & Formatting

Do you indicate which fields are required?

It's very easy to prevent a wasted trip to the server by indicating visually to users which fields are required when completing a form. This way they should get it right first time around.

Figure: Visually indicate which fields are required

<asp:Textbox runat="Server" ID="email" />

Figure:Bad Example - Not use validator, the user won't know the email is required

<asp:Textbox runat="Server" ID="email"/>
<asp:RequiredFieldValidator runat="Server" ControlToValidate="email" ErrorMessage="Please enter an email address"
ID="emailReqValidator" />
			           

Figure:Good Example - use validator to indicate the email fields is required

Do you use a clear asterisk to indicate required fields?

Usually, an asterisk character (*) is used to indicate required fields. However it’s not clear enough. Please change it to an image, e.g. this nice star .

Figure:Bad Example - Use an asterisk

Figure:Good Example - Use an clear asterisk

Submitting Forms: Do you know when to use Links and when to use Buttons?

It seems nearly all web developers are confused whether they should use hyperlinks or buttons on forms. I think the decision should be that:

• Whenever data is being submitted (e.g. Save, Cancel, Apply) you should use a button.

This is because hyperlinks indicate navigation - "If I click this link I'll be taken somewhere else". Whereas a button indicates that something is being processed - "When I click this, I'm agreeing that something is being submitted"

It is important you use buttons for updating or deleting data on your website. The main reason is problems will occur when you run a link checker (we run SSW Link Auditor), and you have data driven pages with "Update" or "Delete" hyperlinks. The link checker will try to go to all associated links and potentially delete a lot of data from your website database. 

But you say "My Delete links have JavaScript protection eg. Are you sure you want to delete?". Still no good because link checkers ignore all JavaScript validation.

Thus, we must have:

• Password protected areas on the website when we can update the database records via the web, and
• All update ability must be via buttons, not hyperlinks (as buttons are known on the web to submit a form).

That being said, I think there are a couple of exceptions to this rule.

1. If you want the user to be able to right click and "Open in New Window"
2. If you want a consistent design feel (and there is no confusion that the link is accepting data)

Figure: An exception to the rule - an "Update" button inside the datagrid would look inconsistent

Figure: Is this a good or bad login? Answer: Bad - The "Login" hyperlink should be a button

Figure: This is a perfect example of how a good login screen should look.

Do you follow the "Banana Rule" in your web pages?

Most pages need a "banana" something that makes it obvious what the user is supposed to do.

For example, if your page is selling software, make it easy for your users to make a purchase. People don't have a lot of time to read your entire page and find the right link, so it is important to grab their attention by using a "banana".

Treat your users like monkeys
How would you get a monkey pay attention to something? You could lure him by tempting him with a banana. Once we have the monkeys attention focused on the banana, he will try to get his hands on it regardless of the barriers on his way.

Figure: If the monkey can see the banana, will he do whatever it takes to get it?

Here are some examples of the "Banana Rule"

Figure: Can you see the banana here? There is none. You wouldnt know that the goal is to get some one to try the software by clicking on the Try It Now link

Figure: Can you see the banana here on the Amazon page? It is the "Add to Shopping Cart" button

Figure: Can you see the banana here on the SSW page? It is the "Free Download" button

So, remember most pages need a "banana" to get them to where you want them.

Want to know more? Get the book 'The Big Red Fez' about web design by Seth Godin - the entire book is about this one simple point. (It's a bit dated now...)

Do you add images and reduce the words?

An image is worth a thousand words, that's true.

So we need a better way to present image on our website and it should be easy enough to create a decent look.

In SSW, we use the <dl class="className"></dl> tag to include an image in our page.

You then have this pretty pink flower with a green stem standing on a water pond. It is beautiful.

Figure: Bad example

Figure: Good example - Add a picture or a screen capture to avoid a thousand words

Do you add a useful figure caption in bold below all Images?

It's the best way of ensuring you catch users attention to the content of your page. When you're scanning a newspaper for interesting articles, you'll check out the pictures, read the accompanying description, and if it sounds interesting you'll go back and read the article.

Users read websites in a similar fashion. Catch their attention with an image, and then keep it with a useful description. Don't just describe what the image is, say what it's used for in the context of the document. Look at these bad and good captions.

Figure: Windows Display Properties

Figure: Use the Windows Display Properties to set your screen resolution

It is also useful in User Guides or documents where the Images serve a purpose, rather than Images which are there solely for design.

Do you use the right code to add the useful figure/caption?

<img src="Images/MonkeyWithBanana.gif" alt="Getting attention of monkey with banana" width="381" height="198" />
<b>Figure: If the monkey can see the banana, will he do whatever it takes to get it?</b>
        

Figure: Bad example - because the styling needs to be done here (eg. adding bold, adding green tick and adding grey border)

<dl class="image">
<dt>
<img src="Images/MonkeyWithBanana.gif" alt="Getting attention of monkey with banana" width="381" height="198" />
<dd>Figure: If the monkey can see the banana, will he do whatever it takes to get it?</dd> 
</dt></dl>
        

Figure: Good example - because the CSS adds the styling (border around the image and makes the text bold) (note: SSW specific)

Do you use 'Bad Example' and 'Good Example' in captions?

The best way to emphasize your point is to *build* the pain first and then show the solution. So we use "Bad Example" and "Good Example" in the captions where possible.

To do this, we give a bad example and raise users' expectation first.

<dl class="badImage">
<dt><img src="../images/ImageBadExample.GIF" border="0" /></dt>
<dd>Figure: Bad Example - This is where you can find your kid if you don't keep an eye on him </dd>
</dl>

Figure: Bad Example - kid not in his seat

Now we can show the solution and give a good example as the result, make them feel released.

<dl class="goodImage">
<dt><img src="../images/ImageGoodExample.GIF" border="0" /></dt>
<dd>Figure: Good Example - kid in his seat (well, not really)</dd>
</dl>

Figure: Good Example - kid in his seat (well, not really)

What's the best way of showing a message box on the web?

Since the dawn of the Internet, user message boxes have troubled developers. Previously, developers only really had a couple of options to inform the user about some information. See Is there a good way to message users on a webpage? for details.

Figure: How a HTML message box should look

Do you always acknowledge your work?

Why do so many interesting pages have no owner? I've read countless articles on the web, and have been left wondering, "Who wrote this? What is their background?". The only available link would be a mailto: to email the author, which doesn't really help me learn anything about them. Sure, contact info is often a good part of the biography, but it should not be the primary or only piece of data about the author.

This is how I would rate different article layouts:

Very Bad: Articles with a column and no authors listed.
Bad: Articles with authors but no link to their biographies.
Average: Articles with authors but only a mailto: link for direct email.
Good: Articles with an acknowledgements section and a link to the biographies.

Users want to know the people behind information on the Web. Biographies and photographs of the authors help make the Web a less impersonal place and increase trust. Personality and point-of-view always win over anonymity.

So the rules are:

1. Have an owner
2. Include a link to the biographies
3. Follow this rule for any document like .htm, .doc, .xls etc.

Look at this example of article acknowledgements.

Note: mailto: links should always have an icon next to them.

Printing: Do your web pages print well?

Figure: Format your page for printing

People often print web pages. As we know reading from a screen is not nearly as good (yet) as reading from paper. But in general web designers don't think about printing when putting a web site template together. To make printing the SSW site easier, the Left Navigation bar disappears. This means you don't get a big white stripe down the left, taking up valuable paper space.

If you're running IE 5.5 or above, click File/Print Preview and check out how this page prints...

Figure: Also check that your margins are set to 7.5mm to maximise printing

A bad approach to printing web pages is offering a 'Printer Friendly Version'. This means there are 3 print options - see image below. Why should these options be different? Only one of these print options will work i.e. not show white stripes down the left side of the printed document. It is our approach not have the 'Print' option - see print option 2 in the image below - and to make the web pages themselves printable.

Figure: Why have three print options? Just make your webpages printable

Do you check your site on the 2 important web browsers (aka multi-browser compatible)?

I believe that you should design a website to look good when being viewed in IE (5.5 and above) and Mozilla Firefox. I don't think you get much value spending effort on anything else. However to be clear, I am not saying totally forget about other browsers, but don't spend much time or money on testing them. The reason is that while IE still has the largest share of users, Mozilla Firefox usage is on the rise, while the other browsers that are used only command a tiny share of the market. Check out these statistics on browser usage

There are a lot of other browsers available, but it is also important to consider that most other browsers are based on IE or Mozilla. This means that pages designed for Firefox and IE should be readable on most of the other browsers too. Also, testing every browser will add unnecessary dollars to your client's bill.

Note that I say readable - not perfect. There may be some page elements that is less than perfect and the "Australian Whipbird" sound doesn't play in Opera (that might be a good thing for some :-) ).  We could fix everyone of these problems... yes including making the sound work by moving it to a Macromedia Flash plug-in - you don't have to have any graphical component.  Yes I am happy with this basic compatibility - I am not even concerned by the font size differences.

Test your web site on these Internet browsers because I guarantee that there will be more differences and problems than you would think. The typical things that you will need to fix are:

• Javascript Menus
• Dynamic HTML
• VB Script

Try to move all formatting to a CSS file as this is the web standard and basic styles are correctly renderd by all browsers

For differences you should generally have server side code that sends the correct HTML to the client.

<%
'Check whether the user is using IE or Netscape. 
'If they are using IE, then populate hierarchal menu.  
    'Else just print the main links.
      If InStr(Request.ServerVariables("HTTP_USER_AGENT"), "IE") = 0 Then
%>
showToolbar(); Simple menu
<% End If %>

Figure: Server side code to check if IE

Figure: This is what our website looks like in Netscape. Not as good as IE, but readable

Do you design your web pages to work with 1024 x 768 (not 800 x 600)?

You may be nicely equipped with a 21" monitor running at a resolution of 1920x1440, but we all know the base resolution we should design for is 800 x 600. Right? Wrong.

SSW's logs report on what resolution their screens are running at. We've determined that the majority of our users use at least 1024x768, so we design for that.

Figure: Log reporting illustrating what resolutions users browse our website at

Authentication: Do you have a user friendly registration and login screen?

This is an example of a bad login dialog box because:

• You can easily enter the correct data and click the wrong hyperlink (ie. Join or Login)
• By well-established convention, buttons should be used whenever form data is to be submitted back to the server
• The "Forgot my Password" is ambiguous - Does it take me to a new page or do I have to enter the email address field first?
• A button, not a link, should be used for submitting data, as links don't allow the user to hit "enter"

Figure: Bad example - non-friendly login screen

For a web site that expects a lot of first-time visitors, it is wise to put the user registration form on the same page as the login dialog. This saves having the user click on another link to enter their details.

Figure: Good example - friendly login screen for many new visitors

For a web site that expects few first-time visitors, this is a good login screen, as it is clean and concise:

Figure: Good example - friendly login screen for few new visitors

Generally, the action buttons should be aligned to the right:

Figure: Bad example - non-friendly login screen with action button aligned to the left

Figure: Good example - friendly login screen with action button aligned to the right

Authentication: Do you use email address instead of user name?

It is easier for users to remember their frequently accessed email address more so than one of their many user names. For this reason, it is best to use email address instead of user name for the login page.

Figure: Bad example - users have to remember which user name applies to this particular website

Figure: Good example - users will always remember their primary email address

Authentication: Do you have a 'Forgot my password' link?

It's easy and common for users to forget their passwords, the vital key which grants them access to the services they are eligible for. To cater for this instance, it is important to have a 'Forgot my password' link on the login page.

Figure: Bad example - what will happen for the poor user that forgot his password?

Figure: Good example - users have an option if they forget their password

Authentication: Do you have a 'Sign me in automatically' check box?

When you present visitors to your site with an opportunity to login, you should always include an option to have that person signed in automatically.

This should be implemented simply by using a check box. A cookie should be stored on the users computer so that next time they visit your site the sign in process is automatic.

Authentication: Do you have a 'Logout' short cut?

Although most of the sites have a 'Log Off' submenu, we recommend adding a short cut next to the user name, this will make the 'log Off' operation more convenience.

Figure: Bad example - Only has a 'Log Off' operation in the submenu

Figure: Good example - Has a 'Logout' short cut next to the user name

Do you have a consistent search results screen?

Every website out there has a page which displays the results of a search. I am amazed that no standard has been adopted throughout the Web as nearly every site seems to have a different way of displaying data.

However, Google is a very good example for displaying search result. Their result pages are clear and efficient, especially for large result set.

At SSW we have adopted Google's search result layout and try to make our search result pages consistent. By doing this we believe that new and regular users will be able to better navigate their way through our website. Here's our standard layout for our search function.

I think the following rules should be applied to allow users to navigate through the results faster:

1. Filters at the top (if more than one add a search button)
2. The number of results found and how long it takes to do the search
3. A statement that explains the criteria that you used for searching
4. The number of pages found (hyperlinks centred in the middle), and these hyperlinks should be shown on the footer of the page only.

Figure: The header of SSW results screen - filter, number of results found, search criteria and time taken

Figure: The footer of SSW results screen - hyperlinks to each of the result pages

Please have a look at our standard search results:

• Product order listing page
• Product download listing page

Do you avoid having a horizontal scroll bar?

One of the most annoying things when you're surfing a site is to have to use a horizontal scroll bar to view all of the information. Not being able to view all the information from left to right of screen, makes the web page harder and slower to read. The Reader should find the web page easy to navigate, to make viewing the website an enjoyable experience.

Therefore it is bad web design to use a horizontal scroll bar. When designing your site, the page text should respect the user's desire to resize the browser window and have text wrap correctly. Also, you should take into consideration the effect that different screen resolutions will have on how much can fit onto the screen.

Figure: Using pre code tags and having lines exceed screen size

Figure: Using pre code tags and having lines not exceed screen size

Printing: Do you check for oversized Images and table?

An oversized image or table on your page can greatly reduce your page's readability and disrupt its layout. It can also cause problem in printing, waste natural resources and inflict pain and suffering.

That's why at SSW we limit all our Images and tables to a maximum of 600 pixel wide.

We have a program called SSW Code Auditor to check for this rule.

Do you avoid using Flash?

Flash can look impressive and eliminates the hassles associated with non-standard DHTML implementations. It is typically used for the introduction on the home page and most visitors are unimpressed - rather than being impressed.

It is clear that Flash has been quite successful - the penetration of its run time is much better than that of .NET. Microsoft has had 2 opportunities to fix this (they should have included the .NET Framework when they released WinXP SP2 then they should have done the same with IE7).

Probably as a result of Flash's penetration, on the intranet scenario, where customers need a business application (typically CRM and order apps) I now am seeing a few developers creating real applications choosing Flash+SQL Server over ASP.NET+SQL Server - a direction I cannot agree with.

PS: The future for these apps will be WPF/E.

Reasons against Flash include:

• In many cases it unnecessarily creates page bloat
• Accessibility support is minimal and developers rarely bother implementing it
• Not suitable for Google although Google has recently released a flash crawler SDK, it is only a half baked solution
• Controls such as text boxes are rendered by Flash, not the host operating system, which results in an inconsistent UI
• Flash does not support CSS or such concepts so no rapid re-skinning

Generally, when Flash is used, it is over used.

Do you use DocType in Web Pages while using CSS style sheets?

If you are using CSS style sheet, by default without DOCType specified Browser will set itself to Quirks Mode, where the browser assumes you are using old fashion style sheet, and the markup may goes wrong.

How to fix?

You should include a DOCType from W3C (they are a well known web standard provider), as a result IE6 will give a standard mode translation for your HTML and give out correct result. See a tip on W3C Don't forget to add a doctype

Figure: Good Example - Sample DocType

We have a program called SSW Code Auditor to check for this rule.

Do you include the number of results in drop down list?

When designing your web site, it's a good idea to help your users where possible. When you use a combo box, it's very helpful to be able to see at a glance how many results can be expected.

Figure: You can't tell the number of results

Figure: The number of results is clearly displayed

Do you use "< Back" instead of "< Previous" or other variations?

According to http://msdn.microsoft.com/library/en-us/dnwue/html/ch13h.asp?frame=true, the commands for navigating through a wizard should be "< Back" and "Next >".

When your site needs a link to iterate backwards through records we recommend that you use "< Back" instead of "< Previous".

There are a few reasons for this:

1. This is the standard used in Microsoft Installation files. MSIs are the most widely used installation package available today.
2. Internet Explorer and several other lesser known browsers use a Back button to iterate back through webpages, so your visitors will automatically know what your "< Back" link does.
3. It is important to keep a consistency on your pages.

Below is an example of a Good "< Back" link versus some Bad variations.

Figure: A Good example of a "< Back" link

Figure: This is Bad because it says "Previous" instead of "Back"

Figure: This is bad because it has too many "<"s or it has no space between the "<" and the "Back"

We have a program called SSW Code Auditor to check for this rule.

Do you use predictive-textboxes instead of normal combo or text boxes?

When getting users to choose data from a medium-long list, or to enter data that has been predefined (such as Country names), it is a good idea to use a predictive-text combos rather than normal combo or text boxes. A good implementation of predictive-text combos will also perform a type-ahead affect, providing the user with a richer experience.

Also, predictive textboxes can be used with validation, or without. In instances where you don't mind if users add data to your collection you can turn validation off; however, to keep your collection clean, it is recommended to use validation.

Figure: Using a Textbox and Combo to enter list data

Figure: Predictive-Text combo with Type Ahead

Figure: Predictive-Text combo with and without validation

To see this in action try our Predictive-Text Combos demo.

The predictive-text combo control used in our demo can be found on The Code Project under the ASP.NET Controls Section listed as ComboBox Control for ASP.NET.

DBCombo.Net is another predictive-text box written in .NET that allows users to type in what they are looking for and then provides a Google Suggest style drop down showing the matching results.

Can your users easily add an event to their calendar?

If you have a date for any event appearing on your site, 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

Figure: User cannot add reminder

Figure: Showing use of Calendar icon

By clicking the calendar icon you can easily add reminder to remind you about particular event out of your busy schedule.

You have 2 options - VCS and ICS. Both let you add appointments to your calendar. We use ICS because it allows to collaborate information between personal information management programs like Microsoft outlook, Mozilla Calendar, MacOSX 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 standard icons to give user a proper idea about the file. User can quickly get the idea by just looking at the icon.

Do you have the correct default for a URL field?

Most developers seem to validate a URL and tell the user what they have done wrong after with a message box like:

Figure: Bad way of using a validation message to tell the user to enter a correct URL

The better way is to have the user avoid the error with a good default.

Bad example - The user has a good chance of entering the URL in the incorrect format

Good example - User immediately knows the format expected

Do you know how to effectively use non-standard font on your website?

In some cases you may need to display text content on your page with a specific font. Unfortunately web browsers don't provide an easy way to deliver rich typography without sacrificing some functionality. Common approaches include:

1. Display the text as an image
2. Embed the font to your page
3. Use third party plug-ins

Each method mentioned above has their disadvantages. #1 and #3 won't produce accessible content and #2 only works best in older version of IE.

A group of designers and web developers has developed sIFR, a method of inserting text rendered in typeface of your choice. This works by using a combination of javascript, CSS and Flash to produce a fully accessible text content whilst maintaining a rich typeface presentation.

Figure: Bad Example - Font Embedding doesn't produce the same result in different browsers

Figure: Good Example - A rich typeface that we can select, copy and paste

Do you provide enough "breathing room" around the text?

The main objective is to provide enough "breathing room" around the text. This will enable user to easily shift their focus on a specific area of a page. This is quite a common technique in print design but lately made its way to web design as one of many distinguishing “Web 2.0” styles.

Figure: The textboxes and "grouping" box creates a clustered feel

Figure: Sufficient breathing room makes it easier for the user to focus on an a specific area

Do you avoid having Reset buttons on webforms?

The Reset buttons on the webforms usually aren't needed, and not only that - there's a chance you could click it accidentally after you have just entered everything.

Figure: The Reset button isn't useful at all

We have a program called SSW Code Auditor to check for this rule.

Do you use icons in web pages to indicate status directly?

People may not pay attention on some important words in your pages. While adding a simple and clear icon beside the words will make difference. Here are some examples:

Figure: Icon to indicate an empty shopping cart

Figure: Icon to warn some functionality may not work

Figure: Icon of OK

We have another similar rule for WinForm application - Do you use green tick, red cross and spinning icon to show the status?

Do you use correct symbols for apostrophes?

"&apos;" is not a valid HTML entity. It is a standard entity in XML and thus in XHTML. Browers which does not support XHTML, like IE, will have problem to display it correctly.

In fact, you can use "&#039;" instead of it.

Source Code: If you can't find what you are looking for in the product documentation
Display: If you can't find what you are looking for in the product documentation

Figure: use &apos;

Source Code: If you can&#039;t find what you are looking for in the product documentation
Display: If you can't find what you are looking for in the product documentation

Figure: use &#039;

How do you get your rule added?

The style in a website should always be kept consistent, so it's necessary for us to have a "rule" for adding new rules.

We follow this method to add a rule to our website:

1. explanation of the problem
2. sample good code
3. sample bad code

When we need to use image to draw attention from user, we also have rules on this:
Do you use 'Bad Example' and 'Good Example' in captions?
Do you add images and reduce the words?

When we need to include code in the rule, we follow our rule as well:
HTML tags for including source code

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.

The breadcrumb

Do you set the maximum width for your page?

The text in a page should fit within the width for increased readability.
This is done by setting the max-width property in the css.

Figure: The max-width property is not set in the css

In the above example,the max-width property is not set.So,it takes you beyond the download image

Figure: The max-width property is set in the css

The max-width property is set in the css so that the download image can be easily seen.

Do downloads show progress and total size?

When a user downloads a file from your site, do they see a progress bar along with the total size and estimated time, or do they just see the size of the download slowly increasing with no way of knowing when it will finish?

Figure: Bad example - there is no indication of the total size of the download or the percent complete, thus no estimate of how long leftFigure:

Figure: Good example - percent complete, time left, total size and a progress bar are all shown

The change in code to achieve this can be as little as one line of code:

Response.AddHeader("Content-Length", file.Length.ToString())

A full code example can be found here: http://www.xefteri.com/articles/show.cfm?id=8.

Good Forms: Do you click a label and have the focus set to the field by using <label>?

When adding input boxes to collect data, please always have a <label> tag associated with your <input> tag to link the labels with their respective edit controls. This improves accessibility and gives nice focussing stuff (when you click the label).

<p>
    <label for="EmailAddress">Email Address</label>
    <input id="EmailAddress" type="text"/>
</p>

Tip: To do this in ASP.NET use the AssociatedControlID parameter on your <asp:Label /> controls.

<p>
    <asp:Label ID="EmailLabel" runat="server" Text="Email Address" AssociatedControlID="EmailAddress"/>
    <asp:TextBox ID="EmailAddress" runat="server"/>
</p>

Good Forms: Do you provide field hints?

Please provide a hints column so users know what the purpose of the data is. Don't worry if this means one column of fields with a long page. This is ok in the Web 2.0 world!

Figure: Field Hints

Good Forms: Do you provide red errors next to the field?

Too often error messages are a summary at the top or the bottom of the page. Instead please provide an error message per validation error, next to the field (and in red!).

Figure: Provide red errors next to the field

Good Forms: Do you provide grouping using <fieldset>?

FieldSet element allows you to group thematically related controls and labels. Grouping controls makes forms more accessible and easier for users to understand the purpose of filling the forms. See example below using “Your Details” and “Event Details”.

Figure: Use FieldSet for grouping

Here’s an example of code.

<fieldset>
    <legend>Your Details</legend>
    <p>
        <label for="FirstName">First Name: </label>
        <input id="FirstName" type="text" /><br />
        <label for="LastName">Last Name: </label>
        <input id="LastName" type="text" /><br />
        <label for="EmailAddress">Email Address: </label>
        <input id="EmailAddress" type="text" />
    </p>
</fieldset>

Figure: example code of fieldset

And what the code produces is

Figure: View of the example code

Things to remember:

1. Wrap logical control groups in a <fieldset>.
2. The first child of a <fieldset> must always be a <legend>.
3. You can hide the legend using CSS if you want ( legend { display: none; } ). E.g., it's hidden in the figure 'Use FieldSet for grouping' and a heading is shown instead.