Design mode-Automatic completion

The 10 usability principles presented by Jabob Nielsen have one principle-to prevent errors (error prevention). There is a specific explanation for this principle in the official website, no longer repeat here. I think there is another way to prevent errors is to let the user choose rather than input. Here the user doesn't have to think about how to input, whether the input is correct, and here is a common "autocomplete" to talk about the application of this design pattern in the present.

Automatic completion is a powerful mode of reactive interface. A typical pattern is to display a drop-down list that contains a match as the user enters the text box. Ideally, you should automatically select the best match. At this point, the user only needs to accept a match or select another item from the list.

Typical applications: email, instant messaging software

Fig. 1 Sametime 7.5.1

OK, now let's think about what needs to be noticed in the interaction design for this simple interaction. The author analyses the three aspects of input, matching and selection.

　　
input
How much time feedback does the user need to wait for input? For automatic completion, feedback is required for each character entered by the user. However, if user input is fast, it is also possible to give feedback suggestions in several characters and also to consider performance issues.

　　
Match
As shown in Figure 2 for IBM's note, the characters entered by the user can match any part of the contact's name or e-mail address, highlighting the matching contacts, and displaying the characters entered in bold. This will clearly inform the user of the selected contact and the matching characters, and check the spelling to prevent errors.

Keyboard action is also supported, and the top and bottom arrow keys can be used to select matching items.

Figure 2 Lotus Note v8.0

As shown in Figure 3, in some integrated development environments, the system provides some matching keywords from the specified parameters based on user input. This design pattern is used in development to help programmers greatly improve their efficiency. From the cognitive to the system to reduce the burden of memory, and the operator only need to choose not to input the corresponding code to reduce the operation, reduce the likelihood of error. In an integrated development environment, the system prompts you to match any part of the label based on the value entered by the user. In particular, the automatic closure of the label, syntax prompts are automatic completion of this design pattern embodiment, a good upgrade of the experience effect.

Figure 3 Lotus Note v8.0 IBM Rational application Developer

　

Figure 4 illustrates how a common matching list can be optimized and booted. Matching lists can also provide some usage instructions and additional information.
1. Use a gray font in the list to provide a description of the usage;
2. After some matches provided the type (computer science, blog), etc., so that more convenient for accurate search and information classification;
3. Provide a web search function, in the absence of appropriate matching content, give users a larger search scope;
4. Give user control, users can hide the content does not conform to expectations.

Figure 4 IBM W3 Portal

Automatic completion of this design pattern can be used in other environments in addition to the Simple text entry box. Figure 5 illustrates the use of automatic completion to specify the corresponding properties. Once a property is selected from the list, the corresponding value is also set. Here, attribute and value pairing have special significance in collaborative work of large software development, which guarantees the unification and specification of output quality. Design and development only need to call to be able to greatly reduce the cost of communication.

Figure 5 IBM Fringe

Figure 6 automatically completes the combination with the tag, and obviously matches only those items that begin with a label name. In some enterprises within the SNS application, automatic search this model can be combined with many Web 2.0 elements to improve the design experience.

Figure 6 Lotus Connections

　
Select
In the automatic matching context of the mailbox, press TAB to enter the matching contact into the text box. Because the TAB key in the mailbox supports the role of selecting and changing the focus. In normal instant messaging software, press ENTER to select and open the dialog box directly. If the enterprise-class Instant Messaging software recommends supporting tab for multiple choices.

　
when not?
1. Some applications involving security are best not to use "autocomplete", such as when entering user names, passwords, or other sensitive information;
2. When there is a large number of matching content, but there is no reasonable basis to classify;
3. The system cannot update the matching content on the basis of the user's input immediately;
4. Automatic selection cannot be used for scenes with fixed matches, for example, it is best to use a drop-down list instead of automating the user to select a state name.

　　
Barrier-Free design
1. When the page is refreshed, the screen reader will read it repeatedly. Therefore, the page cannot be refreshed when the match is updated.
2. Screen readers read the loaded pages in order from top to bottom. Therefore, after the page load completes, the occurrence of the match needs to notify the screen reader, and in this part of the page to give a quick entry.

　　
Reference Documents
1. http://www.useit.com/papers/heuristic/heuristic_list.html
2. Bill Scott, Tberesa Neil Li Song. Web interface design [M]. Beijing: Electronic industry publishing house, 2009:253-254.
3. Robert Hoekman, Jr Xiang Yining. The beauty of the moment [M]. People's post and telecommunications press, 2009:72.