7

This question involves a data entry form in a web application. The form will be used in a desktop environment only; there's no need to account for mobile. A single user of this web app could be filling out this form hundreds of times a day.

While the form content is dynamic, the list of questions will always be in the range of about 20 or so. I say "questions", but more precisely the "question" test would just be a brief data caption that is just a couple of words long. Under these circumstances, the form is going to be just a bit longer than the browser window, thus activating the browser's scrollbar.

My question is: what would be the best place to put any action buttons, primarily the "Save" button, and what research has been done on the subject?

A few implementation possibilities:

Option 1: Include the action buttons in the top navigation or secondary top navigation, and have this top navigation be in a fixed position. An example of this is the structure we see in Gmail. (Although Gmail and a data entry app are not exactly one and the same, they are similar.)

Option 2: Put the action buttons at the bottom of the page in a fixed position, so that the buttons have a higher z-index than the form questions and retain visibility at all times.

Option 3: Don't use any fixed positioning. Put the "Save" button at the bottom of the form, and let the user get to the button as he/she completes data entry fields.

Option 4: Have a set of buttons that auto-scrolls to the position you are at within the form.

Option 5: put the buttons at the top and the bottom in fixed positions.

I've read some of Luke W's work, but don't believe I've come across a review of this particular aspect of form design.

I'm leaning toward the buttons being at the top in a fixed position, where the only scrollbar is the browser's scrollbar, not the scrollbar from an internal element. That seemed to be the direction taken in the question about placement of save & cancel buttons, but the responses in that question were short on reasons why a particular approach would work better.

Improve this question
4
  • Not based on research, but personal preference and experience, I like the idea of a save button on a fixed bar up top as well as the bottom of the form.
    – Andy Fleming
    Commented Mar 9, 2012 at 21:34
  • Might the keyboard navigation/shortcuts be more important for a rapid data entry type of tool? (of course, this depends on the level of your users)
    – Andy Fleming
    Commented Mar 9, 2012 at 21:36
  • @DesignerGuy - good point about keyboard shortcuts. I think it's a both/and, so placement of the action buttons is still important.
    – mg1075
    Commented Mar 10, 2012 at 20:05
  • 1
    @DesignerGuy - good point about keyboard shortcuts; it's a case where both should be implemented. And regarding the top and bottom button rows, it's interesting that when you composed an email in Gmail in their old look, you had buttons at both the top and bottom, and in their new look, you only have a top row of buttons.
    – mg1075
    Commented Mar 10, 2012 at 20:21

2 Answers 2

Reset to default
3

I would only use the buttons that follow the user's scroll position if there is a need to save intermittently, if users always have to complete the form, just put the buttons at the bottom of the form.

The one time I tried to put save buttons in a bar at the top of the page, users had no idea where to look for a few seconds. Frustration and complaints ensued.

Improve this answer
1
  • Interesting that the users complained about the top button. When you implemented the buttons at the bottom, did you test between using a fixed position button vs. a variable position? I suppose what can be annoying about the fixed position is that form item content could disappear behind the bottom button row...
    – mg1075
    Commented Mar 10, 2012 at 20:15
2

I recommend Option 3 based on the information you provided. As the user fills out the form and moves down the page, they expect to find the action button following the form fields in-line with the user's actions. At the very least, the action buttons will be located at the user's point of focus as they finish the form.

Option 1 is troublesome in that the user doesn't expect action buttons to be placed at the beginning of a form. Their point of focus will be where they finish, and the buttons will be located elsewhere. Additionally, if the user enters mainly via the keyboard, they would have to stop, grab the mouse, position it over the top action button, and click. If the action button is at the end of the form, the user can hit Enter after tabbing into the action button. Also, by blocking off vertical space for the area holding the fixed buttons, you reduce the available space for the form fields.

Option 2 may cause users to miss the form fields which are "below the fold", assuming they are finished because they have reached the action button. Again, if you have a high percentage of heavy keyboard users, the action buttons may not be in the correct tab order.

Option 4 may introduce uncertainty into the user's workflow, as they could be unsure at what point they are meant to use them.

Option 5 further reduces the available screen space, compounding the potential issues with Option 2.

Improve this answer

Your Answer

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

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