4

To avoid any confusion, I am not talking about the tab key, I am talking about a form with tabs at the top that can be selected by clicking the tab or by pressing Ctrl+PageUp/Down. The latter is not universal but seems to be a common convention, which I have adopted.

My question relates to a user data-capturing a form with that layout, and preferring to use the keyboard for all interaction.

When the user has entered the last field on the first tab, they wish to move to the second tab to continue capturing. I can think of various ways of achieving this, but none of them are very satisfactory.

  1. Pressing the tab key on the last field could automatically open the next tab. I have experimented with this, and it works quite well. I am not sure if it is intuitive. Also I have seen forms where pressing the tab key takes you to the next section of the form - usually one or more buttons. Is this standard?

  2. Pressing the tab key on the last field could pass control to a 'next tab' button on the form. At that point the user can press the button to open the next tab, or press the tab key again to take them to the next section. Similarly one could have a 'previous tab' button to cater for the user navigating backwards using Shift+Tab. I have experimented with this and it works fairly well, but a new user might find it confusing.

  3. Instead of pressing the tab key on the last field, the user could press Ctrl+PageDown. This actually works at the moment, but I don't think it should be the only method available.

  4. There could be underlined hotkeys on each tab, which makes the tab selectable by pressing Alt+hotkey. It would work well for selecting a random tab, but not so well for a smooth data-capturing experience.

My preference is for the first option. It feels quite natural in practice. 90% of the time the 'next section' of the form would only contain 'Save' and 'Cancel' buttons. The former can be invoked by pressing Enter, and the latter by pressing Escape, so it is not necessary to tab to them first.

Is there a standard convention for this, or does anyone have any other suggestions?

Improve this question
4
  • why is there a separate tab if it contains only Save and Cancel buttons?!? in any case I would prefer options 2. + 3.
    – Aprillion
    Jun 28, 2015 at 9:34
  • Sorry if I was not clear. The form is a standard CRUD form, with a field for a unique identifier, followed by fields to record the attributes of the entity, followed by Save and Cancel buttons. If there are many attributes, I find it convenient to split the form into tabbed sub-forms, each with several fields. The user has to enter all the data, selecting each sub-form in turn, and then choose Save or Cancel.
    – Frank Millman
    Jun 28, 2015 at 11:56
  • is it a web or desktop application?
    – Alejandro Veltri
    Jul 1, 2015 at 16:19
  • It is a desktop application which is accessed via a web browser, if that makes sense. It started life as a desktop app, then I rewrote the client side in javascript. You access it via your browser, but once the initial connection is established, all communication between client and server happens using AJAX messages - the initial URL never changes.
    – Frank Millman
    Jul 2, 2015 at 8:51

2 Answers 2

Reset to default
1

I would go with option 2, but instead of calling the button "Next Tab" I would be more explicit- "Continue to section Foo to continue entering information about Bar" (and with text that long, consider a clickable hyperlink instead of a button). Likewise, the Previous Tab button could say "Return to section Foo to edit your information about Bar".

As for examples, I think tax software (I'm thinking of TaxAct specifically) runs into this problem/pattern a lot since all the information broken into categories/sub-forms and offers a wizard-like paginated experience.

Unrelated to your main question, but I would consider vertical tabs on the left side for this case. Example vertical tabs

(from http://bobcravens.com/2010/09/simple-vertical-tabs/)

Improve this answer
1
  • 1
    Thanks for the response. It seems that option 2 is the way to go. Instead of a long description on the button, this is my plan. I already have a feature whereby every field has a one-line help message. This is shown as a tool-tip when hovering the mouse over the field, and is displayed on the status bar whenever the field has focus. I plan to use the same feature to display the full explanation of the button. Hope this sounds ok.
    – Frank Millman
    Jun 29, 2015 at 12:56
0

I have used Tab for Tab keypress, tabs to represent UI element

There are different cases of user interaction here.

  1. Jump tabs in sequential order
  2. Jump tabs in non-sequential order
  3. Visibility of status on next tab expectation

Having a Next button at the bottom of every form communicates the upcoming status of the screen.

But, when the interaction is keyboard oriented and when you press Tab to navigate to the next screen, there should be a Back button on top of the form to make it easier for the user to go back immediately. Else, he has to Tab till the end to find the Back button.

If the user can jump between tabs in a non-sequential way, it is good to have Alt+Key interaction

For visibility of status, it is good to mention the name of the tab, instead of just a Next button.

Example:

Prev: Personal Info

Form fields

Next: Official Info

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.