UI/UX in Autocomplete: Simplifying Data Entry

Data entry can be laborious; every effort should be made to simplify the job of inputting data. When the user is entering information that might be hard to remember, ambiguous or easily mistyped the system should support the data entry process.

Solution

Sometimes users may input data or enter search terms that can be easily matched to information already in the system. On these occasions the user would benefit from ‘autocomplete’, which either fills the input field automatically or provides the user with a list of possible, matching selections to choose from.

Why choose ‘Autocomplete’?

Quite simply, by offering the user a complete search term or piece of data when they have only entered a portion of their intended selection, you make their life easier. If they only need to enter one letter then select the autocomplete option they have saved time and effort, especially if the whole term is long-winded, as is often the case with email addresses.

Autocomplete combines the flexibility of editable input fields and the speed of selection afforded by predetermined sets of options, such as in scrolling lists or drop-down menus. By using an input field the user can enter any letter, word, term, symbol etc, whilst the system helps them by providing a set of possible options that fit their data or search criteria.

An example ‘autocomplete’ can be seen in action above; the user has input a portion of the intended search term (Interaction design for…) and the system has provided them with the whole term (Interaction Design Foundation) and a number of other possible suggestions, which can be selected to fill the data entry box. Autocomplete can also be used when there is a level of ambiguity so that terms can be entered in a number of different ways. Allowing users to choose from a number of suggestions when only part of the term has been entered increases data entry speed. However, if the number of suggestions exceeds a manageable amount the dropdown list of suggestions may be more of a distraction. Therefore, it is best to set a maximum number of matching items displayed in the dropdown option list. This limit may be set according to the screen size – often an issue with Android devices – or simply as a product of the number of items you feel can be immediately scanned.

Autocomplete also assists the user by providing them with continual feedback as they add characters to their search term or input data. With each new character, the autocomplete list becomes more and more specific to their criteria, helping to zone in on the correct choice.

Implementing Autocomplete

• Use a highly visible input field at the top of the page, panel, window or the section in which the user will enter data.
• Autocomplete options tend to be displayed directly beneath the data entry box where users input their selection.
• The user must be allowed to delete a character from their search term or data.
• Allow the user to use the directional keys to scroll down the suggested options and press enters to make a selection. Like this, the user does not have to revert to the mouse or touchpad to choose an autocomplete option.
• The width of the data entry box tends to dictate the width of the corresponding drop-down selection panel, however, there are times when this may not be the best fit. When the option size exceeds the width of the input box ensure the potential matches are displayed as near to the current word/term portion.
• Highlighting the part of the option that matches the entered text can also help to draw the user’s attention to the correct option. For example, when entering train stations to calculate ticket prices on thetrainline.co.uk website, the suggestions highlight the user’s search term, such as search term: ‘Ham‘ suggestions: ‘Birkenhead Hamilton Square’ and ‘South Hampstead’.
• When the user is permitted to enter more than one search term into the same input field, allow them to do so by placing a comma between the individual terms.
• Highlight the closest matching option within the list of suggestions.
• The accepted standard number of items tends to hit a ceiling of around ten options. The options should be shown according to their relevance to the current item portion, with items given less prominence according to their decreasing relevance. This way, users can choose the best fit more readily whilst resisting potential distraction from the other options. On some occasions autocomplete design can break matching items into categories, such as when matched options are grouped according to their product type.
• Sometimes users prefer not to have autocompleted suggestions displayed, so you may want to provide them with the option to close the dropdown suggestion list or turn off this design element.

About Author

Manoj kumar