Page MenuHomePhabricator

Change magnifying glass icon to hamburger in RC Filters search bar
Closed, ResolvedPublic

Description

In testing, some users have had trouble at first finding the main filtering dropdown. Part of the problem seems to come from the fact that they don't all think of themselves as searching, per se, for changes. So they don't click into the search bar.

To make it more apparent that clicking in the bar will produce a menu, we will switch the magnifying glass to a hamburger menu when the filter panel is not shown, keeping the search icon when any filter panel is open in order to invite users to search.

To see how this works in action try it live in this prototype

Mockups

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 2 2017, 11:02 PM

@Pginer-WMF, please show a design and provide the icon graphic, if necessary. Then please go ahead and move this to RFP. Thanks!

After making an initial exploration (F8377668), the "hamburger" menu icon felt a bit disconnected from the "active filters" and feels a bit strange as an input indicator. I'd recommend using the plus ("+") icon instead. It emphasises the main path to add more filters without the expectations of general search, while not feeling out of place to be able to type next to it.

Here is a preview of how it would fit with some of the other changes under discussion:

jmatazzoni added a comment.EditedJun 5 2017, 11:53 PM

The "+" doesn't solve the problem for me, for a few reasons:

  1. I have to say to begin with that the "+" pattern does not feel familiar to me. I'm sure I've seen it, but I can't think where. As an "icon," it's very low-key, since it's also a character. To the extent it means anything to me, it means "you can add stuff here." But that's not the problem we're trying to solve, IMHO.
  2. The problem we're trying to solve, in my view, is that some users don't know where to find the many cool tools that will get them started. Opening the main menu is the primary starting point for this workflow. It's critical. I'm back to this exchange, with user #4: Daisy: “Why did you never focus on the ‘Filter recent changes” box? Subject:” It looks like a search box." This user, and others I've observed, don't think of themselves as being engaged in a "search." So a plus that tells them "you can add stuff here" won't be of interest. It's not what they're looking for. We need something that clearly indicates "click here to get started with the main tool menu."

I looked at the mockup you linked above and find the hamburger very effective. It makes me want to click on it. That or the down-arrow could work well.

I think the difference we may be having is that you think of the search bar as a place where users are adding "input." And it's cool that advanced users can type in the bar and go straight to what they want. But I think the much more obvious and critical thing that happens here, that needs to happen here, is that users need to discover the menu. "Searching" in the sense of typing in terms is more of an advanced function that users will discover as they go along.

I think the difference we may be having is that you think of the search bar as a place where users are adding "input." And it's cool that advanced users can type in the bar and go straight to what they want. But I think the much more obvious and critical thing that happens here, that needs to happen here, is that users need to discover the menu. "Searching" in the sense of typing in terms is more of an advanced function that users will discover as they go along.

Searching or getting a menu is something that happens after the user access the entry point. While being consistent with what happens after may be desirable, I agree that the main priority is on the discoverability of the entry point that happens before the user clicks.

What I really want is to tell users something about the filters and the effect of the action they will be doing. In this case adding filters. Using a "menu" icon because filters are presented in a menu is like showing a "dialog" icon to announce something will be presented in a dialog, it focus more on the means than the goal. What I am afraid is that the "menu" icon may work well if you already know about the filter panel, but not when you have no idea what to expect behind that icon.

I agree, you click the input and open the menu to add a filter tag; the fact you can also search and filter the menu items is secondary.

I tried a more direct language for the "+" option in this prototype. That should provide a clear entry point for someone with the intention to filter the results further.

jmatazzoni added a comment.EditedJun 6 2017, 5:00 PM

Using a "menu" icon because filters are presented in a menu is like showing a "dialog" icon to announce something will be presented in a dialog

I don't understand this point. The downward arrow is a standard way to say "there's more behind this element." The hamburger menu is another pretty common way to say that. So I'm not sure why we're working so hard to invent something different. The other thing this design does not do for me is clearly indicate where the user should start their explorations.

In fact, now that I really look at this, I would predict pretty strongly that a lot of users (who, according to my theory remember, are looking for a tool menu, not an entry box) will click first on the Advanced menus at right—because they look like something you can click on. Which is to say, I think that removing the Advanced Filters button—an idea I support—has created a new problem. Before, the Advanced button made it clear that there was someplace else which was not Advanced—a main menu (somewhere). Now, the Advanced menu could easily be taken for the Main menu.

So, in a sense, now we have two issues to solve: 1) to tell people how to pop the main menu, and 2) to tell people "this is where you start."

Using a "menu" icon because filters are presented in a menu is like showing a "dialog" icon to announce something will be presented in a dialog

I don't understand this point. The downward arrow is a standard way to say "there's more behind this element." The hamburger menu is another pretty common way to say that. So I'm not sure why we're working so hard to invent something different. The other thing this design does not do for me is clearly indicate where the user should start their explorations.

My point is that telling users that there is "more" or "a menu with some options" is not telling them much about what the additional content or the options are about. What I'm trying to find is a concept that is more meaningful in terms of what they will find (filters) or what they will be able to do ("add filters"). I think the "plus" works to explain how to add more of the tags that appear on top, and plays well with the advanced filter icons that also rely on the plus sign.

Having said that, I don't thing that being generic is terrible, and I'm ok to experiment with it. I just wanted to make it clear what I think we lose by not being more specific.

In fact, now that I really look at this, I would predict pretty strongly that a lot of users (who, according to my theory remember, are looking for a tool menu, not an entry box) will click first on the Advanced menus at right—because they look like something you can click on. Which is to say, I think that removing the Advanced Filters button—an idea I support—has created a new problem. Before, the Advanced button made it clear that there was someplace else which was not Advanced—a main menu (somewhere). Now, the Advanced menu could easily be taken for the Main menu.

I don't think that in either of the two previous rounds of research we found strong discoverability issues to expect lots of people not finding their way through the filters. I think we've seen indications that users don't perceive the process as searching for a set of contributions, and we want to make the entry point more actionable.

So, in a sense, now we have two issues to solve: 1) to tell people how to pop the main menu, and 2) to tell people "this is where you start."

I think the problem we frame differently is (1), since I don't think users are looking necessarily for a "menu" they don't know it exists yet, but for a way to filter the list of contributions further.

Pginer-WMF updated the task description. (Show Details)Jun 12 2017, 8:09 AM
Pginer-WMF updated the task description. (Show Details)

Change 359508 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Change the input icon on interaction

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

Change 359508 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Change the input icon on interaction

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

Checked n betalabs and wmf.7

QA Recommendation: Resolve

jmatazzoni closed this task as Resolved.Jul 3 2017, 3:06 PM