Consider the icon for the command palette

[dsas]

The icon for the command palette in the global navigation is a magnifying glass, it looks like this:

Feedback from user testing (paYJgx-4Nn-p2) revealed that most users struggled to associate this icon with the 'jump to' menu.

We had some further discussion on whether it's a problem that matters and some ideas to make the command palette icon more relevant for power users. paYJgx-4Nn-p2#comment-4858 One suggestion was to use an developer terminal icon like Github does

Gutenberg don't have a visual way to launch the command palette, just the shortcut icon.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• paYJgx-4Nn-p2#comment-4858

[javierarce]

Just to give a bit of background about the current decision, when we began working on this feature (p9Jlb4-9CH-p2), we considered using an icon similar to GitHub's to represent the command palette. However, we decided against it, partly because we worried that the icon might not be clearly understood.

Currently, we have three solutions for the affordance:

• Gutenberg: The shortcut in the top navigation
• Gutenberg: A magnifying glass icon in the sidebar
• Calypso: A magnifying glass icon in /sites

Introducing a new icon would create another discrepancy, but to make things worse, the search icon is a bit problematic when the user is in the Reader, because the search feature uses the same icon and it's pretty close to it.

I think it's quite difficult to find a solution that would solve all these problems and inconsistencies. That said, there are two main approaches to move forward:

1. Consider this as an advanced feature: this type of tool generally lacks a specific visual representation in other apps (probably the only exception is GitHub). In our case, we could then remove the icon. Users would discover the command palette indirectly through our announcement banner, the support documentation, articles and videos from other users, help center, tips, etc.
2. Consider a different icon: here we would need to balance the desire to make it easy to discover with the existence of the other affordances I mentioned.

I've worked on several proposals, including using the GitHub prompt icon and Gutenberg's block-code icon to represent the concept of command, and two variations on the magnifier icon to distinguish it from the regular version.

[dsas]

I'd totally missed the Gutenberg command palette icon in the sidebar. I guess it probably makes sense to stay consistent then. I also think that the command palette is an advanced feature, given our current focus though, I think there's a question in how much we follow the feedback we've had on the icon - it has been mainly from non-advanced users.

[javierarce]

During a conversation with @danielbachhuber today, he suggested the idea of using a compass to identify the Command Palette. I think it has some advantages over other options: it's more recognizable than the prompt icon, and it symbolizes navigation, direction, and exploration, which are indirectly related to searching.

And to include more suggestions, @simison proposed using the ⌘ icon. Its association with the term 'command' and its original meaning (a landmark sign) could work well in our context. However, its strong connection with Apple and the relationship with a key that's not available on all keyboards could be confusing for some users.

Figma file with more proposals: 2aegKcEt9nAj7wBQ4yV5n4-fi-2910_6025

[dsas]

👍 either the compass or the command prompt icon seems good to me. I think we should make the change and perhaps push GB upstream to change their icon too.

[simison]

Probably not a blocker but just FYI that in apps the compass is used as "open in browser" icon:

Not sure if that's an Android webview component thing or custom to our apps design.

[javierarce]

Probably not a blocker but just FYI that in apps the compass is used as "open in browser" icon

Ah, that's a good point, @simison, I had forgotten about that association.

👍 either the compass or the command prompt icon seems good to me. I think we should make the change and perhaps push GB upstream to change their icon too.

Ok. Given that there isn't an option that is clearly superior to the others (at least as far as I know), that there's a desire to have an affordance in the UI that is not the current search icon, and that @danielbachhuber explicitly said that he wants something "nerdy and cool" (p1715085681280819/1715003152.316989-slack-C9EJ7KSGH), I'd say let's go with the prompt icon and see how users (and .org) react.

[javierarce]

I've added a new icon to the Dotcom Design Library called "prompt". I think we’re good to go and we can replace the current icon with this one.

[danielbachhuber]

@javierarce Looks great!

[rcrdortiz]

These changes are now live.

[danielbachhuber]

Looks great!