Usability Guidelines for Website/ Web Applications - User Experience Design & Technology

Web Usability Guidelines in a collection of best practices and recommendations for enhancing the Usability of any website/ web application. Designing a usable system, however, requires far more than simply applying guidelines. It is important to note that the guidelines are context-specific and if you feel that a guideline (or more than one) does not apply to your site, it’s OK to ignore it. You are strongly advised to interpret the guideline in context.

These guidelines are listed in nine broad categories comprising 248 guidelines. You can test the web usability of your website/ web application by working through each of the guidelines in the following list and mark your site as either conforming or not conforming to the guidelines.

Trust and Credibility
1. The authenticity of the official status of the website must be established. All Indian Government websites MUST use ‘gov.in’ or ‘nic.in’ domain exclusively allotted and restricted to Government websites.
2. State Emblem of India MUST be displayed on the Homepage of the websites of Central Government Ministries/ Departments. Display the State Emblem/ Logo in a reasonable size and noticeable location. The upper-left corner is usually the best placement.
3. It must be clear that there is a real organization behind the site. The Homepage and all important pages of the website MUST display the ownership information for the website preferably in the footer area.
4. The site runs on SSL e.g. https://xyz.gov.in.
5. The content is up-to-date, authoritative, and trustworthy.
6. The site avoids advertisements, especially pop-ups.
7. Each page is clearly branded so that the user knows he is still on the same site.
8. It is easy to contact someone for assistance and a reply is received quickly.
9. The content is fresh: it is updated frequently and the site includes recent content.
10. The site is free of typographic errors and spelling mistakes.
11. The visual design complements the brand and any offline promotional/ marketing messages.
Homepage
1. Design the homepage to be clearly different from all the other pages on the site
2. Emphasize the highest priority tasks so that users have a clear starting point on the homepage
3. The items on the homepage are clearly focused on users’ key tasks
4. If the site is large, the homepage contains a search input box.
5. If the site deals with products, the product categories are provided and clearly visible on the homepage
6. Useful content is presented on the homepage or within one click of the homepage.
7. Offer users direct access to high-priority tasks on the homepage
8. The homepage shows good examples of real site content
9. Links on the homepage begin with the most important keyword
10. There is a short list of items recently featured on the homepage, supplemented with a link to archival content
11. Navigation areas on the homepage are not over-formatted and users will not mistake them for adverts
12. The value proposition is clearly stated on the homepage (e.g. with a tagline or welcome blurb)
13. The homepage contains meaningful graphics
14. Navigation choices are ordered in the most logical or task-oriented manner (with the less important corporate information at the bottom)
15. The title of the homepage will provide good visibility in search engines like Google
16. All corporate information is grouped in one distinct area (e.g. “About Us”).
17. Users will understand the value proposition
18. By just looking at the homepage, the first time user will understand where to start
19. The homepage shows all the major options
20. The homepage of the site has a memorable URL
21. The homepage is professionally designed and will create a positive first impression
22. The design of the homepage will encourage people to explore the site
23. The homepage looks like a homepage; pages lower in the site will not be confused with it
24. Include a “Contact Us” link on the homepage that goes to a page with all contact information for your organization
25. If your site gathers any customer information, include a “Privacy Policy” link on the homepage
26. Use graphics to show real content, not just to decorate your homepage
Navigation and Information Architecture
1. There is a convenient and obvious way to move between related pages and sections and it is easy to return to the homepage
2. The information that users are most likely to need is easy to navigate to from most pages
3. Navigation choices are ordered in the most logical or task-oriented manner
4. The navigation system is broad and shallow (many items on a menu) rather than deep (many menu levels)
5. The site structure is simple, with a clear conceptual model and no unnecessary levels
6. The major sections of the site are available from every page (persistent navigation) and there are no dead ends
7. Navigation tabs are located at the top of the page and look like clickable versions of real-world tabs
8. There is a site map that provides an overview of the site’s content
9. The site map is linked to from every page
10. The site map provides a concise overview of the site, not a rehash of the main navigation or a list of every single topic
11. A secondary navigational scheme e.g. Breadcrumb navigation is provided to allows users to establish where they are; and an alternative way to navigate around your website
12. Category labels accurately describe the information in the category
13. Links and navigation labels contain the “trigger words” that users will look for to achieve their goals
14. Terminology and conventions (such as link colors) are (approximately) consistent with general web usage
15. Links look the same in the different sections of the site
16. The terms used for navigation items and hypertext links are unambiguous and jargon-free
17. Group items in the navigation area so that similar items are next to each other
18. Don’t use generic links, such as “More…” at the end of a list of items. Instead, tell users specifically what they will get more of, such as “More News” or “Archived Tenders”
19. Users can sort and filter catalog pages (e.g. by listing in price order, or showing ‘most popular’)
20. There is a visible change when the mouse points at something clickable (excluding cursor changes)
21. Important content can be accessed from more than one link (different users may require different link labels)
22. Navigation-only pages (such as the homepage) can be viewed without scrolling
23. Hypertext links that invoke actions (e.g downloads, new windows) are clearly distinguished from hypertext links that load another page
24. The site allows the user to control the pace and sequence of the interaction
25. There are clearly marked exits on every page allowing the user to bale out of the current task without having to go through an extended dialog
26. The site does not disable the browser’s “Back” button and the “Back” button appears on the browser toolbar on every page
27. Clicking the back button always takes the user back to the page the user came from
28. If the site spawns new windows, these will not confuse the user (e.g. they are dialog-box sized and can be easily closed)
29. Menu instructions, prompts, and messages appear in the same place on each screen
Task Orientation
1. The site is free from irrelevant, unnecessary, and distracting information
2. Excessive use of scripts, applets, movies, audio files, graphics, and images has been avoided
3. The site avoids unnecessary registration
4. The critical path (e.g. purchase, subscription) is clear, with no distractions on the route
5. Information is presented in a simple, natural, and logical order
6. The number of screens required per task has been minimized
7. The site requires minimal scrolling and clicking
8. The site correctly anticipates and prompts for the user’s probable next activity
9. When graphs are shown, users have access to the actual data (e.g. numeric annotation on bar charts)
10. Activities allocated to the user or the computer take full advantage of the strengths of each (look for actions that can be done automatically by the site, e.g. postcode lookup)
11. Users can complete common tasks quickly
12. Items can be compared easily when this is necessary for the task (e.g. product/ scheme/ offer comparisons).
13. The task sequence parallels the user’s work processes.
14. The site makes the user’s work easier and quicker than without the system
15. The most important and frequently used topics, features, and functions are close to the center of the page, not in the far left or right margins.
16. The user does not need to enter the same information more than once
17. Important, frequently needed topics and tasks are close to the ‘surface’ of the website
18. The path for any given task is a reasonable length (2-5 clicks)
19. When there are multiple steps in a task, the site displays all the steps that need to be completed and provides feedback on the user’s current position in the workflow
20. The site’s privacy policy is easy to find, especially on pages that ask for personal information, and the policy is simple and clear
21. Users of the site do not need to remember information from place to place
22. The use of metaphors is easily understandable by the typical user
23. Data formats follow appropriate cultural conventions
24. Details of the software’s internal workings are not exposed to the user
25. The site caters to users with little prior experience of the web
26. The site makes it easy for users to explore the site and try out different options before committing themselves
27. A typical first-time visitor can do the most common tasks without assistance
28. When they return to the site, users will remember how to carry out the key tasks
29. Important calls to action are highly visible
30. Action buttons (such as “Submit”) are always invoked by the user, not automatically invoked by the system when the last field is completed
31. Command and action items are presented as buttons (not, for example, as hypertext links)
32. If the user is half-way through a transaction and quits, the user can later return to the site and continue from where he left off
33. When a page presents a lot of information, the user can sort and filter the information
34. If there is an image on a button or icon, it is relevant to the task
35. The site prompts the user before automatically logging off the user, and the time out is appropriate
36. Unwanted features (e.g. Flash animations) can be stopped or skipped
37. The site is robust and all the key features work (i.e. there are no javascript exceptions, CGI errors, or broken links)
38. The site supports novice and expert users by providing different levels of explanation (e.g. in help and error messages)
39. The site allows users to rename objects and actions in the interface (e.g. naming delivery addresses or accounts)
40. The site allows the user to customize operational time parameters (e.g. time until automatic logout)
Forms and Data Entry
1. Fields in data entry screens contain default values when appropriate and show the structure of the data and the field length
2. When a task involves source documents (such as a paper form), the interface is compatible with the characteristics of the source document
3. The site automatically enters field formatting data (e.g. currency symbols, commas for 1000s, trailing or leading spaces). Users do not need to enter characters like ₹ or %
4. Field labels on forms clearly explain what entries are desired
5. Text boxes on forms are the right length for the expected answer
6. There is a clear distinction between “required” and “optional” fields on forms
7. The same form is used for both logging in and registering (i.e. it’s like Amazon)
8. Forms pre-warn the user if external information is needed for completion (e.g. a passport number)
9. Questions on forms are grouped logically, and each group has a heading
10. Fields on forms contain hints, examples, or model answers to demonstrate the expected input
11. When field labels on forms take the form of questions, the questions are stated in clear, simple language
12. Pull-down menus, radio buttons, and checkboxes are used in preference to text entry fields on forms (i.e. text entry fields are not overused)
13. With data entry screens, the cursor is placed where the input is needed
14. Data formats are clearly indicated for input (e.g. dates) and output (e.g. units of values)
15. Users can complete simple tasks by entering just essential information (with the system supplying the non-essential information by default)
16. Forms allow users to stay with a single interaction method for as long as possible (i.e. users do not need to make numerous shifts from keyboard to mouse to keyboard)
17. The user can change default values in form fields
18. Text entry fields indicate the amount and the format of data that needs to be entered
19. Forms are validated before the form is submitted
20. With data entry screens, the site carries out field-level checking and form-level checking at the appropriate time
21. The site makes it easy to correct errors (e.g. when a form is incomplete, positioning the cursor at the location where correction is required)
22. There is consistency between data entry and data display
23. Labels are close to the data entry fields (e.g. labels are right-justified)
Writing and Content Quality
1. The site has compelling and unique content.
2. Text is concise, with no needless instructions or welcome notes.
3. Use the language focussed to the target audience
4. Use simple and clear language
5. Each content page begins with conclusions or implications and the text is written with an inverted pyramid style.
6. Use consistent capitalization and other style standards.
7. Use non-breaking spaces between words in phrases that need to go together in order to be scannable and understood.
8. Spell out abbreviations, initialisms, and acronyms, and immediately follow them by the abbreviation, in the first instance.
9. Avoid exclamation marks.
10. Use all uppercase letters sparingly or not at all as a formatting style.
11. Avoid using spaces and punctuation inappropriately, for emphasis.
12. Pages use bulleted and numbered lists in preference to narrative text.
13. Lists are prefaced with a concise introduction (e.g. a word or phrase), helping users appreciate how the items are related to one another.
14. The most important items in a list are placed at the top.
15. Information is organized hierarchically, from the general to the specific, and the organization is clear and logical.
16. Content has been specifically created for the web (web pages do not comprise repurposed material from print publications such as brochures).
17. Hypertext has been appropriately used to structure content.
18. Sentences are written in the active voice.
19. Pages are quick to scan, with ample headings and subheadings and short paragraphs.
20. The site uses maps, diagrams, graphs, flow charts, and other visuals in preference to wordy blocks of text.
21. Each page is clearly labeled with a descriptive and useful title that makes sense as a bookmark.
22. Links and link titles are descriptive and predictive, and there are no “Click here!” links.
23. The site avoids cute, clever, or cryptic headings.
24. Link names match the title of destination pages, so users will know when they have reached the intended page.
25. Button labels and link labels start with action words.
26. Headings and subheadings are short, straightforward, and descriptive.
27. The words, phrases, and concepts used will be familiar to the typical user.
28. Numbered lists start at “1” not at “0”.
29. Text links are long enough to be understood but short enough to minimize wrapping (especially when used as a navigation list).
Page Layout and Visual Design
1. The screen density is appropriate for the target users and their tasks.
2. The layout helps focus attention on what to do next.
3. On all pages, the most important information (such as frequently used topics, features, and functions) is presented on the first screenful of information (“above the fold”).
4. The site can be used without scrolling horizontally.
5. Things that are clickable (like buttons) are obviously pressable.
6. Items that aren’t clickable do not have characteristics that suggest that they are.
7. The functionality of buttons and controls is obvious from their labels or from their design.
8. Clickable images include redundant text labels (i.e. there is no ‘mystery meat’ navigation).
9. Hypertext links are easy to identify (e.g. underlined) without needing to ‘minesweep’.
10. Fonts are used consistently.
11. The relationship between controls and their actions is obvious.
12. Icons and graphics are standard and/or intuitive (concrete and familiar).
13. There is a clear visual “starting point” to every page.
14. Each page on the site shares a consistent layout.
15. Pages on the site are formatted for printing, or there is a printer-friendly version.
16. Buttons and links show that they have been clicked.
17. GUI components (like radio buttons and checkboxes) are used appropriately.
18. Fonts are readable.
19. The site avoids italicized text and uses underlining only for hypertext links.
20. There is a good balance between information density and the use of white space.
21. The site is pleasant to look at.
22. Pages are free of “scroll stoppers” (headings or page elements that create the illusion that users have reached the top or bottom of a page when they have not).
23. The site avoids extensive use of upper case text.
24. The site has a consistent, clearly recognizable look and feel that will engage users.
25. Colour is used to structure and group items on the page.
26. Emboldening is used to emphasize important topic categories.
27. On content pages, line lengths are neither too short (<50 characters per line) nor too long (>100 characters per line) when viewed in a standard browser width window.
28. Pages have been designed to an underlying grid, with items and widgets aligned both horizontally and vertically.
29. Meaningful labels, effective background colors, and appropriate use of borders and white space help users identify a set of items as a discrete functional block.
30. The colors work well together and complicated backgrounds are avoided.
31. Individual pages are free of clutter and irrelevant information.
32. Standard elements (such as page titles, site navigation, page navigation, privacy policy, etc.) are easy to locate.
33. The organization’s logo is placed in the same location on every page, and clicking the logo returns the user to the most logical page (e.g. the homepage).
34. Attention-attracting features (such as animation, bold colors, and size differentials) are used sparingly and only where relevant.
35. Icons are visually and conceptually distinct yet still harmonious (clearly part of the same family).
36. Related information and functions are clustered together, and each group can be scanned in a single fixation.
Search usability
1. Search on the homepage should search the entire site by default.
2. The search results page shows the user what was searched for and it is easy to edit and resubmit the search.
3. Search results are clear, useful, and ranked by relevance.
4. The search results page makes it clear how many results were retrieved, and the number of results per page can be configured by the user.
5. If no results are returned, the system offers ideas or options for improving the query based on identifiable problems with the user’s input.
6. The search engine handles empty queries gracefully.
7. The most common queries (as reflected in the site log) produce useful results.
8. The search engine includes templates, examples, or hints on how to use it effectively.
9. The site includes a more powerful search interface available to help users refine their searches (preferably named “revise search” or “refine search”, not “advanced search”).
10. The search results page does not show duplicate results (either perceived duplicates or actual duplicates).
11. The search box is long enough to handle common query lengths.
12. If the site allows users to set up a complex search, these searches can be saved and executed on a regular basis (so users can keep up-to-date with dynamic content).
13. The search interface is located where users will expect to find it (top right of page).
14. The search box and its controls are clearly labeled (multiple search boxes can be confusing).
15. The site supports people who want to browse and people who want to search.
16. The scope of the search is made explicit on the search results page and users can restrict the scope (if relevant to the task).
17. The search results page displays useful meta-information, such as the size of the document, the date that the document was created, and the file type (Word, PDF, etc.).
18. The search engine provides automatic spell checking and looks for plurals and synonyms.
19. The search engine provides an option for similarity search (“more like this”).
Help, Feedback and Error tolerance
1. The FAQ or online help provides step-by-step instructions to help users carry out the most important tasks.
2. It is easy to get help in the right form and at the right time.
3. Prompts are brief and unambiguous.
4. The user does not need to consult user manuals or other external information to use the site.
5. The site uses a customized 404 page, which includes tips on how to find the missing page and links to “Home” and Search.
6. The site provides good feedback (e.g. progress indicators or messages) when needed (e.g. during checkout).
7. User confirmation is required before carrying out potentially “dangerous” actions (e.g. deleting something).
8. Confirmation pages are clear.
9. Error messages contain clear instructions on what to do next.
10. When the user needs to choose between different options (such as in a dialog box), the options are obvious.
11. The site keeps users informed about unavoidable delays in the site’s response time (e.g. when authorizing a credit card transaction).
12. Error messages are written in a non-derisory tone and do not blame the user for the error.
13. Pages load quickly (preferably in 5 seconds or less).
14. The site provides immediate feedback on user input or actions.
15. The user is warned about large, slow-loading pages (e.g. “Please wait…”), and the most important information appears first.
16. Where tooltips are used, they provide useful additional help and do not simply duplicate text in the icon, link, or field label.
17. When giving instructions, pages tell users what to do rather than what to avoid doing.
18. The site shows users how to do common tasks where appropriate (e.g. with demonstrations of the site’s functionality).
19. The site provides feedback (e.g. “Did you know?”) that helps the user learn how to use the site.
20. The site provides context-sensitive help.
21. Help is clear and direct and simply expressed in plain English, free from jargon and buzzwords.
22. The site provides clear feedback when a task has been completed successfully.
23. Important instructions remain on the screen while needed, and there are no hasty time outs requiring the user to write down information.
24. Fitts’ Law is followed (the distance between controls and the size of the controls is appropriate, with size proportional to distance).
25. There is sufficient space between targets to prevent the user from hitting multiple or incorrect targets.
26. There is a line space of at least 2 pixels between clickable items.
27. The site makes it obvious when and where an error has occurred (e.g. when a form is incomplete, highlighting the missing fields).
28. The site uses appropriate selection methods (e.g. pull-down menus) as an alternative to typing.
29. The site does a good job of preventing the user from making errors.
30. The site prompts the user before correcting erroneous input (e.g. Google’s “Did you mean…?”).
31. The site ensures that work is not lost (either by the user or site error).
32. Error messages are written in plain language with a sufficient explanation of the problem.
33. When relevant, the user can defer fixing errors until later in the task.
34. The site can provide more detail about error messages if required.
35. It is easy to “undo” (or “cancel”) and “redo” actions.

Add User Experience Design & Technology to your Homescreen!