13

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

Improve this question
5
  • Can you post a screen shot rather than a link to a live site.
    – ChrisF
    Feb 7, 2012 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, 2012 at 14:56
  • 11
    Have you considered mapping the form against a rotating 3d cube?
    – Rahul
    Feb 7, 2012 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, 2012 at 3:50
  • 2
    "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, 2012 at 21:52

4 Answers 4

Reset to default
34

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.

Improve this answer
7
  • 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, 2012 at 16:35
  • Grouping related fields is one of the most important UI features, so glad you mentioned it.
    – mikebabcock
    Feb 7, 2012 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, 2012 at 19:46
  • 3
    Related to zzzzBov's comment; you can't assume a postal code is always 5 characters long.
    – Dan Is Fiddling By Firelight
    Feb 7, 2012 at 22:06
  • +1/1 for an awesome answer and question. A little addendum; you should let the user know if fields are mandatory OR optional (whichever are fewer) some fields may not apply to some and everything a user has to enter detracts from the UX.
    – Forthright
    Feb 8, 2012 at 9:58
4

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.

Improve this answer
1
  • Thanks for the links, I'll be doing quite a bit of reading from here.
    – Zrb0529
    Feb 7, 2012 at 16:21
3

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.
Improve this answer
2

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.

Improve this answer

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.