Designing a long forms — Pain point for both user and designer

Business Application Form in Santara

Long-form can cause frustration for both user and designer. For user it’s intimidating — a lot of user leave the websites without finishing the form. User don’t always have the time and motivation to complete a long-form.

For designer, again, it’s intimidating! In many cases, forms are the final step to the completion of goals. It’s the only thing that standing between page visit and conversion. That’s how important a form is.

Designing a long forms could be intimidating and frustrating

In Santara, a platform where you can register your business to get funding from our investor member, we can’t avoid a long-form. To gather accurate data from business applicants we have to make the application page to be as detailed as possible. Long-form are essential and unavoidable in this case.

So this how we design long-form and improve its usability.

To comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Santara.

Set Expectation Upfront

In Santara business application form, user have to input personal information and legality documents. Before user start to input anything we let user know what document they need to prepare, how long estimated time needed to fill all the forms and make sure that all the information submitted secure and safe.

Front page of business application forms. We let user know what to expect before they input their data.

Grouping the form into multi-step form

We break the form into a smaller section on several sequential pages, sort and group the forms with the same themes into one step page. With this design, we hope user isn’t intimidated at first glance. Completing steps also allows for small rewards and help motivating user to complete the form.

There are total of 9 step in Santara business application form. We grouped them by theme and category.

Let User save and continue later

When filling a long-form, there are a chance that user going to get distracted and left. It might be because connection issue, app crashed, user in the middle of doing something or simply because the user loses the motivation to completing the form. So we let user save and continue later everywhere in a form journey.

Popup when user clicks save and continue later.

Multiple upload documents and images

When upload documents and images one by one per upload field, it takes a lot of time especially in mobile apps. So we let user upload multiple files at once by categories. That way we can still labeling documents by system (per category) and also ease user pain in uploading multiple files.

Multiple upload for files upload.

Conclusion

Designing a long form was scary at first. There are many things to consider. Everything feels like pain point and I want to just remove every field. But many times, long forms are necessary and unavoidable. Put some more thought and time into designing long-form was worth it because it in many cases is a goal of a whole user journey, a conversion. Do you have comments or questions about this article? Let me know in comments below!

--

--

--

See my user interface design portfolio here : https://dribbble.com/listyantyo

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

High School Fusion Reactor: Fusor 0 Rebuild and Tests

DIY Tiling — How to Tile a Floor

3D Draw a Letter “ A “ Floating On Line Paper — Easy Drawing Step by step tutorial.

Project 4 — Promotional Communication Series

Goodbye “Good Enough” Apps. Hello, “Design-First” Experiences.

The Dawn of a New Era, Fresh Mining Pool Client

Behind Instagram’s brand evolution: Movement, inclusivity and a new purpose

A collage shows Instagram’s refreshed brand identity, with the gradient logo in the center, as well as text reading “Shop the looks;” an @ symbol on a black background; portraits overlaid with the Instagram logo and the words “Yours to make;” and examples of marketing layouts, location stickers and the Instagram Sans typeface in Japanese.

Bohemian Style

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hastyo Listyanto

Hastyo Listyanto

See my user interface design portfolio here : https://dribbble.com/listyantyo

More from Medium

Does Form follow Function?

question

UX process, part 4 of 4: Digital Prototyping

Helping clinical admins to produce reports on national cervical screening

There are ten squares on the screen, set in a parallel shape.

Design for Understanding — SAT Scores