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

Assigned To

None

Authored By

	ECohen_WMDE
	Nov 25 2021, 10:34 AM

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

Details

Subject	Repo	Branch	Lines +/-
Remove redundant/conflicting ARIA label in template dialog	mediawiki/extensions/VisualEditor	master	+0 -2
Copy search indicator code to MWTemplateTitleInputWidget	mediawiki/extensions/VisualEditor	master	+32 -0
Add placeholder for finding a template	mediawiki/extensions/VisualEditor	master	+5 -1
Set search icon on template placeholder search	mediawiki/extensions/VisualEditor	master	+2 -1

Customize query in gerrit

Event Timeline

ECohen_WMDE created this task.Nov 25 2021, 10:34 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 25 2021, 10:34 AM

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.Nov 25 2021, 11:25 AM

ECohen_WMDE updated the task description. (Show Details)

ECohen_WMDE added projects: VisualEditor-MediaWiki-Templates, WMDE-TechWish.

ECohen_WMDE moved this task from In preparation to Ready for pickup on the WMDE-Templates-FocusArea board.

ECohen_WMDE updated the task description. (Show Details)

ECohen_WMDE added a subscriber: Lena_WMDE.

Lena_WMDE updated the task description. (Show Details)Nov 25 2021, 11:30 AM

Lena_WMDE updated the task description. (Show Details)Nov 25 2021, 11:34 AM

Maintenance_bot added a project: VisualEditor.Nov 25 2021, 11:45 AM

Lena_WMDE added a project: WMDE-TechWish-Sprint-2021-11-24.Nov 25 2021, 2:13 PM

Lena_WMDE updated the task description. (Show Details)

ECohen_WMDE moved this task from Ready for pickup to In sprint on the WMDE-Templates-FocusArea board.Nov 25 2021, 2:23 PM

( timeboxed )

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

WMDE-Fisch claimed this task.Nov 26 2021, 8:57 AM

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

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

gerritbot added a project: Patch-For-Review.Nov 26 2021, 10:32 AM

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

WMDE-Fisch moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2021-11-24 board.Nov 26 2021, 10:43 AM

@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.

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.
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.

WMDE-Fisch moved this task from Tech Review to UX/PM Review on the WMDE-TechWish-Sprint-2021-11-24 board.Nov 26 2021, 2:41 PM

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.

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

In T296465#7531268, @awight wrote:

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.

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.12; 2021-12-06).Nov 26 2021, 4:00 PM

Change 742157 merged by jenkins-bot:

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

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

WMDE-Fisch removed WMDE-Fisch as the assignee of this task.Nov 29 2021, 8:09 AM

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 :-)

ECohen_WMDE updated the task description. (Show Details)Nov 29 2021, 3:41 PM

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 closed this task as Resolved.Dec 7 2021, 9:21 AM

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

Change 742115 abandoned by WMDE-Fisch:

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

Reason:

Not relevant anymore, cleaning up.

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

Maintenance_bot removed a project: Patch-For-Review.Feb 3 2022, 11:10 AM

Change 870890 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Remove redundant/conflicting ARIA label in template dialog

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

gerritbot added a project: Patch-For-Review.Dec 22 2022, 2:07 PM

Change 870890 merged by jenkins-bot: