Guiding principles of web interactive interface usability design and Acceptance

With the rapid development of enterprise intranets and the international Internet, more and more workflows, business transactions, education, training, conferences, and lectures are available, and personal consumption and entertainment have been transferred to the so-called world wide web (Web. Correspondingly, interactive operations are becoming increasingly complex.

As the Browser/Server mode becomes increasingly popular, many operations are performed on webpages in the browser environment, not only invalid links and unexpected errors can upset the operator, even a complete successful operation may bring unpleasant experience to the operator due to the high complexity of the operation or inconvenience in use.

This article attempts to elaborate some guiding principles of web interactive page design, which are conducive to avoiding unpleasant operation experience. These principles are user-friendly. They are the most simple, simple, and comfortable web interaction interface design principles for users to complete the same operation. We assume that the web pages we discuss are functional and aesthetic. We need to explain that the principles we discuss may conflict with the aesthetic viewpoint of design and the existing functional design. If this happens, we recommend that you discard the original aesthetic viewpoint and functional design as appropriate based on the "practical is beautiful" viewpoint.

1. Automatically focus the input control and switch the input focus with the available keyboard

Use JavaScript to automatically focus the page to the first input control after loading. You can use the tab key (implemented by IE by default) or the arrow key to switch to the next input control.

An input control is a form Element Explicitly Displayed in a Web page form (<form>) that requires users to modify or edit operations. If no auto-focus operation is performed on these controls, the user's mouse position operation is inevitable (if the user is in the keyboard input operation status or after the mouse is positioned, the user needs to perform the keyboard input operation, it is actually a keyboard and mouse switch operation ). If you need to enter the keyboard after positioning the mouse, if you cannot switch the input focus, it is very cumbersome to switch the input focus repeatedly.

After page loading is completed, the system automatically focuses on the first input control and can switch the input focus calibration bit on the keyboard, therefore, you may not need to move the mouse to input the entire page, or use a small number of input operations, which is convenient. After all, frequent keyboard and mouse switching operations are quite tiring.

For a dialog box or webpage with an input column, the current control focus should be positioned on the input column to be entered without intervention; if you do not need to change the content in the input column, you should directly focus on the "OK" button. tab should be supported between several input columns, shift + TAB switch operation. "OK" and "cancel" should be the end point of the switch operation, regardless of the specific location.

2. You can use the enter (or Ctrl + enter) Key to submit the job. Make sure the result is the same as that of clicking the submit button.

Do not add onclick = "…" to the submit button "..." Such JavaScript code.

Using the Enter key to submit a page is a natural extension of principle 1, which is also supported by the browser by default. The reason is that some pages designed by some designers cannot achieve this effect. As a result, the use of the Enter key to submit is different from the effect of clicking the "OK" button to submit. In most cases, the designer adds onclik = "…" to the "OK" button "..." After you click "OK", a javascript code is executed, such as setting values for some hidden input elements. This code is not executed when you use the Enter key for submission.

The correct method is to move this code to the form tag <-form-> and use onsubmit = "..." Attribute introduction.

For <textarea> form elements, it consumes the Enter key, which invalidates the Enter key submission. You can use JavaScript code to capture the CTRL + enter compound key. Once captured, the submit () method of the form is executed. This code is necessary for scenarios that require frequent submission, such as BBS.

3. Mouse action prompts and responses

When you move the user's mouse position to a responsive position, a visual or auditory prompt should be given.

The simplest form of action response is to change the Mouse icon to the hand shape. The browser automatically changes the icon only for HTML tags with the href attribute. For labels without the href attribute (or without the href attribute), you can use JavaScript to set the cursor of the style attribute to hand.

A change in the target region is a more active response. When the mouse pointer moves to the target area, changing the pointer image or text color can greatly reduce the user's attention burden on searching and locating the target area. Add intuitive images on the buttons to maximize the area of the buttons as much as possible. Keep the appropriate distance between buttons, which increases the user's limit between them to prevent misoperation, too far increases the burden of searching and positioning buttons.

4. verify the validity of input data on the client as early as possible

The validity of input data should be verified using JavaScript on the client side. Unless verification can only be completed on the server side, verification should be performed as early as possible.

When the client completes Data Validity verification, a server request and reply communication can be avoided. This communication requires the user to wait, if the user waits for a long time and returns a result from the server, the system prompts that an error can be found at the time of input. This design is unfriendly. For example, the password length limit and the user name allowed character limit should be verified before the client submits the request.

5. Determine whether to use the intermediate transition page between the form page and the returned page after submission based on the Application scenario.

Based on the Application Scenario, determine whether to display the receiving form page (intermediate transition page between the form page and the returned page after submission) and how to display the receiving form page.

Form pages and receiving form pages are the cooperation modes on which most web interactions are implemented. To design the relationship between the form page and the receiving form page, consider the following aspects.

1. For scenarios requiring frequent operations, we should minimize the number of interactions between servers and clients from the perspective of convenience and efficiency, and avoid using intermediate transition pages. After submission, the original form page or default page is returned. In this case, data security and recoverability should be taken into account.

If the data entered by the user is unqualified and needs to be re-entered, the design method of removing the intermediate page and displaying the error information directly on the original form page is the most concise processing method. You only need to correct the error according to the error prompt. Of course, this will slightly increase the programming burden. The form receiving page must contain the content of the original form page, and the input data items must be set to user input values using server code or client JavaScript. To achieve quick development, you can do this: form pages and receive form pages are implemented using the same server-side script page. This page completes the work of the original two pages as follows:

Page script Initialization

The supervisor checks whether the "Submit" variable has been set, perform data verification token verification-> business logic processing-> use the include page or redirect method to return to a specific page token verification fails-> Save User input data-> exit form submission the token is not set in the Process of processing to the form page, create a form page flow. If user input data is generated from the submission process, it is displayed.

Specifically, returning to a specific page using the include PAGE method can avoid a client redirection process, which is faster and more stable than the client redirection process. However, in some cases, it may not be convenient to use the page inclusion method because of code variable conflicts or other reasons. In this case, you can use the server-side redirection technology. In ASP, the server is used. the transfer method is requestdispatcher in the Java Servlet. forward () method. Do not use the client HTTP redirect method such as response. Redirect or httpservletresponse. sendredirect. If the intermediate transition page is not used, the user cannot browse the previously filled form page, because the same URL is used. Therefore, saving user input data is essential when verification fails.

If you do not use the intermediate transition page, another problem is that the URL and page content cannot be matched one by one if you use the include PAGE method or the server-side redirection method to return. If the user directly uses this URL (this URL will be added to favorites) to access the returned page, he will find that the actually accessed page is a form page, not the returned page he wants. Therefore, removing intermediate transition pages does bring about ambiguous URLs and content. Therefore, it is not suitable for scenarios where URLs and page content are one-to-one matched.

2. From a technical point of view, using intermediate transition pages can ensure one-to-one correspondence between URLs and page content, simplifying page development.

To ensure that the page content is always associated with a fixed URL, you must use client redirection:

Submit business logic processing (intermediate transition page)

Form page> receive form page> display processing result> redirect the client to a specific page

Client redirection involves the following situations: 1. Using HTTP header redirection, Location: http://www.netall.com.cn, which is the fastest, allowing you to quickly access (get) another page with a blank window. In fact, this method cannot display the processing result. It can only be said to be a compromise in the First FAST redirect method. 2. Refresh the HTML Tag, <-- meta HTTP-EQUIV = "refresh" content = "5; url = http://www.netall.com.cn"> this kind of orientation is friendly and you can access another page after the page is loaded. Many designers use this as a technique and place a buffer page before loading a large page to avoid tedious waiting. 3. Javascript redirection. Because code is used to control redirection, it can be more flexible. For example, you can control the redirection process after the operation is completed based on your habits. 4. Passive redirection. Place buttons or links on the page, and the user manually determines to return to the specific page. This situation is suitable for the display page of the processing result that contains a considerable amount of information, you need to carefully browse, and decide the next operation.

When the intermediate transition page is used, the page expiration cannot be used again. Otherwise, if an error occurs, you need to re-enter the form data, and you cannot use the back button to restore the previously filled form data. Unless the designer intentionally disallows such restoration.

6. prevent repeated forms from being submitted.

Click the submit button and then perform the gray change process to prevent users from submitting the same form repeatedly when the network response is slow. Use Page expiration to prevent users from browsing back and submitting forms repeatedly.

Some complex applications may wait a long time to return the processing result. In a slow network environment, this situation occurs more frequently. Anxious users often click the submit button again. This is what the designer does not want to see.

Using JavaScript, it is the most direct way to invalidate the button after clicking the submit button (according to principle 2, this code should be placed in the <-form-> tag onsubmit = "..." ). In addition, on the form page, use a server script to set the expires of the HTTP header to expire immediately, so that you cannot use the back view to restore the form page. Note that the cost of this operation may be that the user has worked hard to fill in a long amount of content, and once the operation fails, the result cannot be recovered. Therefore, you should avoid page expiration on pages that contain <textarea> form elements.

It should be said that the stricter method is that server scripts should be able to resist repeated submissions. For example, assign a unique ID to this form or a verification code that is invalid once. In addition, the form processing should also be transactional. If the form is not accepted, the changes can still be restored. In financial applications, repeated submission of the same transaction is certainly not allowed. One party that can make profits in repeated submissions always tries to bypass browser restrictions, so it cannot rely on Client technology.

7. The page Link principle is to open a new window, use the original window, or pop-up window

Generally, you can use the target = "_ blank" attribute to open a new window for links on the home page. The original window or pop-up window should be used for links on other pages. If the content of the linked page is not important to the original page and is affiliated, you can use the pop-up window.

Generally, the original window should be used to reserve the right of the original window content to the user. Unless the designer believes that the original page is so important, there is still value in use after the user sends the click command, so that it cannot be updated or overwritten. Generally, only the home page is in this status. After a user opens a link on the home page, another link is usually opened on the home page. For example, the home page contains a portal with a lot of links, or the search results page of the search engine. The links on the previous search result pages of Google.com use the original window. Later, they realized that users would use this page repeatedly and change it to open a new window. In general, if there are not many links to the homepage, you do not need to use a new window. This is a user-friendly design principle.

An extreme case of the above situation is that the new page content is much less important than the original page content, so it is not necessary to open a new page. In this case, it is appropriate to use the pop-up window. There are several types of pop-up windows with javascript: one is the window. open () function. Here is a tip. Use window. open () to open a blank window first, and then use location. Replace () to replace it with the target page. In this way, you can avoid losing the response of the original page when opening the new page. Window. open () will open a new browser window process, so the resource consumption is relatively large. The other is the createpopup () method expanded by the Microsoft dynamichtml specification (). Createpopup () can create a borderless pop-up window, which consumes less system resources. Another is to use the hidden layer <-div> in the page to simulate a pop-up page. The last two types of content can be filled with JavaScript code in the pop-up window. To download a webpage as its content, you need the <download> tag in the Microsoft dynamichtml specification.

8. Arrange as few options as possible and arrange as few operation steps as possible

Arrange as few menu options as possible according to users' operation habits, and ensure as few operation steps as possible.

Reducing menu items and operation steps without reducing the diversity of features is a user-friendly design. It is not easy to achieve this. Consider what the most frequent operations are for users. Under normal circumstances, the operations required by a user can always be classified into five or fewer types. If more types appear, the primary and secondary types are not differentiated based on user interests. It is hard to imagine that a single user has more than five strong interest centers at the same time. Users who click and browse randomly are unlikely to perform in-depth interaction operations on a specific type. Of the five categories, each can have several operable Level 2 categories. If these second-level operation items are invisible, it means that you have to make two choices to enter the operable page. This violates the principle of "as few operation steps as possible. If you use JavaScript to create a level-2 menu, it is better to avoid requests to the server. If there are no more than 20 level-2 menu items in total, you can directly display the level-2 menu items. For example, you can place them one by one on the left column so that you only need to select the items that can be operated at a time, which is more clear and convenient.

9. operation logic is free of loopholes, ensuring data operation security

The logical relationships between operations on multiple pages and multiple operations on the same page are designed to be secure and rigorous. It is guaranteed that there will be no Disallowed User operation combinations, or at least no error due to user improper operations.

The most typical performance is the so-called linkage drop-down box design widely used on the page. The options in one drop-down box are changed by the options in another drop-down box. Another example is to make the form Element valid or invalid based on the selection. If you want to maintain a logic of legality between multiple pages, you need the participation of server scripts. This will make the Form Design related to operations. It should be said that this is not a good design. You can avoid this situation by changing the Operation Sequence and combination.

The operation logic should be designed to ensure that any user input does not cause errors, and that the user input data can be purchased and processed safely. Inputting a large amount of text in a form under the session control may cause timeout errors. At this time, the redirection process often occurs, causing the user's long input to disappear. Use JavaScript to remind users that the request has timed out. Save the input and submit it again. Some form elements, such as <-input type = "text"> Accept the ESC key to clear data and cannot be undone, which is also very dangerous. In the Chinese Input Method, the ESC key is often used to clearly specify the entered code bit. If you press the ESC key accidentally, the input data will disappear. Therefore, it is necessary to use JavaScript to disable the ESC key processing process of <-input> and <-textarea>.