15

I'm currently looking at a designing a VERY large webform which users will spend a lot of their day inputting data into.

A few notes:

  • This is basically data entry.
  • These are power users, so keyboard shortcuts would be preferable - mouse clicks at a minimum.
  • The user is not necessarily filling in a blank form from scratch - may be adding to a partially completed form, reviewing details etc.

The form consists of 8 sections and contains a myriad of various elements: text fields radio buttons drop down menus searchlets checkboxes

So as you can imagine, regardless of how 'clean' the implemented design is it is hard to get away from the fact the page is visually quite noisy.

Also depending on the circumstances the user may not necessarily be filling in all the data, so this might involve filling in a couple of parts on one section then jumping down to another, then across to another etc.

I had initially devised a solution where each section would be presented in a vertical flow. The top section in focus, user tabs through each section and fills in what they want. Upon reaching the end of a section the next section would move into focus and the user could carry on. I had an overview section to the side which could be expanded/collapsed where the user could at a glance see what parts of the form had been filled in as there would be a little ‘completed’ icon beside a line/section.

This pane would be same sort of idea as sublime text uses: enter image description here

The problem I found with this solution was that the users actually liked the way in the old form they could at any moment see ALL the info in one screen. They could quickly see what was or was not filled in and if it was filled in correctly.

The visual indicators I mentioned above did inform the user a section was filled in but does not indicate if the field contacts junk or the correct information.

My Question:

How can I balance the sheer volume of interactions on screen with a clear and focused workflow for this type of power user?

3
  • Needs to be as efficient! Try and use as many good defaults as possible?
    – Wander
    Aug 31, 2012 at 12:42
  • If there are several levels of sections/sub-sections, what about using a treeview in the left pane? Sep 3, 2012 at 9:59
  • 2
    This isn't a full answer, but more of a guideline that I like to keep in mind for these situations. If you have expert users, it's best to give the users as much control as possible - let experts drive the system, don't make the system drive them. If you're filling out your taxes, most people probably aren't experts so they need hand-holding. But if I'm a tax professional and I had to use TurboTax, it would be just getting in my way.
    – Mark D
    Sep 5, 2012 at 18:59

13 Answers 13

11
+125

A general principle for power users is that they appreciate efficiency and can learn almost any control you give them. This is fantastic from your point of view because it means you can focus your interface design on speed optimisations and cut a lot of distracting fluff.

Let's break down your users' actual workflow for a moment.

  1. Check through form, search for an error
  2. Navigate to error
  3. Correct error
  4. Search for another error
  5. If no more errors found, validate the form as complete

In this we assume that an unfilled form field is an error - this makes the act of filling out a blank form a simple one in terms of workflow since the search for another error boils down to "go to the next form field".

One of the central conflicts you have is the tension between users wanting to see all the information at once, and needing to be able to skip through sections quickly to fill out appropriate parts. This is a natural tension between searching for the errors and correcting them.

A small amount of testing may reveal the balance of time spent on searching for vs. correcting errors. This may vary based on the aggregate number of errors in the form submissions, the form layout, and the methods used to navigate. Identifying error rates in particular is important - if 90% of forms have few to no errors, then you may get more mileage out of improving the search as a priority, since it will have more of an impact on the aggregate speed of the workflow. Once you've identified this balance, you'll be able to make sensible decisions about whether to optimise for search speed or for correction speed.

It is likely that identifying errors is the biggest source of frustration to your users even if making it better doesn't gain you as much in terms of speed. Searching for errors requires a fair amount of vigilance, whereas correcting errors is either simpler, or more interesting to deal with. This may well be reflected in their desire to see the whole form at once, as this would naturally help them to skim over and pick out obvious errors more quickly. Note though that what users want and what they need are not necessarily correlated - I would suggest that you test various different levels of overview in order to strike a balance between the high-level scanning and the field-by-field validation. You could even allow users to select their level of overview using keyboard shortcuts, letting them get the high level view before diving down to check specifics.

Unrelated to this consideration are a number of efficiency improvements you can make.

Firstly, any sort of automatic error detection or field validation you can perform will take load off the user. A lot of this can be fairly basic. Bear in mind, however, that unless you can guarantee that a validation method will be 100% accurate, you're not reducing workload for your users unless the system actually catches an error.

