2

I was asked to implement a layout into our current design. The original design contained 5 tabs/radio buttons that would specify what type of form to display. What the "tabs" do is basically change which form fields are visible.

But what used to be 5 radio buttons now became a set of 13 tabs (see scary diagram below). This made my head hurt. I don't believe tabs are the best approach to this problem. What the "tabs" do is change which form fields are visible. I was also instructed that the tabs should be displayed in two lines. I dislike tabs, even more so if they are in two lines. Multi-line tab sets are very confusing.

What would be the most friendly way of allowing the user to chose the type of form to display? Dropdown/select is a possibility, but all choices should be visible at all times.

The horror: enter image description here

The horror in two rows: enter image description here

Improve this question
2
  • So...the behavior of the tabs are really "buttons" to change the form field's visibility?
    – Rachel9494
    Jun 2, 2015 at 15:31
  • Yes. As I said, they were radio buttons before. But now the client prefers 13 tabs.
    – ecc
    Jun 2, 2015 at 15:35

2 Answers 2

Reset to default
2

I'm going to go ahead and answer myself with a possible solution. Maybe we don't want to show all options? It's likely that many types are not that popular for some reason, so we could show the most popular types in the front row, or maybe the ones used most recentely.

enter image description here

Improve this answer
2
  • 2
    Be careful with this - you're introducing a non-standard UI design here. I would expect that a significant percentage of users won't even realize that the other options are available in the dropdown.
    – 17 of 26
    Jun 2, 2015 at 17:50
  • You're right! But if we make it clear these are buttons and not tabs, it should work. I need to discuss this with the client :s
    – ecc
    Jun 2, 2015 at 22:11
2

Here's my possible solution...

enter image description here

Options to the right that give all the choices (since you mentioned they must all be visible). I think you said they used to be radio buttons, which implies only one option at a time can be chosen. Make a subheader above these radio buttons, something like Form Type. This section to the right may or may not have "sticky" behavior--stays when the user scrolls--up to you.

Tabs definitely imply a certain behavior. IMO they should NOT be used as radio buttons. Tabs come from physical, tabbed binders/notebooks and imply you are looking at a new set of information.

I had another possible solution, but I think most of the whole form changes for each option and not, say, one field, from what I am understanding in the question. I would also ask if this is a form the user is filling out, and if so--what happens if they change the form type while they are filling out the form. Or, this might be a form that the user doesn't fill out, but presents it on his or her website (or something along those lines).

Improve this answer

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.