2

We are developing web app for managing employee's salary. Each employee entity has about 350 fields of data. Currently layout uses tabs and fields grouping inside each tab with multiply columns. Users will use this app every day. I've seen here a lot of answers preferring laying fields in one column with scrolling.

  1. Is 1 column layout recommended in this case too?
  2. Is there any other recommended field layout?
Improve this question
5
  • 1
    I think the key thing here is keyboard access. For users doing something every day it's important they can access the fields they want quickly and without going backwards and forwards between mouse and keyboard, not exactly an answer to your question but I think an important consideration in your build
    – Toni Leigh
    Jun 15, 2014 at 15:29
  • also, you should link to some of the related questions you mention, that's just Stack Exchange good practice and helps people to gather knowledge and information to answer, there are some good questions and answers on complex forms here
    – Toni Leigh
    Jun 15, 2014 at 15:30
  • Thanks for the grate comment on keyboard access @ColinSharpe . Would be also happy if someone could advise from real experience.
    – N.D.B
    Jun 16, 2014 at 8:03
  • It's absolutely fine to want to store 350 attributes for each employee. The insanity lies in forcing them all into one form with a single column layout. There's no one-size-fits-all solution here. It depends on the meaningful structures you can use to group the attributes and on the use cases of the users.
    – Peter
    Jun 16, 2014 at 12:59
  • See my comment for colmcq below.
    – N.D.B
    Jun 17, 2014 at 7:52

3 Answers 3

Reset to default
2

Also I'd recommend to add navigation to such huge forms -- the operator should have the possibility to access necessary group as fast as possible. We use in our hospital medical system this solution for patient registry entry:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Left menu allows to quickly scroll to necessary group of fields (in our case it is also possible with keyboard shortcuts).

When user scrolls the form itself (not only with mouse wheel, but also when he moves from field to field by Tab), left menu shows current location in form -- similar to behavior of modern one page websites.

This solutions allows to fill-in the whole form and to quickly fill-in or edit only necessary groups.

Also we move labels always on the left of fields to make visual search of necessary groups and fields easier. Some fields are made 100% width, other -- of necessary for data size. Such irregularity also helps to identify current location on the webform better.

Improve this answer
1

I'm not sure how people feel about multi-column forms. Certainly multi-column forms look nicer but single column forms are just easier to fill and easier means quicker.

Where is possible try to use unified text fields to gather the information that normally takes multiple fields. This reduces the number of text fields and dropdown lists you have and will save time (less fields and users don’t have to tab as much) In addition, try to have less dropdown list as this way users don’t need to take their hands off the keyboard to click and scroll through the list. The time and effort it takes for users to give their information is less than before.

enter image description here

A useful link about form layout http://www.nngroup.com/articles/form-design-white-space/

Improve this answer
4
  • Perhaps they're easier to scan linearly, but imagine changing only a user's date of birth. In the left form, the forms can be recognized by their shape. In the right you have to actually read the label.
    – Peter
    Jun 16, 2014 at 12:55
  • I think that the format mm/dd/yyyy is also recognizable. I believe that the need is to eliminate (some of the 350) fields and as this form will be used daily, to minify the time to fill it.
    – Stevy
    Jun 16, 2014 at 13:07
  • true, but less so. It's grayed out, and doesn't affect the shape of the field. I guess it all depends on the use cases. Will the form always be used to fill in the fields linearly, or will it be used for editing as well?
    – Peter
    Jun 16, 2014 at 13:36
  • As you've mentioned also above Peter there is no one-size-fits-all solution, so true, depends on the use case.
    – Stevy
    Jun 16, 2014 at 13:53
1

What Stevy said. 1 column forms are easier to scan. Luke W has some great thoughts on this

http://static.lukew.com/webforms_lukew.pdf

but I have another question: you say the form fields number 350? This is ridiculous. As a UX you should be flagging this and recommending solutions that reduce this number substantially. It sounds like it is a legacy system, bloated by successive rounds of new business requirements

eta you might find this answer useful too

https://ux.stackexchange.com/a/11123/4701

Improve this answer
3
  • I thought also that 350 fields are really a lot, that is why I suggested to unify, if possible
    – Stevy
    Jun 16, 2014 at 10:04
  • Stevy and colmcq, 1. In question above I wrote that "Users will use this app every day". So after a week or a it more, I guess they will remember the location of the more updateable fields. Also the nature of the user actions on a Salary App is far more on the updating old values than the filling new values. Thus, seems to me that drawing all fields on the form without scrolling will suits more the user's needs. 2. colmcq, You're quested, the DB of the web app is legacy system based and cannot be redesigned in this project scope.
    – N.D.B
    Jun 17, 2014 at 7:49
  • Joy joy joy happy joy
    – colmcq
    Jun 17, 2014 at 11:09

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.