Mark Uraine 12:24 am on April 2, 2016
Tags: design ( 20 ), plugin directory ( 44 ), plugins ( 13 )

Plugin Directory Design Direction

Earlier this week, a few of us met to discuss the design direction of the PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory. Myself, @michael-arestad, @hugobaeta, @melchoyce, @helen, and @samuelsidler looked at the current directory and challenged ourselves to look at it from a fresh perspective, exploring flows, UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing., and content. The overall goal was to set a direction for the design.

After a couple days of whiteboard drawings, we’re a lot closer and I wanted to share some explorations with you.

Please note that the below explorations are wireframes and heavily subject to change. They’re only meant to give you an idea of the direction we’re looking at.

We discussed three views:

The landing page (wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//plugins/)
The Search results view
The Single Plugin View

Plugins Landing page

Plugins Search Results

Plugins Single View

Some pictures of our whiteboards

On each view, here are some thoughts on the direction.

Plugins Landing page (/plugins/)

The title blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. is much longer, with a more prominent search field at the top. Search is the primary action in the directory and we’re working to improve it.
The addition of a slider for featured plugins… yes that’s not misspelled, I wrote “slider”. 😉
Sectioned plugin blocks around various “filters” of plugins. As a sample, we used popular, trending, and betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process., but these could be anything in the future.
The “Developer Center” that currently exists becomes a small “Plugin Authors” callout at the bottom of the page since it’s not frequently used. We’d add other blocks (like the ones show) where relevant.

Plugins Search Results

Search results maintain a similar style as the landing page.
Search field remains prominent in the title block.
In fact, when searching from the landing page, everything under the search box is replaced with results.

Plugins Single View

Maintain a large plugin banner at top of the view.
The plugin name will no longer be over the banner.
Below the banner, we show the name of the plugin, author, and a Download button.
The Translation Information displayed will note if a plugin is available in your language or, if not, allow you to click and see it on your localized site with a callout to begin a translation.
Tabs are removed. Instead, content blocks act as accordions on the page, revealing information when a visitor clicks to know more. The main column holds the following information:
- Description
- Changelog
- Screenshots in the form of a gallery/slider (to be explored).
- FAQs – We debated this section a bit, but FAQs are still quite important, when they exist. Ideally, these could be added in the plugin author dashboard instead of the readme so the format is more consistent. If that happened, we could show a list of questions with accordion-like answers when clicked.
- Reviews – Becomes a section on this view where you can click to see more reviews.
- “Contribute” is the new “Developers” section. Here we’d show relevant developer information, contributors, a donate button, and all available translations. As we experiment, this may become another view similar to Reviews where you click to see more detailed information.
Meanwhile, the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. remains, but becomes more condensed. In it, we show:
- Ratings – a break down by rating.
- Support – a “widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.” that shows relevant support information and allows the visitor to click to enter the support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations..
- Active Installs
- Last Updated
- CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.
- “Designed to work with” option, if relevant.

Overall, we worked hard to keep the most relevant information for visitors as information that’s important to plugin authors moves to the plugin admin dashboard.

Thoughts?

As a reminder these are wireframes to give you a general idea of the direction we’re heading.

What do you think about the direction? Are there things you think should be removed? Things that should be added to the main views? Leave your feedback in the comments.

#design, #plugin-directory, #plugins

Konstantin Obenland 3:29 am on April 2, 2016

A slider? Gasp!

I’m not a big fan of the centered title/tagline honestly. I also wonder if the search field will be overshadowed by the visually prominent slider below. For the single view I was hoping you’d been more daring in terms of the information that is shown there. Did you talk about the banner size and how it relates to the content width there?

Imagine a list of everything else that makes up these wireframes, which I really like! 🙂 Especially the homepage looks neat. Good job everyone!
- Mark Uraine 5:55 pm on April 4, 2016
  
  The centered title/tagline is a design pattern we’re going to be using across the site. We’ll definitely have to make sure the search stands out and isn’t overshadowed by the slider.
  
  We didn’t talk about banner size. I know there’s probably a concern there b/c it will be displayed probably larger than how it is now.
M Asif Rahman 3:57 am on April 2, 2016

In PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Single View we are going to hide more content from description?
What if we have video in description? Could we add video in screenshot or somewhere dedicately?
- Mark Uraine 5:56 pm on April 4, 2016
  
  I imagine the video would be included with the screenshots section. We didn’t discuss video much, and I’m not sure about the limitations (if there are any), so I’ll have to look into that.
George Florea Banus 6:07 am on April 2, 2016

What ever design you go for I want to be able to order plugins by installs, latest, last updated, rating etc.
Also add a lightbox for the screenshots, many don’t even open in the browser but are downloaded.
- George Florea Banus 6:15 am on April 2, 2016
  
  Guess I should have read more carefully, seems all of the above is planned.
  As for the single view I like the current tabbed design.
Ulrich 9:07 am on April 2, 2016

This sounds good. I wonder if the order of the information on a single pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party is correct. I feel changelogs are not so important to people searching a new plugin to use. Screenshots and reviews would be more useful.

It may be good to have some links link the content sections as landing on the page the user may not realize that there is more content lower down. It is a bit early but the section titles should be linkable so that it easier to point users to the correct section.

The available translations would be more useful in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. as I can check is the plugin supports my language in one glance.

Have you thought about what happens when a plugin does not have a banner or icon? Some plugins have randomly generated icons which do not look that pretty and do not provide any use. Normally the banner does not contain useful information but gives a bit of colour to the page and helps with brand recognition. What if we made the banner to full width taking away a bit of the focus? Here is an example. https://wpzoo.ch/en/2016/02/hello-world/

I am not sure if this is in the scope of the project. “Featured” plugins have not been updated in quite some time. For me featured plugins are only worthwhile when it is a curated list that is updated regularly with new plugins. The featured themes are random themes that have been updated in the last two year. If we do something like that for the plugins then we may just rename the section to random plugins.
- Mark Uraine 6:02 pm on April 4, 2016
  
  Good point about the Changelogs – prolly not that beneficial to new users searching for plugins.
  Links to specific sections is do-able.
  The translations bar at the top is a design pattern we’re exploring with some new site designs.
  We spent some time talking about banners/icons and the absence of them. Still working through ideas.
  Featured plugins would be good to curate, I agree.
Marius (Clorith) 11:22 am on April 2, 2016

If we’re moving featured ones into a slider, we may as well do away with the featured ones altogether or just show “feature of the day” and a single pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. Most people won’t stick around to watch it slide through options, and it hides anything not in the first slide more than shows them off.

@grapplerulrich makes a very valid point about the list having been stagnant for a (to me) unknown period of time, but I don’t remember the last time it didn’t look like it does now, which plays well into my comment about “maybe just remove it” 🙂

Little bit worried that the single view is information overload, sure you hide a lot of content behind read more expanders, but it’s still a lot of different contents in a single view for many users and may be information overload all at once.

Other than that I do like the direction this is going!
Anton Timmermans 12:53 pm on April 2, 2016

I think this is a great way to go, not a big fan of the slider.
J.D. Grimes 1:06 pm on April 2, 2016

In regard to the single pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party view:

I don’t think displaying the changelog prominently has any real benefit for most users. I would either move it lower in the page, or else maybe better to leave it where it is but hide the content entirely so the user has to click the “read more” (or maybe “show”, in that case) link to see it.

I’m also not sure about displaying the plugin icon in addition to the banner, it will probably be redundant, or as @grapplerulrich says, will just be auto-generated.

I also think that jump-links to each of the sections as @grapplerulrich suggested might be a good idea.

And one more note, though you are likely aware of this, plugins can add their own custom sections to the readme, and these are currently displayed as custom tabs. I don’t think you’ve addressed what will happen to them?

All in all I like the direction you are taking this.
- Mark Uraine 6:05 pm on April 4, 2016
  
  In regards to the custom sections on the README, I’m not sure this is completely resolved. They most likely will either become their own section on the page toward the bottom, or be eliminated altogether. Do you have some thoughts?
Samuel Wood (Otto) 2:44 pm on April 2, 2016

“The pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party name will no longer be over the banner.”

People have designed their banners around the plugin name being positioned over it like that. If we change this, then those banners will need to be altered as well, and people will start doing dumb things like including the plugin name in the image themselves. This is thus a bad choice for internationalization and non-English languages.
- Mark Uraine 6:08 pm on April 4, 2016
  
  By removing the name from overlapping the image, it will require people to edit their witty designs, but I’m not so sure it will encourage them to add the name themselves. I believe we’ll have a design guide for banners and icons where we’ll be explicit about best practices.
Achin 3:39 pm on April 2, 2016

A quick thought. How about having Accordions for the sections “Popular” , “Trending” etc? This would help save time scrolling through these categories.
David Gewirtz 4:39 pm on April 2, 2016

I would strongly recommend moving away from screenshots and, instead, highlighting videos. The screenshots are often difficult to see on long dashboard pages, but video tutorials are active and engaging. Also, support is probably considerably more important than translations and should be very visible and very easy to get to.

I use the wp.org support forums as my primary mechanism of support and they are VERY active. But I’d love a way to have more control of posts (like when someone posts in a thread that’s unconnected to its purpose) and a way of reaching out to my users to warn them when something big is about to happen (like PayPal’s change to a new format coming in September).

It would also be great if there were a way to externally access and aggregate the forums in a support tool, or see all my new support requests across all my plugins at one place.

Basically, please think about this not only from the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party consumer’s point of view in choosing new plugins, but also from the plugin user’s and developer’s for ongoing use and flow. I’ve found that the wp.org support section for my plugins becomes the community hub for my users, and I’d like to be able to optimize it more to involve and support that community. Otherwise, I’ve been thinking strongly of redirecting all support questions to a forum on my site, but that kind of defeats the purpose of keeping everyone involved on wp.org.

In any case, thanks for your great work.
–David
- Mark Uraine 6:11 pm on April 4, 2016
  
  As for a way to visually see your plugins and their support tickets in one place, take a look at this: https://make.wordpress.org/meta/2016/03/01/thinking-about-the-plugin-directory-ia/#comment-8062
Mark Howells-Mead 9:16 pm on April 2, 2016

This does sound good! I would query what role the re-design and improved UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. will bring to those browsing the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party directory via the backend, as this is probably the point from which a lot of people will access it.

I agree with other comments, that consideration should be made for plugins without icons and without banner images. Many plugins don’t provide functionality which can be shown visually and a large area dedicated to visual decoration for every plugin is superfluous in many instances.

As to a slider, I also agree with other comments: it’s a well-known but outdated means of showing information in a clear and simple overview. A small cascade of teasers in three rows with 1, then 2, then 3 plugins would be more quickly scanned; also proving immediate visibility to plugins in latter positions and making the view much more easily digestible.

And for the individual sections on the single view: I agree that an accordion would be useful. A view showing the summary information, with the option for the additional sections to be expanded. (Remembering the open/closed state of each section between page requests, so that people comparing functionality or change history between various plugins don’t have to keep opening each section anew on every page request.)
- Mark Uraine 6:13 pm on April 4, 2016
  
  I really like the idea of remembering the state of open/closed sections for comparisons.
Mark Howells-Mead 9:19 pm on April 2, 2016

An additional note from a usability point of view: an improved filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. and the ability to sort search results would be a long-overdue improvement. For example, to run a search like https://wordpress.org/plugins/search.php?q=honeypot and then sort the results to show the most recently updated plugins first.
- Mark Uraine 6:14 pm on April 4, 2016
  
  Yes, yes and yes. I’m definitely pushing for a more filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.-able search ability. We will be updating the search field for sure.
Ahmad Awais 12:49 pm on April 4, 2016

While I like the wireframes there are certain concerns.

Sliders? Ehm… ermm…

Reviews on pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party landing page? Means if someone writes a wrong bad review (E.g. Last time someone gave my plugin 1 star and a very bad review just coz my plugin ain’t compatible with VisualComposer, turns out it was the issue with VisualComposer as its code is a big mess with no standard whatsoever, and I never claimed my plugin to be compatible with that plugin) that would drive plugin downloads and SEO down.
Brad Touesnard 5:44 pm on April 9, 2016

Would getting rid of the tabs also mean losing the individual pages for each tab? If so, that could have a serious impact on each pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party’s footprint in Google search results.
Mickey Kay 5:12 pm on April 12, 2016

First of all, fantastic work. Not only are y’all taking on a large task that’s going to make things better for many people, you’re making it look good! Woot!

Secondly, a few thoughts/suggestions. . .

1. Support search
If at all possible, I would love to see the new individual pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party screen include the ability to search support threads. This will make it easier for authors to parse their tickets, but more importantly, it will make it easier for end-users to check to see if their question/issue has already been addressed before filing a new ticket.

2. Use of space
Right now, there’s a ton of content in the single plugin view’s main content area, and almost nothing in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. This means that 1/5 of our precious horizontal space isn’t used at all for the vast majority of page, once users have scrolled down a couple hundred pixels. Consider this alongside the fact that you’re already looking at consolidating what used to be tabbed content into one long single content area, and I think we should do everything we can to use space/scroll as economically as possible. My suggestion would be to either a) move some content into the sidebar, or b) (oh boy. . .) ditch the sidebar entirely. Other related ideas in #3 below.

3. Read more links
I’m not fundamentally opposed to this user experience choice, however it’s definitely not my favorite. For one, it causes a somewhat jarring experience. These accordion style links cause what feels to me like a pretty jarring scroll, making it pretty easy to lose track of where one was originally reading (especially so when collapsing the accordions). In my mind, if you’re choosing between tabs and read more accordion expanders to consolidate text, tabs would always be my top choice – perhaps just switching from a full page reload when a new tab is clicked to a simple jQuery tab toggle instead.

4. Order priority
Folks have spoken as to what is top priority for them, and I would really like to see the ordering of content match this feedback. As mentioned, change logs are pretty irrelevant to most end users, and as such I would relegate them as lower priority. Another thought is to try to group content into end-user vs developer groups as much as possible. Change logs, svn links, etc all matter to developers, but probably not at all to end users. Additionally, I would love to see us use our sidebar (aka secondary) area for content that is indeed “secondary”. Translation info, contributors, etc all belong here in my mind.

Keep up the great work! Thanks y’all!!!

Welcome to the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!

Contact

Plugin Directory Design Direction

Thoughts?

Welcome to the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!

Contact

Thoughts?

Share this: