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.

I have a Windows application which has some options regarding notifications. Each type of message can be turned on and off for the statusbar and for pop-up messages. Here is what it looks like now:

enter image description here

I think it looks pretty awful, but it's not obvious to me what the best presentation would be.

share|improve this question
    
Random blue, where did you see this, btw? –  ajkochanowicz Oct 22 '11 at 14:50

3 Answers 3

up vote 4 down vote accepted

To begin with, you can bring the left column of checkboxes closer to the one on the right, freeing up some room on the left to fit the labels in a single line each. You can also get rid of the parentheses, like this:

enter image description here

share|improve this answer
    
Subtle gray background on every 2nd row may be a good idea as well. –  dbkk Oct 21 '11 at 17:56
1  
@dbkk In a larger table - definitely. But a zebra on a table with four rows just looks funny, I think. –  Vitaly Mijiritsky Oct 21 '11 at 19:16
    
@vitaly: if it's subtly done it works fine imo. –  Inca Oct 22 '11 at 19:05
    
I don't see anything wrong with zebra rows. –  ajkochanowicz Oct 26 '11 at 23:22

A few things.

  • Labels should not be centered, it's awful for eye movement and legibility.
  • I would favor the ease of the user experience over the conservation of html elements here, even if the form has to be longer.
  • Also, the eye movements necessary to navigate this form are crazy. By having two columns with a label on top of each, the user has to constantly move back to the column header to remind themselves what option they are modifying. It's not a long form, why be so conservational?
  • I would use contrast to afford the secondary text to being optional, a help text.

This design makes the form longer, but as a user, I don't care--especially when it's not a long form to begin with. I can go from the top to bottom quickly without having to rescan the whole page every time. Each individual element can be isolated as my area of focus.

A revised dialogue box

Eye movements for each dialogue

In fact, for users who know they don't have to actually target the little checkbox, but the entire checkbox and its label as a clickable area, it should look like this:

Nearly linear eye movements

share|improve this answer
    
If a designer made me go through four items with the exact same options, I'd be seriously pissed with him :). Stacking the checkboxes in columns means you only need to read the title once. If it's all one big list, you have no choice but to read every line - and be frustrated each time the option repeats itself. –  Vitaly Mijiritsky Oct 22 '11 at 21:33
    
That's something you do anyway. The only difference here is that you don't have to refer elsewhere to remember what that option was. –  ajkochanowicz Oct 23 '11 at 17:50
    
And why would you need to read the titles more than once in my design? –  ajkochanowicz Oct 23 '11 at 17:51
    
what do you mean "be frustrated each time the option repeats itself"? The options repeat themselves in the original design too, only they're not labeled. It's a nice form for glancing, but it sucks for using. –  ajkochanowicz Oct 23 '11 at 17:53
    
In the original design the titles appear once. In your design they appear four times, and users have no choice but to read them again for every item. –  Vitaly Mijiritsky Oct 23 '11 at 19:53

It might sound stupid but IMO it will be much clearer if you switch the columns and the rows.

Just use a light gray for the text on the second line (no parentheses)* at a smaller font-size: if they need further details they will find it easily without hindering the first-timers' scannability.
Adding small icons next to Dialog Box and Status Bar Message could help the less knowledgeable in UI literacy guessing what you are talking about.

* kind of contradictory I know

share|improve this answer
    
Ha ha to the asterisk. But yeah, I'm with you on the grey text. Parenthesis convey secondary information well in books, but in interfaces, color (or more importantly, contrast) does a much better job. –  ajkochanowicz Oct 22 '11 at 17:16

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.