Tag List behavior UX issue

[gabrieldutra]

Hello,

I don't know if I was the only one with this issue and not even if this is the best place to discuss this (please let me know)...

I loved the tags feature, it makes a lot easier to search for queries, but I only figured out I could select multiple tags (using Shift) when I looked at the code. I'm now trying to think about an improvement that could be made for this, for example:

• Make the selection of multiple tags to be the default behavior;
• Add a note on the page for the key, sth like Hold X to select multiple tags;
• Add Ctrl key as well since it is the default key to select multiple things on Non-Mac computers

Well, what do you think? I can open a PR depending on the conclusions for this...

Illustrative Gif

Thanks! 😁

[arikfr]

Thank you for this feedback!

I think that showing a small notification hinting at the option to select multiple values with Shift makes sense. It should be showed only once to each user (I guess we can start by storing state in localStorage).

@kocsmy what do you think?

[kocsmy]

Thanks for the nice suggestion @gabrieldutra - love that you even created a GIF for demonstration!

@arikfr I kinda like this option more: "Make the selection of multiple tags to be the default behavior;" — it's very fail safe as you can just keep clicking and learn how it works after just 2-3 clicks. This would also keep the interface clean as we don't need to add a hint for this.

[arikfr]

"Make the selection of multiple tags to be the default behavior;"

The reasons not to do this is:

1. It makes it harder to select a single tag (you need to click on the previous one you selected again), which is the more common case.
2. It's an unnatural interaction. Most interfaces I can think of where you can pick items, the default is switch to the next one unless some key combo is used (think file selection in Finder for example). Although I might be wrong (just couldn't find enough examples).

We could switch to a different interfaces, where each tag will have a checkbox next to it (to indicate if it's selected). To select multiple tags, you can use the checkbox. But if you click on tag name, it will select only this tag.

[kocsmy]

Hm, thanks for the feedback.

I don't know, I think the learnability is extremely quick, we provide a crystal clear indication about the selected items plus you can go back in no time.

It does not feel unnatural for me. I don't want to introduce checkboxes here, it feels a bit too much; the blue indication on the left should be enough.

I think both arguments are valid and I understand why you think it's unnatural.

By the way regarding this: "Add Ctrl key as well since it is the default key to select multiple things on Non-Mac computers", for Mac users, the go-to key for this would be Cmd, why did we pick Shift? :)

[arikfr]

By the way regarding this: "Add Ctrl key as well since it is the default key to select multiple things on Non-Mac computers", for Mac users, the go-to key for this would be Cmd, why did we pick Shift? :)

I think the Shift semantics came from selecting areas in apps like Photoshop, where you hold shift to add to the current selection. But I'm not sure.

---

Just saw in Notion a way to show this hint in a subtle way: (sorry for the low quality)

1. When the user interacts with the drag control, nothing shows up.
2. But if you pause for a moment on the drag control, it shows a hint on additional options.

[gabrieldutra]

I'm almost sure Photoshop does it with Shift (and also some other graphic design softwares). Anyway, I don't see a problem in having both keys working.

Another suggestion that I was thinking and discussed with an UX dev I know is that maybe the solution for this is to do something similar to e-commerces and use checkboxes.

Another illustrative image - Walmart page