Plugins: Update search bar to be consistent with other sites

[ndiego]

I noticed that the search bar positioning is not consistent with Forums and Developer Resources.

Forums	Developer Resources	Plugins (new design)

Perhaps we could update the bar to look like this? It would also make it more clear that this is a global search field and does not allow you to search within categories.

New Design	Proposed

I would also suggest that we add the search bar to individual plugin pages to maintain parity with the current theme.

New Design	Proposed	Current Design

cc @WordPress/meta-design

[jasmussen]

Looks right to me at a glance. Your screenshots are not super wide, so it's easy to forget the composition has the super wide grid of the header+subheader+footer, and the content grid of what's in between. CC: @fcoveram for a gut-check, he worked a lot on these pieces.

[StevenDufresne]

We can do that. Just noting that its placement comes from this thread.

[ndiego]

We can do that. Just noting that its placement comes from this thread.

Yeah, I would love @fcoveram's thoughts on this. After playing around with the new demo site for an hour or so, I found myself really missing the search on internal pages.

[fcoveram]

The idea sounds good to me. Thanks @ndiego for suggesting it.

[ndiego]

One more thing to note is that we may not need the bottom border, see #256. Thoughts @fcoveram?

[fcoveram]

I replied to the ticket agreeing with the idea 👍

[ndiego]

For the launch of the Plugin Directory refresh, I think the goal should be to add search to the single plugin template in the upper left, just like Forums (minus the bottom border). It should be left aligned with the "Plugin Directory" text.

Adding back the search maintains parity with the existing theme.

Current	Proposed

The search placement on the homepage and other templates can be revisited in a follow-up post-launch. Whatever we decide will likely have implications for other directories like Patterns, Themes, and Showcase.

[StevenDufresne]

I've updated this on test site. You can take a look at the UX there.

[fcoveram]

It works well on the personal tests I've made. If there is room for improvement, I suggest expanding the content area to reach the same width as in Developers.

On the test site, the alignment is off and the layout looks broken.

Expanding the content area will make the cover image bigger, but I don't envision a critical impact. On the other hand, the sidebar where meta info and rating are could continue with the same width, whereas the descriptive area on the left increases for the purpose of making the wrapper bigger.

[ndiego]

I'm not sure that we want the content to expand beyond the width it's currently at. Here is a wide-screen view:

[StevenDufresne]

Although it's hard to track down exactly how many users are searching from the single page, I took a look at the top 5 plugins and some random ones to see how many ended up on /search/{term} from that single plugin page. I saw very little usage from that page.

Do we actually need this on the plugin page? We don't have it on the showcase single page. We have the breadcrumb however.

[fcoveram]

Do we actually need this on the plugin page? We don't have it on the showcase single page. We have the breadcrumb however.

Since the update belongs to "update styles but not functionalities", then yes. I consider Showcase a redesign as the implementation changed the UX more deeply.

[ryelle]

If the goal is to make the sections consistent with each other, shouldn't they have similar header sections & layouts? Spending time trying to figure out how to put the search back into a header/page that is not designed for it (like developers is) does not feel like it meets the spirit of this project, to me. (this is not my strongest opinion, but I do feel like we need some leeway to make changes when introducing the new components)

Breadcrumbs might help the alignment issue by balancing out left/right, but we don't have a pattern of anything on the same line as breadcrumbs. Also, introducing breadcrumbs breaks the "level" logic, since these are "level 2" pages — in fact, showcase still needs to be updated to remove breadcrumbs from those pages.

However, I don't think we should change the width of the center column — on Developer, search + chapters are aligned because chapters sticks to the left side, but the content remains centered. There's no left sidebar on Plugins, it's just one single centered column.

[jeherve]

The changes are now live, and the first piece of feedback on the announcement post was about the search field:

I like to share some insight, is there any chance to adjust the search bar placement?

IMO, it would be better if we place it on the right side of the page, here is my mockup.

And, the search results number on the right side of the search form always shows a fixed number of 1,020 plugins if search any term. I think it should be a dynamic search results number. -- https://make.wordpress.org/meta/2024/04/30/the-plugin-directory-gets-a-refresh/#comment-9696

[ndiego]

For those following along, there is a good discussion about creating a holistic solution to search/filtering across all of WordPress.org here: https://github.com/WordPress/wporg-mu-plugins/discussions/603

[jamesckemp]

Why is the proposed search bar so small when it's arguably the post important touch point of the directory? See this proposal: https://twitter.com/AdmireTheWeb/status/1785275407555510447

[ndiego]

Why is the proposed search bar so small when it's arguably the post important touch point of the directory? See this proposal: https://twitter.com/AdmireTheWeb/status/1785275407555510447

I'll defer to @WordPress/meta-design but IMO, the search doesn't necessarily need to be large, but it does need to be consistent throughout the site so users know where to find it regardless of the section of WordPress.org they are in.

The Apple App Store and the Google Play store are good examples where search is not prominent, but it's there if you need it.

Apple App Store	Google Play

I think the bigger issue is that the homepage of the Plugin Directory is very poor (something purposefully not addressed in the refresh). If you look at the examples from Apple or Google, it's much easier to discover/explore apps without needing to search.

Because the Plugin Directory does not have this, search has become the primary mechanism for finding the plugins you want, which I think should change in a full-scale redesign of the directory in the future. This, or course, does not preclude improvements we can make now to ensure plugin search remains as usable as it was prior to the refresh.

[jasmussen]

Great thoughts, valid feedback. I'd tend to echo Nick that this is a very light refresh, hopefully with many more ambitious changes unlocked as a result. One of them could be a much better curated landing page, perhaps even category hubs.

Please be aware that if we change the search box here, it'll effectively jump around as you navigate from section to section of the site: it's all too easy to forget that WordPress.org is one big website, not many small ones. That said, I'd personally be okay deferring to others on size, placement to address immediate feedback if it is strongly enough felt, so long as we are open to revisiting this again once we have a chance to dive into more ambitious landing page changes.

[fcoveram]

Agree with @ndiego and @jasmussen.

I'm also more drawn to display curated content that allows visitor to browse content without having to type a search term. The search input needs to be there, but making it predominant assumes that users know what to search instead of browsing content through categories and other related paths.

[ndiego]

For those following along. I added a proposal for an interim solution here: https://github.com/WordPress/wordpress.org/issues/309