86
As you know, you have to collect a combination of checkbox-style selections, and a filtered list of radio-style selections.
Combine them both into one list. Checkboxes enable the primary "radio button" (a star in this mock up, but fit it to your design).
Usually people tend to steer away from having a list of radio buttons with no default selected, but in ...
19
This might be a wording issue. If you start with the primary option (1 out of N, so radio button) you can then present an "additional options" list where it's legal to choose 0 additional options (so checkboxes make sense).
This makes additional sense because "primary" is semantically related to "first", so it's natural to start the dialog with "the primary ...
18
@maxathousand's answer is really nice and clean, but I thought I'd add another option.
I think a multi-select dropdown with dynamic list of radio choices would be nice and clear. Here's a little gif I mocked up:
And a link to the mockup if anyone wants it: https://jsfiddle.net/gjudck24/
6
I would:
present the user with a question "What is the primary ingredient?".
The user makes his selection from a dropdown menu (which doesn't allow multiple selection)
When the user choose the primary ingredient, the second question and the list of additional ingredients appear (either a list of checkboxes or a multi selection combo like in GammaGames ...
3
It seems like your first design concept is the more logical of the two given the task described:
The end user must choose at least one of these options to be enabled
The end user must choose exactly one of the enabled options to be the
"primary" option.
But I think the confusion comes from duplicating the second list which should only contain the ...
2
In all of the music apps and websites I've ever used, the most pleasant to use component for this scenario has always been the spinner. This is a text box containing the exact value, with increment/decrement buttons next to it.
You could use a slider but this takes up a little more space, and is difficult to provide fine-grained control unless you also ...
2
Another option to the ones above is to leverage an Add/Remove list pair with groupings. I've used the MMC Snap-in window as a lazy mockup. You can add ingredients from a list on the left which are grouped on the right. The first ingredient added would become the primary and additional ingredients would fall under the additional ingredients group. The primary ...
2
I also faced this issue, because my users did not understand that a green solid underline could trigger a tooltip.
So I did different versions and I am certain that the last one is the best indicator:
Conclusion:
Underline the text with dots (dotted like abbr in HTML).
Add an info icon to make clear that there is an information behind (probably an info ...
2
As I was reading the other comments,
• Position of the Submit Button at the bottom:
The problem with this is that every time user edits the form he might try to find submit
button, and for that he has to scroll at the bottom of the form.
• Floating Submit Button at the bottom left corner:
Floating position of the submit button on the lower left ...
1
Now that the forms are organized into cards, why not have a submit button for each card? This way, the submit button will always be located close to the user input.
As the typical use case is that the user will only modify a few elements at a time (hopefully all in the same card?), they won't need to click 3 times.
The button would be visible only once a ...
1
I would go with bottom left alignment on the button.
https://adamsilver.io/articles/where-to-put-buttons-in-forms/
1
It's a really complex problem that are based both on RTL speakers' perception and on gestures in mobile.
It was a problem with stars rating on GetTaxi app in Israel - the stars were placed from left to right, while the whole interface was from RTL.
In order to avoid user errors, I recommend using a smile rating. Something like this:
Also, provide an option ...
Only top voted, non community-wiki answers of a minimum length are eligible
