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.
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.)
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
“+” indicated that there is more information;
Click the “+” icon to expand and the “-” icon to collapse
Use word “Show” and “Hide” to show Advanced Options
Similar with the demos before, put the advanced options button in the middle of the form.
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~