6

I have complex UI form dialog with ~12 tabs and want to decide what is best:

  1. enable/disable (gray out) fields - classic convention
  2. hide/show if not necessary - could be confusing + jumping GUI
  3. hide but then show the "empty" space with a hint, that there is something hidden - like 2. but no jumping GUI and more obvious

You can see an example in this fiddle. 1. is option B, 2. is option C and 3. is option A in that example.

What would be the best practice here?

(I've read a lot of similar discussions on this topic but my question is somewhat different/more of practical nature).

EDIT: Well if the answer is not easy, maybe opinions on what you see as more user friendly/intuitive/easier?

EDIT2: The most similar question with some nice answers were hide or disable form options and don't hide or disable menu items

LAST EDIT: Answer available but explanation about the WHY can be read here: Android Design Patterns -> Settings -> Dependency (navigate to Dependency).

Improve this question
4
  • The answer may depend on the use-case. Why do you need some fields to be inactive / hidden?
    – JonW ♦
    May 29, 2012 at 10:46
  • For complex cases where subsequent options make sense only if prev. onces are "true". I.e. there is no point to provide 2 times 3 RGB sliders to configure foreground/background color, if the color as such will not change at all => thus less options/eye catchers.
    – lzdt
    May 29, 2012 at 11:09
  • related: ux.stackexchange.com/questions/12756/…
    – Ben Brocka
    May 29, 2012 at 14:40
  • @BenBrocka great hint, missed that in my research, thanks!
    – lzdt
    May 29, 2012 at 14:51

3 Answers 3

Reset to default
2

I haven't heard of a golden rule unfortunately; it would be great if anyone knows of a study. A couple of thoughts and my experiences:

  1. Is the user interested in simply accessing the "child" field without going through a parent field that enables/shows it? If yes, than hiding the field might make it more challenging for the user to know that the option is available at all, and also the user cannot search for the option by doing CTRL+F (assuming it's a browser app). If the screen has many options it could be very useful for the search to work.
  2. If there are many options on the same screen, perhaps they could be grouped further to minimize the clutter. For instance, you can show accordions with group names that reveal related fields.
  3. When the fields are disabled it is not always obvious what enables them so you need to be careful that it is visually clear how the fields relate. Indentation is sometimes used to show the relationship but the screen can look quite disorganized when the number of fields is big and also it makes it harder to scan the text on the left since the fields will not align. Having fields in disabled state requires an extra click to enable them so perhaps they could be enabled by default and if the user edits/checks it, the parent is enabled automatically as well. For instance, if you have "Send a present" option with children "Flowers", "Card", clicking "Card" enables "Send a present".
  4. Consider what are the top tasks that the user is trying to accomplish and expose related fields. The rest of the fields potentially could be placed under "Advanced" options.
Improve this answer
2
  • Hard to decide which answer to accept. Your is like a quality explanation why answer from mawcsco makes sense. I'd accept all 3 but oh well..
    – lzdt
    May 31, 2012 at 9:57
  • see my "last edit" and a prob. good study (more general UX stuff - awaiting order confirmation to read it myself): nngroup.com/reports/applications/design
    – lzdt
    May 31, 2012 at 12:43
11

I've always gone with the following rules to make this determination:

  1. If any action on the current screen/page/window will change the availability of the field, it should be disabled/enabled as the values/inputs change.

  2. If no action on the current screen/page/window will cause the field to be available, then the field should be hidden.

  3. If the information in the field is useful to the user, despite being un-edit-able, it should be a "display field."

You are right that "jumping GUI" like your third example is jarring and disconcerting for the user. If things must move, use animations to convey the activity clearly to the user.

Improve this answer
3
  • I wish I would have 15 rep. to be able to upvote, thanks.
    – lzdt
    May 29, 2012 at 14:45
  • What if the fields further down the form are dependant on answers left early on? For example if you have an ecommerce site and one of the form fields earlier is 'delivery address is different to billing address' so you would then need to show a whole new set of fields for delivery address later in the form. In that instance it could be argued that those fields should be hidden, not disabled.
    – JonW ♦
    May 29, 2012 at 15:57
  • @JonW What do you mean by "further down the form"? If the fields are visible (i.e. "on the current screen/page/window") and your usability tests show that this is the best approach, then my recommendation falls under my final paragraphy from my answer. If the fields are not visible, then they can be shown/hidden as necessary in #2.
    – mawcsco
    May 29, 2012 at 17:37
2

Do your best to rethink the grouping to slim down from 12 tabs to a smaller number, if possible.

Is this part of a stepped process ? (like setup, creating a profile, etc) If so, I think 3 is the magic number in terms of the total number of steps. To slim down to 3, ask yourself 'do I really need this data ?' or 'do I really need this data now (can I ask for it at a more appropriate time when the user understands why I'm asking for it ?').

If this is not part of a stepped process, try to group the tabs based on actions that the user understands, like (schedule, call, delete, etc). Then in each section, ONLY show the options that you will need the majority of the time (like 1-4 things) and have a button called 'advanced' and then cram everything and the kitchen sink behind that button.

In general, simplicity is king. 14 is not simple looking, each tab having a bazillion options inside of each tab is not simple looking either. From the beginning, keep removing options until your application cannot function 90% of the time, then present the remaining HIGHLY USED options with as much dead space as possible, and the remaining majority of options behind an advanced button

Improve this answer
4
  • 2
    I don't think you've answered the correct question here. The OP question is about form fields, not tabs. If you meant to answer a different question then leave a comment as to which question you meant to answer and we'll relocate this answer for you.
    – JonW ♦
    May 29, 2012 at 13:23
  • @JonW The answer is a very good one nevertheless, also not answering my question regarding disable vs hide, but if I would/could/might simplify it to few options enabling/disabling will be prob. not a question :)
    – lzdt
    May 29, 2012 at 14:07
  • Alone the "..keep removing options until your application cannot..." is up-vote worthy.
    – lzdt
    May 29, 2012 at 15:00
  • OK, I see it is partially answering the original question. However the main bulk of the question is about showing/hiding form fields, while this answer is about preventing such complex forms from existing in the first place..
    – JonW ♦
    May 29, 2012 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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