0

I'm wondering for a UI element like this, where users can select an option, what should the on-load positioning be? Should the selected item be first? or should I have a divider for selected and the other end have the options? Open to suggestions.

enter image description here

Thanks @Danielillo for the mock up

Improve this question

2 Answers 2

Reset to default
1

Your idea of making the selected item first only adds any value if it allows people to compare their current choice with the other available options. Otherwise this shifting and reordering of items is only going to be confusing and annoying. Here's an idea of how other available items can be compared with the currently selected item:

enter image description here

Improve this answer
0

First of all, I like the design but I do feel like you can check multiple colors because of the checkbox. Even though your image doesn't look wrong to me, the saturation of the border color might look too dull. You could try lime green or light blue with the green check that is centered on the badge.

You could check out this source for a better understanding of radio buttons, which I think is the right way to select a profile badge. Radio Buttons: Select One by Default or Leave All Unselected?

Yes, the first item should be selected as default according to NN group

The main guideline for radio button design is to select one of the radio buttons by default (i.e., when the page loads, in the case of a web application.) This is good usability and elegant design.

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.