4

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.

1
  • Random blue, where did you see this, btw?
    – Adam Grant
    Oct 22, 2011 at 14:50

3 Answers 3

4

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

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

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

8
  • 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. Oct 22, 2011 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.
    – Adam Grant
    Oct 23, 2011 at 17:50
  • And why would you need to read the titles more than once in my design?
    – Adam Grant
    Oct 23, 2011 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.
    – Adam Grant
    Oct 23, 2011 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. Oct 23, 2011 at 19:53
1

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

1
  • 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.
    – Adam Grant
    Oct 22, 2011 at 17:16

Your Answer

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

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