Page MenuHomePhabricator

Make the Query builder popup less intrusive
Closed, ResolvedPublic

Description

Problem:
The popup on the Query Service UI that encourages people to visit the Query Builder is too intrusive. We want to remove the gif from it.

Screenshot:

image.png (483×810 px, 42 KB)

Acceptance criteria:

  • gif from the popup is removed and the text stays

Event Timeline

I think it would be more consistent to not have a popup on hover at all. None of the other menus/buttons do that.

But yes, please do something about this. I've hidden the popup entirely for myself (.dropdown-menu.query-builder { display: none !important; } in the user CSS extension I use) but that doesn't help when watching videos where other people are writing queries.

Mahir256 renamed this task from Make the Query builder popup less intrusive to Make the Query builder popup less intrusive.Nov 21 2021, 2:46 AM

Yeah I've noticed this being irritating as well. Let's do something about this.

Hey @Abbe98, thanks for creating this ticket. Your point makes a lot of sense and I've been thinking on how to improve the situation.

Your first suggestion, disabling the popup for people who prefer reduced motion makes a lot of sense. Maybe we could display a regular tooltip instead in those cases, so this group still has the opportunity to understand what the QB is.
Your second suggestion, adding a delay to the popup, would defeat the purpose of the popover, since usually people don't linger over buttons in hopes that after a while some additional information will be displayed to them. I understand, that as an experienced user it is irritating to see the popover every time, and the information inside becomes obsolete.

Depending on the engineering resources, my suggestion would be to add an option to the popover to disable it from showing further for those who don't wish to see it any longer. Something along the lines of "don't show this again". Alternatively we could maybe disable it automatically after it was shown x-amount of times.

I would discuss our options with Lydia and engineering to see which ones are feasible.

Thanks again for bringing this up!

After talking with Lydia, we decided that as a first step we will remove the gif part of the popover and leave the descriptive text as a sort of extended tooltip to try to marry the interests of both user groups. Let's see if that is perceived as less intrusive, and if not, we can continue talking about other alternatives.

Lydia_Pintscher updated the task description. (Show Details)
Lydia_Pintscher moved this task from Incoming to Product Backlog on the Wikidata Dev Team board.

@Sarai-WMDE Once the GIF is removed, the popup becomes more narrow, it ends up looking kind of cramped, imo. What do you think?

query-builder-popup.png (255×218 px, 15 KB)

