[Global Search Bar] Updated placeholder text to be more directive #127903

cchaos · 2022-03-16T17:18:21Z

We've received feedback that the current visibility of the global search bar is too low and the placeholder text is confusing. This PR specifically tackles updating the placeholder text to be more Kibana-specific.

New placeholder: Find apps, content, and more. Ex: Discover (screenshot below is slightly out of date)

In EUI, there is a separate PR to increase the contrast of the text to make is more visible. elastic/eui#5724

This PR also adds the keyboard shortcut as an append of the search box to more easily find and fixes search bar’s width on smaller screens.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

And fixed search bar’s width on smaller screens

cchaos · 2022-03-16T17:20:41Z

@gchaps: I'd love your input on this placeholder text. We received feedback that "Search Elastic" is confusing. So we want a more targeted "What can you search for" placeholder text.

@ghudgins @alexfrancoeur: Any other thoughts?

cchaos · 2022-03-16T17:49:46Z

Bringing over a suggestion from the originating ticket:

Would also add that helper shadow text for the global search bar would make user discovery of the global search bar more likely (i.e. display a sample of suggested search terms prior to user entering text in that global search box)

If we go that route, it can't be a sample only. My suggestion would then be something longer-form like:

Find any Kibana page, ex: Discover

elizabetdev · 2022-03-16T19:09:35Z

@cchaos and @gchaps I like how GitHub uses the "jump to". It makes it very clear that we can use the search bar to navigate to a page.

gchaps · 2022-03-16T20:02:18Z

The global search bar allows you to search both apps and objects. So maybe we should be more specific:

Find any app, dashboard, visualization, or object

Find any app, dashboard, visualization, or object. Ex: Discover

Find any app or object. Ex: Discover or visualization

Is there a place we can put the examples other than in the search placeholder text? Then maybe we could include some more examples from here.

cchaos · 2022-03-16T20:35:52Z

Thanks @gchaps. The problem is not the lack of examples or knowing how to use it, but actually finding it to begin with. There is already help text in the bottom of the popover that explains how to search for particular objects.

We just need them to click into the search input first. I also want to be weary about being too Analytics heavy with dashboard and visualization. But since Discover is our most used application/solution I like calling that one out specifically. How about just:

Find any app or object. Ex: Discover

gchaps · 2022-03-16T20:56:29Z

Good point about not being too Analytics heavy.

+1 to

Find any app or object. Ex: Discover

Bamieh

(code only review) LGTM

mdefazio

LGTM. Nice addition of the keyboard shortcut!

ryankeairns · 2022-03-17T14:34:14Z

@alexfrancoeur this may be nitpicky, but only apps and objects that have been 'subscribed' to the search will be searchable. For apps, it's probably close to all but for objects, it is less clear to me which have and have not yet been added. It was a struggle at the time and was left open to individual teams.

That being the case, maybe tweak to 'Find apps and objects. Ex: Discover'

cchaos · 2022-03-17T16:18:16Z

@gchaps Thoughts on Ryan's suggestion: Find apps and objects. Ex: Discover?

gchaps · 2022-03-17T18:43:56Z

+1 to Ryan's suggestion to remove the word any.

Back to the earlier point about not being too Analytics heavy, does the text in the "No results found" popup need to change too? It currently says "Try searching for applications, dashboards, visualizations, and more".

ghudgins · 2022-03-17T19:08:42Z

sounds good to me

cchaos · 2022-03-17T19:11:01Z

I'm more concerned about the placeholder text and getting people to notice the search input itself. I'll remove the any.

alexfrancoeur · 2022-03-17T19:39:51Z

Regarding the new placeholder text, I'm not sure if we should use the word objects. In my experience, non-administrators are not necessarily aware the things like dashboards are indeed saved objects. Related, do we refer to plugins and embedded views as apps consistently in our docs? I'm going to need some help here, but there are some potential alternatives with a quick brainstorm below. I don't mean to overcomplicate this, so if other folks feel confident with the current proposal, I'm happy to get on board with it.

Find apps and content. Ex: Discover
- I get why we're choosing to make this very specific, but I also am hopeful that we'll make more progress on navigational search so that someday, it is not just for these two things. Technically, it's already more as we are providing direct navigation to sub views in applications. Is there a way we can make this more obvious without being so specific?
Find apps and saved content. Ex: Discover
Search to navigate.. Ex: Discover
Search or jump to.. Ex: Discover
- That's blatantly copying Github, but I agree with @miukimiu, it's direct and gets the point across.
Jump to.. Ex: Discover
Navigate to.. Ex: Discover

Alternatively, if discoverability is the issue I'm not confident that simply changing the text will help here. Thoughts on opening an follow up issue that maybe introduces a feature call out? We'd have to do it at the right time in the customer journey, and maybe it's part of some future product tour, but this is a significantly faster way to get around and it'd be great to raise awareness with our user base.

cchaos · 2022-03-17T19:47:46Z

future product tour

Yes! We should have done this in the first place. But let's not bungle this PR with that right now. I think it needs to be as specific as the first three options. The rest are too ambiguous.

gchaps · 2022-03-17T20:37:55Z

In the docs, we avoid using the word "app" for the reason given. We refer to things by their name, for example, Discover, Visualize. I still like the word "apps" here. And also "content". How about adding "and more" or an ellipsis to indicate it's more that just those two things.

Find apps, content, and more. Ex: Discover
Find apps, content,.... Ex: Discover
What are you looking for? Ex: Discover

My preference is the first one.

gchaps · 2022-03-18T19:57:19Z

Let's go with this:

Find apps, content, and more. Ex: Discover

Here is my reasoning:

