Problem

Whenever possible, use assistive technology to reduce text entry effort and increase accuracy.

Solution

Autocomplete, predictive entry and related technologies such as spelling correction have become well-established, highly expected, assistive technologies for day to day computing. For mobile, they have proven especially valuable due to the relative difficulty and reduced speed of text entry, and especially for complex, technical character entry such as URLs.

Though many current, high-end devices either disregard these features, or do not consistently implement them, the same pressures apply to any mobile device. At least one method of assistive entry should be employed universally, across the entire device. If not available on the OS targeted, consider if adding this feature is possible, would assist or distract the user due to the different interface, and determine the best method for the type of entry taking place.

The actual functionality of any of these features, such as the algorithms used to actually perform the prediction, is outside the scope of this pattern.

Variations

A range of related functions, associated with all types of text entry, can be considered under the Autocomplete & Prediction pattern.

• Completion - Entry is automatically completed or modified with the goal to create valid entry with as few keystrokes as possible. Search

• Suggestion - One or several suggestions are displayed for an entry. An action is available to change to the suggestion, often by picking from a list. Encountered in triple-tap text-entry (a "Next" key is provided to scroll through options) or in search or web browser URL history, when a list of recent or common results is presented during typing.

• Error notation – Such as spell check. If a word or other entered item seems wrong, it may be pointed out inline. The most common is underlining mis-spelled words. Selection will offer alternatives, but no other automatic action is taken by the system.
• Replacement - Word or phrases which are recognized as likely to be mis-spellings of words in a dictionary are replaced with the correct version. No options are offered.

In some cases, multiple variations may be encountered at once. This is especially common when an entry is completed in the field with the best match, but suggestions are offered adjacent to the field.

Coupled with this variety of functions are a number of interactive methods. This pattern outlines some of the more fixed points, and provides general guidelines, but cannot be prescriptive about all aspects due to this variation.

Interaction Details

Multiple candidate matches are usually offered. These may be scrolled through, especially when presented as a drop-down style list, by on-screen gesture or with the up and down keys. In some cases, and most notably with multi-tap text entry methods, a key is dedicated (while in the mode) to displaying the next available candidate.

Lists of candidates should be circular, so scrolling past the end will load the first item again. This is especially critical when a single key is used to display the next option. For certain result sets, such as predictive search or URL completion, the results may be too large, or may even use Infinite List methods as it is remotely fetched.

A method to select the candidate in focus must be made available...

...If explicit, the suggestion is just that, and the user must make a selection from the suggested list, then press ok/enter.

...Automatic or implicit suggestions will automatically accept the first (or when an alternate has been scrolled to, the current one in focus) simply by continuing to type, or exiting the field.

Submitting a form with nothing selected will follow the same principles, and the submit function will be considered a typed character. Caution must be taken with using the ok/enter button to accept changes to entry, when it may be expected to submit the form. SOLUTION???

Presentation Details

All automatic behaviors, even inline items like replacement, must take a brief time to take effect, and have a visual cue to attract the user to the behavior. Many of these behaviors, while helpful, are also destructive and may change the intent of the user entry, so they must be informed of the change.

Selectable completion text may appear in one of two basic places:

• In place - Text is automatically entered and modified in the actual field where entry occurs. This is almost always used with multi-tap keypad text entry, but is also the way that auto-correction works.

• Adjacent - The suggestion appears adjacent to the word, either right below the entered text, or within the input panel itself. Suggestions for search, and matching candidates for Pen Input systems.

A rare variation is to complete "in place," but in a field, or location in the current field outside of the current focus or cursor location. this is best exemplified by code completion, but can be encountered in certain types of form filling. For example, an appointment creator with start, end and length-of-event fields will find the three closely coupled; completing any two will automatically fill the third. This may seem to be a simple, one-off interaction trick, but must in fact follow the principles outlined in this pattern to assure the user observes the behavior and gets the benefit from the auto-entry.

In place display should be highlighted while still a candidate, such as for multi-tap text entry. The entire word is still being changed by the user's character entry so this highlighting is a sort of extension of the text insertion point.

Candidate options displayed adjacent are typically offered as multiple selections. One item is always in focus, but others may be made available. These may be presented as a list, which can be scrolled through, or only one may be visible as a "bubble" (much like a Tooltip) before selection.

Error notifications, such as spell checks, should appear as an dashed or dotted underline in a very contrasting color. Red is the typical color, but avoid this if the background, text or overall theme uses red routinely, and especially as a link color.

Antipatterns

Avoid automatic replacement without a method for the user to opt-out or disable the feature, session or device-wide.

Do not violate the principles of Cancel Protection and allow destructive automatic behaviors without a method to revert or correct the change. For example, whenever automatic replacement is used, be sure to allow a method to revert to the spelling as typed. This may be as simple as disabling auto-correction for the second entry of the same word in the same field (or location in the field), so the user may simply re-key the phrase as intended. This is sub-optimal as it requires additional typing, but better than rejecting the second entry as well.

Examples