Page MenuHomePhabricator

TagMultiselectWidget: Tag possibly hard to differentiate from button?
Closed, ResolvedPublic

Description

Tags might be hard to differentiate from buttons.
How different should a tag be from a button? A button is a rectangle with a label, a dropdown is a rectangle with a label + a triangle/chevron, a tag is a rectangle with a label and an "X". Which is the problem? Which is the expected confusion for the user?
Also, tags should at best work in all varieties of TagMultiselectWidget, within an input field, as standalones in outlined MenuTagMultiselectWidget.


Examples for different tag treatments at T149391: Build user interface for Active Filter Display Area by @Pginer-WMF

Tags-add-variations.png (961×768 px, 116 KB)

Event Timeline

Volker_E triaged this task as Medium priority.Dec 20 2017, 3:20 AM
Volker_E created this task.

When fiddling around with current appearance of TagMultiSelectWidget, as of v0.27.1, I've tried to pick up the rounded version one more.
It

  • provides a good visual contrast to standard button and dropdown appearance,
  • is able to address the current over-emphasis of the close button element per tag

Additionally it works fine with the most prominent use-case of Special:RecentChange Filter and its extended interface element:

image.png (506×2 px, 153 KB)

Inputs, @Pginer-WMF?

Similar treatment for AdvancedSearch:

image.png (578×1 px, 108 KB)

Inputs, @Pginer-WMF?

The approach looks good to me.

I don't think that there is an issue with rectangular tags being confused with buttons, and I'd expect both rounded and rectangular tags to work well in terms of users recognition and manipulation.
Having said that, given that tags appear inside other controls, the rounded version makes them look as if they had more space around. This makes the controls less cluttered overall. So I'm in favour of trying the rounded version.

Change 437630 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Apply distinct “pill” appearance to tags

https://gerrit.wikimedia.org/r/437630

If you're really going to change the design of tags, I'll just mention one very nitty-gritty thing that a user suggested.

For the New Filters, he requested that we put the actionable "X" on the left instead of the right. His reason for this request is that the left-side position is predictable, while the right isn't because it depends on the length of the tag label. This means that anyone closing multiple tags can't just keep their finger in one place and click, click, click while the tags all shift over.

He has a point, though I don't know whether it's a very important one. On New Filters, for example, anyone making big changes in their settings is liable to use the trashcan to start over. And unless you're getting rid of all the tags, then you'll probably have to move your finger around anyway, since they are in no logical order. And I don't know whether there is a standard about whether close x's go on the right or left.

But, on the other hand, we really don't know how many filters users typically use. It's possible that the addition of Category filters will encourage more folks to add lots of tags, as they add in all the sub-categories that they'll need to to make the search meaningful.

So, point delivered. Feel free to take it into account or not.

Change 437630 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Apply distinct “pill” appearance to tags

https://gerrit.wikimedia.org/r/437630

I forgot to say, i like the rounded versions as well (though I'm not certain there was any problem with the old design).

The approach looks good to me.

I don't think that there is an issue with rectangular tags being confused with buttons, and I'd expect both rounded and rectangular tags to work well in terms of users recognition and manipulation.
Having said that, given that tags appear inside other controls, the rounded version makes them look as if they had more space around. This makes the controls less cluttered overall. So I'm in favour of trying the rounded version.

+1 to rounded corners as well. Per our discussion offline, I particularly like @Pginer-WMF's mock F6563000 with the smaller, lighter coloured close 'x' icon, which has more clearance space with the tag/pill/token/chip text.

@jmattazoni Thanks for the input. This would already be possible as an override.
But I would like to hold on a moment and take this input with a grain of salt.

  1. We would change a learnt pattern featured elsewhere in our interface: The close/remove elements are in LTR environment often right-aligned.
  2. There are other possible use cases, where we not only feature a label but maybe also an icon in the tag and then you'd need to switch to (close icon - tag label - tag icon), which seems as a counter-intuitive approach, see this layout.
  3. You've said yourself, it's not clear how important the delete functionality is. This is the crucial point for me. I don't see it as important either. If mass-deleting of tags is a thing, why are so many tags wrong and why is re-ordering the close icon position really the way out? Also issues could emerge like you might suddenly removed two tags instead of one, as you too easily clicked twice.

Therefore I wouldn't follow-up on this without clearer problem definition and evaluation.

@RHo We've merged the patch in today's release of OOUI. The close icon got smaller, I didn't take more opacity, as it's already 12x12px). But it get's an additional :hover treatment now.

thanks @Volker_E - looks great! Is there also going to be an ability to toggle focus separately between the tag and the close icon?

@RHo By 'focus' I assume you mean keyboard tab focus functionality: Not in current way. There might be a workaround possible, although it will be quite a hacky one. We shouldn't forget that when the tab is focused, it's possible to delete it by pressing 'delete' already, see updated demos.

image.png (140×766 px, 29 KB)

I would like to throw in, that tabbing through tag+tag close button might slow down tabbing massively on a big number of tag items per widget. Not an improvement in my opinion.
Or did you point at another kind of focus?

Jdforrester-WMF added a subscriber: Jdforrester-WMF.

This was released in OOUI v0.27.2, which will roll out with MediaWiki 1.32.0-wmf.8.

@RHo By 'focus' I assume you mean keyboard tab focus functionality: Not in current way. There might be a workaround possible, although it will be quite a hacky one. We shouldn't forget that when the tab is focused, it's possible to delete it by pressing 'delete' already, see updated demos.

image.png (140×766 px, 29 KB)

I would like to throw in, that tabbing through tag+tag close button might slow down tabbing massively on a big number of tag items per widget. Not an improvement in my opinion.
Or did you point at another kind of focus?

Gotcha, I did mean keyboard focus. Think your explanation that having one focus makes sense, with 'delete' removing the token, and and pressing spacebar to 'open' it editing in cases where it is possible for the user to assign filter values into a token.