I need to design a web app interface that would allow users to specify conditions that must be met before an action is triggered.

For instance, Action A will only happen if:

  • the current time is between 4pm and 8pm
  • the location is either CA or NY
  • the some-arbitrary-number is above 65

All of the rules are optional, but some are more complicated than others.

After the initial form elements are filled out, what are some good practices for showing the additional form fields (i.e. conditions/rules) in an intuitive manner?

My inclination is to space everything out so the additional form fields don't cause too much noise. The extra space would also make way for hints or explanations to describe the rule or condition in a few brief words.

  • 1
    Marco, welcome to UX.SE! Just like other StackExchange sites, we require the questions to be concrete & actionable. Requests for examples aren't such questions. So please reword it. – dnbrv Feb 28 '12 at 23:02
  • Thanks for the suggestion @dnbrv, I elaborated on my original question to provide a better picture on what I am trying to achieve. – Marco Feb 29 '12 at 1:40

I think you're asking about conditional form fields, meaning one field is conditional on the state of another.

I typically do this with some JS. For instance, if my form has two questions in the form of checkboxes:

[ ] If this is checked we need to ask another question

[ ] This is some other question

If the first gets checked, I THEN show the other field:

[X] If this is checked we need to ask another question

    Some other information needed: [                 ]

[ ] This is some other question

As for how to expose it, I like to do a quick animated slide-down to reveal to make it a bit more obvious that the action happened.

|improve this answer|||||
  • The slide animation and indenting the additional fields are both good suggestions, thanks! – Marco Feb 29 '12 at 2:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.