If you want users to take action on the web page content, add 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".​​

Why do we call it "banana rule"?

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, he will do whatever it takes to get it

This is how the "banana rule" should be applied:

Figure: Bad Example – "Points+Pay"button takes the attention over "Go"​ which should be the "banana"

So, remember most pages need a "banana" to get them to where you want them. "Bananas" are big, simple and stand out from the rest of the page

Always indicate which fields are required. Users get frustrated when they experience a wasted trip to the server, just because they did not get an obvious indication of what was required first time around.

Figure: Bad example - No visual indication for required fields when a user first sees the form

A designer will know the best way to indicate required field depending on the layout. However if you are in doubt and don’t have a designer around, a red asterisk is definitely the best option.

Figure: Good Example - A visual indication of what fields are required (use a red asterisk if you are not a designer)

More Information

You should combine these visual indicators with appropriate client and server side validators to make sure that your data conforms to business requirements. Adding a RequiredFieldValidator to the above textboxes gives you data validity check with minimal coding.

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

Figure: Bad Example - No validator used, so the user won't know the email is required

It seems nearly all web developers are confused whether they should use hyperlinks or buttons on forms. The recommendation is that whenever data is being submitted (e.g. Save, Cancel, Apply) you should use a button, otherwise use a link.

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

Note: If you are using an automated link checker

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 Li​nk 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 e.g. Are you sure you want to delete?". It is 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

All update ability must be via buttons, not hyperlinks (as buttons are known on the web to submit a form).

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

If you want the user to be able to right click and "Open in New Window"

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: Bad Example - The "sign in" hyperlink should be a button

Figure: Good Example - This is a perfect example of how a good sign in screen should look

When you add an image to a website or application, it is so useful to add a figure underneath it to describe your image. Tip: Prefix it with the actual word "Figure: ".

(This is the same as how Microsoft Word does it when you add a caption.)

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.

Figure: Good Example - Some nice useful text describing the image

It is especially important that images and captions serve a purpose, as opposed to graphics which are there solely for design.

Tip #1 - Bold your captions

[image]

Figure: [Description…] (not bolded)

[image]

Figure: [Description…] (bolded is best)

Tip #2 - Describe the actions

Especially for screenshots, it is a good idea to have your figure describe the action the user would take:

Why do so many interesting pages have no owner? There are countless articles on the web that have left the reader wondering: "Who wrote this? What is their background?

Sometimes, the only available link is author’s email, which doesn't say 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.​

​

​Different article layouts can be:

Articles with a column and no authors listed - Very Bad

Articles with authors but no link to their biographies - Bad

Articles with authors but only a "mailto:" link for direct email -
Average

Articles with an acknowledgements section and a link to the biographies -
Good

Users often want to know the people behind information. 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 every web page or document should have an owner and include a link with more information about the author​.

As we know portable devices like tablets and mobile phones are being more and more used as reading devices, however printing web pages is still often necessary. In general web designers don't think about printing when putting a web site up, meaning we're left with web pages that frustratingly don't properly print on to paper.

​​A print.css file works in the same way as a regular stylesheet, except it only gets called up when the page is printed, by setting the command media to be "print", as per below:

An oversized image or table on your page can greatly reduce your page's readability
and disrupt its layout￼￼￼￼. It affects page loading and can also cause problems in printing, wasting natural resources.

That's why you should limit all your images and tables to a maximum of 8​00 pixels wide.

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 sign in dialog. This saves having the
user click on another link to enter their details.

​

Figure: Bad example - non-friendly sign in screen

The image is a bad example of a dialog box because:

You can easily enter the correct data and click the wrong hyperlink (i.e. Join or sign in)

By well-established convention, buttons should be used whenever form data is to be submitted back to the server

The "Forgot my Password" link 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: Good example - friendly sign in screen for many new visitors

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

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 sign in page.

"I do recommend letting users enter their email address instead of a user ID: It's guaranteed to be unique and it is easy to remember."

Jakob Nielsen,Ph.D. and Principal at Nielsen Norman Group​

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

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

Figure: Good example - users can enter their email to get a new password

​Do you avoid a username enumeration attack?

This practice also opens up the risk of "username enumeration" where an entire collection of usernames or email addresses can be validated for existence on the website simply by batching requests and looking at the responses. You can read more on Troy Hunt's blog post. You should always aim to not disclose if a user is registered with your site or not.

Figure: Bad example - Displaying information that a user does not exist?

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

​​
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 results. Their result
pages are clear and efficient, especially for a large result set.

Public Websites done completely with Flash or Silverlight can be very eye-catching
and used in the right spots can achieve way more than you can ever achieve with
HTML. But beware because:

It does not work on an iPhone or iPad

