Orkut.com and The 3 Click Rule

Community Portal (http://orkut.com) has introduced a new feature where user can reply scraps from his scrapbook itself.Earlier user had to follow the steps like:
1.Click on friends profile >>

2.click on Scrap link on the top>>

3.Write a Scrap (where in he cannot sometimes remember what that friend has scrapped for him/her) and>>

4.Submit

The Procedure is now changed to

1.Click on reply button

2.Write a Scrap and

3.Submit

This Feature(Which is called a 3 Click Rule) has made website very usable and easy for users to Scrap their friends.

What is Usability

The design of your Web site can be almost as important as the content itself, in the sense that an unattractive design or an un-navigable site will turn off your visitors as soon as they arrive. “You can’t judge a book by its cover,” as the saying goes – but people do judge Web sites based on the first page they see on screen.

Probably the best way to get an understanding of what kinds of designs work best is to spend some time surfing the Web. That is the strategy we’ll take in this chapter. But in overview, we can make several observations about what constitutes a well-designed Web site. A well-designed site is:

·Well-organized

·Easy to navigate

·Attractive

·Useful

·Up-to-date

Where do I start?

Figure out which page is the “beginning” of the navigation, the page that you expectpeople to see when they come into the web site. Then figure out where you want them tobe able to reach with one click of the mouse button, two clicks, etc. This will define your“main navigational links” and the “subsequent links”, the street signs that tell them howto reach the other pages on your web site.

Home Page Usability

The homepage is different from all other website pages. A well-constructed homepage will project a good first impression to all who visit the site.

It is important to ensure that the homepage has all of the features expected of a homepage and looks like a homepage to users. A homepage should clearly communicate the site's purpose, and show all major options available on the website. Generally, the majority of the homepage should be visible ‘above the fold,’ and should contain a limited amount of prose text. Designers should provide easy access to the homepage from every page in the site.

11 tips for homepage usability

1. Make your site’s purpose clear.
A good one-sentence tagline is important in helping to establish what your company does. Many people may never have heard of you and won’t automatically know what you do. People are impatient. If you don’t make it clear what you do within seconds, they will not stick around to try and find out.

2. Have a good Title tag.
This will become important for search engines and for when people bookmark your website. Use your company name and a brief description.

3. Group your company information in one clear place.
Good, accessible company information is vital if you want to inspire confidence and credibility. As well as displaying some details on the homepage, make sure you have and ‘About Us’ link clearly marked on the homepage.

4. Emphasize your sites main purpose or task
Clearly mark the starting point for the main function of your website. E.g. If it’s for selling cars, then clearly mark where and what you have to do to find and buy a car.

5. Include a search box
For reasons outlined before, it is very wise to include a search facility. Many people when first visiting your site will scan the page looking for a search box, so make sure it is clearly marked (and make sure it actually works!).

6. Use real content
Don’t just describe what is in your site, use real examples. This will entice them in better than any abstract references will do.

7. Start links with keywords.
Don’t use terms such as ‘click here’. Links are your action items and users will scan down your web page for the link that will take them to what they want. Using keywords will help them differentiate between links.

8. Ensure your page downloads fast.
If your homepage does not start to download within a few seconds, that may be too long. The general rule is that a homepage should download within 10 to 30 seconds. The closer you can make it to 10, the better. But, don’t forget your other pages. If you use many of the graphical elements on your homepage throughout the rest of your web site, this will ensure they download fast too – as many of the items that go towards making up the page will already be in their cache.

9. Don’t over format your critical areas
If you make certain areas too elaborate, users may mistake them for ads. Use visual design to enhance, not define interaction design.

10. Use meaningful graphics
Don’t overdo it with images and stock photography. Make sure the images are relevant to your company and the website. Many times your images may seem frivolous. Remember, that many first time users may pay no attention to your graphics.

11. Another area that is often overlooked is your contact details.
For many websites this can be the number one reason why the user has paid a visit. They want to find out how to contact you, where you are located, what’s your email address, do you have a phone number. As well as being very practical, it inspires that all important confidence and credibility in you. However, it is surprising the number of well know websites that fail even this basic requirement. Many either don’t display full contact details or hide them away in some obscure part of their site (http://www.cdnow.com/). Make sure you display it prominently either on your homepage or as a clearly marked menu item.

Please click on the following link to have a look on checklist which needs to be taken care while designing a homepage:

( Click on Image to Enlarge)

Overview of the System

This Includes the Major purpose of the website, the main function for which the website is created and the users which are going to access this site and what kind of users they are and what do they expect from the website.

So this section includes:

· Site details and their purpose
· The target audience of website
# Students
# Prospective students
# Faculty
# Staff
# Researchers
# General people
# Business Related People.
#Shoppers
#Connection Seekers
#Transactors
#Business Browsers
#Fun Seekers

·The Primary reasons they are using your site for
# Information
# Services
# Community

What technology they might have?
# Modem
# DSL
# Broadband
# This will help determine optimum page sizes
·What target audience expect
·Create a map of your site and check that it is logically arranged/linked

#Specify the DOCTYPE

#Declare the natural language type

Check your competitor’s website and have a look at the Information
they are providing. There are three things that people have on their mind when they come to a site: “I have a task to do,” or “I’m interested in a certain topic,” or “I’m part of a certain audience that needs certain kinds of information.” They come with questions. A good organization scheme figures out which of those three (maybe a combination) are the important ways to organize the information in the site – by topic, by task, by audience.

To Be Avoided

A number of pitfalls await the new webmaster. Here are a few traps to avoid:

• Don’t hand-code your word wrapping. New HTML coders tend to use the tag to hand-insert carriage returns. Avoid the temptation to do this. The browser will wrap text for you based on
the font size and the window size.

• Don’t design for the computer on your desk. Design your pages to work with a variety of window sizes and browsers. If you make it beautiful for your screen, don’t assume it’s automatically beautiful on other people’s screens.

• Don’t blink. It’s tempting to use the blink tag to highlight text. Most readers find this annoying. Avoid it.

• Counters. There are a number of services that offer counters, odometer-like inline images that show how many visitors your site has had. Including a counter on a page is usually a sign of a beginning or amateur site. Use Web log analysis tools to find out your usage patterns. If you publish this information, do so discreetly, not on every page via counters.

• Don’t overload your menus with narrative. One of the great strengths of HTML is the ability to add a hyperlink in the middle of a sentence, wherever it seems natural to do so. This tempts some webmasters into the trap of lavishing annotation on all their menu pages, to the point where every menu of choices becomes War and Peace. It takes the user time to wade through all the annotation, if the user has to do this every time he or she visits the menu page, the user is likely to find the site an unfriendly place to visit.


Examples

This system will be easy-to-use, powerful Learning Management Software. It will allow the Administrators to control the whole software, Teachers to control student functionalities and students to undertake assignments, courses, tests etc.
Looking at the Requirement Document one can say that Administrator will be the main controlling authority and student will be the end user of the system.

Special Comments: As the site is going to be used by few people (not more than 10) for the Admin purpose only and not for the outside world, there is no scope for Usability here, but still I will include my comments, I hope these comments will be helpful to you.

·The system helps buying and selling of plastics equipments and connects buyers and sellers of plastics equipment.
·The major end users would be from plastic (mechanical) industry and so we need to understand that most of these users are not computer experts and might not be familiar with many of the functionalities related computers and Internet.
For such audience only user-friendly and easy to use products will work.

Navigation

Navigation refers to the method used to find Information within a website. A navigation page is used primarily to help users locate and link to destination pages.

Quick Checklist:

§ Does the structure fit the purpose?
§ Is the navigation scheme clear?
§ Where are you?
§ How do you find what you want?
§ Are there a reasonable number of nav-bar choices?
§ Do link names match page names?
§ Are links clearly marked?
§ Is there a clearly marked link back to the homepage?
§ Is there an option to search for information?
§ Is there a site map?
§ Does every page have a standard identity/branding?
§ Does the user have control over navigation?
§ Current location within the site is shown clearly.
§ Link to the site's main page is clearly identified.
§ Major/important parts of the site are directly accessible from the main page.
§ Navigation links change to show the active page.
§ Site map is provided for a large, complex site.
§ Tabbed navigation displays as part of the active page.
§ Easy-to-use Search function is provided for larger sites.
§ Visitors can find information easily.
§ Navigation is clear and consistent throughout the site.
§ Back button always takes visitors back to the preceding page.
§ If site navigation is in form of images, text-based navigation is also available on the page.
§ If Javascript is used for navigation, text links are also available on the page

Horizontal and Vertical Web Site Navigation Menu/Bar – Which one to use?

A web site navigation bar/menu is a very important aspect of a web site. It actually decides the page design and layout. I suggest few basics principles in deciding whether to use a horizontal navigation bar or a vertical web site navigation menu system.

1) If the number of main links on the web site is less than 10 and they fit horizontally on a screen resolution of 800x600 pixels, use a horizontal menu. Since the navigation menu is horizontal, and is followed by the main textual and graphical contents of the web page, it gives you a chance to place graphics and other web page design elements on either side.
2) If the number of main links on the web site and more than 15, then put all these in a vertical navigation bar on the left side.
3) The contents (text or graphics) of the web site also dictate which navigation system use. If most pages have a lot of content, then prefer to go in for a left-side vertical navigation menu system.
4) If the site has to employ dynamic JavaScript drop down menus, use horizontal web site navigation because here the dynamic menu actually drops down rather than be displayed on the side of a vertical web site navigation menu.
5) Vertical web site navigation menus are also easy to update. If a site has 10 main links in a left-side vertical navigation system and the client decides (after about 6 months) that they want to add 5 more, we can simply expand the vertical menu without disrupting the design template. However, in case of a horizontal menu system, it would change the design template because the 10+5 = 15 links would surely flow to 2 lines creating two rows of links.
The above are simply opinions and you might not concur… but I suggest that you look at the site contents (the actual contents of web pages) and the number of main links you want before you decide which web site navigation system to use.

