3

The product that I am working on has a lot of forms inputs in one page. I'd ideally want to bring the entire UX to 2019 (the application was built in early 2000).

One idea that I've tried is breaking down the form into wizards, that worked in few cases. But I'm looking for any different ideas on how to break it down/make it look better.

The forms that I'm talking about is close to how a Data Entry personnel enters Product details. So the form would include, product name, ID, Manufacturer details, Sizes, etc, it gets really long.

Any help would be lovely :)

  • 2
    Your example of a data entry employee leads me to think you develop software for users that quickly become very familiar with it. Would your users be considered "power users", meaning that they likely have the form mostly memorized and are able to navigate it and use it efficiently? Yes, there may still be room for improvements, but if you're designing for power users, be aware that many modern UX strategies for presenting complex forms (i.e. collapsible sections, stepper, wizard, etc.) might just slow them down in the long run. – maxathousand Nov 26 at 21:05
  • @maxathousand Agreed, but I don't have any metrics/feedback to work with. Which leads me to believe I should get that part sorted first then work on the page. The feedbacks I usually get are, "This looks a lot better", "Intuitive" but these are from PMs, not actual users. – Tenzin Kunkyab Nov 27 at 16:17
6

User study

First things first, if you're facing to a long redesign you probably gonna need to prioritize some parts and features. Interview your users, define metrics to complete, run usability tests, identify pain points, goals and eventual solutions. This should always be the first step.


Group related information

Why ?

Grouping questions will allow you to break your form into small steps, define easily discoverable section titles, split validation logic and provide user a small "rewards" feeling after each section completion.

How ?

As you mentioned it wizard would probably work but I would recommend to employ it when your user needs to go through an unfamiliar form, it seem it's not your case. Using user studies data to identify relative questions and prioritize theme ; you should be able to group relative fields into semantic sections or themes.


Show location & progress

Why ?

Long forms often means long scroll and hard focusing. Giving your user a completion status and an overview of the whole form let them know what is expected from them. They can scroll to the different parts and back to the top with knowledge and forecast about the amount of remaining work.

When implemented properly a progress tracker can also help users save their progress in case of accidentally refresh of the page, connection lost, etc.

How ?

Use the above described group logic to identify steps in your form and let users know where they are. Display all sections of the form at all times and where the user is in completion process. Highlight the current section, use a different style for completed sections and number them. Progress tracker


Reduce cognitive load

Just like computers, human brains have a limited amount of processing power

Nielsen / Norman group - Article Link

Why ?

Since we're dealing with specific questions (and I guess business specific options), you should design every questions or inputs with the goal to reduce processing complexity and user requested actions.

How ?

Be clear about the purpose of the form and each question

Why user do to fill this form ? How long will it take ? Do they need to prepare something in advance ? What should they expect on submit ? Purpose

Use autofocus

Autofocusing guides users to the starting point of your form. Emphasize the first field with an accent border color, background color or both. In that way you give a hint to a respondent where he should start and as a result, significantly boost the whole process.

When a field is completed and/or validated, you could focus to next one : be careful this practice can lead to user frustration on complex fields that could require editing.

Pre-fill and auto-detect as much as possible

Using already filled inputs, context, history etc. allow suggestions and/or completion and keep in mind to let user know WHY your form suggest some values

Eg: If I want to a product from a specific category page, the form should not ask me to define the category value

Use specific inputs and visual constraints

Use proper input type according to what your asking (number, email, text, etc) and add visual constraints to explicit expected length

Visual constraints


Reduce visual clutter

Labels as placeholders (for empty fields)

The role of the placeholder is normally used to give hints on what type of information is required for that particular input field. But some designers are using it to replace the field label to reduce clutter and a more minimalistic look. The problem with this is that the placeholder would disappear once the user interacts with the input field. This might be annoying if the user forgets the purpose of the field and has to click outside of it to see the placeholder again.

Google Material Design overcomes this problem by implementing micro-interaction that converts the placeholder to a floating label.

Source

Placeholders as labels

Single column layout

Multiple columns disrupt a users vertical momentum.

By using a one-column design, the eyes move by natural direction from the top to the bottom, line after line. Multiple-column design create eye zigzagging behavior which increases completion time and the number of eye fixations. That is bad for you, as well as for users.

