tags? pills? chips? buttons? the "all look alike hell"
So in my company we are developing a design system, one thing that bothers me a lot is the "chips" or "pills" design in the way it's applied on multiple design systems (culture amp, ant design, atlassian etc.), the thing is:
labels/pills/chips in most design systems can be clickable or not, and that's documented in those DS's as a normal behavior but for me as a user it make absolutely no sense, how can you have the same visual element being interactive or not in your page without any other clues of that? the user is supposed to guess when they can or cannot click something? I'm missing something here or there are really a lot of big companies doing it wrong?
How are you people handling this, I see a lot of difficulties making those kind of components usable, here on discord we have "tags", I think they font-size is a little to small to be readable but if they get bigger they will look too much like the "post" button, other thing... Sometimes, specially when people call them "chips" and not tags, they can behavior like a radio button (only one option selectable) or a checkbox (multiple selection) and to know if you can select one or more you have to... guess.
Have you worked with those? what rules did you used? can you point good examples of those things?
4 Replies
I have worked with pills/tags/chips... And have had the same issue as you about conveying the interactivity of an element.
As a rule of thumb, as a dev, I try to have interactive things react to hovers (and mandate that they react to focus with a keyboard) with a dedicated style (you can look up focus style guidelines to see if your design system is accessible or not). Elements that don't have any attached actions don't have focus or hover styles.
As a user I use context to guess if something is interactive or not. Like "[new]" on a blog post doesn't call for any action but "tags : [new]" does infer you can filter by tag by clicking on one. (Tho it's not always the case)
nice to know I'm not suffering alone 😆
I was observing google use of things like that and another thing I saw they doing is add non clickable tags inside clickable areas that the user already know, like in gmail the "email" row has a "new" tag, but you know the click in the row will open the email, they do the same in the tag, I'm not sure if I like it, it's just an observation.
about the focus, it's a pretty good indicative and I'm really aware of focus in UX and a11y, but the big problem here is that a significant part of the users are on mobile/touch devices, and on those devices we can't rely on focus/hover to give things meaning 😦
being honest I think those things should be separated, we should (in a design system) choose one style for clickable and one style for not clickable and use it everyone so the user don't need guessing
also the minimum clickable area 48x48 is often not respected when using tags/chips
now I'm seeing it everywhere, it's like a curse hhahaha
this is github labels, the height of the clickable area is 18px, they almost touch each other making it even harder
more on github, are those "blue version numbers" clickable? the doubt is so bit that the table header had to literally have "(click for changelogs)" written on it