Flash/Silverlight can be slow loading, especially if the visitor is not using a
fast Internet connection. If your website doesn't load within 5 seconds, they're
gone. (There are techniques to overcome this)

It is bad for search engine rankings as there is no content for search engine spiders
to crawl through. (There are techniques to overcome this)

Often seen with busy designs that turn off or distract visitors. Look at the biggest
ecommerce sites and you notice that none of them are Flash websites

In many cases it unnecessarily creates page bloat

You can *almost* get the same effects and functionality using jQuery, but faster
and lighter

You get an inconsistent UI if you use it for controls such as text boxes

Flash and Silverlight do not support CSS, so you need to follow unfamilar concepts
for re-skinning

Finally, and saddest of all, when Flash/Silverlight is used, it is normally ​over used.

Footnote #1: It is clear that Flash has been quite successful in the past - the penetration
of its run time is 99% on PCs, however because of the fact iPhone and iPad don’t run it and the growth of HTML 5, Flash is now considered an old technology. ​

Footnote #2: The development of Silverlight has been discontinued as ​of 2012 due to the poor acceptance of Silverlight and restrictions Microsoft imposed on its utility. ​

Since HTML5, DOCTYPE no longer requires a reference to a DTD. Back in HTML 4.01, The DTD links were used in to specify the rules for the markup language (Transitional, Strict, Frameset etc) so that the browsers render the content correctly. It’s no longer necessary.

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 combo rather than normal combo or text boxes. A good implementation of predictive-text combos will also perform a type-ahead effect, 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: Bad Example - Using a Textbox and Combo to enter list data

Figure: Good Example - Predictive-Text combo with Type Ahead

Figure: Good Example - Predictive-Text combo with and without validation

HTML5 introduced a whole slew of new type properties for forms. Gone are the days of just using type="text" for every field in a form (barring buttons and checkboxes).

Although most of these don't do anything on desktop, on mobile devices they bring up the correct keyboard. As we move into a more mobile digital age, small things like the proper numerical keyboard or a keyboard with a quick ".com" becomes increasingly important.

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:

Display the text as an image

sIFR

Font stacking​

Google Fonts​​​

Self-hosting​

Webfont services

​​Each method mentioned above has their disadvantages. We discourage #1 - Images are bad for Google juice and cannot be selected;​ and #2 - sFIR uses old technology based on nearly dead Flash.

​
If your styles are going to be different, then make it obvious that they are different. Don't be timid about it! This is a great time to be daring!

"Different" can mean many things: different font family, different style, different size, and​ different color. But the most important thing is to make it obvious that they are different.

Partial differences make people get confused and start asking things like "this looks a bit strange, but I don't know why. Is that intentional?"

Compare the follow two examples:

Figure: Bad Example - The heading and body text is very simlar, only 2px font-size difference.

Figure: Good Example - The heading as been bolded and the content font size decreased to make it more obvious that the two are different styles.

Picking your fonts carefully applies to all forms of design where text is involved. Unfortunately, deciding what sort of differences look good and what doesn't is extremely subjective and is a skill that gets developed overtime.

​Why do web pages have "Reset" buttons? I have been entering forms on the web for more years than I care to remember, but have never needed to click this button. The worst thing is I have accidentally hit it a few times after - I have a habit of doing 3 things at once - it happens just after I have finished entering everything and click the first button.

​​People may not pay attention to some important words in your pages. While adding a simple and clear icon beside the words will make the difference. Add a green tick for successful messages and a red cross for error messages.

The <img> tag of HTML has 2 attributes that should not be used - "height" and "width". Any image resizing should be done via CSS. If the height / width ratio doesn't match that of original image, the image will be stretched.

When a user downloads a file from your site, they should see a progress bar along with
the total size and estimated time, this way they will see the size of the download
increasing and will 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 left

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

When you ring up a company and ask “do you sell boxes?” it is not expected to hear them
say “no” and hang up. They should answer the question and suggestion something, for example: “No, but we sell
plastic containers, would you like that instead?”
​

Websites should do the same by giving more information instead of just say “404 – page not found” or “your search did not match anything”. It can be a simple “Try one of these instead” giving a number of links. ​

Figure: Good example - If you don’t match anything on Amazon, it gives you some other choices to click on

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.

First, the reason to cause the style issue is the style doesn’t apply to right place. Below is the html code after you adjust the figure manually (sorry, still not right ). Please look at the highlight part,

the “ms-rteCustom-ImageArea” style doesn’t apply to <img> tag, but wrapped by <span> with “ms-rteCustom-ImageArea” style;

there is no style apply to figure;

