Posted by & filed under Forms.

Overview

This blog is to investigate the web form design especially the conditional hidden fields, and give out the possible solutions.

Should we hide fields if user can’t be interacted with? Do we always just keep all fields there and gray them out? Or use progressive disclosure if there are more fields based on a given selection?

When we designing a web form, we should always keep the form easy and simple. We could hide the unnecessary fields in order let users focusing on the present job and show them out when needed.

The picture below is a comparison of the old Apple ID register page and the new one. The difference between the old one and new one is that they remove the mailing address input. Most of the users will register the ID only for downloading the applications or set up a new device. Moving the mailing address part to the buying page and  hiding it in the current page will make the workflow more smoothly.

 

Old Apple ID register page                                                                              New Apple ID register page                                                                                

apple id1                            appleid1

 

Back to the question, we could use the progressive disclosure if there are more fields based on a given selection.

We would not rather choose to show the fields that user can’t be interacted with.

In this case, user will spend unnecessary  time to identify what fields they can be interacted with and what they can’t.

We would rather not keep all fields there and gray them out.

The color of Patternfly unclickable field is very light. They can not be seen very clearly on the Linux and Microsoft devices (those devices do not have Retina screen).

Design Options

The Wireframe link is here

Design 1:

This is to define the single level conditional fields.

demo1.1

1.I change the input name from the left to the top in order to help user viewing the form more easier.

In web form design, it is better to use “F” sight line rather than “Z” sight line

屏幕快照 2016-08-10 下午5.48.01

屏幕快照 2016-08-10 下午4.43.16

2.The unchecked field will not be shown unless user clicks it. After clicking the checkbox, the text field will show. The design is to help user focusing only on the present workflow, to avoid him from losing the way. When clicking the first selection checkbox, the text field will all hide.

demo1

Design 2:

This is to define the multi level conditional fields.

1.Add a cutting line to distinguish the first level fields and subfields.

2.Unchecked fields will open only until user clicks it. When clicking the sub level checkbox, the text fields will show.

demo2.1

demo2

Design 3:

This is to define the conditional fields with dropdown menu.

1.Despite of the first selection fields, the other none selected dropdown menu will hide until user clicks it.

2.When clicking another checkbox, the previous none selected dropdown menu will hide.

demo3.1

demo3

Thoughts, comments, concerns? Feel free to comment on this post.

Leave a Reply

(will not be published)