0

The Ask:

Working on a problem where I have to be able to select/enable various levels for an individual item (box).

enter image description here

Perhaps what I have is not that bad. Issue is there might be 10+ items (box) in the list, so I feel this would be clunky to drop down the items to config for each item.

Wondering if anyone has run into this type of UX before. I was also contemplating to maybe be able to click the level circles and they can toggle between nothing (white), Blue or green.

I do think, however, this is not intuitive and some discovery would be needed. I don't think I am a fan of that. But let me know your thoughts.

Basic UX flow:

  1. You would add the "item" to the list, all levels would be unselected (white)
  2. Now I need to config the item to have 2 blue, 3 green

Restrictions

This is already on an edit page, so I cannot toogle an edit mode where the dots change to say checkboxes.

Edit: This is for a training app: So Levels are just different difficulty of questions in this item. Green we can say is regular daily training, and blue we can say is some type of onboarding. That help?

Improve this question
4
  • More context needed. What are the colors, levels, and how do they relate to the persons?
    – mattsven
    Commented Apr 16, 2018 at 23:31
  • Updated the post. Thxs for reading!
    – Destructo
    Commented Apr 17, 2018 at 12:46
  • Is sequence of states and numbers in sync? I.e., will all/any whites be first, followed by blues, then greens e.g. WWWBG, WWWWG, BBGGG – or mix-and-match e.g. BGBWW etc.?
    – jensgram
    Commented Apr 18, 2018 at 8:45
  • It is a semi-sync I would say. You would never have WBGBB, it will always be an order of BGGWW, or GGGWW, or BBBBW or GWWWW, BWWWW. The basic thinking is: Only Level 1 Level 1 to 2 Level 1 to 3 Level 1 to 4 Level 1 to 5 I hope I am explaining it well enough. It's a difficult problem, well for me anyway.
    – Destructo
    Commented Apr 18, 2018 at 13:15

2 Answers 2

Reset to default
1

I do not realy understand, what your UI is made for. I suppose it is some kind of administration tool, in which someone sets these levels.

Your solution has some issues. Usualy in a popup there is no interaction or maybe one CTA that executes an action an closes the popup. In this case the popup has to stay open. What is missing is some kinde of "close" oder "done" button to close the popup. Another issue are the checkboxes which abviously should be radiobuttons since only one color can be applied.

I prefere your idea to click on the levels to change the color. But your right, that this would have to be learned. If users do not use your application regularyly this might not be an option. So i came up wiht this Idea: enter image description here

This way it is possible to directly interact with the item and visually give a hint to the user what is possible.

Improve this answer
1
  • Thanks Bruno! Yes this is an administrator tool and someone will set the levels to the item. Yes - there is no close mechanism ATM, but I do not think it is a radio button paradigm b/c you can select one to many items. Thanks for the solution, I do also like the idea of being able to interact with it directly. Your solution has sparked some ideas. thank you!
    – Destructo
    Commented Apr 17, 2018 at 16:27
0

Can you simply try like below screen?

Here I am showing levels like toggle radio buttons in Edit Mode. In view mode I am displaying selected Levels.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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