Posted by & filed under Controls, Forms.

Overview

There are many things the Forms Pattern does not  specify today. During the discovery phase, we captured requirements (see list below) from various stakeholder projects.  One of the top requirements was for a feature to  “Hide/Expand Advanced Options” in the form.form

With the collection of discovery work screenshots and some other popular option about “Hide/Expand Advanced Options”. I created four demos to do some Usability testing.
The test mockup link: https://invis.io/EY87CTCF9#/179595570_Demo1-1 (Please try the mockup and leave your comments in Invison demo freely.)

Demo1

Shows the “Advanced Options” button with a blue link color which helps the user to focus on it and know it can be click;The “arrow” icon indicates to the user that it can expand.
The arrow icon changes when with user clicks
The divider line appears on expand to divide the two different options

demo1

Demo 2

“+” indicated that there is  more information;
Click the “+” icon to expand and the “-” icon to collapse

demo2

Demo 3

Use word “Show” and “Hide” to show Advanced Options

demo3

Demo 4

Similar with the demos before, put the advanced options button in the middle of the form.

demo4

Which demo feels better to do the “Hide/Expand Advanced Options” ?

If you have any other good suggestion, feel free to leave comments in the blog. Thank you~

Comments are closed.