In terms of visual load, you will want to flag errors rather than "correct" items. This allows your visual design to fit into the checklist mental model, and provides an easier at-a-glance summary which can confirm that errors exist. Doing things the other way around forces the user to mentally process items as completed and as therefore ignoreable, and they gain no knowledge about whether errors exist from a glance at the form.

Use keyboard shortcuts to navigate not just between fields, but between sections of fields. Your users will be able to process gestalt collections of fields at once with some practice, so it's important to let them control the speed of their progress. As an example, tab might skip from field to field in an address section, while ctrl + tab might skip to the next section entirely. Remember to include shortcuts for skipping backwards, too.

In addition to this, numbered (or lettered) sections, with dedicated section-specific shortcuts, will help users skip around the form much more quickly. If you were using the tab paradigm from above, they could go through the form with tab + 1, tab + 2 etc.

Allowing users to mark sections as complete/validated can make overall validation of the entire form much easier. It also allows the user to chunk each form into sections, mentally tackling them as a series of small tasks rather than as one giant one. You can automatically collapse or hide them from view once validated, therefore reducing their effect on the user's cognitive load - this ties into the accordion suggestion others have made. Depending on the number of sections you have, you might even be able to use a progress bar or something similar to signify and encourage progress. This is distinct from doing it automatically, because after the user has validated the field you can be confident that they are correct.

7

As we've designed a heavy-duty data entry forms (B2B/ERP) our case is probably different from the one stated, but it might shed some light upon it. Our users' interviews were inconclusive so we've decided to watch the users in action, take notes, measure occurrences of actions, and devise patterns of usage. On one form we had about 120 (!) fields.

Heavy-duty data-entering users (power or not) were appalled at the thought of using a mouse/keyboard interchangeably. Expanded accordion required multiple vertical scrolls. This made the users feel disoriented ("I'm at the top of section 5 and I now wish to edit something at the bottom half of section 2"). Collapsed panels made them feel that there is something "hidden", which was not perceived as a good experience. Keyboard shortcuts (to sections down the page) and contrasted titles (to easily locate sections) did not satisfy. Same goes for using several shortcuts (ctrl+1,2,3,4,5..) to open accordions and/or automatically scroll downwards. Data oriented users (working on the same forms 8.5 hours a day) disliked the notion that panels in the form are constantly moving or changing.

Users preferred 2 tabs (no more!) at the top of the form, right next to each other. This was considered more visible/clear and accessible. "Main" tab have 4 sections and "Extra" tab was created for fields not commonly use (less than 10% of data entry). Each tab kept its cursor's focus so users can keep their main workflow while taking a peak.

Now this form is crowded but not chaotic. Fields are arranged in columns, input elements at a column sharing the same width. Groups in a section were given titles (like sub-sections). A good sensible aesthetic design layer on top and several enhancements made it a nice refreshing tool/module. Users really liked it.

1

Navigation
- Ctrl+1/2 – Common or less-common fields
- Ctrl+down/up – 5 fields (or "lines") up/down---- very useful
- PgUp/Dn – next/previous section
- Tab(+shift) – next/previous field
* We thought we would need more shortcuts but "Keep It Simple" applies. Users said more would be confusing (considering we also have keyboard shortcuts for action buttons).

Enhancements
- Minimize labels/titles length ("we can see it's a date field..")
- Differentiate Output/Input/Invalid/Empty/Focused fields
- Select-on-focus (easily replace input content)
- Auto-tab on Fixed length fields (entering the 16th digit in a credit card number field -> focus on next field)
- Auto-fix dates (0825 or 8/25 and 8/3 or 0803 are automatically translated to mm/dd/yyyy)
- Convert radio buttons and check boxes to list (navigation & selection with up/down & multi-select with spacebar)

Another option we've used (in a different ERP solution) is a grid-like structure where grouped fields are adjacent to each other. This creates a tight organized structure (think spreadsheet or GUI IDE). It might resemble a SAP/ERP oldskool design, but carefuly planned graphic design turned this into a very cool form.

2

3

You could provide markers beside the scrollbar to show where incomplete fields are in the form. You could also use this to indicate where the sections of the page are.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

For inspiration/code take a look at the sausage.js library (example) and the Scrollbar of Contents Chrome extension (which you can view the source of if you install or download the crx and unzip it).

3

It's no surprise that your users liked the old form better. It's almost always better for the user to see everything organized on one page at once, rather than one section at a time. This is because the user's eyes are always scanning and moving in various directions on the page and showing everything allows them to move through fields faster without experiencing any surprises after they finish.

