Thursday, March 17, 2016

usability - Form design and placement of action buttons


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.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...