Earlier this week, a few of us met to discuss the design direction of the Plugin 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, UI 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.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 block 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 beta 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 sidebar 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 “widget 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 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
- Category 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