Navigation points that needs to be taken care

1) Provide feedback to let users know where they are in the website.

Feedback provides users with the information they need to understand where they are within the website, and for proceeding to the next activity.
Examples of feedback include providing path and hierarchy information (i.e., ‘breadcrumbs’), matching link text to the destination page’s heading, and creating URLs that relate to the user’s location on the site. Other forms of feedback include changing the color of a link that has been clicked (suggesting that destination has been visited), and using other visual cues to indicate the active portion of the screen.

2) On long pages, provide a ’list of contents’ with links that take users to the corresponding content farther down the page.

For long pages with several distinct sections that are not visible from the first screen, add a short, clickable list of the sections (sometimes called ’anchor’ or ’within-page’ links) at the top of the page. ‘Anchor links’ can serve two purposes: they provide an outline of the page so users can quickly determine if it contains the desired information, and they allow users to quickly navigate to specific information. Since ‘anchor links’ enable a direct link to content below the first screenful, they are also useful for getting users to specific information quickly when they arrive from a completely different page.

3) Do not create or direct users into pages that have no navigational options.
Many Web pages contain links that open new browser windows. When these browser windows open, the Back button is disabled (in essence, the new browser window knows nothing of the user’s past navigation, and thus is disabled). If the new window opens full-screen, users may not realize that they have been redirected to another window, and may become frustrated because they cannot press Back to return to the previous page. If such links are incorporated into a website, the newly opened window should contain a prominent action control that will close the window and return the user to the original browser window.
In addition, designers should not create Web pages that disable the browser’s Back button. Disabling the Back button can result in confusion and frustration for users, and drastically inhibits their navigation.

4) Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page.
Create a common, website-wide navigational scheme to help users learn and understand the structure of your website. Use the same navigation scheme on all pages by consistently locating tabs, headings, lists, search, site map, etc. Locate critical navigation elements in places that will suggest clickability (e.g., lists of words in the left or right panels are generally assumed to be links). Make navigational elements different enough from one another so that users will be able to understand the difference in their meaning and destination. Grouping reduces the amount of time that users need to locate and identify navigation elements.

5) Ensure that tab labels are clearly descriptive of their function or destination.
a) Users like tabs when they have labels that are descriptive enough to allow error-free selections. When tab labels cannot be made clear because of the lack of space, do not use tabs.

b) Ensure that navigation tabs are located at the top of the page, and look like clickable versions of real-world tabs.
Users can be confused about the use of tabs when they do not look like real- world tabs. Real-world tabs are those that resemble the ones found in a file drawer. One study showed that users are more likely to find and click appropriately on tabs that look like real-world tabs.

6) Use site maps for websites that have many pages.
Site maps provide an overview of the website. They may display the hierarchy of the website, may be designed to resemble a traditional table of contents, or may be a simple index.
Some studies suggest that site maps do not necessarily improve users’ mental representations of a website. Also, one study reported that if a site map does not reflect users’ (or the domain’s) conceptual structure, then the utility of the map is lessened.

7) Frames are controversial because they can lead to confusing, almost un-navigable sites. Frames are probably the most effective when one frame is used as a menu frame, and another, larger frame is used to house content. Pages that have three – or more, heaven forfend! – Frames tend to leave the user wondering where he or she is supposed to click next.
It’s possible to create borderless frames (frameborder=”0”) and to disable resizing of the frame (noresize) and with no scroll bars (scrolling=”no”). This can lead to a very attractive effect which can also be very intuitive; however, you can also make it impossible for users to find what they’re looking for. For instance, if you disallow scrolling, and the user’s browser window and font selections make it so that an entire menu doesn’t fit on screen, the user will have no way to select the menu options that don’t fit.

Thus, if you decide to use frames and turn off scrolling, resizing, and borders, you’ll want to make sure that the page works for most users from most environments.
If you do choose to use frames, don’t forget to use “text only” navigation on the bottom on the content pages as well, just in case

8) Don’t design for the computer on your desk.
Design your pages to work with a variety of window sizes and browsers. If you make it beautiful for your screen, don’t assume it’s automatically beautiful on other people’s screens.

9) Provide links to navigation aids such as content, index, site map, and home page from every page in the site.


10) Counters. There are a number of services that offer counters, odometer-like inline images that show how many visitors your site has had. Including a counter on a page is usually a sign of a beginning or amateur site. Use Web log analysis tools to find out your usage patterns. If you publish this information, do so discreetly, not on every page via counters.


11) Use ’sequential’ menus for simple forward-moving tasks, and use ’simultaneous’ menus for tasks that would otherwise require numerous uses of the Back button.
Most websites use familiar ‘sequential’ menus that require items
to be selected from a series of menus in some predetermined order. After each selection is made, another menu opens. The final choice is constrained by the sum total of all previous choices.
Simultaneous menus display choices from multiple levels in the menu hierarchy, providing users with the ability to make choices from the menu in any order. Simultaneous menus are often presented in frames, and are best employed in situations where users would have to make extensive use of the Back button if presented with a sequential menu.

Sequential menus
These are the menus we typically use in websites. By clicking an option in the menu, it may cause another menu to appear on another page. This is done until the final object is shown. For example, by clicking on 'North America' rather than Europe, Asia or Australia, the next menu on the next page will show Canada, Mexico and the United States. By clicking on 'United States' the next menu on the next page will show all 50 states, etc. To change one of the menu selections requires clicking on the 'Back' button to return to an earlier menu.

Simultaneous menus
All menus are on the same page, generally in the same frame. All selections are made in the menus in one frame and the final response shows in the second frame on the same page. For example, selecting an item from an 'Age' menu, a 'Type of Cancer' menu and a 'Location' menu in one frame, provides the historical cancer mortality rate in the other frame. Changes can be made to the menus, and the final answer, without using the 'Back' button.

(Click on Image to Enlarge)

Sequential menus and Simultaneous menus

12) Provide ’glosses’ to help users select correct links.
’Glosses’ are short phrases of information that pop-up when a user places his or her mouse pointer close to a link. It provides a Preview to information behind a link. Users prefer the preview information to be located close to the link, but not placed such that it disturbs the primary text. However, designers should not rely on the ’gloss’ to compensate for poorly labeled links.

13) Users should be able to get from anywhere in the site to anywhere else without having to go back to the home page or dig through several other pages.

14) Make sure that your navigational links are named in a way that is straightforward and easy to understand. Links like “Home”, “About Us”, and “Contact Us” are fairly universal. Avoid navigation link names like “Cool Stuff”, “Other Things”, and “Click me”.

15) Remember to include a “text only” version of your navigation someplace on every web page (you often see a text version of site navigation on the bottom of web pages) for those few people who surf the internet with images turned off or who own (yes they
exist) “text only” browsers.

16) A home page should fit on one screen. Avoid the requirement to scroll.

17) On a page where reading is necessary, do not use flashing or motion because this can interfere with reading.

18) Place major section/category links horizontally, near the top of every page.
Most sites will place these links beneath the logo in the top left corner. If this doesn't immediately make sense, think about how you read a page of text: from top left to bottom right. Also, limit your major categories to a maximum of about eight. Give them too many choices, and your users won't make a choice at all.

19) Provide a search box for your visitors.
All users are different, and some will undoubtedly prefer to find the information they seek via a search box rather than your neatly placed, intuitive text links. A search box is an essential feature of any website.

20) Offer more than one route to the information.
Never ever force your user down a route you think they should follow. Each user is an individual and whilst we all use websites in similar ways, many will have their own preferences when it comes to moving through a website. There is nothing worse than having to follow link after link to try and get to the information you want, when all that was required was a link that took you there directly. There is no harm whatsoever in offering the same information on many areas of your site. For example, you may want to list your clients in a special section of its own. What’s the harm of also including your clients in the About My Company section? Why not display a list of your best-known clients on your homepage with links for further information? If you’re mentioning a client in amongst some copy, why not place a link there too?

21) The ‘3 clicks’ rule.
As a general rule of thumb, any information on your web site should be no more than three clicks away. Any further than that and users simply won’t make the effort to find it. So, at the very most, a navigation system should consist of a main menu, a sub-menu and a sub-sub-menu. Any more than that and users get lost. Remember, they just want to get in, get out, and move on.

22) Show them the way home.
Always, always provide a clearly marked way to get back to your homepage. Users expect this to be near the top left of your web page and it is traditional to make sure your logo also acts as a link back. Again, don’t play around too much with their expectations, they will simply get frustrated.

23) Prominently flag up your Contact page.
Something often overlooked is a clearly identified Contact Us page. It is often the main reason why someone visits your website, to see where you are and how they can get in touch. It also adds credibility to your business – they can see that you really do exist. Often though, contact details are mysteriously hidden on a website, and can only be found if you can be bothered looking for them.

24) Back to the top navigation link
If there is a lot of content to be displayed, the web page becomes very long, involving a lot of vertical scrolling. In such cases, it would be better if the content is divided and placed on separate pages. However, if that is not feasible (for whatever reasons), you should remember that by the time the visitor reaches the bottom of that long page, the navigation menu would be hidden from view. If that happens, it is good web design practice to display a "Top", "Back to the Top" or equivalent link at the bottom so that the visitor can be taken directly to the top section of the page where the navigation system resides. You can create such a link by using the HTML anchor tag

25) If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.

26) Provide simple text navigation links at the bottom of long pages, so users don’t need to scroll back up.

27) If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages. Set your search box to search your site, not to search the web.
28) Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.


More Info:
Types of Navigation:

Text links in a web site navigation bar
The navigation bar can consist solely of text links. If the links are placed horizontally, they form the web site navigation bar [as I call it]. The links can also be placed vertically one after the other on the left side of a web page. The top horizontal row and the left side are two common places where you find the web site navigation system.

Navigation menu and images
You would have come across web sites in which the navigation menu consists of a series of images which are linked to different pages. Web designers usually add little JavaScript code to such image based navigation menu systems so that images change on mouse-over. This acts as a sort of visual guide – to let the visitors know which page they would go to if they clicked on the image. To learn JavaScript, you can go through the JavaScript tutorial. To know how to change images on mouse-over, you can read JavaScript image rollovers.
Image based navigation systems can also consist of image maps, in which one large image is employed. Different sections of this image link to different web pages. To know about image maps, go to the Advanced HTML Tutorial - Client side Image maps.

