Tuesday, June 16, 2015

forms - What is the best way to show conditional fields?


We are creating a desktop app where (business) users can enter contracts. The issue is that the contract form contains a very large number of fields, with some of them being conditional. An example would be:





  • Contract can be "Open" or "Fixed"




  • If a Contract is "Fixed", users need to additionally enter the duration (number of years). They are not using calendars they just enter numbers.




Issue is that we want to make the form as simple as possible for the users. There are many fields, so the more the app can do in the background, the better... But such conditional fields add to the complexity.


What I came up with is:





  1. Typical show/hide the additional field as presented on screens 1&2. The choice is quite obvious, but the form jumps up/down. It also works well if there are a few radio buttons (2-3). But if there are more radiobuttons - it will fall apart. enter image description here enter image description here




  2. Convert the two radio buttons into a checkbox + edit (screen 3). The form looks cleaner, but it is not so obvious that "unchecked" means "Open" and "checked" means "Fixed Term". It also may not always be possible.




enter image description here


What do you think would be the best presentation of such conditional fields? There are numerous such cases on this form and I would like to come up with a good generic solution. Or maybe you have some other ideas? I have searched the net for examples but failed to find any...



Answer



I think you could have better use of space and the screen would not have to jump

You don't need that much space for years
Only have the years visible if Fixed is checked and years text in gray so it looks like an instruction


As for screen jumping have years toggle from visible to hidden (not collapsed)
Different languages use different verbs but hidden reserves space so the the screen does not jump


mockup


download bmml source – Wireframes created with Balsamiq Mockups


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...