Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 2 down vote favorite

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.

share|improve this question
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. – DesignerGuy Mar 9 '12 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) – DesignerGuy Mar 9 '12 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 Mar 10 '12 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 Mar 10 '12 at 20:21

1 Answer

up vote 2 down vote

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.

share|improve this answer
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 Mar 10 '12 at 20:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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