JavaScript Drop down dynamic menu systems
Dynamic drop down menu systems developed in JavaScript are very common nowadays. The reason for their popularity is the relaive ease of creation and maintenance. Also cross-browser visually appealing drop downs can now be created with the help of programs.
Creating dynamic JavaScript based drop down menus for web sites.

Flash based web site navigation menu
A web site navigation system can also be developed wholly or partly in Flash. There are three advantages of creating a Flash based navigation bar. Firstly, you can take use cool animation features of flash and provide your visitors a richer web experience. Thus, instead of simple image changes on mouse-over, the links on your Flash menu system can gradually fade-in and out or can play sounds on mouse-over. Secondly, it is easy to maintain the web site because you don't need to change each web page if the navigation system has to be modified. The Flash navigation system is a single flash file. Replacing this file will change the navigation menu on all pages! Thirdly, with a little ActionScript you can create beautiful dynamic drop down navigation menus.
Two disadvantages that I can think of are the requirements of the Flash plugin to view the flash file and secondly, search engine indexing. Google has started indexing Flash files but does it follow links included in Flash remains a question.

Navigation using Java
Just like images and Flash, web site navigation systems can also be developed in Java applets but this is not very popular.

Resolution

The term "screen resolution" refers to the number of individual pixels that fit within a given space. When we're discussing an 800x600 resolution, the number 800 refers to the number of pixels that the monitor can display horizontally, while the number 600 refers to the vertical limit.

Currently, about 60% of all monitors are set at 1024x768 pixels. In comparison, only about 17% use 800x600 so it's obviously less important to aim at perfection for these small-display users

Here are a few simple steps you can take to design and test sites that work in multiple screen resolutions

JavaScript: The JavaScript Source contains a script that detects screen resolution and redirects the visitor to a page optimized for their particular resolution.
Some designers may be willing to go to this much trouble, but imagine the time it takes to maintain multiple copies of the same page and the possibility for error! Also, the script uses a redirect and some search engines penalize pages with redirect scripts.

Centered table with fixed width: Many Web sites that use tables for layout set the table width to a fixed number of pixels to eliminate horizontal scrolling at lower screen resolutions. A page optimized for 800x600 should have a maximum width of about 760 pixels.
Now remember that someone viewing the page at a higher resolution will see a lot of empty space. The page may display more attractively if you center the table and give the page a complimentary background color.

Percentage table width: Usability expert Jakob Nielsen recommends the use of a percentage table width instead of a fixed width. Then, the Web page will always fill the browser window. That's a very reliable method for smaller monitors, but take care that your page doesn't stretch out too much if someone were to view it on a 21-inch monitor.
Also consider taking steps to speed up your tables. Large and/or nested tables in particular can dramatically slow page display.

The three main criteria in optimizing a page layout for a certain screen size are:

Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
Readability: How easy is it to read the text in various columns, given their allocated width?

Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly -- that is, are captions immediately next to the photos, etc.

Functionality

Does site accommodate novice to expert users, how functions are labeled, other features of the website?

Functionality tests are using the website from a user's perspective. These tests confirm that the system does what users are expecting it to.
Functionality is the term used to describe the areas of code or programming that comes together to provide a function for the user. This can mean anything from displaying only the very latest news headlines on your homepage to a shopping cart facility.

Points which needs to be taken care:

1) Site accommodates novice to expert users.
2) Functions are clearly labeled.
3) Essential functions are available without leaving the site.
4) Plug-ins are used only if they add value.

User Control

User can cancel any operation, clear exit points, browser compatibility, Languages, Online help/user guides, user feedback etc


1) Users often choose application functions by mistake and need a clearly marked “emergency exit” to leave the unwanted state without having to go though an extended process. The application should support “undo” and “redo” functions.

· Allow the user to control where to start and when to finish
· Allow the user to control the interaction
· Support multiple paths
· Support “Undo” and “Redo”
· Provide clearly marked exits.

2) The application should always keep users informed about what is going on by providing appropriate feedback within reasonable time.

· Keep users informed about what’s happening
· Provide appropriate feedback within a reasonable time
· Keep users oriented and clear about where they are in the system or where they are up to in a process.

3) Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

· Provide on-line help and guidance
· Make it easy to search
· Keep it relatively short
· Make it available in context
· List concrete steps to be carried out.
· Mandatory fields are not indicated on the order form.

4) Make the user smart
Users want to feel that they are in control of the computer’s activities. Good interface design features and embedded performance support tools will provide users with the information they need to make decisions regarding navigational and ‘next step’ issues.

· Build a consistent model in user’s mind
· Provide good mapping between the task and the system
· Provide clear navigation clues.
· Reduce the user’s cognitive load (memory, calculating, understanding relationships)
· Create a feeling of progress and achievement.

5) Match between the system and the real world
The system should speak the users’ language, using words, phrases and concepts familiar to the user, rather than systems-oriented terms. The conventions of the real world should be followed, making information appear in a natural and logical order.

· Provide an intuitive visual layout
· Information should appear in a natural and logical order
· Use words, phrases and concepts familiar to the user
· Concepts and processes mirror what the user is familiar with.

6) Consistency and standards
Users should not have to wonder whether different words, objects, operations or behaviors mean the same thing in different parts of the application.
· Follow platform conventions
· Conform to any existing processes or procedures
· Be consistent across the system (words, objects, operations, behaviours).

7) Visibility of system status
The application should always keep users informed about what is going on by providing appropriate feedback within reasonable time.

· Keep users informed about what’s happening
· Provide appropriate feedback within a reasonable time
· Keep users oriented and clear about where they are in the system or where they are up to in a process.

8) Error prevention
Does the system allow the user to make unnecessary errors easily? Has it been optimized to reduce casual errors? Although good error messages are important, even better is a careful design, which prevents a problem occurring in the first place.

· Avoid situations where errors are likely to occur. Errors should be predicted
· Provide only appropriate choices
· Warn users of potential problems before they take action
· Ask for confirmation of potential destructive actions. Use a message that clearly warns the user of the consequences of the requested action
· Provide a way to cancel the command.

9) Error recovery
Error messages should be expressed in plain language rather than codes, precisely indicating the nature of the problem (what and where) and constructively suggesting a solution (how to fix).

· Make actions reversible
· Allow users to backtrack by providing ‘undo’ and ‘backup’ functions
· Allow users to return to the same place in the same state.
· Express error messages in plain language, precisely indicating the nature of the problem and constructively suggesting a solution.

