Page MenuHomePhabricator

VE template search bar should look like a search
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

In usability testing less experienced users did not realize that the template search was a search field. It's currently the wrong widget and therefore missing the search icon, placeholder, and clear button once there is content. This is especially important because it can take the results a long time to load and if they are not aware it's a search, they don't wait for the results and give up.

Requirements

  • Show search icon in text field (same as OOUI SearchInputWidget (type=search))
  • Add placeholder "Find template"
  • No feature flag needed, can be deployed to all wikis immediately and should apply to both the old and new VE template dialog

Nice to have

  • Add clear button (same as OOUI SearchInputWidget (type=search))

Mock

Search widget.png (152×592 px, 17 KB)

Event Timeline

ECohen_WMDE renamed this task from [Draft} VE template search bar should look like a search to VE template search bar should look like a search.Thu, Nov 25, 11:25 AM
ECohen_WMDE updated the task description. (Show Details)
ECohen_WMDE updated the task description. (Show Details)
ECohen_WMDE added a subscriber: Lena_WMDE.
WMDE-Fisch set the point value for this task to 3.Thu, Nov 25, 2:33 PM
WMDE-Fisch added a subscriber: WMDE-Fisch.

( timeboxed )

Confirmed with Elisha that we want the full "SearchInputField" behavior including the clear action, if possible.

Change 742114 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Set search role and icon to template search

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

Change 742115 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Copy search indicator code to MWTemplateTitleInputWidget

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

thiemowmde added subscribers: Volker_E, thiemowmde.

@ECohen_WMDE, sorry to bring this up so late. I wasn't around when this was discussed.

I had a related discussion with @Volker_E in https://gerrit.wikimedia.org/r/704516 a while ago. As far as I got it the clear indicator should only be used for actual search widgets. This here isn't one, from a semantical standpoint.

  1. Do we really have situations where the user want's to clear this field? This is more relevant on an actual search results page when the user want's to clear their previous input and try something else. But we don't have this situation here. We never present the input field pre-filled with an older value.
  2. Whatever the user enters is used as-is. The fact that a suggester pops up doesn't make it a search, from a semantical standpoint. Otherwise we would need to mark other fields with a drop-down as "search" as well. We can still add the search icon here. No problem with that. But internally it's a title input and should be marked as type="text" for screenreaders and such.

In short: While we want to style this field, we shouldn't use OOUI's SearchInputWidget.

We might want to split this task or rename to focus on the follow-up work. The field now has a search indicator, which was the only "must-have" requirement in the original list.

image.png (187×632 px, 21 KB)

Change 742114 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Set search icon on template placeholder search

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

Change 742157 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Add placeholder for finding a template

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

We might want to split this task or rename to focus on the follow-up work. The field now has a search indicator, which was the only "must-have" requirement in the original list.

image.png (187×632 px, 21 KB)

Almost forgot about the placeholder ... see patch ;-).

Change 742157 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add placeholder for finding a template

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

I just checked on beta and think it's looking good! I would say that the icon plus placeholder is acceptable and we can drop the other requirements which would make it an exact match with the widget (clear button). In that case, I don't think it needs further UX review. Which column should this go to?

But internally it's a title input and should be marked as type="text" for screenreaders and such.

@thiemowmde Makes sense. Thanks for the additional information. I think where it ended up fits then. Even if it's not a classic search field, it's important that users are able to understand that they can put a search term in and find a template (they don't necessarily need to know the exact name). In testing multiple users were surprised when they started using it, saying afterwards "Oh, that's nice. I didn't realize it was a search field before." I think given that I'm still happy with this solution but appreciate the background and will keep it in mind for the future.

Moving to "done" because it's been looked at :-)

Maybe that was hasty. "Demo" then.

@ECohen_WMDE, thanks! One last sentence: We can still add the clear button if you want. A patch exists, just needs cleanup. However, from what you wrote it sounds like the main motivation to have the clear button was to make the field look like a search field, not because users actually need a clear button in this situation. I suggest to not add it, as argued above.

@thiemowmde Good to know. I think the clear button could have use in this situation but am fine to leave it out. I think the primary point of this ticket is complete

WMDE-Fisch moved this task from Demo to Done on the WMDE-TechWish-Sprint-2021-11-24 board.