4

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?
6
  • Dialogue boxes need 'telegraphic' English NOT full sentences: (ie Save ? Y/N) joelonsoftware.com/uibook/chapters/fog0000000062.html
    – PhillipW
    Aug 23, 2011 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, 2011 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, 2011 at 12:11
  • That's the point for dialogues agib. Getting the text on dialogues right is quite an art.
    – PhillipW
    Aug 23, 2011 at 13:57
  • 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
    – agib
    Aug 24, 2011 at 7:19

4 Answers 4

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

2
  • +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, 2011 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, 2011 at 11:16
3

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
3
  • 3
    Is the mockup too visually busy...?
    – agib
    Aug 23, 2011 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, 2011 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, 2011 at 15:15
2

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.

1
  • Very good points!
    – jensgram
    Aug 23, 2011 at 11:03
1

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.

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.