Many unnecessary errors occur.
For example:
· If customers order ‘out-of-stock’ items, an error occurs when they attempt to conclude the payment.
· If a search returns zero hits, an error message is returned.
· The credit card number field does not allow spaces.

Examine all error messages with a view to reducing the possibility of their occurring. Resolving this issue may require Further design effort.

No help is available for error messages.

If an error cannot be resolved during the interaction, at least provide contact details so the customer can report the Issue for resolution.

Error messages do not describe what action is necessary.
For example:
‘Search returned zero items’
Examine all error messages with a view to improving the wording and advice given

Error messages do not always provide a clear exit point
For example, the ‘Search returned zero items’ has no exit—the Customer must use ‘Back’ on the browser to back out.
Provide clear exit points (at least to the Home and Feedback pages) on all error messages.

Browser Compatibility

My opinion is that the best way to create and test your pages is to create them in the most current, standards-compliant browser you can (this would be Firefox) and then tweak your pages for Internet.

HTML Features that may fail to work if your visitors are using a different browser:

There are many interesting features which you can find for your website. They will produce effects which are exciting, colorful, amusing, and grab the surfer to look further at your website. But unless the surfer is using exactly:

· The same browser,
· The same set-up for the same fonts and colors,
· With the same Plug-In options,
· Using the same display size and resolution

Your beautiful gimmicks may not be seen. Or may even destroy the presentation of the rest of the material. Therefore the rule should be:

Only use features that add to the presentation, and which leave the basic material on the page still working, however it is viewed.

And to be specific

· No cookies
· No sound
· No animation
· No Java
· No JavaScript
· No DHTML
· No background images
· No Plugins
· No downloadable fonts

Sound and Movies
(Many users will not have implemented the plug-ins for these.)
· If you are using multi-media you should warn the user, and also ensure that the electronically deprived have something to look at instead.
· Shockwave in tables can cause problems in NS2.

Images

(It is said that 60% of your visitors surf with the graphics turned off.)
· Each image should have an ALT= clause to mark its place.
· Users of Lynx browsers cannot handle graphics and if there is no ALT="" clause are presented with an ONLINE message.
· Images should always have WIDTH= and HEIGHT= clauses to allow the space to be assigned while loading the remainder of the text to be displayed.
· Mosaic and OS/2-Warp will not scale images.
produces inconsistent results.


JAVA and JavaScript
· Some browsers may not have either of these languages. Do not rely on them working.
· Internet Explorer 2 does not handle Javascript, and IE3 handles Javascript in slightly different ways
· Javascript 1.1 works only with NS3.
· JAVA will not work if any of the images on that page do not have WIDTH= and HEIGHT=

Forms Submit using mailto:
· The mailto: statement requires that the browser is properly set up to handle mail
· Early versions of Internet Explorer do not have its own mailer and relies on invoking the surfers own mail package, which is on his own server. It follows that the forms - mailto feature does not work on Explorer, and merely displays a blank mail form.
· You can use CGI scripts on your own server to handle this consistently if you must have it.
· The results transmitted from a form can be in a different order depending on the browser, so each item should have its own identification.

Frames
· Several browsers will not handle frames. The heading frame has provision for a message or material to be displayed when accessed by browsers which cannot handle them.
· Visitors who are using 640x480 displays may find the frames window rather small. Or even very small...

Tables
· It is probably now safe to assume that all browsers will handle tables.
· Empty table cells will probably be ignored; you can put in a space character to avoid this.
· Border colors and table colors and backgrounds may not work in early versions of Netscape.
may not work.


Lists

usually does not work

Blinking and Marquee
· Netscape is alone in implementing BLINK, which was originally included for internal error messages.
· Explorer is alone in handling Marquee moving text; other browsers will display an un-moving image.


pairs

· There is growing concern that the most recent browsers will not be as tolerant of commands which are not closed with We shall have to watch this one.

Please see the Following Link to check which all Technologies, Javascript, Protocol, Image formats etc are supported by different browsers:


http://en.wikipedia.org/wiki/Comparison_of_web_browsers

Accessibility

Per page size, downloading time, HTML validation, Multimedia/images use, Content organization

Per page size and downloading time

The concept of "page size" is defined as the sum of the file sizes for all the elements that make up a page, including the defining HTML file as well as all embedded objects (e.g., image files with GIF and JPG pictures).
The key to sizing webpages effectively is the length of time it takes to download a page from the server and display it in the browser window. The time from when a user requests a page and when it has displayed completely is referred to as response time

In general, response time:

· Must be within 0.1 second to make system "feel interactive" (i.e., sensed as an immediate response)
· Must be less than 1 second in order to fit into the user's chain of thought
· Must be less than 10 seconds to keep user's attention; otherwise, the user moves his/her mind to something else, starts doing something else - or bails out of your website!

Here are the opinions on download times for the most important or most useful parts of most types of page and especially for home page, assuming a 56K modem is used:

Download time Usability

· Under 10 seconds - Excellent. Some users will still be impatient but very few sites will load faster.
· 10 to 15 seconds - Good
· 15 to 20 second - not bad, but could be better. if you can't speed this up, make sure the user gets other benefits - good navigation, easy to see what each page is about, and above all good content (preferably unique).
· 20 to 30 seconds - Poor. If users think they can get similar content faster elsewhere, they'll leave your site and go somewhere else.
· Over 30 second - Unacceptable unless the page is a very special case.

Validate HTML
Make sure you don't have extra code in your page. If you have converted a document from Microsoft Office, for example, you can strip out all the formatting code that the conversion puts in and reduce your page size up to 80 percent.
Make sure you use CSS to format your HTML elements instead of using ,and other obsolete tags, and switch to a table-less format to reduce all the extra code needed for tables (remember, those and tags with their attributes start bytes to your page pretty quickly). It may help to think of it as a ratio of content to code: the higher the ratio (more content, less code), the better.

· http://validator.w3.org/#validate-by-uri

Some of the major accessibility issues to be dealt with include:
• Provide text equivalents for non-text elements;
• Ensure that scripts allow accessibility
• Provide frame titles;
• Enable users to skip repetitive navigation links;
• Ensure that plug-ins and applets meet the requirements for accessibility and
• Synchronize all multimedia elements.

Where it is not possible to ensure that all pages of a site are accessible, designers should provide equivalent information to ensure that all users have equal access to all information.

Multimedia/images/Animation used

1) To improve accessibility, provide client side image maps instead of server-side image maps.
Client-side image maps can be made fully accessible, whereas server -side image maps cannot be made accessible without employing a text alternative for each section of the map. To make client-side image maps accessible, each region within the map should be assigned alt text that can be read by a screen reader or other assistive device. Designers must ensure that redundant text links are provided for each active region of a server-side image map.