Single column


Prevent user errors

Show your requirements clearly and emphasis errors before submit

Tell users what is expected from them, Don’t wait until they completed the form and show them an error message. The user won’t know what is expected out of them if there’s no clear indication of the validation rules.

Validate fields as soon as possible (without blocking) and provide explicit error messages. Use inline validation with real-time feedback immediately after answering.

Explicit error message

Handle possible network, system or browser issues

Long form means long processing time, which can lead users to involuntary leaving the page of your app.

Providing a save button, implementing a "draft mode" or automatically saving unsubmitted values can reduce frustration in case of disconnection. Think of it as an "auto-save" on your favorite design app.

To prevent this case for in-app navigation, you could also implement a dialog box asking user if they understand changes will be discarded.

enter image description here

The following two questions provide some helpful precisions on how to manage eventual problems making user leave the form by inadvertance.

Long form navigation UX

How to make long forms engaging?


Related

How to tackle a form with 50+ fields?

  • 1
    Thanks Brice. This is very detailed, and a generic answer to anyone looking to improve their form experience. I have Grouped the form, implemented Single Column layout, and Autofocus. I do like the idea of progress/tracker. Selecting this as the answer, as I believe this will help out any one in the future that has to deal with stupid long forms. – Tenzin Kunkyab Nov 27 at 9:27
1

Have you done some usability tests with actual users of the system? That would be my first step to do as they probably have a lot of valuable input to give. I would then design the form around how the users work or what they need.

If you can’t do that (time, budget, ...) and are just looking for layout ideas, a stepper might be something useful: https://material.angular.io/components/stepper/overview

You could also divide the form into logical sections so there is some visual structure.

But in the end a screenshot or mockup of the old form would definitely help.

  • Thanks Moritz, unfortunately ours is a on-premise software, so getting feedbacks(any) is a very long process. I'm just trying to improve the whole experience of filling up these forms. I have considered stepper (have implemented that in another part of the product). – Tenzin Kunkyab Nov 27 at 9:19
  • Is it maybe possible to test the system with your family or coworkes who do not know the softwares ins and outs? You probably only get more generic feedback this way as the test persons might not have the required knowledge for that domain. But general comments can still be helpful. Might be worth a try apart from redesigning it on your own. – Moritz Lüdtke Nov 28 at 11:05
1

As already mentioned above, you should really think about the users first.

Apart from that, from the looks of it >20 fields aren't too much given that your form is a product detail page. Wizards are useful to divide logically grouped tasks into steps (similar to how you run a card sorting exercise to group relevant things together to group under one high level step) but the idea behind using wizards should be driven by the need rather than wanting to make it modern. If the data is completely about one product, and the user has to enter multiple products in the system, every time they move from one step to another it requires one extra click and also adds to the cognitive load. Don't go for a wizard unless its realllllly required. Another common practice while entering data is reviewing the information, are you sure wizard is the best way for that?

Also, I'd suggest you start with learning how things are working on ground. Followed by redesigning the form by refreshing it first. Plan new layouts and grouping & see if that works. Here's a really good article: https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/ . A bit old but still very relevant given the principles are the same.

  • Thanks Taha, the link to the "designing efficient web forms" is amazing. Have implemented Single Column (it was two column previously) and Grouped related information. Was trying to improve it further, Wizard was a start. – Tenzin Kunkyab Nov 27 at 9:21
1

Typeform has nailed modern forms. Yours may be more complex but their approach may be insightful to you.

  • I have used Typeform (personal use) but using that to enter series of product & manufacturer details would be time consuming. But Thanks Saptarshi :) – Tenzin Kunkyab Nov 27 at 9:23
  • @TenzinKunkyab still, I'm guessing you have some complexity to deal with but the above really good answers mixed with single column layout combined with Typeforms concept of pagination shown with a progress bar style breadcrumb may make it less of a chore for the user. I remember reading a UX case study by someone who had to handle this problem for a huge maritime commodities shipping form, he used paginated breadcrumbs into a series of grouped steps which showed an excellent improvement in usability. Will paste link if I can find it. – mastablasta Nov 27 at 12:06

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