The vertical direction was a good choice as opposed to horizontal. However, you are validating sections when you should be validating fields. Instant validation should always be used when you are designing a long form. With instant field validation, you give the user real-time feedback on whether the information they entered was correct or incorrect. This can be denoted by a simple error message next to the field when they get it wrong and a check mark icon when they get it right. This article goes into detail on how to do it right: Why Long Forms Need Instant Validation

0
2

I faced a similar problem with my current system. I decided to group the fields based on how they were filled in (i.e. field X being completed generally leads to Y, Z and $ being completes, but without field X the other 3 are surplus to requirement.)

Each group could then be expanded of collapsed (UI screenshots follow - had to make field names anonymous for security) Whether a group is expanded or collapsed by default is up to a super user and can be changed with time depending on how the form performs

Screenshots:

The big form:Large form

The collapsed & expanded section:

Collapsed form section

enter image description here

1

How about using an accordion and give users the ability to independently open/close each section?

Also, would the data to be entered be available in another computer system? If that's the case, you might want to provide a way to upload the data (e.g. as a CSV file) and edit to correct import errors.

1

You could do a few things:

  1. Use an accordion: Each section could be one part of the accordion.
  2. see if the users respond well to an : open all sections and close all sections control. People who really really want to see all sections of the form can use this while the others are free to go section by section.
  3. Any section that may have been filled previously could have a checkmark or something that tells the user that data entry in that section is complete. People always like knowing that they need to fill out one less section.
  4. Provide a one page summary for the user when they are done. It could be a long one page, but seeing all the data on the same page always helps.
1

Make uncompleted fields stick to the top/bottom of the viewport in a disabled state or show some kind of placeholder (like the "reply from X" indicator in gmail). Enable them when they are scrolled into view.

For long forms you can collapse multiple warnings into one message. If there are sections there could be one summary per section.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You could make clicking on the indicators scroll the incomplete field into view and add a keyboard shortcut for next/previous incomplete field.

1

When I'm filling in a form I use a lot to go to the next field. You could have one keyboard shortcut for "next field" and a different one (crtl+tab?) for "next empty field".

You should also create keyboard shortcuts for skipping to different sections of the form.

I think that using an accordion or open / close sections could get annoying. How about a horizontally scrolling page? So you have one section of the form going down the page vertically, and then the next section to the right of it. Make sure the sections are short enough to fit on their screen. Or do it the other way round - fields inside a section stack left-to-right, and sections are below each other. Either way it seems like you should use both dimensions, rather than having one long vertical form, as there are loads of fields and users want to see a lot of them at once.

1

Though what dhmholley suggested for keyboard shortcuts looks pretty nice, I prefer to use Enter/Return for moving between sections;

I, in addition, recommend using those keys for moving between invalid inputs when the user reaches to the end of the list, by skipping valid inputs and empty fields (as you mentioned that some fields might be left empty).

The next level can be empty fields. For a better user experience you can even detect potentially missed fields.

0

I am also designing a data entry application with similar characteristics - long form, power data entry users.

My solution is similar to yours, using the vertical stack flow, but because some sections don't necessarily need to be filled at once, I am providing "save" and "save and continue" buttons at the bottom right of each section and a "save" button at the top right, which would be always available.

Answering your question: All the samples I have seen have long scrolls, which is something I am trying to avoid, since screen real state is not a problem and we have control over the environment. I am maximizing for efficiency and speed.

1
  • I'd like to share my design, but I don't have enough points.
    – user17508
    Sep 6, 2012 at 0:10
0

If you are talking about power users, they can learn somethings about the form, allowing you to use some non-standard interactions.

I like the idea of having a left pane with the overview. Just try to synthesize that so it works as a map with, "you are here" indicators, and maybe some other state flags for sections or fields.

I guess you should take full advantage of keyboard input, not requiring the mouse at all. IF you are talking about desktop platforms (not tablets or so),,.

Try to use predictable keyboard shortcuts everywhere, for example: alt-left to switch to the left pane, make the pane navigatable with keys etc, enter to go to the next field, alt-N for the next section, alt-P for the previous, etc.

0

Don't use a form. For many fields, many records and power users give them a spreadsheet style editable table, so the can edit inline, and see multiple records at once. Accordions and collapses are just going to frustrate users by repetitively giving them extra steps to access would should be easy to access.

As for keyboard shortcuts, the pattern for this type of interface can just be convention. Arrow keys, shift, tab and enter.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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