2) Use video, animation, and audio only when they help to convey, or are supportive of the website’s message or other content.
Multimedia elements (such as video, animation, and audio) can easily capture the attention of users; therefore, it is important to have clear and useful reasons for using multimedia to avoid unnecessarily distracting users. Some multimedia elements may take a long time to download, so it is important that they be worth the wait. Used productively, multimedia can add great value to a site’s content and help direct users’ attention to the most important information and in the order that it is most useful.

3) Do not fill the entire first screen with one image if there are screens of text information below the fold.
Large graphics that cover most of the screen at the top of the page
Suggest to users that there is no more information below the graphic.

4) Use images only when they are critical to the success of a website.
Ensure that a website’s graphics add value and increase the clarity of the information on the site. Certain graphics can make some websites much more interesting for users, and users may be willing to wait a few extra seconds for them to load. Users tend to be most frustrated if they wait several seconds for a graphic to download, and then find that the image does not add any value. Some decorative graphics are acceptable when they do not distract the user.

5) Ensure that all clickable images are either labeled or readily understood by typical users.
Occasional or infrequent users may not use an image enough to
Understand or remember its meaning. Ensure that images and their associated text are close together so that users can integrate and effectively use them together. Additionally, alt text should accompany every clickable image.

6) Take steps to ensure that images on the website do not slow page download times unnecessarily.
User frustration increases as the length of time spent interacting with a system increases. Users tolerate less delay if they believe the task should be easy for the computer. One study reported that users rated latencies of up to five seconds as “good.” Delays over ten seconds were rated as “poor.” Users rate pages with long delays as being less interesting and more difficult to scan.
To speed download times, use several small images rather than a single large image on a page; use interlacing or progressive images; and use several of the same images. Designers should also minimize the number of different colors used in an image and put HEIGHT and WIDTH pixel dimension tags in an image reference. To achieve faster response time for users with dial-up modems, limit page size to less than 30,000 bytes.

7) When viewing full-size images is not critical, first provide a thumbnail of the image.
By providing thumbnails of larger images, users can decide whether they want to wait for the full image to load. By using
Thumbnails, those who do not need or want to see the full image are not slowed down by large image downloads. Link the thumbnail image to the full-size copy.

8) Use background images sparingly and make sure they are simple, especially if they are used behind text.
Background images can make it difficult for users to read foreground text. A single, large, complex background image (including a picture) can substantially slow page download rates. If background images must be employed, use small, simple images with “tiling,” and/or keep the image resolution as low as possible.

9) Provide an introductory explanation for animation prior to it being viewed.
Providing an explanation of animation before it begins will help
Users better integrate the animation and associated content. In other words, briefly explain to users what they are about to see before they see it. Also, allow animation to be user-controlled. The user should be able to pause, stop, replay, or ignore animation or other multimedia elements.

10) Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality. Use a free online graphics optimization tool.

11) Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

12) Avoid graphics that look like ads. People ignore them.

13) Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

14) OnMouseOver and onMouseOut – These two event handlers are often used to swap images on a web page when the mouse passes over an image n Do not interfere with accessibility – a screen reader simply bypasses them entirely n Information (if any) provided by these event handlers should be duplicated through other means

15) Multimedia

· Give size of file after link text
· Mention file type if not HTML
· Mention software needs for file type
· Add some text to make it meaningful to users without additional software
· Any content presented in multimedia should have an alternate presentation for accessibility.

16) Java Script - Limit use of this technology as much as possible, as they tend to slow down the loading of the page. Slicing and dicing graphics. With the widespread use of CSS, avoid any web designer that still 'slices and dices' graphics and drops them into a table. That was a novel technique...in the late 1990's. Not anymore.

17) Active X Components, Flash, etc. Avoid any technology like these that may not be compatible with all browsers.

Content organization and Language

Content is the most important part of a website. If the content does not provide the information needed by users, the website will provide little value no matter how easy it is to use the site.

1) When preparing prose content for a website, use familiar words and avoid the use of jargon. If acronyms and abbreviations must be used, ensure that they are clearly understood by typical users and defined on the page.

2) Minimize the number of words in a sentence and sentences in a
paragraph. Make the first sentence (the topic sentence) of each
paragraph descriptive of the remainder of the paragraph. State clearly the temporal sequence of instructions. Also, use upper- and lowercase letters appropriately, write in an affirmative, active voice, and limit prose text on navigation pages. To enhance the readability of prose text, a sentence should not contain more than twenty words. A paragraph should not contain more than six sentences.

3) Write 50% less text then you would in a similar publication.
Use bulleted lists and paragraph breaks to separate your content into smaller, more manageable chunks. Limit your font choices to a maximum of two. One for headings and one for the body text.

4) Black text on white background. Avoid any other color scheme for the main content.

5) Remember that most of your important content (like the links and content headings) ought to be located toward the top of your page.

6) Use a pyramid model when organizing your articles. Place your quick facts at the top of the article, with more details in later paragraphs.

7) Do not use unfamiliar or undefined acronyms or abbreviations on websites.
Acronyms and abbreviations should be used sparingly and must be defined in order to be understood by all users. It is important to
remember that users who are new to a topic are likely to be unfamiliar with the topic’s related acronyms and abbreviations. Use the following format when defining acronyms or abbreviations: Physician Data Query (PDQ).Acronyms and abbreviations are typically defined on first mention, but remember that users may easily miss the definition if they scroll past it or enter the page below where the acronym or abbreviation is defined.

8) Include the primary theme of a paragraph, and the scope of what it covers, in the first sentence of each paragraph.
Users tend to skim the first one or two sentences of each paragraph when scanning text.

9) As a general rule, write instructions in affirmative statements rather than negative statements.
When giving instructions, strive to tell users what to do (see a dentist if you have a toothache), rather than what to avoid doing (avoid skipping your dentist appointment if you have a toothache). If the likelihood of making a wrong step is high or the consequences are dire, negative voice may be clearer to the user.

10) When describing an action or task that has a natural order or sequence (assembly instructions, troubleshooting, etc.), structure the content so that the sequence is obvious and consistent.
Time-based sequences are easily understood by users. Do not force users to perform or learn tasks in a sequence that is unusual or awkward.

11) Structure each content page to facilitate scanning: use clear, well-located headings; short phrases and sentences; and small readable paragraphs.
Websites that are optimized for scanning can help users find desired information. Users that scan generally read headings, but do not read full text prose—this results in users missing information when a page contains dense text. Studies report that about eighty percent of users scan any new page. Only sixteen percent read word-by-word. Users spend about twelve percent of their time trying to locate desired information on a page. To facilitate the finding of information, place important headings high in the center section of a page. Users tend to scan until they find something interesting and then they read. Designers should help users ignore large chunks of the page in a single glance.

