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.

The Copy file dialog of Win 7 constitutes an approach to presenting One of N options choices to users. This dialog, however, has been accused of being too hard to scan, and lacking click affordance.

Another approach is that of Apple OSX. The advantage here is the improved scannability and click affordance. However, it doesn't provide room for descriptions/meta data and it doesn't scale well.

I'm aware that the typical UI controls for presenting One of N options choices are radio buttons, however, they occur to me as being a little archaic in this context. Furthermore, they don't provide the option to be preselected (unless a dialog confirm button is available, making it a two step process if the user needs another option than what is default selected). Here's a mockup of this issue:

enter image description here

I imagine that clicking either a radio button, an option heading or option description selects the pertinent option and closes the dialog.

The problem with the left dialog is the lacking affordance when no radio button is selected and the resulting missed opportunity to present a default option.

The problem with the right dialog is forcing the user (in case s/he is satisfied with Option Dolor) into clicking the Dolor Option (which goes against the standard behaviour of radio buttons).

My question is thus:

  • How should I design such a choose One of N options dialog when I want to avoid confirm buttons?
share|improve this question
    
Dialogue boxes need 'telegraphic' English NOT full sentences: (ie Save ? Y/N) joelonsoftware.com/uibook/chapters/fog0000000062.html –  PhillipW Aug 23 '11 at 9:45
    
@PhilipW It's good advice but it's also 11 years old and doesn't apply to everything unequivocally. Users do read sometimes. A good designer will find out when (through testing) and then employ the right solutions in the right places. –  Rahul Aug 23 '11 at 9:57
    
@PhillipW, in the link you have provided (without having read the entire text, I admit), it is stated that: "advanced users skip over the instructions" and "most novice users skip over the instructions". This indicates that users go straight to the buttons/interaction controls, and thus, assumingly, the more concise and information dense the button/control labels, the better. Contrast "Save?": "Yes"/"No" With e.g. "The document has unsaved changes.": "Save"/"Don't save". –  agib Aug 23 '11 at 12:11
    
That's the point for dialogues agib. Getting the text on dialogues right is quite an art. –  PhillipW Aug 23 '11 at 13:57
add comment

5 Answers 5

The major problem with the Win7 example is, as you've stated yourself, the lack of affordance since the "buttons" are rendered flat (i.e., with no outline / outset) until hovered.

Actually, Office 2000 came close to what I find to be a good solution:

Microsoft Office 2000 Maintenance Mode

(You may ignore the four buttons in the bottom since they are irrelevant here.)

To optimize, I would prefer the three main buttons to contain the entire options, not just the icons.

Pros

  • Options are easy to identify and discern
  • One option is selected per default
  • Radio buttons are avoided (I find that radio buttons only make sense whenever a choice can be made and changed, i.e., when it takes effect after being confirmed. This is typically done via a confirm button or the like.)

Below, I have edited the image to reflect my thoughts:

Edit

share|improve this answer
    
+1 for providing a mockup, thanks. At least with a button look the affordance is pretty clear. The challenge here is to update the look and reduce visual load. –  agib Aug 23 '11 at 11:12
    
@agib Indeed. This is obviously from the time when Microsoft applications were the place where taste went to die. –  jensgram Aug 23 '11 at 11:16
add comment

To answer my own question, I just unexpectedly came across a dialog similar to Copy file as my MS Visual Web Developer crashed:

MS Visual Web Developer crash dialog

In this dialog the default option is surrounded by a subtle border, providing click affordance while hinting at the existence of the three options. In this dialog, if you press Enter on the keyboard, the bordered option is selected and the dialog closed.

Of course this dialog hasn't got meta data/descriptions, so it's easier to get an overview of compared to the Copy file dialog. The improved overview is furthermore due to the fact that there is no Cancel button in the lower right corner where the Confirm button usually resides - like here:

The current Win 7 Copy file dialog

Considering the above, a mockup of a (probably) better approach might look like this:

mockup

In the mockup I have:

  • Provided visual hooks by underlining the options (with inspiration from the "empty feel" when Google removes underlining on SERPs)
  • Hightlighted the default option and thus providing click affordance
  • Removed the redundant Skip button (in reality it is equal to "Don't copy")
  • Removed the Cancel button, as the red button in the upper right corner already provides this functionality
share|improve this answer
3  
Is the mockup too visually busy...? –  agib Aug 23 '11 at 12:24
    
The mock up still looks like some kind of intelligence test...Surely what it wants is a question in big letters: REPLACE EXISTING FILE WITH THE SAME NAME ? (Y/N) - The detailed information and 'Keep both' options can then sit below the Y/N buttons - and in a smaller font. –  PhillipW Aug 23 '11 at 14:06
    
Yeah, you're right, it's still not that good... Perhaps people just don't need all the meta data. Also, I think the MS copy could be a lot better: "Click the file you want to keep" is just confusing in relation to the three options. And "There is already a file with same name in this location" could be something like: "A file with this name already exists" - a bit like you suggest. –  agib Aug 23 '11 at 15:15
add comment

If the action is going to be taken immediately without a confirm step like a confirm button that takes action, then skip the radio button metaphor that was designed for use in forms.

Here are a couple ideas:

  • If the options are really the length as in your examples and so space is not a particular concern, consider switching to a horizontal layout. Three side by side options convey something different than three vertical ones and visually suggest that this is a fork in the road requiring action to go any direction.

  • Use a different visual clue for each item such as an icon representing that choice.

  • Without the step of a "confirm" button, the concept of "default" is nearly meaningless. Don't try to fake it. You can offer some kind of suggestions either visually or with textual aid. One action could have input focus, but don't try to pretend there is a default action when there is no confirm step. Any action taken takes that action. You don't have the option of not choosing an action.

share|improve this answer
    
Very good points! –  jensgram Aug 23 '11 at 11:03
add comment

Actually, the Windows team is currently updating the "Conflict Resolution dialog", as they call it:

http://blogs.msdn.com/b/b8/archive/2011/08/23/improving-our-file-management-basics-copy-move-rename-and-delete.aspx

share|improve this answer
add comment

How about something visually similar to the basecamp's price table

The pre-selected option will be bigger, and could be visually stronger. The buttons can help users with click affordance.

This approach will only work if you have the horizontal space to display all options.

share|improve this answer
add comment

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.