Web forms - validation messages for hidden views

Feedback & Problem Solving
,
#1

hi, folks!

We are working on a task related to the validation messages for the web forms.

The use-case is this one:

  • user has to face a complex form (more than 30 fields)
  • we decided to split the web form with tabs to decrease the cognitive overload
  • due to the business logic, the user can send the form to the server since the default view (some fields are pre-filled)
  • due to the tech/business constraints we offer the validation only for the browsed TABs

this is the wireframe for the MVP solution we want to ship:

1 - Default

1024Ă—680 38.6 KB

2 - Filled

1024Ă—680 35.7 KB

3 - Server response

1024Ă—984 91.4 KB

What do you think about this solution?

#2

Hi dopamine,

I guess you could highlight the tabs with the same color of the error messages so the user is drawn to them. Also focus on the first tab that has validation errors and keep that one red so the user know there’s more to be done. I’m not sure if the solution would work well on mobile.

Other ideas…
A stepped version of it with validation in each section really. So the user won’t be overwhelmed if lots of fields are not answered properly with ability to skip.

And the other would be a little bit more visual. You could have blocks distributed in a grid with titles and status of completion which the user can access the smaller forms through them. Example below.

884Ă—703 49.7 KB

Hope that helps!
Cheers!

1 Like
#3

hi @monikeoreilly
thank you so much.
It helped me a lot.

We evaluated such approach and we decided to not follow it because of the accessibility.

This behaviour is already available, the system will reload the view with the first TAB affected by errors open.
For this app we don’t have as a target mobile devices, it is responsive for some breakpoints but no mobile gestures (eg tapping).

The UX team fought for such topic with the PM and BIs. At the end, we reached a compromise and we decided to not apply this approach. According to them users, very often, will send the form to the server without in putting any value. Some of the fields are pre-filled and they said that the users want to check which issues are popping-up with the default data set.

I want to thank you for this.
It’s like fresh air in a smoking room.
I strongly believe that this is what we should do in our daily job. We should always be able to see things outside the box. We were so focused on how to display notifications and wrong fields that we lost the main goal of the page: to provide an overview of the webforms status.
Great idea!
I will challenge my colleagues to sketch the page from this angle :slight_smile:

1 Like
#4

Butting in to add nothing of value except that conversations like this make me smile.
Means I’m doing my job right.

You guys rock.

3 Likes
#5

Yay! Glad I could help :slight_smile:

So that screenshot is from an airline from Ireland https://www.ryanair.com/ie/en/ if you want to take a closer look. They hook up the completion of one section to the other so the user has to ability to fill in or skip to next section. In the end they are presented with the overview which they can go back to at any time.

1 Like
#6

I have to say that the website is much better than the service (at least for the flight from and to Rome).

Anyway, I really like the idea to give a quick and friendly overview of the status of each section.
I will definitely rise this idea up to the “UX guild” and ask them some feedback.

Again, thank you very much for the inspiration :slight_smile:

If you will pass by Zurich (or Rome) there will be a Bretzel (or a SupplĂ­) waiting for you!

1 Like