Hot answers tagged

139

You could split the list. mandatory items as radio buttons. optionals as checkboxes This also makes sure the attention per importance isn't divided, and allows for easier comparison between mandatory items.


38

I think this solution could be usable. Note that the mandatory item is selected AND disabled. The user is forced to select one of the mandatory items through a dropdown menu download bmml source – Wireframes created with Balsamiq Mockups


13

This type UI element is called "Picker". Mostly used in iOS Mobile App. CLICK HERE for more.


11

Well, checkboxes are difficult to use when there are many due to their size. In this case, I'm not sure checkboxes is the right UI element. You're asking people to select products, not options (which is what checkbox is mostly for). I think the solution is presented right in your screenshot. List all your products in a grid and let user select them on click....


11

In my campus's admission site, some study is optional, some study is mandatory to take. From mandatory studies, some study must be taken at a specific time while another study is mandatory, but there are multiple times avaliable and you can pick the schedule that suits you the best. This is what they did: instead of relying on visual graphics, why not just ...


9

I gather you're using a select box because only 1 selection is valid? What about converting each option into a radio button? e.g. https://jsfiddle.net/mz9a22cd/


9

I think for this unusual situation, well-known solutions wouldn't work. You could experiment new solutions. One solution I can come up with is given in the mock-up below. Link the options that are mandatory. You should show the warning as in the right if none of them is selected. You can optionally show the warning even if any of them is selected but in a ...


9

From an accessibility point of view, It is recommended that the event should be fired on mouse up rather than on mouse down. This will be helpful for users with dexterity/motor disabilities, Who might accidentally click on the list without the intention to do so. So when the event is fired on mouse up, that will give these users a chance to cancel the ...


8

The select field on your screenshot might not be the best solution for selecting the payment period. As a user I don't get a good experience in comparing the alternatives and probably I won't notice that there's an alternative to the very prominent designed orange 49.90/month offer. The problem here is that 50$ per month is a lot if the user wants to use ...


8

First, radio buttons can have a default. So, at issue here isn't the fact that a dropdown affords you a default selection and radio buttons don't. What you are doing by switching from radio buttons to a dropdown is hiding the other options from plain view. If you are using a dropdown list to hide options from users because you've assumed they want/need a ...


7

you should NOT auto-focus in this situation, you are increasing the chance of accidental confirmation. If the scenario is that "confirm" has to be clicked in order to proceed then you have already indicated "Confirm" as the primary action and "Cancel" as the secondary.


7

Assuming that the reservation status always starts with being "Pending" - and is not a factor of user action, there are two distinct categories of system/user actions. First category has both confirmation and rejection. Changes reservation state and generates notification, Second category is deletion. Here I assume, only change in reservation state is ...


6

A couple of months back we did an overhaul of a multiselector that looked exactly like the wireframe shown in your link: two fields, one populated with items and the other one for selected items. (and it had "Add / Remove" buttons instead of drag-and-drop selection...) We decided to use chosen.js to clean up the UI and integrate search. This worked really ...


6

I wouldn't say there are guidelines as such, but most design systems provide an insight on how to use dropdowns. Here are a few examples: Material Design: Exposed Dropdown Menu IOS - Pickers Sidenote, Apple generally doesn't like dropdowns, they take you to a whole other page with selections. Microsoft Fluent Design Guidelines Not exactly what you ...


5

A standard way of solving this is autocomplete. For instance, here is how it works in Jira. User starts editing a field. There are options to accept/cancel the input: User may click the down arrow and see a list of existing items: Or they can start typing in the field and then it offers a list to autocomplete: Finally, user may add their own value:


5

If the field is required, it should not be auto-filled, because Fields with stuff in them are less noticeable. Eyetracking studies show that users’ eyes are drawn to empty fields. At the minimum, users will spend more time locating a non-empty field — a nuisance. At the worst, they will overlook the field completely—a potential business-...


5

The best? Only testing will tell. Going to both your examples, the second one is way better from an user point of view. See both dropdowns: one has a list of TLD and nothing else. The other, a list of TLD PLUS the price. And in the domain business, this is a huge difference since the newer TLD use to be way more expensive than the classic original TLD. ...


5

There is no "best practice" here, those two options are completely different. Pre-selected - use if you have a reason to believe one of the options is most likely (this can be based on most popular / probable option, or on data you know about the user) or you know the default or current option (something that you can choose to change, but an option is ...


4

You say that 90% of users will want 90% of the options. Therefore, it seems there's a core set that everyone has. Why not assign that core to everyone by default and let users tweak that original list? This achieves 2 goals: Reduce the time & effort of selection Potential removal of the initial step (ie. Choose for me → Change this later)


4

I don't have any "official" or user tested information about this, but in the examples you have detailed in your question, the sentence case works well for answer which are based around a response you would generally hear someone speak. It makes sense that "value" answers would be capitalized. i.e. Express Delivery Economy Delivery


4

You need to be able to filter the data before you present it. Either have them select a category before a drop-down is populated, have an autocompelte that submits a query after a certain number of characters are entered in, or both. Also, consider paging the information. Too much data is too much data, no matter how you present it. So filter it before you ...


4

Are you doing this with the interest of the user at heart or are you doing this to benefit the business? If the default option is the best for the user, then hiding the other options in the dropdown is beneficial and thus not a dark pattern. Conversely, if the selection is for say payment packages and you put the most expense one as the default and hide ...


3

I have to enter my University in often for various sign-ups, and I think a drop-down with an embedded search/input field might be the solution you're looking for: Start with a drop-down download bmml source – Wireframes created with Balsamiq Mockups Reveal a list with embedded search bar Allow the user to scroll through a list of colleges and ...


3

If the user is supposed to choose one item, the interface should probably reflect this already by offering one collection of items. Currently you have two collections (colors and images) which forces the user to make at least two decisions: Color or Image Which color / Which Image If possible I would recommend to drop the naming of the different ...


3

It will look better if they are consistent, however you shouldn't have functionality you don't need. Have you tried using css to style the select so that it just looks like the select2?


3

My short answer is that I think you could do better by either allowing the user to use the "picker" to select a date range, or use the calendar to select a range of dates. That is the best way to do it if they are allowed to freely select a range of dates, like for hotel or round-trip flight booking. If there are preset ranges that the user can select from, ...


3

I've been trying out different fitness apps over the last week or so, and have come across this issue on a lot of them. The very worst offenders are the ones that don't allow you to switch unit types altogether. Some things I'm noticing with your layout: 1) The header for 'Preferred unit of measure' appears to be the header for the entire screen, and thus ...


3

Important Note: This was tested using Google Chrome as a browser and NVDA as a screen reader, results may (and likely will) vary between products When a visually disabled user accesses a dropdown menu they are going to do so using the keyboard. More specifically they are going to tab to the select menu, then open it using the enter key. Now there are two ...


3

(Select/Deselect) is the well established standard. You'll see it both in many interfaces and the Microsoft Manual of Style, which is the style guide used by technical writers in many companies, and many interfaces. https://www.amazon.ca/Microsoft-Manual-Style-4th-Corporation/dp/0735648719 "Remove" and "Clear" are generally discouraged. "Unselect" has undo ...


3

To address you question on the "one or the other", consider adding some instruction to the user that spells it out for them, something to the effect of "Please select one of the following" right above the two options. It might work best to put the triangle right by this call to action, instead of on each of the options you are choosing from. The ...


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