12) Group all related information and functions in order to decrease time spent searching or scanning.
All information related to one topic should be grouped together.This minimizes the need for users to search or scan the site for related information. Users will consider items that are placed in close spatial proximity to belong together conceptually. Text items that share the same background color typically will be seen as being related to each other.

13) Limit page information only to that which is needed by users while on that page.
Do not overload pages or interactions with extraneous information. Displaying too much information may confuse users and hinder assimilation of needed information. Allow users to remain focused on the desired task by excluding information that task analysis and usability testing indicates is not relevant to their current task. When user information requirements cannot be precisely anticipated by the designer, allow users to tailor displays online.

14) Visitors can tell immediately what you sell.
15) Visitors can find an email address, phone number, address, which runs the site. They can quickly find an email for technical support questions.
16) Visitors can quickly find products and descriptions. Links to related products.
17) Visitors can quickly tell what to click on to place an order.
18) Visitors can find your phone number on every page in case they have a question.
19) Visitors can find information about the company and its management.
20) Visitors can find price information.
21) Content is brief and precise. Avoids telling stories.
22) Content is cross-linked to documents or sites with related information.
23) Make the text scannable with bulleted lists, highlighted keywords, meaningful headings and short sections of text.

Architectural and Visual Clarity

Image/multimedia theme relation with the website theme, site organization from users perspective, White/empty space, color use, Link color (normal, hover, visited), Anchor text, Page Layout, Titles, Frames etc.

Website Architecture

Flowcharts
Use these to outline the site structure, identify pages, navigation paths and content labels. Flowcharts offer an advantage in that everyone in the development process can see the site’s structure and make suggestions to alter or delete sections where necessary.

Breakdown Each Page
For each section, prepare an itemized list of contents. Include all text, images, sounds, video clips, audio clips, applets and downloadable items. List all links and their destination pages.
Separate links, which appear on all pages from those appearing on specific pages only. Use Excel or Word to create this list as you can use color-codes for reference.By breaking down each page, you also clarify each pages objectives and role.

Design for Breadth
Usability research shows that users get disorientated after the third level of depth on a site.
Therefore, help users find content within three clicks. If you can’t achieve this with the current design, start again — the rewards will be worth the efforts.

Color Use
Color is a powerful tool. When used appropriately, it can help organize sections of a page, highlight important text, or draw the eye somewhere. When used inappropriately, it can confuse, obscure text, or repel the user from your site

1) Choose color carefully!
2) Use color to enhance, not detract from your message. It isn’t a good idea to have large amounts of text in red, for instance. Instead, use it to highlight something important.
3) Don’t use a light colored text over a light background, or dark text over dark background
4) In general, warm colors (reds, yellows, and orange) are more vibrant and tend to “pop out” on a page. Cool colors (blues and greens) are perceived as more calm and tend to recede on a page.
5) The primary colors (pure red, blue, and yellow) are very powerful –use them sparingly
6) The same color might look different depending on what color is next to it. In general, light text on a dark background is more difficult to read than dark text on a light background. Even worse is any text on a patterned background!
7) Just like too much information, too much color in one place makes things more difficult to find
Architectural and Visual Clarity Don’t use color in random places just for the sake of color -use it to distinguish between links and regular text, to highlight an important box, or to visually separate the navigation from the content.

The most legible color combinations, in order, are

Black on Yellow Background
Yellow on Black Background
Green on White Background
Red on White Background
Black on White Background
White on Blue Background
Blue on White Background
Blue On Yellow Background


Links

1) Keep links throughout the site visually similar (same font, color, or boldness), so users can intuitively know what’s a link and what isn’t
2) Always let the user get back to the home page from anywhere on your site
3) When linking to other sites, review them every so often to make sure the link still works
4) Include a contact link somewhere on the site so users can give feedback or ask questions
5) Provide sufficient cues to clearly indicate to users that an item is clickable.

Users should not be expected to move the cursor around a website (’minesweeping’) to determine what is clickable. Using the eyes to quickly survey the options is much faster than ’minesweeping.’ Similarly, relying on mouseovers to designate links can confuse newer users, and slow all users as they are uncertain about which items are links.
Be consistent in your use of underlining, bullets, arrows, and other symbols such that they always indicate clickability or never suggest clickability. For example, using images as both links and as decoration slows users as it forces them to study the image to discern its clickability.
Items that are in the top center of the page, or left and right panels have a high probability of being considered links. This is particularly true if the linked element looks like a real-world tab or pushbutton.

6) Use text links rather than image links.
In general, text links are more easily recognized as clickable. Text links usually download faster, are preferred by users, and should change colors after being selected. It is usually easier to convey a link’s destination in text, rather than with the use of an image.In one study, users showed considerable confusion regarding whether or not certain images were clickable. This was true even for images that contained words. Users could not tell if the images were clickable without placing their cursor over them (’minesweeping’). Requiring users to ’minesweep’ to determine what is clickable slows them down.
Another benefit to using text links is that users with text-only and deactivated graphical browsers can see the navigation options.
7) Make the link text consistent with the title or headings on the destination (i.e., target) page.
Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page. If users will have to click more than once to get to a specific target destination, avoid repeating the exact same link wording over and over because users can be confused if the links at each level are identical or even very similar. In one study, after users clicked on a link entitled “First Aid,” the next page had three options. One of them was again titled “First Aid.” The two “First Aid” links went to different places. Users tended to click on another option on the second page because they thought that they had already reached “First Aid.”

8) When using embedded links, the link text should accurately describe the link’s destination.
Users tend to ignore the text that surrounds each embedded link; therefore do not create embedded links that use the surrounding text to add clues about the link’s destination.

9) Use color changes to indicate to users when a link has been visited.
Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a website they have visited. In one study, providing this type of feedback was the only variable found to improve the user’s speed of finding information. If a user selects one link, and there are other links to the same target, make sure all links to that target change color.

10) Indicate to users when a link will move them to a different location on the same page or to a new page on a different website.
One study showed that users tend to assume that links will take them to another page within the same website. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.

11) Indicate to users when a link has been clicked. If a user selects one link, and there are other links to the same target, make sure all links change colors.


Page Layout and Frames

A good layout will help your users use your site more effectively as well. When your header, navigation, content and footer are in the same place for each document in your site, users know where to to look to find content, links, and other information.

While there are countless layout possibilities for your site, there are a few principles to keep in mind:

Pages should flow - Users instinctively look at the top left corner of the page when a page pops up. Your layout should help direct their attention to your content.

Put important content “above the fold.” Users should get the most important information on your page without having to scroll.
Use white space in your layout - Putting some blank space around your content makes it more prominent and easier to focus on.
Make your page easy to scan - Users tend to scan pages instead of reading them. When you keep lines of text short (7-11 words), you make it easier for users to comprehend your content.
Put related items close together.

