I'm making an app in which students can select topics/tags they're interested in, and get a randomly-generated quiz containing questions that have those tags/belong to those topics. For each selected tag, the user must also be able to explicitly specify the amount of questions with that tag that they want to see.

I'm having troubles finding a way of accomplishing this type of interaction in a way that looks good, is simple to use, and has a low interaction cost.

The way it's done right now is: the user is first presented with a list of available tags.

enter image description here

after clicking a tag, the list of tags is covered with a dark overlay and an input appears to select the amount of questions for that tag.

enter image description here

after confirming, the interface goes back to normal. Chosen tags are highlighted and display the selected amount next to them.

enter image description here

This short video better shows usage of the interface: https://youtu.be/jdwpB4hwlcg

Problems I have with it:

  • changing the amount for a tag requires un-selecting a tag, selecting it again, and inputting the new value
  • I don't really like the overlay but I don't know how else to convey the sense of the order of operations
  • this doesn't scale well with lots of tags, especially on mobile, where the user has to scroll down a lot just to reach the number input, only to jump back up to select the next tag.

What could be done to improve this design and bring a better user experience with it?

  • Is this just for desktop, or do you have mobile considerations as well?
    – Mike M
    Apr 28, 2022 at 20:00
  • It's mainly going to be used on desktop, but some users do access the app on a mobile device. So I'm trying to bring the best experience to both types of users
    – Samuele B.
    Apr 28, 2022 at 22:51

2 Answers 2


For me you should divide steps:

  1. searching tags
  2. edit quantity (quantity can be per default 1, or, add a validation when quantity is 0)
  3. You can use something similar this in input field, to allow user remove tags.

But the principal thing here, we don't know your users, validate with them, create a prototype.

form steps


I don't think the interaction is poorly resolved, but it could be simplified and avoid forcing the user to make unnecessary steps.

I would try:

  • When selecting a tag, it must have 1️⃣  exercise by default, which makes unnecessary the interaction of adding a single exercise.
  • Add the active state to the currently selected tag, to differentiate it from the selected state. In this way, each tag has three states: normal, selected, active:

enter image description here

  • The dark overlay of the tags area is totally unnecessary when there's 1️⃣  exercise by default after selecting a tag.
  • Having an active tag, the user can interact or not from the adding exercises field.
  • The exercise field would have only three buttons:
    • + add
    • - remove
    • x cancel, which means going back to 1️⃣  exercise

enter image description here

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.