The Function of Forms

 

Ask any creative UX designer and they’ll tell you that there’s nothing more boring than forms. While that may be true, forms are also one of the most important aspects of UI design – one that only tried and true professionals seem to get right.

 

 Before we delve into the rules of good form design, I have to once again assume the position of a naysayer. As I look at Israeli websites (especially government and service ones), I’m dismayed by how far behind they lag in their understanding of recent technological developments and their relation to forms.

Government websites have dozens of forms, most of which can be found as Word or PDF files (at least you don’t have to request them via phone). Then again, there’s no option to fill these forms online, so all forms must be printed, filled out by hand and then sent to the hapless government worker who will now type them back in.

At least word files allow you to type content. At the same time, they also allow you to change the form itself and of course can boast no kind of design or UI planning.

I understand that unidentified users can’t be allowed to file their forms online. That doesn’t means that they shouldn’t be able to fill them online, receive explanations for each field, get multiple choices and even run a few checks to avoid errors. After that the completed form could be easily printed.

Is that too much to ask? Fine, I’ll compromise. Let me download a ‘smart’ PDF file, one that you’ve given minimal thought into designing. Then I can type in my answers, receive warnings where applicable and even have some things calculated for me if needed. This will help prevent errors and make government work more efficient – that poor worker will only have to scan the form and let the program identify and store each field automatically.

Think I’m delusional? The British Revenue Service can show you how it’s done.

blog-form1_EN

How to Plan Your Form

As you make your forms widely available to users, remember that clear and simple forms keep customer service calls away. While you’re planning and designing your form, look out for the following things:

  • If your online form is especially long, divide into several screens or expanding and collapsing segments. At the end of the process, let the users review everything they’ve entered and of course edit it if necessary.
  • Keep your field order logical. Move from top to bottom, and if the order of the fields or segments is significant make sure you number them. If your fields should be filled in any particular order, keep unfilled fields grayed-out and unavailable until they become relevant (also supply a pop-up warning for those who try to fill them out prematurely).
  • Make pop-up explanations available next to their relevant fields.
  • When a field is filled out incorrectly, present a warning. If this is an online form, make sure your warning appears by the relevant field in a distinct color. Do not automatically erase the user’s erroneous entry.
  • Irrelevant fields should become grayed-out or disappear entirely.
  • Provide multiple choice options wherever possible, to help avoid mistakes (this includes calendars).
  • Do not combine two fields in one (like the government form I found, that asked users to fill in their “marital status and children under 18”).
  • Try to avoid putting two fields in a single row (This isn’t always possible, for example when you need to fill in a service, its cost and the amount of work hours it required).
  • Whenever possible, split fields into clear segments (you can use vertical lines).
  • Use your design to differentiate between the field header and the field itself.
  • Mark your required fields (unless they’re all required).
  • Eliminate visual noise: Align your fields and headers to the same point.

blog-form2_EN

 

Member of