<span class="ms-rteCustom-YellowBorderBox">We have a program called <a href="http://rules.ssw.com.au/WebSites/RulesToBetterWebsitesLayout">
SSW LookOut! for Outlook</a> to check for this rule.
<br />
<br /><span class="ms-rteCustom-ImageArea"> <img style="border-bottom: 0px solid; border-left: 0px solid; border-top: 0px solid;
border-right: 0px solid;" border="0" alt="Lookout Reply All BCC Warning" src="http://rules.ssw.com.au/WebSites/RulesToBetterWebsitesLayout" />
<br /></span><b>
<br />
Figure: SSW LookOut! for Outlook warns you if you accidentally 'Reply All' when
you have been BCC'ed </b> </span>
1. Not sure how user inputs the content into this page. Anyway, here is the right way to add content via Telerik Editor. Please read below example of how I redo this part in Telerik Editor without changing the code manuallyFigure:Copy content in the notepad2. Delete the current content from Telerik for a new start;

3. Copy the first sentence from notepad and paste into Telerik Editor in the page; (please avoid copying straightly from web page and pasting them here, it will copy the all tags as well. it might affect the styles which can’t apply correctly )Figure: Start copying content over4. Insert the imageFigure: Add a link to text5. Add an imageFigure: Inser an image6. Press “enter” key to start a new row, then copy the figure from notepad to the Telerik editor areaFigure: Add figure7. Apply image style to the image by click on the image, then choose a style from “Apply CSS Class” dropdown listFigure: Apply style to the image

8. Apply style to the figureFigure: Apply style to the figure9.Apply the yellow boxFigure: Apply yellow border box to the content10. Check in the changes, then you will have - "dada.."Figure: Right style in use

There are many scenarios where you need some extra space in a web page. No matter which one you are at, CSS is the answer.

Sometimes the first thing that comes to the developer mind is to use the "break line" tag (<br />) or the ASCII character code for "space" (&#160;) to create these extra spaces. It's wrong. CSS is the way to go. You can use both "margin" or "padding" CSS properties to get the result you want.

<ul>
<li>&#160;&#160;&#160;List item</li>
</ul>

Figure: Bad Example - Using the "space" ASCII character to create a padding on that list

<ul>
<li>List item</li>
</ul>
<br />
<br />
<br />

Figure: Bad Example - Using the <br /> tag to create a space at the bottom of that list

ul {margin-bottom:15px;}
ul li {padding-left:10px;}

Figure: Good Example - Using CSS to add a margin at the bottom of the list a the padding on the left side of each list item

Tip: You might be not familiar with editing a CSS file. In this case, contact a designer. He/She will be more than happy to help you.

The attribute "name" allows you to link to specific places within the page, via the <a> tag.

This is especially useful in long pages that can be separated into sections. You can create a named anchor in each of these section headings to provide "jump-to" functionality. In other words, you can have a different URL for each piece of content on the same page.

<h2><a name="get-started"></a>Get Started</h2> Figure: This is how you add an anchor name to an specific section of your page. Note it doesn't have the hash mark and the anchor tag is empty

You now have a custom URL that points to the specific section of the page. It is the page URL followed by the hash mark and the name you chose:

http://www.yourpage.com#get-started Figure: This is how your custom URL will look like

You can use this new URL to point users to that specific section of your page.

To create a link to your anchor named section inside the same page, simply add a new "href" anchor tag - now with a hash mark followed by the name you chose:

<a href="#get-started">Go to Get Started section</a> Figure: This is how you add a *link* to that anchor name you created inside the same page. Remember to add the hash mark

Tip #1: Use the hash mark
only to go to the top of a page. E.g. <a href="#">&Go to top</a>

Note: If a browser represents less than 2% of your website views in Analytics, then you shouldn't bother. E.g. Google shut down this link - http://html5shim.googlecode.com/svn/trunk/html5.js - which was used as an HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries. Since IE represents a small percentage of views it can be removed instead of updated to a new working shim.

When a user looks at a search result, they expect to see a list of items to look into. If there are no results, don't give them noisy text because it can be taken as a search result. An icon also can be understood as a broken page. Your "no results" page should be clean.​

Figure: Bad example - The list of "suggestions" is just noise and can confuse the user​

Figure: Bad example - Having an icon implies that an error happened which is not the case

There is a clever, lightweight way to embed a YouTube video, which Google itself practices on their Google+ pages which reduce it to 15kbs.All you have to do is, whenever you need to embed a video to a page, add the below tag instead of the YouTube video embed code. (Remember to replace VIDEO_ID with actual ID of the YouTube video)

Help and improve these rules

Nothing great is easy. The SSW rules are a great resource for developers all around the world.
However it’s hard to keep rules current and correct. If you spot a rule that is out of date, please email or if you are cool tweet me.