Search: Update label and placeholder, consider suggesting terms

[jasmussen]

Site wide search currently looks like this on desktop:

and like this on mobile:

Outside of a few visual improvements (see also #368), we can improve the label and placeholder. A few suggestions from WordPress/wporg-main-2022#221:

• Replace "Search" with "Search in WordPress" on the mobile view, with the modal open.
• The placeholder can be more suggestive, perhaps suggest the most searched terms.

[bengreeley]

Suggesting terms may be a challenge at the moment, as the current search box uses Google's search Javascript code. I suggest we look into what negative side-effects reusing Google autocomplete will produce on the global website if the Google search scripts need to be loaded on each page vs only the search page.

We do have another project in the works to replace the Google search with Elasticsearch and that could introduce some flexibility for having a more-targeted, lightweight implementation of autocomplete in the global search if need be.

[ryelle]

Suggesting terms may be a challenge at the moment, as the current search box uses Google's search Javascript code.

This search box actually doesn't use google code at all, it's just a search that redirects to the google results page. Actually, it's a core search block, so really nothing fancy :)

Anyway, if we wanted to allow some basic suggestion function, maybe a datalist? Since it's a native HTML feature, no JS required. It would need a set list of maybe 5-10 suggestions, rather than an arbitrary autocomplete. Definitely not the ideal solution, but could be a good iteration until we know the future of search.

I've updated the label text as part of #378, and since the placeholder/suggestion is still under discussion, I'm moving this to "Pending discussion".

[jasmussen]

Thanks, yes the input on the Google search page is going to be its own challenge.

Who can best help move forward the suggestions? My instinct is that we might want to explore some automated suggestions, such as pull a title from the docs, and suggest that.

[ryelle]

we might want to explore some automated suggestions, such as pull a title from the docs, and suggest that.

So you're thinking more of an autocomplete, suggest something as the person types from all of wporg? I don't think we could quick-fix that, it would probably need an overhaul to the wporg search system— so I'd put that to @bengreeley to answer since he mentioned an Elasticsearch project.

If you're open to the datalist approach, we could give that a try now, as soon as we have a list of suggestions.

Another thing we might be able to do is embed the google search in the header, but then we'd loose all the styling work we're doing in #378.

[jasmussen]

Given how little control we have over the google search, styling wise, my instinct would not go in that direction. The data list can probably work, but would also love to hear from @pablohoneyhoney in case he has input.

I'm not thinking of an auto complete, I'm more thinking of a rotation of placeholder suggestions from the content of a particular section. So for documentation search, instead of this:

It could be this:

[ryelle]

I'm not thinking of an auto complete, I'm more thinking of a rotation of placeholder suggestions from the content of a particular section. So for documentation search, instead of this:

Oh! okay, that's much more doable :)

Also, I thought we were strictly talking about the header search

which is always a global wporg search. But you're also talking about the local site searches?

So again, once we have a list of placeholders for each site, we can implement that.

I do wonder if having a suggestion like that as the placeholder would make it less clear that this is a search you can type into, and that it might be best to bring back the text label? Or switch to a text button. See also WordPress/wporg-parent-2021#62 (comment)

[bengreeley]

Ah, I didn't understand the part about the placeholder being what would be suggested. Thanks for clarifying.

I'd recommend we focus on the easier label changes and implement the autocomplete placeholder logic separately since it might take a bit more planning and discussion to get it right. I agree with @ryelle that we'll want to figure out a way to avoid confusion.

[StevenDufresne]

I agree about the rotating placeholders and that they would be likely more confusing than helpful.

For me the ultimate goal is to build something like Algolia's third party search UI after we agree on the underlying search infrastructure.

Example

If we do agree to not pursue rotating placeholders and look forward to autocompletion, it may be worth opening a new ticket for that work to help us focus.

[pablohoneyhoney]

I like the above, but perhaps let's fix the top global search first?

i1
Label: Search in WordPress.org. Which we should look into incorporating to the desktop view too.
Placeholder: Type to search...

i2
Consider suggestions

[ryelle]

I tried simply unhiding the label on desktop, and updating the placeholder:

black	white	blue

[bengreeley]

I think this works well with a label. The only thing that stands out to me is the text Search in WordPress. I could be overthinking it, but with the feedback we've heard about people being confused about the 'Log in' and 'Register' buttons, I wonder if we need to be more specific of what 'WordPress' is in this case. What do you think of 'Search in WordPress.orgorSearch WordPress.org`? That way it's clear that this is to search the website, not whatever else comes to mind when somebody reads it.

@thetinyl Do you have an opinion about wording for the label?

[ryelle]

Yeah, I noticed that Pablo suggested Search in WordPress.org after I took these screenshots, so I have already updated it with that label, I just didn't retake all the screenshots 😅

In any case, it looks like this:

[bengreeley]

Great, that makes more sense.

[thetinyl]

For what it's worth, I think the current label works and is clear enough. If I were going to suggest something it'd probably be a minor tweak to something like: "Search all of WordPress.org"