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.

<