0

I've got form that has around 40 inputs (text inputs, selects, some checkboxes).

This are "Vehicle Data" like, registration number, brand, model, fuel type and so on.

I can't make it smaller (less elements) because it's not only vehicle's data - there are Explanation data, organization data etc.

So 40 is a smallest number of elements it can ever be.

In our application we are making "compact mode". Menu height is smaller, so is the logo, tables with data (list of vehicles) has smaller padding so there are more records without scrolling etc.

And I want to make something with forms - I can easily make padding less - it gave me 16->21 inputs without scrolling on 1080p screen.

I thought I can make it 2 columns - everything is without scrolling then. But is it an ergonomic?

  • 2
    Is it possible to break the form into steps, and introduce a progress indicator? – Jon Kyte Apr 30 '14 at 9:35
  • Who are the users and why are they using the form? – Matt Obee Apr 30 '14 at 9:35
  • It's fleet management application. Users use this form to: * Add new vehicle * make changes for a vehicle It's the same form to create and edit – matiit Apr 30 '14 at 10:08
  • Can't you pull in all the vehicle data from the registration number? (I see this done on a lot of car insurance sites) – Grant McAllister Apr 30 '14 at 11:05
  • "Can't you pull in all the vehicle data from the registration number? (I see this done on a lot of car insurance sites) " I'm not sure what exactly do you mean. – matiit Apr 30 '14 at 11:53
3

I work on applications for colleges and universities and often run into similar situations where a user would need to add/edit fairly complex entities. I also imagine that your user base is similar to our, in that they almost all get to a stage that could safely be called Expert Users, meaning that they spend enough times on the form that much of what they do is strongly informed by previous use.

This means that you can get away with information density that your average consumer website never could in their webforms. In fact, we've had some users request that we add more fields across the page horizontally, rather than have extra white space. That being said, I think doing a straight 2-column layout would not be the right way to do this. Ideally adjacency would be meaningful within your form, and by using a 2-column layout, you would likely run into a situation where you have the column on the left having little or no relationship to the fields in the right column.

A better approach may be to use the width of the page to combine related elements. For example, have make, model, year on a single line across the page, rather than stacked on top of another, taking up vertical space. I'm sure that within your form there are a number of these "cluster" that could be combined in a logical manner that would help minimize the length of the form, while also being cognitively associated.

On our longest form, we also broke the information out into different sections that are contained within tabs. This is helpful for the cases where the user just wants to make one quick change. If they need to change start date, for example, they only need to click on Active Dates and go directly to a page where start date is easily found. The combination of information dense sections with navigational aids, has so far been successful and well received by our users (see screenshot).enter image description here

5

You should never present the user with such a large volume of inputs at once (i.e. all on one screen). It is extremely daunting for a user to be faced with this. You need to do for the user what you yourself (as an engineer) naturally do when faced with a huge chunk of work...

...break it up into small, manageable tasks that are presented in a logical order.

There are many different ways to present this, some general inspiration in the screenshots here.

If your users want to do fast data entry, make sure that you support keyboard shortcuts and have a logical tab order. If you are splitting the form up into sections make sure the next section can be accessed also with key presses (e.g. the user can tab to a "next" button and hit enter to press it).

  • It would be problematic to split it into the separated forms because one can go into a form and change only 37th input.. – matiit Apr 30 '14 at 10:10
  • Plus I have other forms with other data, vehicle have around 300 different settings which are already split into different forms - but still, there are forms which have 40 inputs. – matiit Apr 30 '14 at 10:23
  • @matiit Finding one field to change it in a giant single form is also problematic. Better to provide navigation so the user finds it by Category -> Specific field – Franchesca Apr 30 '14 at 10:50
2

I think space vs. looks is only a secondary thing to consider.

You will have to make a user study on this one. Especially if the form is going to be used a lot. With a good design, you could potentially save 15 minutes on every filling of the form and if the form is filled 1000 times a year, that counts for over 6 weeks of working time saved yearly. So, it easily justifies you going to the people and interviewing them for a couple of days. See what they think about it.

Some of the data is readily available. Some of the data may require some digging. Ie. going to another room, get some papers, come back to computer, fill the data in. Some, may even require the user to e-mail someone to ask for more information. And this information may take days to reach your user. Your solution should support that.

So, you come to a question where you have to ask yourself and your users which data is readily available and how should the not-so-available data be requested. What happens after that, when the user actually gets the information they requested and they're ready to return to completing the form.

You might be saying that oh, but they only start filling in the form when they got all the required information. But that's just promoting everyone to use their head, notebooks, sticky notes (which get lost, forgotten) or other means of trying to store information temporarily somewhere so they can some day start using the application they find not built for the task. This may become very daunting for the users since they need to revert using their brains for processing this temporary data. Even if they had a notebook or a sticky note somewhere, they need to use their heads to remember where.

So, in addition to sectioning the form, which I think @Rath_Er made a good example of, you will have to provide a temporary storage mechanism and an easy way to return to incomplete forms. Also, I would show a pill on the left side tabs showing a number representing how many of the required fields are missing. And when hovering the number, it would show a tooltip of the fields that are missing.

Technically you can use a single-page form. But use some javascript framework such as knockout to relayout the form for humans so that it naturally fits into the working environment. Only then, think of space vs. looks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.