It adds a suggestion of what the user can find, but also indicates that there's more
Find is is the action that the user is taking. It's better than "Jump to..." because that's just describing basic link functionality.

x-pack/plugins/global_search_bar/public/components/search_bar.tsx

cchaos · 2022-03-18T20:03:01Z

@elasticmachine merge upstream

cchaos · 2022-03-21T16:33:36Z

@elasticmachine merge upstream

cchaos · 2022-03-21T16:34:02Z

I'm setting this up for auto-merge unless someone objects.

alexfrancoeur · 2022-03-21T17:40:22Z

Find apps, content, and more. Ex: Discover

LGTM 👍

kibana-ci · 2022-03-21T18:06:14Z

💚 Build Succeeded

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`globalSearchBar`	19.6KB	20.7KB	+1.1KB

History

💚 Build #31927 succeeded 485ae2c
💚 Build #31558 succeeded 91fe6f9
💚 Build #31154 succeeded aef6dd4
💚 Build #31059 succeeded a8ee0ce

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

kibanamachine · 2022-03-23T18:06:19Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127903 or prevent reminders by adding the backport:skip label.

[Global Search Bar] Updated placeholder text to be more directive

a8ee0ce

And fixed search bar’s width on smaller screens

cchaos added 8.2 candidate considered, but not committed, for 8.2 release Feature:Navigational Search Global search bar labels Mar 16, 2022

Added an append with the symbol form of the keyboard shortcut

c1b52d7

Update placeholder copy

aef6dd4

cchaos marked this pull request as ready for review March 16, 2022 21:20

cchaos requested review from a team as code owners March 16, 2022 21:20

cchaos added release_note:skip Skip the PR/issue when compiling release notes v8.2.0 and removed 8.2 candidate considered, but not committed, for 8.2 release labels Mar 16, 2022

Bamieh approved these changes Mar 17, 2022

View reviewed changes

mdefazio approved these changes Mar 17, 2022

View reviewed changes

No any

91fe6f9

cchaos commented Mar 18, 2022

View reviewed changes

x-pack/plugins/global_search_bar/public/components/search_bar.tsx Outdated Show resolved Hide resolved

Update copy

be26f98

Merge branch 'main' into global_search/placeholder_text

485ae2c

Merge branch 'main' into global_search/placeholder_text

5a04239

cchaos enabled auto-merge (squash) March 21, 2022 16:34

cchaos merged commit bdc08fb into elastic:main Mar 21, 2022

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 23, 2022

cchaos added backport:skip This commit does not require backporting and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Mar 23, 2022

cchaos deleted the global_search/placeholder_text branch March 23, 2022 18:54

jloleysens mentioned this pull request Apr 4, 2022

[Security Solution]Random Symbol showing in the global search bar #128230

Closed

gsoldevila mentioned this pull request Jul 27, 2022

[Global search bar] Fix clear button glitch #137251

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Global Search Bar] Updated placeholder text to be more directive #127903

[Global Search Bar] Updated placeholder text to be more directive #127903

cchaos commented Mar 16, 2022 •

edited

Loading

cchaos commented Mar 16, 2022

cchaos commented Mar 16, 2022

elizabetdev commented Mar 16, 2022

gchaps commented Mar 16, 2022 •

edited

Loading

cchaos commented Mar 16, 2022

gchaps commented Mar 16, 2022

Bamieh left a comment

mdefazio left a comment

ryankeairns commented Mar 17, 2022 •

edited

Loading

cchaos commented Mar 17, 2022

gchaps commented Mar 17, 2022

ghudgins commented Mar 17, 2022

cchaos commented Mar 17, 2022

alexfrancoeur commented Mar 17, 2022

cchaos commented Mar 17, 2022

gchaps commented Mar 17, 2022 •

edited

Loading

gchaps commented Mar 18, 2022

cchaos commented Mar 18, 2022

cchaos commented Mar 21, 2022

cchaos commented Mar 21, 2022

alexfrancoeur commented Mar 21, 2022

kibana-ci commented Mar 21, 2022

kibanamachine commented Mar 23, 2022

[Global Search Bar] Updated placeholder text to be more directive #127903

[Global Search Bar] Updated placeholder text to be more directive #127903

Conversation

cchaos commented Mar 16, 2022 • edited Loading

Checklist

cchaos commented Mar 16, 2022

cchaos commented Mar 16, 2022

elizabetdev commented Mar 16, 2022

gchaps commented Mar 16, 2022 • edited Loading

cchaos commented Mar 16, 2022

gchaps commented Mar 16, 2022

Bamieh left a comment

Choose a reason for hiding this comment

mdefazio left a comment

Choose a reason for hiding this comment

ryankeairns commented Mar 17, 2022 • edited Loading

cchaos commented Mar 17, 2022

gchaps commented Mar 17, 2022

ghudgins commented Mar 17, 2022

cchaos commented Mar 17, 2022

alexfrancoeur commented Mar 17, 2022

cchaos commented Mar 17, 2022

gchaps commented Mar 17, 2022 • edited Loading

gchaps commented Mar 18, 2022

cchaos commented Mar 18, 2022

cchaos commented Mar 21, 2022

cchaos commented Mar 21, 2022

alexfrancoeur commented Mar 21, 2022

kibana-ci commented Mar 21, 2022

💚 Build Succeeded

Metrics [docs]

Page load bundle

History

kibanamachine commented Mar 23, 2022

cchaos commented Mar 16, 2022 •

edited

Loading

gchaps commented Mar 16, 2022 •

edited

Loading

ryankeairns commented Mar 17, 2022 •

edited

Loading

gchaps commented Mar 17, 2022 •

edited

Loading