Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In my Windows application, I want to show the user some kind of map. The information displayed on this map can vary a lot, depending on filters set by the user. With these filters set, the user will want to look at the map for different locations (views) and see those in different modes.

Because there is no particular order in switching - user 1 might check all the views in mode 1 and then check them all again in mode 2, whereas user 2 might check each view in mode 1 and mode 2 before moving on to the next view - it seems inappropriate to have nested tabs. Another consideration is that WinForms is poor on suitable toggle buttons.

Would it be acceptable to have two tab controls at the same level, such that the combination of selected tabs determines exactly what is displayed? I'm not sure whether that breaks the tab metaphor or not. Here's an image of what it would look like:

Double tabs

Other suggestions are welcome of course!

With regards to the checkbox/radiobutton solution, my problem with it is that they are much harder to click on than tabs. The radiobutton idea is a better fit, but is there maybe something larger, yet pretty?

share|improve this question
3  
Checkboxes/ect can have a clickable div or be whole "buttons" with a checkbox in them, or at the least the text for the checkbox can also be clickable; I wouldn't consider that a reason not to use them –  Ben Brocka May 22 '12 at 13:42
    
Checkboxes can be coded in a way that the clickable area is bigger than the actual tickbox itself - even in Windows OS :-) Radio buttons are appropriate if it's an either/or option, otherwise Checkboxes is the way to go. –  greenforest May 24 '12 at 8:02
    
Do I understand you correcty if I say that there is no binding between a view and the mode? So, if you switch views, you don't also switch modes or the other way around? –  André May 25 '12 at 12:25
    
@André You're right, using either of the tabs changes only one thing: the view or the mode. –  Thijs van Dien May 25 '12 at 13:58

5 Answers 5

up vote 9 down vote accepted

If you have two groups of tabs, users may think they can only select one, regardless of where you place them. In general, we are familiar with the perception of only having one tab selected. I would suggest a similar approach as mentioned in another answer but with radio buttons rather than checkboxes as I believe you only want the user to select one "mode".

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
I updated my question. –  Thijs van Dien May 22 '12 at 13:37
    
I'll probably go with something like this, or even use radiobuttons for both choices, among other options. –  Thijs van Dien Jun 2 '12 at 21:51

My suggestion is to go for Tab + Filter combination.

enter image description here

share|improve this answer
1  
Better as less confusing. –  Marjan Venema May 22 '12 at 6:23
    
This or possibly radio buttons. –  Barfieldmv May 22 '12 at 6:42
    
I updated my question. –  Thijs van Dien May 22 '12 at 13:37

Yes, that completely breaks the tab metaphor. You could use sub-tabs, perhaps:

+-----+------+-----+
|     |      |     |
+     +------+-----+--------------------+
| +------+-----+                        |
| |      |     |                        |
| +------+     +----------------------+ |
| |                                   | |
| |                                   | |
| |                                   | |
| |                                   | |
| +-----------------------------------+ |
+---------------------------------------+

Though if I understand your needs correctly--based on your use of filters--I think a 'faceted search' type of interface might better suit your needs.

share|improve this answer
2  
A very artistic take on the wireframe I must say... –  AndroidHustle May 22 '12 at 11:32
1  
The problem with this approach is that there is no logical ordering, whether views should be in modes or modes in views. Also, tabs in tabs looks terrible in WinForms. –  Thijs van Dien May 22 '12 at 13:38
    
+1 for the "breaks the tabs metaphor". That is the crucial reason for not doing it. –  Schroedingers Cat May 24 '12 at 12:16

As unanimously noted above, you can't have double tabs. If you're concerned that radio buttons have too small a target area (although it doesn't seem to bother anyone else on the web ;), you can have a button bar.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Actually I designed the thing using what you call "button bars", in Balsamiq even, before coming up with this alternative. There reason is that WinForms doesn't have a "button bar" (like iOS) that doesn't look totally alien and awkward. –  Thijs van Dien May 25 '12 at 14:00
    
More alien and awkward than double tabs? I seriously doubt that :). The control is there. Design it the way that serves your purposes best. –  Vitaly Mijiritsky May 25 '12 at 14:59
    
BTW, take a look at the controls changing text alignment or direction in any winforms text editor. That's precisely it. –  Vitaly Mijiritsky Sep 5 '12 at 16:47

As others have said, the multiple tab sets is confusing - the first thing I thought when I saw it was "why are we on two pages at once?".

If radio buttons are too small for the mode options (bearing in mind that the text should be clickable too), there are a few options that come to mind:

  1. Make the radio button controls themselves bigger - this means that if the user misses by a little way, it can still press the button.

  2. Using windows controls, you can tell radio buttons to look like normal buttons, where the selected one is highlighted - although then you have the problem of something that looks like a button but isn't really.

  3. Put the radio buttons into boxes (panels?), and have the box-click event forward onto the button-click event. This way you'll have to program the "select one only" nature of the radio buttons

I'm sure there are other options for making radio buttons "more clickable", but that's what's come to mind so far.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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