What intent does the Tab key convey?

Question

My particular case is an autocomplete dropdown, but this goes for the general use case too: what does the user intend when they hit Tab? Is it merely to leave the current field, or to deliberately move to the next field?

I know that Google is famous for its "type-ahead" with the gray text of the first suggestion in the autocomplete list, and tab moves your cursor to the end, filling in the suggested text as actual text. My autocomplete doesn't do the type-ahead, but users can arrow through autocomplete results and choose one; and one is always selected.

For autocomplete specifically, should Tab use the selected option and go to the next field, or bypass the option and leave that role entirely to the Enter key (or a mouse click)?

Answer 1

I have been doing a lot of research on this exact topic. It's a heated debate between UX and the development team who are in the process of implementing a new UI framework.

If you look at functionality on popular sites, you will find there is no consensus on tab behavior. Amazon does not move the user to the next field, Linkedin does, CNN does not. Frameworks behave differently as well; EXTJS does, Twitter bootstrap does not.

The DHTML Style Guide and W3C WAI-ARIA Draft are mostly consistent when it comes to keyboard behaviors, but unclear when it comes to autocomplete. However, if you look at how Tab should behave in a Combo Box (similar to autocomplete), the DHTML Style Guide states:

Tab moves focus into the edit field (Edit field to hold value of selected item in the dropdown list). A second Tab key selects the current item on the list, updates the edit field, closes the dropdown list, and moves focus to the next focusable item in the tab order.

If you're looking for consistency, that is how Tab should behave. If an item is selected in a dropdown (combo or autocomplete), that selection should be entered into the field and focus is set to the next item in the page tab order. If Tab were to keep focus in the same field, then the functionality of the Enter key is duplicated. With no other method to "select and move", the benefit of quickly filling out forms is diminished.

If there is no selection, then the dropdown should close, no selection entered into the field, and the focus is moved to the next focusable item in the page tab order.

The consistency of how certain keys behave in form fields is incredibly important. Keeping them consistent does so much to alleviate confusion and increase the confidence level in users of all experience levels.

• Side note: While Google does keep focus in the same field after Tabbing on a selection, notice the behavior on this Google API page for Maps. Here, once you've selected a location using the down arrow, tabbing off a selection does move the focus off the field (and onto the "All" radio button).

Answer 2

Tab key is usually used for navigation. While filling forms (login, registration, etc.) or just navigating the page elements.

Microsoft keyboard interaction guide:

Tab key and tab stops. The Tab key is the primary mechanism for navigating within a window. The Tab key visits only those controls with a tab stop. All interactive controls should have tab stops (unless they are in a group), whereas non-interactive controls, such as labels, should not.

It is also considered a standard accessibility feature.

In the special case of suggestions in the input field, tab is still acting as the forward navigation by selecting the first available option and then navigating the list.