Best way to make an "easy, medium, hard" picker

by Denver Dang   Last Updated July 11, 2018 21:16 PM

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.



Answers 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.

user3221
user3221
July 12, 2018 05:12 AM

Related Questions



Creating a finite state machine / dynamic form

Updated June 12, 2015 08:07 AM

Where did i go wrong with my website?

Updated February 17, 2018 20:16 PM

Code Reusable Prototyping Tool

Updated March 28, 2016 08:06 AM

Feature Information

Updated April 01, 2016 08:06 AM