Make page-length decisions that support the primary use of the Web page.
In general, use shorter pages for homepages and navigation pages, and pages that need to be quickly browsed and/or read online. Use longer pages to

(1) Facilitate uninterrupted reading, especially on content pages
(2) Match the structure of a paper counterpart
(3) Simplify page maintenance (fewer Web page files to maintain); and,
(4) Make pages more convenient to download and print.

Use frames when certain functions must remain visible on the screen as the user accesses other information on the site.
It works well to have the functional items in one frame and the items that are being acted upon in another frame. This is sometimes referred to as a ‘simultaneous menu’ because making changes in one frame causes the information to change in another frame. Side-by-side frames seem to work best, with the functions on the left and the information viewing area on the right.
Keep in mind that frames can be confusing to some users. More than three frames on a page can be especially confusing to infrequent and occasional users. Frames also pose problems when users attempt to print, and when searching pages.

Establish a high-to-low level of importance for information and infuse this approach throughout each page on the website.
The page layout should help users find and use the most Important information. Important information should appear higher on the page so users can locate it quickly. The least used information should appear toward the bottom of the page. Information should be presented in the order that is most useful to users.

Put the most important items at the top center of the Web page to facilitate users’ finding the information.
Users generally look at the top center of a page first, then look left, then right, and finally begin systematically moving down the total Web page. All critical content and navigation options should be toward the top of the page. Particularly on navigation pages, most major choices should be visible with no or a minimum
of scrolling.

Structure pages so that items can be easily compared when users must analyze those items to discern similarities, differences, trends, and relationships.
Users should be able to compare two or more items without having to remember one while going to another page or another place on the same page to view a different item.

Limit the amount of white space (areas without text, graphics, etc.) on pages that are used for scanning and searching.
’Density’ is the percentage of the screen filled with text and graphics. One study found that higher density is related to faster scanning, and has no impact on user accuracy or preference. Another study found that users prefer moderate amounts of white space, but the amount of white space has no impact on their searching performance. On content (i.e., text) pages, use some white space to separate paragraphs. Too much separation of items on Web pages may require users to scroll unnecessarily.


Titles, Headings

Ensure that category labels, including links, clearly reflect the information and items contained within the category.
Typical users must understand category titles. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links and descriptors easier to use.

Use headings that are unique from one another and conceptually related to the content they describe.
Using poor headings (mismatches between what users were expecting and what they find) is a common problem with websites. Ensure that headings are descriptive and relate to the content they introduce. If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference. Identifying the best headings may require extensive usability testing and other methods.

Ensure that data tables have clear, concise, and accurate row and column headings.
Use row and column headings to indicate unique cell contents. Users require clear and concise table headings in order to make efficient and effective use of table information. Row and column headings will indicate to screen readers how data points should be labeled or identified, so the user can understand the significance of the cell in the overall scheme of the table.

Put a descriptive, unique, concise, and meaningfully different title on each Web page.
Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages. If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.

Use headings in the appropriate HTML order.
Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information.

System Specific Usability Issues

The Usability of websites differs from the type of websites. The main type of websites can be:

1) E - commerce and Shopping Cart
2) Travel websites
3) Blogs
4) Information websites etc.

Along with the other Issues, there are few more usability issues which needs to be taken care of while doing usability for a website.

Text Presentation

Specific guidelines for text presentation may be summarized as follows.

# Use sans serif fonts like Arial or Helvetica.
#Strive for 14-point font size for body text and 18–24 point for headers. Provide a
#Text sizing option on your page.
#Use boldface; avoid italics.
#Use upper and lower case; avoid using all capitals.
#Use left-justified text; avoid centered or full justification.
#Increase leading (the space between lines of text).
#Keep line lengths between 50 and 65 characters.
#Use headings and subheadings.
#Use negative contrast (black text on white ground).
#Use active white space.
#Place text on unpatterned backgrounds.
#Use consistent placement of page elements.
#Increase the size of peripheral elements.
#Separate the steps of a procedure using numbers or bullets.
#Use a minimum number of hypertext links in a single line of text.
#Avoid multicolumn format or frames.
#Avoid flashing or blinking text.

Javascript

Javascript is one of the most popular scripting languages for web development. In addition to libraries of Javascript code available online, two of the most popular web development tools, FrontPage and Dreamweaver, include easy-to-access code snippets that add little "extras" to web pages. Developers should use caution when deciding to include Javascript or other scripting elements on their pages. Here are a few of the most popular uses for Javascript and some of the accessibility issues to consider:

onClick – The onClick event handler is triggered when the user clicks once on a particular item. It is commonly used on links and button elements and, used in connection with these elements; it works well with screen readers. If clicking on the element associated with the onClick event handler triggers a function or performs some other action, developers should ensure that the context makes that fact clear to all users. Do not use the onClick event handlers for form elements that include several options (e.g. select lists, radio buttons, checkboxes) unless absolutely necessary.

onMouseOver and onMouseOut – These two event handlers are very popular on many web sites. For instance, so-called rollover gif's, which swap images on a web page when the mouse passes over an image, typically use both of these event handlers. These event handlers neither can be accessed by the mouse nor interfere with accessibility – a screen reader simply bypasses them entirely. Accordingly, web designers who use these event handlers should be careful to duplicate the information (if any) provided by these event handlers through other means.

OnChange – This event handler is very commonly used for triggering JavaScript functions based on a selection from within a tag. Surprisingly, it presents tremendous accessibility problems for many commonly used screen readers and should be avoided. Instead, web developers should use the onClick event handler (associated with a link or button that is adjacent to a tag) to accomplish the same functions.


Lists

Lists are commonly found on websites. These may be lists of, for example, people, drugs, theaters, or restaurants.
Each list should be clearly introduced and have a descriptive title. A list should be formatted so that it can be easily scanned. The order of items in the list should be done to maximize user performance, which usually means that the most important items are placed toward the top of the list. If a numbered list is used, start the numbering at “one,” not “zero.” Generally only the first letter of the first word is capitalized, unless a word that is usually capitalized is shown in the list.

1) Arrange lists and tasks in an order that best facilitates efficient and successful user performance.
Where no obvious order applies, organize lists alphabetically or numerically. Keep in mind that it is the user’s logic that should prevail rather than the designer ’s logic.

2) Display a series of related items in a vertical list rather than as continuous text.

3) Provide an introductory heading (i.e., word or phrase) at the top of each list.

4) Place a list’s most important items at the top.

5) Capitalize the first letter of only the first word of a list item, a list box item, check box labels, and radio button labels.

6) Use bullet lists to present items of equal status or value, and numbered lists if a particular order to the items is warranted.