247 guidelines for Web Availability design

Homepage Availability design

1. The home page elements should clearly focus on users' key tasks (avoid "featuritis )")
2. If the website is relatively large, the home page should contain a search input box
3. The home page should clearly provide product (content) Categories
4. Display useful content at one click on the home page or home page
5. Information should be displayed in a simple, natural, and logical order.
6. Excellent examples of real website content on the homepage
7. The links on the home page start with the most important keywords (for example, "Sun Holidays" instead of "holidays in the sun ")
8. Provides a list of recent featured items on the home page and links to the archived content
9. Do not over-format (modify) the homepage navigation, so that users do not mistakenly think of it as an advertisement.
10. Clearly declare the value orientation on the homepage (for example, a symbolic slogan or greeting)
11. Include meaningful designs on the home page, rather than irrelevant clip art or painting.
12. Navigation options are sorted in a logical or user-oriented manner (put secondary company information at the bottom)
13. The homepage title can provide good visibility for search engines such as Google.
14. All company information is arranged in a prominent region (for example, "About Us (about US )")
15. Users can understand the value orientation
16. Once you see the homepage, the person who visits the homepage for the first time will know where to start.
17. Show all main operation options on the homepage
18. The home page has an easy-to-remember URL
19. The homepage must be professionally designed to give users a good first impression.
20. The design of the homepage should stimulate users' interest in site exploration.
21. A home page is like a home page, which cannot be confused with a second-level page.

Task Orientation

2. Websites should avoid irrelevant, redundant, or distracting information.
4. Avoid excessive use of scripts and small applicationsProgram(Applets), video and audio files, patterns, and images
6. Unnecessary registration should be avoided for websites
8. Key character paths must be clear and non-interfering (for example, purchase and donation)
10. Information is displayed in a simple, natural (natural), logically ordered manner
12. Minimize the number of screens required for each task
14. Reduce Page scrolling and click
16. The website should correctly anticipate and prompt the user for possible next actions
18. When displaying a chart, make sure that you can see the real data (for example, mark the numeric Annotation on the bar chart)
20. When assigning tasks to users, make full use of the advantages of computers (such as the automatic completion function of search input)
22. You can quickly complete Common Tasks
24. When necessary, the data comparison function (for example, product comparison) should be provided for the current task)
26. The task sequence should be consistent with the user's daily work sequence.
28. The website ensures that the user's work is easier and faster than not using it.
30. The most important or frequently used topic, feature, or function should be placed near the center of the page, rather than on the left or right.
32. Make sure that the user does not repeatedly enter the same information
34. Important and frequently used themes or tasks should be close to the "surface" of the website"
36. Maintain minimal input (for example, during the purchase process) and provide accelerators for users
38. Any given task path should have a reasonable step length (2-5 clicks)
40. When a task has multiple steps, the website will tell you all the steps required to complete the task and provide feedback on the location of the current step.
42. Keep up with the price of each product
44. It is very easy to find the website's privacy policy, especially on pages that require entering personal information. Privacy Policies should be simple and clear
46. Website users do not need to remember the information from one place to another
48. The use of metaphor can be easily understood by typical users.
50. The data format should follow the cultural conventions
52. Do not expose the internal work details of the software to users.
54. We should cater to the small Internet habits that users have developed before.
56. The website should be easy for users to browse. Before performing this operation, you can try other functions on your own.
58. Typical users of the first visit should be able to perform the most common functions without assistance
60. When the user returns to the website, the user can remember how to execute the main task
62. The functions of novel devices (novel device controls) should be obvious.
64. On the shopping cart page, the "process checkout" button should be clearly displayed at the top or bottom of the page.
66. Important Operation portals (such as "add to shopping cart") should be clearly visible
68. The operation button (for example, "Submit") should be triggered by the user, rather than automatically triggered when all options are completed
70. Display command or operation items in the form of buttons (rather than links)
72. If the user exits midway through the transaction processing process, the user can continue his work before returning to the site later.
74. When a page displays a large amount of information, you can sort and filter information.
76. The image on the button or icon should be content-related
78. When a user is automatically deregistered by the system, the system should prompt the user and the time interval for automatic cancellation should be appropriate.
80. Unnecessary functions (such as Flash Animation) can be disabled or skipped (skip)
82. Websites should be robust and all key functions should work properly (for example, JavaScript page exceptions, CGI errors, or dead links should not be reported)
84. The website supports new users and expert users (such as help information and error information) with different levels of instructions)
86. The website allows users to enter new information items (such as changing the shipping address and account information)
88. The website allows users to customize operation time parameters (for example, automatic Exit Time)

Navigation and Information Architecture

2. Connecting pages or moving between areas should be convenient and obvious, and can easily return to the home page
4. On most pages, you can easily navigate to the information you need most easily.
6. Navigation options are sorted by the most common logic or task-oriented mode
8. The navigation system should have a wide range of content and a relatively low level, rather than a relatively deep level.
10. The site structure is simple and there is a clear conceptual model with no unnecessary layers
12. The main part of the website (persistent navigation) can be reached on all pages, and the navigation process will not be interrupted.
14. The navigation label is placed at the top of the page and should be designed to look as you can click
16. You must have a site map to provide an overview of the content of the entire site.
18. Any page can be linked to the Site Map
20. The site map provides a concise overview of the website, rather than a duplicate of the main navigation or a simple list of topics
22. Provides good navigation feedback (for example, displaying the current location)
24. A category tag should be able to accurately describe the category Information
26. The link or navigation tag contains the trigger words that the user is looking for to reach the target )"
28. Terms and general (such as link color) should be (approximately) consistent with Internet usage
30. The link in each component of the website should be consistent
32. The product page should contain links of similar or complementary products with the current product to achieve cross-Marketing
34. The terms in navigation items and links should be unambiguous and use the terms
36. Users can sort and filter directory pages (for example, sort by price or the most popular)
38. When the mouse is placed on a clickable element, the element should change significantly (including changes in the cursor)
40. Important content can be accessed through more than one link (different users may need different link tags)
42. Only pages used for navigation (such as the home page) can be browsed without scrolling
44. The hyperlink of the trigger event should be clearly distinguished from the hyperlink linked to other pages (for example, download) in appearance
46. Websites allow users to control interaction speed and order
48. The exit entry is clearly marked on each page of the website, allowing users to launch from the current task without passing an additional dialog box.
50. The "back" button of the browser cannot be disabled for the website. The "back" button should be displayed on the browser toolbar of each page.
52. When you click the back button of the browser, the user can always return to his previous page
54. The shopping cart (basket) and checkout links should be clearly visible on every page.
56. If the website opens a new window, this action should not confuse users (for example, the new window should be a set size dialog box or can be easily closed)
58. The menu instructions, prompts, and related information should be displayed at the same position on each screen.

Form and data input

1. When appropriate, the data input box should contain the default value to display the data format to be filled in and the length allowed in the input box.
2. If the Task Design source file (for example, in the form of paper), the interface should be consistent with the source file specifications
3. The website can automatically input formatted data (for example, currency symbols), and users do not need to enter symbols like £ or %.
4. The label of the form field should clearly describe what the input box wants.
5. The text box in the form should set a reasonable length for the expected answer
6. The mandatory and optional items in the form should be clearly differentiated.
7. Login and registration should use the same form (just like Amazon)
8. If you need external information to complete the form, you should inform the user in advance, such as the passport number.
9. Question items (input box) in the form should be grouped by logic, and each group has a title
10. The form field should contain prompts, examples, or sample answers to inform the user of the expected input in the input box.
11. If the tags in the input box are raised as form problems, these problems should be clear and simple.
12. In a form, the drop-down menu, single-choice button, and check box should be preferred over text input boxes)
13. On the data input page, the cursor should be placed in the desired place
14. The format of data input (for example, date) and output (for example, value unit) should be clearly indicated
15. Users can enter some basic necessary information to complete simple tasks (the system can add some unimportant information by default)
16. Forms allow users to maintain a simple interaction mode for as long as possible (for example, users do not have to switch between the keyboard and mouse continuously)
17. You can change the default value of a form field.
18. The text field specifies the number and format of data to be input.
19. Form data verification before submission
20. Perform form field-level verification and form-level verification at the appropriate time on the Data Input Interface
21. The website should be able to easily correct input errors (for example, when the verification form is not complete, the cursor should be placed at the position to be entered)
22. Data input and display should be consistent
23. The form field tag should be close to the input field (for example, right-aligned label)

Credibility

1. The content should be up-to-date, authoritative, and trustworthy
2. The website has a third party (such as a reference or a third party's use witness) to describe the accuracy of the information.
3. The website should be clearly marked with authentic organizations (for example, providing a real address or office photo) behind the scenes)
4. The company has some certification experts (some creden) can be used)
5. Websites should avoid advertisements, especially pop-up advertisements
6. The shipping fee is highlighted at the very beginning of the checkout
7. Websites should avoid empty marketing rhetoric (Marketing waffle)
8. Each page should clearly display the site ID to ensure that the user confirms that he is still on the same website
9. You can easily contact someone through the website for help and get a reply as soon as possible.
10. The content is fresh, and the website should be updated frequently, which always includes the latest content.
11. Websites should avoid incorrect layout and spelling.
12. Supplement product and offline marketing information with Visual Design
13. Website organizations should have some real people who are honest and trustworthy.

Writing and content quality

1. Websites have unique content that interests others.
2. The text is concise and there are no unnecessary instructions and welcoming orders
3. Each content page should start with content conclusion or content significance revelation, and the text should be written in inverted pyramid mode.
4. Compared with narrative text, the unordered list and ordered list should be preferentially used on webpages.
5. The list should begin with a brief description to help users realize how the list is associated with others.
6. The most important list items should be placed before the list
7. Information should be organized at different levels. from general to specific, the organizational structure should be clear and logical.
8. The content should be specially created for the Internet (web pages do not comprise repurposed material from print publications such as brochures)
9. The product display page should contain information required for purchase. Users can scale the product image.
10. Use hypertext to properly organize content
11. Write statements in active voice
12. The web page should be easy to view quickly and make full use of titles, subtitles, and short paragraphs
13. Maps, charts, graphs, flowcharts, and other visual elements are preferred for text-based languages.
14. Each webpage should have a description and a useful title to support bookmarks.
15. The link and Link Description (title) should be descriptive or speculative, and the "Click here" link should not appear
16. The title should not pretend to be elegant, clever, or obscure.
17. The link text should be consistent with the title of the target page, so that you can know when you arrive at the target page
18. Button text and link text begin with a verb
19. The title and subtitle should be short, straightforward, and descriptive.
20. The concepts used in the syntax should be familiar to typical users.
21. The ordered list starts from 1 instead of 0.
22. The abbreviations used for the first time should be explained.
23. Text links should be long enough to facilitate understanding and be short enough to ensure a minimum line feed (especially when used as a navigation List)

Page Layout and Visual Design

2. The number of network cables should be suitable for target users and their tasks
4. Layout helps you focus on what you need to do next.
6. On all pages, the most important information (such as frequently used themes, features, and features) is placed on the screen's first full screen.
8. The website can be used without horizontal scrolling.
10. Clickable elements (such as buttons) should be designed to be clearly clickable
12. Elements that cannot be clicked
14. The functions of buttons or controls can be clearly seen from their labels or designs.
16. Clickable images include Redundant text labels (I. e. There is no 'Mystery meat' navigation ))
18. Hypertext links can be easily identified (such as underscores) without large-scale scanning.
20. Website fonts should be consistent
22. The relationship between the control and its operations is obvious.
24. Icons and graphics are standard and/or intuitive (specific and familiar)
26. Each page should have a clear visual "starting point"
28. Consistent layout for each page of the website
30. The webpage is printed and formatted, or there is a version prepared for printing
32. The button or link shows that they have been clicked.
34. Graphical user interface (GUI) components (such as single-choice buttons and check boxes) should be properly used
36. The font used should be readable.
38. Websites should avoid italics and only underline hypertext.
40. There should be a good balance between information density and white space.
42. The website should look pleasant.
44. The web page should avoid "scroll stoppers" (titles or other page elements give users the illusion of being at the top or bottom of the page)
46. Websites should avoid using large numbers of uppercase texts
48. Websites should have consistent, clear and identifiable appearances and feelings to attract users
50. Dark blue avoids use in detail (saturated blue is avoided for fine detail) (for example, text, line, and symbols)
52. Organize and group page elements by color
54. Website images should not be confused with banner advertisements
56. Aggravated display of important topic categories (EM)
58. In a standard-width browser window, the content page must not be too short (less than 50 words) or too long (more than 100 words)
60. The page is designed based on the grid. All page elements and parts are horizontally aligned and vertically aligned.
62. Meaningful text tags, impressive background colors, borders, and whitelists are used properly. These help users to separate webpage elements from unrelated functional areas.
64. Reasonable webpage color matching to avoid overly complex background design/LI>
66. Independent webpages should avoid clutter and irrelevant information
68. Standard page elements (such as page title, site navigation, page navigation, privacy policy, etc.) can be easily found
70. The Organization Logo is placed in the same position on each page. Click the logo to return the most reasonable page (such as the homepage)
72. Special elements that attract attention (such as animations, eye-catching tones, and significant differences in font size) should be used conservatively and only in proper places
74. Icons must be visually and conceptually different, but must be in harmony with the page.
76. Information and functions are centrally stored. Each group can be viewed in a field of view (approximately 4.4 cm in diameter)

Search availability

1. The default search should be intuitively configured (no boolean operators operator)
2. On the search results page, you can view the searched content. on this page, you can edit the search term and resubmit the search.
3. The search results should be clear, useful, and graded Based on Relevance
4. The retrieval result page should clearly tell the user how many records are retrieved, and the number of records displayed on each page can be configured by the user
5. If no results are returned, the system provides suggestions and optional input items based on the identifiable issues in the keywords entered by the user.
6. Search engines can elegantly handle empty search strings
7. The most common search string can obtain useful results
8. A search engine should provide templates, examples, or prompts to help users efficiently use it.
9. A website should contain a more powerful search page to help users improve their search (it can be called "Modify search revise search" or "exact search Refine search ", rather than "Advanced Search ")
10. Repeat results are not displayed on the search results page (whether it is the perceived repetition or the actual repetition)
11. The search input box should be long enough to cover the length of frequently used search terms
12. The entire site should be retrieved, not part of the site
13. If the website allows users to create compound searches, these searches should be saved and executed on a regular basis (so that users can track the latest Dynamic Information)
14. The search interface should be placed in the desired area (usually in the upper right area of the page)
15. The search box and its controls should be clearly listed (multiple search boxes may be hard to understand)
16. The site can meet the needs of users who want to browse at will, or users who want to search
17. On the search results page, the current search range should be clarified, and you can restrict this range (if required by this task)
18. The result page displays useful meta-information, such as the document size, creation date, and file type (word, PDF, etc)
19. The search engine provides automatic spelling checks and search for plural words and synonyms.
20. The suo engine provides similar search options (for example, "more similarity" links)

Help, feedback, and fault tolerance

2. Provides step-by-step guidance to help you complete the most important tasks.
4. Get help at the right place and at the right time
6. The prompt should be concise and clear
8. Users do not need to resort to user manual or other external information to use the site
10. The website has a custom 404 page that contains a prompt on how to find the page, and links to the home page and search page.
12. The website provides good feedback (such as progress prompts or some information) when necessary (such as verification)
14. Users can get help when selecting products
16. The user shall provide the user with confirmation before performing a potentially "dangerous" operation (such as deleting something ).
18. The user confirmation page is clear
20. The error message contains clear instructions on what to do first
22. Before the purchase is submitted, the website clearly displays the overview page to the user, which should be differentiated from the purchase confirmation page.
24. These options should be clear when the user needs to make a choice before different options (for example, in a dialog box)
26. Users should be informed of the inevitable latency arising from the website response time (for example, when authorizing a credit card transaction)
28. Error messages are written in a non-mocking tone and do not blame users for errors.
30. Page can be quickly loaded (5 seconds or less)
32. The website provides timely feedback on user input or other operations
34. Prompt the user (for example, "loading...") on the page with slow loading ......"), The most important information should be displayed first
36. When you use a tool tip, you should be prompted for additional help, instead of simply repeating the text in the icon, link, or field label.
38. When giving users some help tips, tell them what to do, instead of avoiding what to do
40. The website shows users how to perform common tasks in a proper place (for example, providing website function examples)
42. The website provides feedback (for example, "do you know ?"), Help users understand how to use websites
44. The website provides context-sensitive help
46. Help should be straightforward. It should be expressed in a straightforward and simple way to avoid the use of slang and buzzwords.
48. When a task is completed successfully, the website provides clear feedback
50. Important prompt information should be retained on the screen when necessary, so that the user has enough time to record the information
52. Follow the filz rule (the distance between controls and the size of controls should be appropriate, and the size should be proportional to the distance)
54. There is sufficient space between target objects to Prevent Users From clicking multiple targets or wrong targets.
56. The distance between clickable elements must be at least two pixels.
58. When a website error occurs, it should be obvious (for example, when the form is incomplete, highlight the form fields that are not completed)
60. The website provides an appropriate selection method (such as a drop-down list) to replace user input.
62. Websites should strive to prevent user errors
64. The website prompts the user before correcting the user's incorrect input (for example, Google's "are you looking ...")
66. The website should ensure that the task is not confusing
68. The error information should be described in straightforward language and given enough explanation of the problem.
70. In a task, you can delay the error resolution to a later time.
72. If necessary, the website provides more details about the error information.
74. It is very easy to cancel (or cancel) and redo operations.