Plugin Directory Prototypes (Single View)

Yesterday, you saw the mockups and prototypes 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 homepage and search results. Today, I’d like to share the “single view” plugin page mockup. The single view is the primary page for all plugins.

Like the earlier mockups, the content is not accurate and the entire page is still undergoing changes.

Prototypes

You can play around with the prototype here: http://codepen.io/mapk/full/YqJezm/

Screenshot

Single View

Single View

Notes

  1. Many details are still being worked out.
  2. Some views still need to be created, like the ‘Reviews’ and ‘Support’ views.
  3. The ability to ‘favorite’ a plugin still needs to be designed.
  4. The ‘Ratings’ section is far from complete.

#design, #plugin-directory

Plugin Directory Prototypes

When we created the design for the ‘Get WordPress’ page, it was meant to set a new design standard for 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/ sites. As a result, here are here are some new designs for the home page and search results page 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.

Keep in mind that these are still preliminary and the content is not accurate.

Prototypes

You can play around with the prototypes here:

Screenshots

Homepage

Homepage

Search Results

Search Results

 

Notes

  1. Homepage
    1. Again, individual plugin information is not accurate.
    2. The terminology for “pro” and “light” are explorations for design purposes. (Look for a taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. post on this blog in the near future.)
    3. The three sections at the bottom will have links to their respective subpages.
  2. Search Results
    1. Typing a keyword in the search field will replace the content area with search results.
    2. Pagination still needs some work.

We continue to iterate quickly and a second post on the design of the plugin detail page is forthcoming.

If you have any feedback on the design, please comment below. We’d love to know what you think! 🙂

#design, #plugin-directory

Final Mockups for ‘Get WordPress’

Working on this project has been a fun and creative journey and both @hugobaeta and I have made some great breakthroughs on the design direction for 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/. Below are the final round of mockups (text still subject to change).

(Want background on this post? Check out the IA post, followed by the initial mockups.)

‘Get WordPress’ landing page (located at /get/)

Get WordPress - Mobile View

Mobile

Get WordPress - Desktop

Desktop

‘Get WordPress’ subpage
Mobile - Closed Nav

Mobile – Closed Nav

Mobile - Open Nav

Mobile – Open Nav

Desktop

Desktop

#design, #get

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:

  1. 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/)
  2. The Search results view
  3. The Single Plugin View
Plugin Landingpage

Plugins Landing page

Plugins Search Results

Plugins Search Results

Plugins Single View

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

WordPress.org UX Research

Over the years, with a lot of resources being put into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., the WordPress.org network of sites has been interated upon without much structural or art direction. As we take on efforts of documenting and creating more polished and art directed design foundations for the WordPress project as a whole, the .org sites need to get some love as well.

The first step is understanding what can be improved, what the real pain points are. So I conducted a survey a few months ago to better understand how contributors and other community members interact with 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/ sites. The survey was sent to a select group of people – project leads, team reps, highly active community members, etc. The sampling was small (32 participants) and so the survey had a lot of open-ended questions, allowing the participants to write their thoughts freely, revealing the biggest pain-points. The survey was divided into sections for better understanding of the usage of the several parts of the website.

This survey will help us get a better idea of the direction we need to go on a long-term plan to make improvements to WordPress.org, building a more solid and thought-out foundation so the community can grow and thrive for years to come.

The survey was anonymous (which I personally found important in order to encourage more honest feedback), so I’m including here some of the most constructive feedback provided.

This is quite a large post, with the survey results and relevant comments – 15 sections with a total of 55 questions. So brace yourself and continue at your own risk 😛

Continue reading

#design, #research, #ux

Get WordPress Mockups

With the desire to improve the path for how people “get WordPress”, I proposed some Information Architecture ideas. Today, I’ve got a mockup to communicate these concepts.

First, I wanted to bring the different ways in which someone can ‘get WordPress’ into one single page that would communicate their relationship with one another effectively and clearly. Second, any buttons that say “Download WordPress” should actually download the software, and not link to another page.

These two points are addressed with the following mockup. The mockup combines downloading WordPress, downloading the mobile apps, and hosting into one page, with sub-pages for each. Combining these options provides a well-rounded view of how someone might go about “getting” WordPress – whether by downloading the software and setting it up themselves, having a hosting provider take care of it, or obtaining the mobile apps. Each section links to sub-pages that delve into more detail.

The mockup also slims down the navigation of this section of 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/ and unifies related content.

/get page mockup

/get page mockup

View full size mockups

Design Decisions

The mockup above has some explicit designs that are worth noting:

  • Button styles are the same as the one in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • The title bar on this landing page has a new design, unlike others throughout WordPress.org (but somewhat similar to make.wordpress.org).
  • Dashicons have been used on the page, when relevant.
  • The typographic scale has been refined and Open Sans has been embraced.

This mockup is a view into the design direction for WordPress.org, so please chime in with your comments. I’d love to hear your thoughts.

(With great help from @hugobaeta.)

#design, #get

Thinking about the Plugin Directory IA

Developing a new plugin directory gives us the opportunity to revisit its design and user experience. It’d be helpful here to start with the information architecture. To begin this process, it’s a good idea to look through the current IA. Here are some diagrams of the current IA.

Current Information Architecture

Current Overview IA

Current Overview IA (/plugins)

Current Plugin Detail IA (/plugins/[plugin-name])

Current 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 Detail IA (/plugins/[plugin-name])

Current Plugin Developers IA

Current Plugin Developers IA (/plugins/about)

Items for Consideration

Looking through the current information architecture, a few questions come up:

  1. We currently show a ton of information on the plugin detail page. What information is necessary when viewing a plugin detail page?
  2. “Developers” is used in two ways throughout the plugin directory: one provides developer information on the plugin detail page, the other links to plugins/about which gives information on how to develop/submit plugins to the directory. Is there a better way to phrase/display this information? Most of the latter content has moved to the Plugin Handbook. Is this page even necessary?
  3. We currently show a version history in two places: under “Developers” on the plugin detail page, but also when you click the “Changelog” tab. Can these be combined? Maybe show a version history that can expand (like an accordion) on click to show the fixes included in that version?
  4. “Installation” doesn’t contain useful information, for the most part, probably because “installation” is standard for all plugins. Should we remove this tab/information from the plugin detail page? How are plugin authors using this tab now? Should we rename it?
  5. There are several tabs that could be combined into the Description tab, including “FAQ”, “Other Notes”, and “Screenshots.” Is it worth combining these into one? If so, are there other changes we should make to allow a better flow of the information?
  6. Rating a plugin requires writing a review. Can we make this clearer by standardizing on a name? “Reviews” or “Rate and Review”, perhaps?
  7. Given the changes being discussed for tags, should we drop the Popular Tags page altogether in favor of a better homepage?

Feedback

We’re looking for feedback on the current IA as well as the questions above. If you have any opinions or ideas, comment below.

#design, #information-architecture, #plugin-directory

Digging the make blog redesign I notice that…

Digging the make blog redesign. I notice that the “learn more about mobile” link points back to the home page. Can this be updated to point to the mobile make blog? Thanks!

#design, #mobile

I changed the global header footer to use…

I changed the global headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes./footer to use #wporg-header and #wporg-footer, rather than #header and #footer. I think I caught all of the special styling situations, but if not, leave a comment.

Recently, the header/footer was added to translate.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/, which runs GlotPress. The theme is here.

#design

It would be good to list the plugin…

It would be good to list the plugin author(s) in the “About this Plugin” sidebar listing on review threads on pages like https://wordpress.org/support/topic/[plugin-name]

#design, #plugin-directory