Yes, definitely the width should be adjusted to make the content readable. We could simply change the min-width of the dropdown menu to 25em (It's generally a good idea to use relative units to size text containers, although I think fonts in that page are specified using pixels :-/)

Regarding the gif: would it be a good idea to still provide a 'fixed' preview of the Query builder? We could include simple image, like:

Group 4 (1).png (1×2 px, 169 KB)

What do you think @Lydia_Pintscher and @Abbe98?

That'd also be ok for me. No strong preference either way.

Smaller is better. Three short sentences, no graphical distraction.

The failure mode for users who just want to use WDQS and not the Query Builder, is that when moving the mouse from the top of the screen down towards a target in the query, accidently triggering the mouseover popup obscures the target to which the mouse was being moved. Making the popup larger - which seems to be being discussed here - exacerbates its problem. Whether or not the obstructive popup has an animated gif or not is, for me, beside the point.

Thanks for the clear feedback @Tagishsimon. Looks like we should not only limit the size of the dropdown menu, but also get the popup further out-of-the-way. We could do that by reordering the buttons:

Screenshot 2022-12-06 at 10.37.49.png (1×2 px, 197 KB)

Change 865051 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[wikidata/query/gui@master] Remove GIF and adjust styles on Query Builder popup

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

Change 865051 merged by jenkins-bot:

[wikidata/query/gui@master] Adjust query builder button and its popup

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

Change 865584 had a related patch set uploaded (by WDQSGuiBuilder; author: WDQSGuiBuilder):

[wikidata/query/gui-deploy@production] Merging from 319bd6f39d3482a25fe01bdde766df7f1cc92f40

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

Change 865584 merged by Lucas Werkmeister (WMDE):

[wikidata/query/gui-deploy@production] Merging from 319bd6f39d3482a25fe01bdde766df7f1cc92f40

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

I'm not sure what happened here, the original description is gone and the solution isn't even related.

The popup is still intrusive in the same exact way as before even for people requesting reduced motion.

https://gerrit.wikimedia.org/r/c/wikidata/query/gui/+/772907

Hey, @Abbe98. Charlie justified the changes done to the original ticket description in the following comments: https://phabricator.wikimedia.org/T296135#7548801, https://phabricator.wikimedia.org/T296135#7549054

If, as you mention, the popup still intrusive, I believe we should re-evaluate applying your original suggestions.

I wonder what you think about her idea to:

add an option to the popover to disable it from showing further for those who don't wish to see it any longer. Something along the lines of "don't show this again".

Hey, @Abbe98. Charlie justified the changes done to the original ticket description in the following comments: https://phabricator.wikimedia.org/T296135#7548801, https://phabricator.wikimedia.org/T296135#7549054

The suggestions aren't implemented, so I don't see how it justifies closing the ticket.

add an option to the popover to disable it from showing further for those who don't wish to see it any longer. Something along the lines of "don't show this again".

Rather than trying to bate the issue with "don't show it again" buttons, or disabling it for motion sensitive users, could one eliminate the need for the popup by giving the button a descriptive label?

The suggestions aren't implemented, so I don't see how it justifies closing the ticket.

It looks like the scope of the original task was adjusted, as explained in the second comment linked above (https://phabricator.wikimedia.org/T296135#7549054). I see that you weren't pinged on that one. It would probably have been a good idea to either create a separate ticket or to consult you before changing the scope of this task and its suggestions/acceptance criteria. The latest changes meet the current acceptance criteria of this ticket, that's why closing the task was justified.

If we want to continue working to make the popup less intrusive, it might make sense to open a new task that collects the original description and the new solutions being pondered here. If that sounds good, I'd be happy to go ahead and create it, so this task's history doesn't get too complicated. Let's see what @Lydia_Pintscher also thinks.

Rather than trying to bate the issue with "don't show it again" buttons, or disabling it for motion sensitive users, could one eliminate the need for the popup by giving the button a descriptive label?

Button labels should remain as concise, clear and direct as possible, so providing a proper explanation of what the Query Builder with that in mind sounds unlikely. At this point, I'd say we should consider the following approaches. They all are depending on whether the original solution (displaying the button) was considered long term or only temporary:

  1. Adding an (probably temporary) explanatory message or description with a link to the Query Builder (links are also a better alternative to communicate navigation):

Group 424 (1).png (1×2 px, 85 KB)

(Note that this would require some responsive specification to make the solution work in smaller screen sizes).

  1. More than a year after its release, it might be ok to list the Query Builder together with the other tools. We could still indicate some novelty using an icon or emoji. This solution could be combined with number 1.

Screenshot 2023-01-05 at 11.17 1.png (1×2 px, 114 KB)

  1. In case the original idea was to make the 'Query builder' button permanent in the Query service header, then I'd say that providing the popover and an option to 'Do not show this again' is rather the win-win solution: the potential intrusion only takes place once, and the popup is discarded once its function (informing users) has been accomplished.

Personally, I like approach 2. I’ll also point out that we’re still showing this banner to all first-time visitors, which kind of covers approach 1:

image.png (145×1 px, 29 KB)

Lydia and I have discussed a fourth option:

Removing the pop-up altogether and renaming the button "Visual Query Builder".

We think the first option recreates the banner which seems like doubling up.

The second option buries the Query Builder a little too much, we still want to make it easy for people to find it.

The third option requires the user to dismiss twice, and the pattern to close a box that appears when hovering seems like an unusual pattern.

What are your thoughts on this?

Thanks Arian, Lucas and Lydia! Given the existence of the banner mentioned by Lucas (which I wasn't aware of when providing suggestions) I think that just keeping the current button and removing the popup makes sense.
Regarding renaming, I feel cautious about it: does that imply a rename of the tool? Otherwise, we'd be introducing a slight inconsistency.

I guess we could also stick to Query Builder for the button. Adding the "visual" I thought might help a bit in understanding what's behind the button but no strong feeling either way.

@Arian_Bozorg Ok let's go with changing it to a button only and go with "Query Builder" as the copy. Can you create a new ticket for that?

Hi all,

I am going to close this ticket as the acceptance criteria has been met.

But I have created a new ticket here to remove the pop-up altogether: T326960