Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've made a pretty basic form for data entry that will be used by office workers to build a database. The form is actually a composite of a decade of excel files that the organization has been using, which is one reason there are so many fields. Another problem is that the form is covering 2 different types of entry - there are "subscribers" and there are "contributors", but the manager insists absolutely that there be only 1 form that handles both and that all fields remain editable (so no hiding fields until they are needed).

So, right now I have 2 columns of fields - 1 column that has physical information (name, address, fax number, etc.) and 1 column that has meta information (email address, account notes, etc..)

Is this the best layout considering the restrictions that I have?

here's a link to what I've got so far:

enter image description here

share|improve this question
    
Can you post a screen shot rather than a link to a live site. –  ChrisF Feb 7 '12 at 14:50
    
Also, the fields do have a gentle highlight when they are active, so there's that much at least. –  Zrb0529 Feb 7 '12 at 14:56
11  
Have you considered mapping the form against a rotating 3d cube? –  Rahul Feb 7 '12 at 15:03
2  
A slight side issue, but the whole idea of breaking a name into First/Middle/Last pieces is very western thinking. Better to use Name/Family/KnownAs - see stackoverflow.com/a/259694/30280 for more. –  Bevan Feb 8 '12 at 3:50
1  
"the manager insists absolutely that there be only 1 form that handles both" - that constraint is hindering the user experience of the task right off the bat. I would suggest getting to the bottom of this constraint and possibly eliminating it if it turns out to be irrelevant. Use the technique of laddering - basically continuing to ask clarifying questions in order to get to the root considerations behind this decision. –  Mike Eng Feb 29 '12 at 21:52
add comment

4 Answers

up vote 33 down vote accepted

I mocked up a version of the form in HTML that I think improves a couple of things (but not all, because I'm not you and don't know your specific domain issues):

http://newlyminted.handcraft.com/

enter image description here

Some of the changes I made:

  • Group related fields. First name, middle name and last name are part of the same flow, so group them together visually. Same goes for things like address, etc.
  • Split up the form into fieldsets. This breaks things up and allows me to deal with one part of the form at a time, and simultaneously makes the form feel less long since I don't have to grok the whole thing at once.
  • Use a dropdown for state. This prevents errors and just makes things easier overall. I also reduced the size of the zip code field since you know it'll never be more than 5 characters. One upside here is that the field now has some kind of affordance because I can intuitively identify it as a zip code field purely on size.
  • Use the right input controls where relevant. Like the select for states above, I made the Notes field a textarea since "notes" by its nature implies that you'll want to input more information than fits in a single input field, and scrolling back and forth in those things sucks.

Hope that helps. Feel free to reuse.

share|improve this answer
    
Wow that's great! Thanks a lot :-) –  Zrb0529 Feb 7 '12 at 16:20
    
One thing I would consider would be to keep all or most fields in the same column vertically. This will create a much taller page, but users are more accustomed to scrolling nowadays and this will keep the flow of input more consistent. –  hspain Feb 7 '12 at 16:35
    
Grouping related fields is one of the most important UI features, so glad you mentioned it. –  mikebabcock Feb 7 '12 at 16:58
3  
As a general rule about state dropdowns, be sure to handle international addresses. Quite often web forms will assume that everyone lives in an American state even if they have a country field in the form that differs. –  zzzzBov Feb 7 '12 at 19:46
3  
Related to zzzzBov's comment; you can't assume a postal code is always 5 characters long. –  Dan Neely Feb 7 '12 at 22:06
show 3 more comments

Sorry to hear about your constraints. The No.1 problem in this form's usability is the manager who wants to merge 2 workflows into one form.

Here's what you need to do to relieve the situation a bit:

  1. Split the form into multiple steps (at least "Contact info" and "Payment info"). If that's not possible create visually separate sections on one page and label & number them: "Contact Details - 1/4" (or whatever).
  2. Since it's a long vertical form, top-align labels to increase speed of completion.
  3. Shorten label names that currently are 2 rows.
  4. Remove default values from the drop-downs - they should be blank on load.
  5. If the drop-downs are no more than 3 options, change them to radio buttons and place them vertically - faster recognition.
  6. Align "Submit" button with the text fields not labels.

For general information on form design, see Smashing Magazine's "An Extensive Guide To Web Form Usability" and the articles & books linked in it.

share|improve this answer
    
Thanks for the links, I'll be doing quite a bit of reading from here. –  Zrb0529 Feb 7 '12 at 16:21
add comment

The first thing that springs to mind is that you have one form for both Contributors and Subscribers.

Split the form into three parts:

  • Common fields
  • Subscriber fields
  • Contributor fields

Ideally you'd only show the subscriber or contributor fields when that type of user is selected which would reduce the number of fields on the form considerably. However, if that's really not possible arrange them in separate areas (using group boxes or different background colours) and see if you can grey out the inactive fields.

Other things you could look for:

  • Collapse the address fields and have a zip code/postal code lookup field to fill out the values for the user.
share|improve this answer
add comment

In addition to splitting the form into Common/Subscriber/Contributor fields, you might want to use color hints. Use two light background colors for subscriber and contributor fields. Move the Subscriber/Contributor selection directly after the common fields, and use a light grey foreground color for the text boxes that are not applicable. (Of course, they should be disabled, but that's your managers stubbornness).

For the "additional" fields such as "Add. Email", you might want to use a smaller font. This serves as a visual hint that they're commonly skipped.

share|improve this answer
add comment

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.