2

I'm trying to create a website where you can get questions based on different settings. One setting is difficulty. For now, let's just assume that I have divided a lot of questions based on difficulty: Easy, medium, and hard.

Now, what I want the user to be able to do is to pick whether a certain question should have the difficulty easy, medium, or hard. However, they should be able to choose several. So if they want easy and medium question, they should be able to choose both, or easy or hard for example. So in principle this should be check boxes. My main concern, UX wise, is that "easy, medium, and hard" pickers are often either one of them, so either easy, medium, or hard. Not multiple at the same time. Also, I wish to be able to do this in one line, so it should be multiple lines, and it should of course be accessible for mobile devices as well.

I was thinking of just making three buttons of some sort. But does that really indicate that all three can be pushed at the same time, or only some of them ? Should the buttons be connected, and not be separated. I'm really just wondering how to make the best mobile friendly option of choosing multiple difficulties.

Improve this question
5
  • 1
    There are quite a many related questions that can also help: ux.stackexchange.com/search?q=is%3Aquestion+select+multiple
    – locationunknown
    Commented Jul 12, 2018 at 5:28
  • 3
    Wouldn't a simple check box suffice? It'd indicate you can select more than one. A button would imply only one can be active at once, as that is how it's usually used (primary choice). Adding a label that tells you you can select more than one can also help.
    – Wendy Wojenka
    Commented Jul 12, 2018 at 14:09
  • If all three are preselected it might be easier for the user to understand that they can be selected independently
    – filip
    Commented Aug 11, 2018 at 18:17
  • 1
    Note that "checkboxes" is a noun, "check boxes" is an action.
    – Acccumulation
    Commented Sep 10, 2018 at 18:20
  • Choosing easy and hard makes no sense at all from a logical viewpoint.
    – clankill3r
    Commented Aug 30, 2020 at 19:51

2 Answers 2

Reset to default
1

The case from real website, Codewars:

Codewars difficulty selector

It is nice, because the tooltip shows on hover, attracting my eyes and making me read it. It is easy to use - I click the left button of my mouse, hold it down, and move the mouse.

It isn't nice, because it's not really the usual way to interact with anything, no matter how comfortable it becomes after the first time.

Also, it does not work on mobile (I guess nobody uses this website on mobile, it's for coding), but applying the same behavior - dragging to turn the option on / off and enriching it with simple taping would do the job.

Improve this answer
0

I got curious why would you select the extremes, i.e. easy and hard questions leaving the medium out? Intuitively I'd expect to actually narrow down the range between easy and hard to something in between.

If your intention is to narrow the range down, I'd use a double-marker slider with some sort of range indication. Should you insist on outside range, simply add "Invert range" checkbox like in the second example:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
2
  • 1
    I think range sliders like this are best left for numbers that have concrete intervals inbetween. In this example it's practically impossible to let the user know what they have selected as the range between easy and medium is undefined, how are they to know if they want questions 20px past easy or 50px past easy, and when they come back to the site how can they be expected to select the same level without some feedback or intervals saying "easy, easyish, half-past-easy, mediumish, medium", which obviously becomes a little...silly.
    – DasBeasto
    Commented Jan 8, 2019 at 13:35
  • @DasBeasto - you're correct, in principle, as long as the gradation is [Easy; Medium; Hard] only. If the OP defines the question's difficulty as a score between 0 and 100 (with all integer values possible), then ticks, auto-snap and balloon (tooltip) can present the exact value of the slider.
    – Mike
    Commented Jan 8, 2019 at 14:50

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