0


I have some kind of modal where I need to show dates (each one is representing an object). Every date can be set as valid or invalid. I'm wondering how the UI should look like. I'm thinking about two options:

  • radio buttons:
    enter image description here
  • transfer list:
    enter image description here
    I am not sure what is the best solution here. Of course I am open to any other ideas. Any advice form the UX point of view? :)
2

Analysing both examples what I can say from an user perspective to perform the action it will take:

  • 2 clicks using radiobuttons. One click to select the radiobutton and one click to 'Save/Confirm' the action.

  • 3 clicks using the second option. One click to select the element, one click to 'move' it to the other container. And finally a third click to 'Save/Confirm' the action.

Looking at this, I would go to the radiobutton option. However, I would like to suggest other options for the same problem.

First, I would like to know the number of elements that you could list. Are they many? If so, maybe a scroll bar would be a good option. Not the best to be used in a modal, but much better than a pagination, in my opinion.

  1. Agreeing with Aaron about the use of switch buttons.

Switch buttons

  1. Using checkboxes. It's cleaner for representing two possible states that are exclusive.

Checkboxes

1
  • I thought about checkboxes also. But I think that is no perfect idea because as default I want to treat every date as valid so with checkboxes I would need to set a label 'invalid' and then checkbox true/false. It can be misleading a little bit. And answering to your question about the number of dates. There can be up to 40 dates here... Apr 7 '20 at 21:41
0

I like the radiobuttons much more! Its super simple and clear! Radiobuttons sadly aren't all that 'stylisch' so i would suggest making an on/off switch or something in that branch. I've put an example below, the way I would do it. Good luck!

enter image description here

0

Along with the already given answers, the switch would be a good for the situation. I'd like to contribute the following format as a way to style the selections. Selecting the valid dates assumes the non selected dates are invalid.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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