55

It depends on the purpose of the dialog. A customer filling out his shipping information, for instance, would reasonably expect countries to be listed using the same language as the rest of the website. A customer on an English website would just be confused if he had to select "日本" to ship to Japan. But when the dialogue is to change the country/language, ...


53

Use either Responsive Disclosure or Responsive Enabling depending upon the standards in the format you're working in. Responsive Disclosure would mean first showing a radio button like this... download bmml source – Wireframes created with Balsamiq Mockups ...and then revealing the additional option in the whitespace if the user selects no, like ...


49

Worked on a project with this exact problem. We needed a way for the admin staff to add attribute to products. Because attributes are used for search purposes, we need to ensure if that attribute type already exists, it should be selected instead of creating a brand new one. We ended up using something akin to your first idea. download bmml source – ...


43

Guidelines The Apple OSX Human Interface Guidelines (2012) recommend a drop down if you have more than 5 options, while the Microsoft Windows 10 User Experience Guidelines recommend a drop down if you have more than 8 options. So, take the average and stay with radio buttons if you less than 6.5 options (shrug). You’re near the borderline (at least for one ...


41

I need to make it obvious to the user that it is a dropdown. By making it look like a dropdown. Don't make it so wide. The reason it doesn't look 'clickable' is because it doesn't look like a drop down because it's stretched across the entire width of the screen.


41

I would consider two things here: Visual connection to action Common standard implementation To the first point - visual connection: If you see an arrow that points up, you expect something to happen in that direction. You will automatically look up, not down. So every action that goes to a different direction will feel alien, detached. So this argument ...


38

A button should show what will happen when it is next clicked - not point to something else. When the button above a closed menu is clicked, the content will drop down - so the should point down (to where the content will appear) When the button above an open menu is clicked, the content will move up into the button - so the arrow should point up.


32

There's lots of research in Human Computer Interaction on this issue and the general concensus is that breadth beats depth (read: wide top level navigation beats nested submenus). This is the case due to Short Term Memory (STM) storage issues and how STM is affected by both breath and depth. Pointing to some hard research should help your case to your ...


32

Even though Apple recommended (and surprisingly still recommends) pickers for dropdowns, not even they use it anymore. Spoilers: In both these cases, the "logic" would dictate to use a dropdown + picker. Apple chose a much better solution for their own apps. Still, a whole screen to pick between "Female" or "Male" (pardon the binary example) seems ...


30

Microsoft does this in Windows Explorer! I noticed this on my Windows 7 work computer just a few weeks ago, and I can't stress enough just how handy it is (in certain situations) The key here is that they made it exceedingly functional but it also stays out of the way until the user discovers it.


29

What a great question. As a general rule, it's good to flip positioning of iconography for RTL languages. So your bottom option, with the chevron on the left, is correct. If you're curious, I'm basing this answer on lessons learned running as lead designer on multiple projects with the NYC DOE and NYC mayor's office, where all projects have to support 11 ...


28

How about using a mega menu? http://www.useit.com/alertbox/mega-dropdown-menus.html


28

This kind of UI elements exists and is used in many applications even if differently. Facebook events Google calendar If well designed they are even more affordant than the usual radio buttons. The thing is, because of this affordance they seem "auto selected" so there is no need of a validation like in your example. Therefore I would say radio buttons ...


27

The first idea failed field testing and variants failed usability testing It sounds like we had the same idea as your option 1, and we implemented it. We were looking for a way to force users to search first without users realizing that we were forcing the search to occur. A variant of our first design actually tested OK with a small sample in usability-...


25

A dropdown list (or combobox) should already be a clear indication that you need to select an item from there, so wasting the first item by telling someone this is redundant and a poor idea. The only times that I would recommend having some other text in the dropdown are: when it is not essential to select an item when you want effectively to select all ...


25

Arrows pointing in our reading direction (right or down) point forwards. Buttons should indicate what happens when clicked. The arrow on a dropdown button should point right or down as it indicates new content will be visible once clicked. Once the dropdown has been opened, clicking the button again should close it. Therefore the arrow should point upwards ...


24

A single button should perform an action, and not act as a radio button. If you want buttons to act as radio buttons, you should use a segmented button. There is established precedent for this in both mobile and web UI, so people are likely to already understand what they do. Additionally the design of segmented buttons shows that the buttons are related ...


21

Q1: First, the convention is to have these on the right, correct? Why is that? There are a few reasonable explanations for putting the drop-down arrow on the right (at least in LTR languages): Readability: Since LTR text naturally starts on the left, this design gives the drop-down arrow some natural whitespace in most cases, and helps make the entire ...


21

My answer shows simularities with others posted here but I want to emphasize how important the right communication is. For example: Reconsider the used language to make the intentions clear. For example use create company to add some weight to the action or use the word new to emphasize the difference. download bmml source – Wireframes created with ...


20

I recommend implementing some kind of searching functionality. Dropdown-search hybrid elements are quite popular and a good way to solve this. Select2 is a commonly used javascript library for building such hybrid dropdowns.


20

Given your requirement: Each status has it's own associated colour and would ideally be displayed in the list Then we're not discussing if there should be a color or not, question is how to harmoniously display that color in a way compatible with Google Material Design? Coloring the entire item is problematic: It's not aesthetically pleasant. It's ...


18

How about asking the user to select their gender in the form of their preferred third-person pronoun ("his", "her", "their"), instead of providing their biological sex? Listing "their" rather than "its", because I doubt anyone wants to be referred to as "it". For example: Which sentence sounds right? [ ] <user> updated his profile. [ ] <user> ...


18

For any select list of over a couple dozen options, free-text search with autocomplete support is the only sane option. This is a common pattern seen on real estate sites (Zillow, Redfin, etc) and travel sites (AirBnb, Kayak, any airline, etc.) Kayak shown below. Fred Meyer (big-box retailer) has a 'Select Store' search box to solve this - requesting you ...


17

Setting is singular, so use it if you only have one thing to set. Settings is plural, so use it when you have multiple things to set. This is likely to be the case most of the time, so when in doubt, use 'Settings'


15

There are two reasons that multi-level nested menus do not provide the best usability. It is hard for users to physically select the first level item, then the second level, then the third. There is a tendency for the user's mouse to slip off their intended target, and then they have to go back to the top level and start the navigation process again. ...


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 ...


15

Maybe you could separate the dropdown from the 'Group by' label, and align them at the two sides of the available space and - as others have already suggested - make your dropdow look like a dropdown.: This way it spans over the width of the content (so it can serve as a header) while you have a recognizable dropdown. And if it applies: you can introduce ...


14

It depends on what you want to do. :) Use checkboxes (or other toggle buttons) if you want to provide for applying several filters at once. If you want to use them for single value, then listen to @AndroidHustle regarding manipulating them, and only use them for single, independent, boolean values. download bmml source – Wireframes created with ...


14

In a scenario where the user has to select simple true/false or active/inactive states then I would really suggest that you use a checkbox control rather than a control which would feature redundant input, eg: In a case such as this there is no reason to add additional input controls which provides the same result as a more simple checkbox control. Either ...


13

Go with check boxes for multi-select inputs. It is a norm in implementation since the first GUIs and it a standard practice in UX too. Nielsen's article confirming the use of check boxes: http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/ Checkboxes are used when there are lists of options and the user may select any number of choices, including ...


Only top voted, non community-wiki answers of a minimum length are eligible