11

For you reference I wanted to point out that this is a Video project.

I am designing a menu in which the user can choose 1 of 4 formats for SD (standard definition) and two options for HD (high definition).

enter image description here
I'm suggesting this solution because:

In SD mode, there are 4 options, let's say Option1, Option 2, Option 1a and Option 2a. The labels are very similar (a requirement) and, in order to avoid confusion, I wanted to downplay the display.

In HD mode we only have two options. We are moving towards adoption of HD format. Two options aren't enough for a drop-down and eventually these two are the only options we will be offering.

Does it make sense?

Improve this question
7
  • 2
    Can someone select both a HD and a SD option at the same time?
    – JohnGB ♦
    May 7, 2013 at 18:07
  • 1
    Thanks for that question! You can really only make one choice. That changes my question. Now the question is if I should use a drop down or radio buttons.
    – Ana
    May 7, 2013 at 18:23
  • Just a side note because of the HD field with two options. With a two-radiobuttons-field it often is very hard to discern which of the two is selected and which isn't.
    – Marjan Venema
    May 7, 2013 at 20:11
  • 1
    Why do I have to choose?
    – peterchen
    May 15, 2013 at 11:26
  • I suggest put this part in the "Configuration/Settings" page, and just put one big "Export" button here. That will be more user friendly.
    – Ades
    May 17, 2013 at 3:41

3 Answers 3

Reset to default
15

Unless you can proceed without selecting (leave the field blank) one SD options, I would suggest you go with a radio button.

  • Your layout remains consistent if you are using the same input mechanism for similar tasks. Making it easy for the user to proceed quickly.

  • Radio buttons are faster (easier also in many cases) than using a drop down menu. The selection process is a single click compared to two clicks for a drop down menu.

  • Having all the options visible is not a bad thing. Even if Option 1 and Option 1a looked similar, they will still look similar in a drop down menu. In radio button you are atleast making it easier to check for errors by just glancing rather than needing a click.

Improve this answer
3
  • I agree with rk, but would add that it should be made obvious to the user that you can only select SD or HD.
    – Jason King
    May 24, 2013 at 16:35
  • The SD radio buttons could be in one fieldset and the HD radio buttons in another: <fieldset><legend>SD</legend><input type="radio" name="output" value="1" /><input type="radio" name="output" value="2" /></fieldset><fieldset><legend>HD</legend><input type="radio" name="output" value="3" /><input type="radio" name="output" value="4" /></fieldset>
    – Jeromy French
    May 24, 2013 at 16:41
  • Another bonus is that having all options visible reduces load on working memory (i.e. you don't have to remember what the options are).
    – uxzapper
    May 26, 2013 at 2:44
8

How about this layout?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I guess the users need to decide if they want either SD or HD so this should be the main option. Then, secondary, they can select whatever other option you offer.

This solution also enables you to set a default for users. You could work with radio buttons for the secondary option too which is slightly preferred if there are only two options (less clicks, all options obvious) but it might look a bit too much if there are four options. However, revealing only the secondary option where the primary option is selected makes it cleaner.

Improve this answer
1
  • 1
    That is what my project manager suggested, but i thought that having all options out in the open may be better, because I use them in the other areas. Thanks though, it will make him happy to see this. ;)
    – Ana
    May 7, 2013 at 19:16
3

As you mentioned, the user cannot select both SD and HD formats. Why not roll up into a single group annotated as "Format Type". All options can then be listed within the group as radio buttons. This may work better but takes up slightly more space.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer

Your Answer

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

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