4

We are currently in the design phase of an app that requires at some stage, users to complete a form.

The form can be broken up into 3 sections. We will let the user then use a step process to fill out all 3 sections

eg.

Step 1(Member Details)

Step 2.(Beneficiary details)

Step 3(Transaction details)

Each of these sections contain roughly about 15 inputs

Ranging from Name to contact details to Marital status etc.

Obviously it would not be very good practice to fit it all into 1 screen and have the user scroll down to complete everything. And using an accordion approach is also not ideal as it makes the form seem very fractured.

What would a good approach be when trying to build large forms on a mobile only platform and are there companies who have incorporated this well enough that I can perhaps take inspiration from.

2
  • 2
    Can you reduce the number of fields? It's a good idea to evaluate every field, asking whether the business needs that information. There are usually a few pieces of info that have been used in the past, but are no longer necessary. Oct 18, 2016 at 14:56
  • Check this: ux.stackexchange.com/questions/95422/… Oct 18, 2016 at 15:29

5 Answers 5

3

You might look into a Material Design Stepper.

Steppers are designed for progression of sequential steps, which in your case would be the three sections of your form. Check the Types of Steps section to see how these are utilized on a mobile platform.

3
  • And this is compatible with android studio and android apps? Oct 18, 2016 at 14:56
  • @AlbertusBrandVenter Sure is.
    – Tory
    Oct 18, 2016 at 14:59
  • I used this and i works very well. Additionally I took extra steps in reducing the form. Using the ID numbers of the users I can derive their date of birth as well as their gender. Among other things I reduced the form quite a bit. Oct 20, 2016 at 6:11
1

I read a lot of studies that shows a long form is better than a multiple page/ multiple steps one. Also, you can see a more detailed answer on the question "Single page or multi-page forms?" here.

What I suggest:

  • You already have the fields grouped in sections. This will help, just make sure the sections are visible delimited;

  • Group the fields into fieldsets and change the design to have 2-3 inputs on a row;

  • Use clear and short labels.

1

In case of large form I think about it as a set of smaller sub-forms rather than steps. when you fill a form you can left some fileds for later input and then simply return to it when you are ready. And if you make step it's harder to make step back - this becomes 'dancing' in case of multiple returns back.

So let's make a set of sub-forms. We can have much more than 3 sub-forms (sections). The most important think we need to take in mind is inputs validation. If some input affects another field it's better to have them in the same section. Some input may affect even the whole another section - makes it appear or disappear. In other words when you display cross-validation message its referenced field should be visible neaby.

If you display your sub-forms (or sections) using accordion with section titles and section validity marks, you can collapse all filled and validated sub-froms and expand other sub-forms. Just clearely indicate with mark in title that no actions needed inside completed sub-form. Also you can provide user (if he need) single page form when all sub-forms are expanded.

0

You already mentioned about steps. So

1: Make sure the user is able to understand that there are steps. Simple accordion sometimes doesn't convey this message. You'll have to make it interactive as Tory suggested from Material Design.

2: As you mentioned that there are 15 fields, have the input boxes as well in the material design format. You can have the label on the text itself which saves space and you can display more input on one fold. Check this link: https://material.google.com/components/text-fields.html#text-fields-single-line-text-field

3: In big forms, grouping is the most necessary factor. If any of them goes wrong, user can get irritated.

4: See if some of the fields can be reduced.

5: Handle the error messages right upfront. You can try it on the input boxes itself either by showing it by color (red & green) or by a blurb like notification by the side of the input fields.

6: Take the cursor to the next input field automatically which can reduce the motor load on the user.

0

Use the "Wizard" approach

  1. I'd suggest going with the wizard approach in this case
  2. Grouping of form elements logically is a key point here
  3. Inline validation (on blur)
  4. Take the user to the next step automatically once all the required fields are filled in and there are no errors.
  5. Integrate error prone mechanism (choose form elements wisely) over correcting the mistakes and validating the fields upon blur.

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.