WordPress.org

A question I hear pretty frequently is, “Why a redesign of the admin panel so soon after 2.5?” Those who have attended WordCamps in the past few months have already heard the answer, but for the people who haven’t had that opportunity, this post is for you.

When the community response to the 2.5 admin redesign was mixed, it seemed like a good idea to do usability testing to find out which issues were based on actual interface problems vs. which complaints were just a result of not liking change. To prevent bias, a third party was contracted to conduct usability testing, Ball State University’s Center for Media Design, Insight and Research division. Try saying that three times fast with a mouth full of peanut butter. Or fitting it on a business card. To save time, we’ll just call that third party CMD, since that’s what they call themselves.

The plan that was developed involved multiple rounds of testing, as well as the creation of two prototypes, hardcore! The first phase involved a usability review of 2.5 by CMD, the results of which were discussed with lead developers. A quick prototype was created that addressed some of the lightweight issues, so that the test participants could use both 2.5 on their own blogs and the prototype on a test site. Results would be analyzed and compared, leading to a second round of suggestions. A second prototype would be developed over a week or two, which would then be tested with the same participants, and a final report delivered. But you know what they say… the best laid plans of designers and developers often go awry.

After the first round of testing, it was clear that a prototype delivering the kind of fixes that could be coded in a week or two wouldn’t make much of a difference overall. We all decided a more ambitious prototype was in order, one that would experiment with a new approach to screen real estate and attempt to address as many of the issues from 2.5 as was possible with a few extra weeks of time. A rapid design process was followed by an even more rapid development cycle. The second prototype is what you know as Crazyhorse.

The second round of testing blew everyone away. The research team had never seen such consistent results. Tasks were completed faster, participant opinions rated it higher, understanding of how interface elements worked was greater, and it wasn’t even a fully functional application. Of the test participants, every single one said they would choose the prototype over their current administrative interface, and it wasn’t even pretty (those of you who remember the original Crazyhorse will vouch for this).

A presentation on the process from start to finish was part of the schedule at WordCamp 2008 in San Francisco, and the slides are available online, but as always the slides only tell you so much without the videos, live demo and verbal narration that went with it. (Use Google and you can see audience videos of the presentation.)

Here, then, is a PDF of reasonable size that you can download and peruse at your leisure that outlines the usability testing project in some detail. I wanted to include some eye tracking videos, but the file was so huge it would have been ridiculous for anyone to download it, so I stuck with eye tracking outputs called gaze trails to illustrate the findings. I also tried to pare down the text to the more salient points, since more than 50 hours of test video really does reveal an insane amount of data. I also cut out the section about designing Crazyhorse in the interest of staying under 25 pages. Hopefully you’ll think it’s a good balance. I’ll try to put together a separate document on the design process of 2.7 in a couple of weeks that will include the early Crazyhorse material.

So, if you want to know what we learned from the usability testing this summer that caused us to create what is now 2.7, go ahead and read the report.

WordPress 2.5/Crazyhorse Usability Testing Report (PDF)

Have you seen the getting-prettier-all-the-time menus in 2.7-almost-beta? They really are. Getting prettier all the time, I mean. Once we drop in the fonts and do a little brushing up of edges and colors, the menu system is going to be smooth. The last thing we’ll need to do to is replace the icons we’ve been using as placeholders. Currently, the menus are using icons from Crystal Project, which is perfect because they’re released under LGPL (yay for open source!), but less perfect in that they don’t quite fit with the new visual style of 2.7, so we’re thinking custom icons.

I’m always meeting people at WordCamps or via email who say they wish they could give back to WordPress, but that since they aren’t PHP developers, they feel like there isn’t any opportunity for them to be a part of the open source project. Well, here’s a golden opportunity. Want to design the new WordPress icons?

The icons:
We’ll need icons for each of the main navigation sections, plus a matching pair of list/excerpt view icons for the table screens like Edit Posts. That’s a total of 13, and for the navigation icons we’ll also need a larger size for use in the screen headers. Some of the sections have natural iconography, while others may be more challenging. The sections are: Dashboard, Posts, Media, Links, Pages, Comments, Appearance, Settings, Users, Plugins, Tools.

The style:
Icons should be subtle, with a classic/designed look, nothing cartoonish. Thin lines. Maybe a little old-fashioned looking. They’ll be grayscale by default, possibly with a color version for active menu items.

The timing:
Fast, fast, fast. 2.7 is due to release on November 10. That means icons need to be ready within two weeks, give or take.

The required experience:
To be taken seriously, you’ll need to show a background in icon design. It’s a different skill than web site or application design, and given that there’s not much time before the 2.7 launch, someone with experience (and possibly existing work they can leverage) is going to be the best candidate.

Interested? Send us an email and tell us why you want to design the icons, and include a link to your portfolio. How we wind up choosing an icon designer will depend on how many people respond, but we’ll keep you posted on the process. For now, send in portfolio links by Saturday night, October 25, 2008. We’ll review them over the weekend and get in touch with people on Monday. Hopefully we can be designing by early next week.

A vulnerability in the Snoopy library was announced today.  WordPress uses Snoopy to fetch the feeds shown in the Dashboard.   Although this seems to be a low risk vulnerability for WordPress users, we wanted to get an update out immediately.  2.6.3 is available for download right now.  If you don’t want to download the whole release to get the security fix, you can download the following two files and copy them over your 2.6.2 installation.

1. wp-includes/class-snoopy.php
2. wp-includes/version.php

First, I’d like to say that I’m glad the majority response to the screenshots we posted last week was so positive. With a community as vocal as this one, it’s always a little nerve-wracking to introduce change, but this time it seems like the change was welcomed, which has been great. I’m hopeful that as we introduce the new features of 2.7 over the coming weeks, the good feelings will continue. As promised, here’s a rundown of what’s going to happen to the Dashboard over the next couple of weeks before launch.

Menus
I described the menu functions last week, but I forgot to mention something. By default, when you arrive at your Dashboard the first time, two sections of the navigation will be expanded: the Dashboard section (because it is active, so it will have the color highlight) and the Posts section (because it has often-accessed screens in it, and will serve as a cue that you can view other section menus without loading new screens). Once you start clicking menus open and closed, your browser will cookie you, and will remember your menu state. So if you open Posts and Comments, when you come back the next time, Posts and Comments will be open. If you click into your Settings, Posts and Comments will still be open. You’ll need to manually close nav sections. We went back and forth on this, and there was community discussion about perhaps only allowing two sections to be open at a time, but ultimately those approaches would have removed control from the user. And since the mantra of 2.7 is to give the user control over his/her admin interface, we chose to keeps things open if the user had opened them.

Contextual Access Tabs
In the upper right, drop-tabs provide access to contextual features displayed in a layer that appears between the header and the main working area. Screen Options will allow you to choose which modules to display on the current screen. Don’t like seeing the Incoming Links module because no one links to you? A simple checkbox in the Options tab will remove the module from your Dashboard until you decide to reinstate it. Help will highlight some of the changes since the previous version, and provide links to help resources such as FAQ/Forums/Contact Support for .com and Documentation/Support Forums for .org.

Module Layout
In addition to using the Options tab to decide which modules to display on the Dashboard, all the modules on the Dashboard may be moved up or down or between columns using drag and drop. Modules also may be collapsed or expanded by clicking the title bar, allowing another level of screen customization. In 2.8, we also hope to make every single module configurable in terms of what content it displays… we ran out of time for this in 2.7, so for now only the newsfeed modules will be configurable. When you hover over the module, a link will appear in the module header allowing access to the configuration view.

Right Now
The Right Now module contains the same data as before, but it’s been rearranged to provide a clearer display. This list style, as opposed to the previous sentence style, will also make translation for non-English sites easier. Color cues help to highlight things that are not good (red), things that are pending (yellow/orange), and things that are good to go (green).

Stats
I’d like to apologize for having a non-core piece of functionality on the Dashboard comp. It’s my fault… when we were working on the comps, we used my wireframes and my live 2.7 Dashboard to assemble our elements, and I forgot that I had the WordPress.com stats plugin installed and a module on my Dashboard. So even though it’s not in core and it turns out the WordPress.com stats plugin is undergoing some reworking of its own, we made the Dashboard stats module easier to scan than the one I currently see when I log in. For those of you on .org who got excited when you saw the Dashboard comp with stats, again, I apologize for the oversight on my part. If you want the candy-like stats goodness we comped up you’d need to install the plugin (or another stats plugin with candy-like elements). There should be a fine-looking Dashboard module as part of the update they release.

QuickPress
QuickPress is a new feature that provides the ability to start (or publish) a simple post from the Dashboard when you don’t need the full feature set of the Add New Post screen. Currently, these posts can contain title, text, media and tags. In 2.8 we hope to make the module configurable, so that each user can decide which few fields make the most sense to display. If you Save as Draft, you will see the new draft appear in the Recent Drafts module right away. Clicking Cancel will clear the form. Publish publishes the post. Posts made using QuickPress are the same as other posts and may be editing by going to Posts > Edit and selecting the post in question. One last thing: both in this module and on the Add New post screen, we’ve put as much space as possible between the Save Draft and Publish buttons, so for all of you who’ve asked at WordCamps or emailed or posted somewhere to request this, ta da! Hopefully this will reduce accidental publications.

Recent Drafts
During the summer testing, one thing we heard over and over was the desire to access recent drafts more easily, preferably with one click from the Dashboard (as opposed to clicking on Drafts from the Right Now module, waiting for page to load, then clicking on a specific draft title and waiting for a second page load). The Recent Drafts module is meant to address that need, displaying the five most recent drafts with the date they were created. In a future version, this module will be configurable as well. In the meantime, if you’re a crosswords-in-pen kind of person and you don’t write drafts, just use the Options tab at the top to hide the Drafts module, and it won’t take up space on your Dashboard.

Feeds
News feeds of WordPress-related news will function largely the same as they did in 2.6 in terms of configurability, and will simply have a new look. You can still specify the URL of the feed, how many items to display, whether to show headline vs excerpt, author, date, etc.

Incoming Links
Just getting a face lift. Or maybe not a face lift, more like a visit to the Clinique counter.

Hooks
Plugins can still add modules to the Dashboard. They also still can add top-level menu items if necessary (as opposed to having them in Tools, Plugins, Settings or wherever…like Posts if it’s post-specific). Because we’ll be using iconography in the collapsed menu state, plugins that create top-level menus can create an icon for use in the menu system. When there’s no icon associated with the plugin, a default will be used (kind of the way some blogs show default avatars when no Gravatar is associated with a commenter on your blog). Hopefully, though, most plugins will fit within existing section headers, since our “top level” is not actually made up of menu items, but section headers that open to reveal the real menu items that have screens associated with them. Plugins can also put themselves into the Shortcuts/Favorites menu in the header.

Recent Comments
This module, as in 2.6, displays the most recent comments. However, you now can moderate comments directly from this Dashboard module, including the new Comment Reply feature. For now it will show only the last x number of comments, as it does currently, though in 2.8 we hope to add more configurability to this, or roll it into the Inbox concept.

Bye-Bye Inbox
For those who were at WordCamp SF or who were using the nightly builds while there was still an Inbox placeholder, sorry, no Inbox in 2.7. It turned out to be far more complex than anticipated, and rather than including something rushed and clunky, we’re holding off until a later version. We added the comment moderation to the Comments module to make up for it, so you don’t have to wait for that, at least.

So that’s the new Dashboard. A little more usable, a little prettier, a little more you, a little cooler. Or maybe a lot of all those things. We’ll let you be the judge.

It’s finally here, the moment you’ve all been waiting for! The long months of your tolerance and forbearance as you suffered through the inelegance of our hacked-together, leftover Crazyhorse interface are almost at an end. (Was it really that painful?)

The visuals you have been craving are finally finished enough to show, and have been approved by the lead developers. We hope you like them. Mad props to Matt Thomas and Andy Peatling for their visual talents. You can expect these designs to be extended to the rest of the 2.7 screens and implemented over the coming weeks.

So now that we finally nailed down the look, how’s it going to work? The menu system in particular has been the topic of discussion on the hackers and testers lists, so I thought I would take this opportunity to explain how we plan for it to work. As you know, one of the goals of 2.7 was to reduce the necessity to load new screens just to access sub-navigation menus; we wanted the most-used screens to be within a click or two at most. If you’ve been using the nightly builds, you got used to the arrow controls that allowed you to expand and contract the menus. Then you got used to the box-style with icons that not only opened and closed vertically, but could be minimized horizontally as well, leaving a remnant of icons to provide a kind of “advanced mode,” though you don’t need to be particularly advanced to use it. Now that we have real button styles (the icons are still placeholders, and we hope to have some new ones soonish), we’ve nailed down the menu functionality.

2.7 New Post Screen, Unfinished

Each section header has three parts: the icon on the left, the blue link text, and the area to the right where an expansion arrow appears on hover or in expanded state. You can see that the arrow is contained in a small segment of the header, similar to the way the favorites menu is structured. If you click on this segment, the menu will expand to show the choices in that section. Click again to close the menu. Click on the blue link text and you will go directly to the screen for the first choice in that section, where the section menu will be opened to show you the other section choices. Double-click on the section icon and the menu will close horizontally, leaving the icon list visible. In this state, hovering over the icons will display the menus for each section, so you’re still only a click away from most screens. Double-click on an icon when the menu is closed this way and it will take you to the first screen in that section. The small arrows attached to the dividing lines between menu groups will also act as open/close toggles for using the horizontal collapse/expand function.

This variety of ways of using the menu system aims to accommodate both power user and novice alike. Clicking on blue link text like normal will bring the expected result for the novice, while the advanced user has more options for navigation that allow a more customized experience. We hope you like this result as much as we do, and you can expect to see it implemented in Trunk soon.

The image below is the new Dashboard style, for which I’ll save the explanations until early next week, but hopefully the preview will get you excited for the new design.

2.7 Dashboard

For those of you who have been downloading the nightly builds or contributing code to 2.7, you’ve noticed how quickly features are being added, small layout changes are gradually being implemented, and the application is morphing before your very eyes. For the most part, the response has been extremely positive, but even the people who love 2.7 have been wondering what it’s going to end up looking like. Though 2.7 is still a work in progress, we’ve put together a set of wireframes to illustrate how we think it will all turn out, so you can take a look under the hood of the design process, so to speak.

The PDF attached to this post outlines the navigation model, header elements, and important screens such as the dashboard, the new post screen, and list screens for posts, comments, and media.

Some things to bear in mind if you’re not used to looking at wireframes:

1. These are a guide, not a dictate. Changes may be made by developers and designers as needed for technical, aesthetic and/or usability reasons. When you have a team of superfast developers like we do, sometimes wireframes can become out of date quickly. In the two hours since these wireframes were approved, for example, already there are a few things that have moved and a menu change or two. Tweaks will continue to be made over the next week or two before freeze. This is Alpha software, not Beta, and it’s not static. That’s part of what makes it exciting, that every time it’s updated there’s something new.

2. These are all black/grey/white. That’s because we have a designer hard at work on visual styles for the new admin panel, including color palette, fonts, graphic elements, etc. When we have a new look to show off, we will. For now, the wireframes are “lookless” on purpose.

3. Not every screen is wireframed. We focused on creating wireframes for those screens that are undergoing the most change. For screens retaining largely the same functionality and layout, we have not included wireframes. In some cases, we’ll be updating screens but haven’t decided how to do it yet, so those aren’t included either.

4. Some elements apply directly to wordpress.com or wordpress.org, so don’t be alarmed if you see something that doesn’t seem to apply (like multiple dashboards).

One of the things I love best about WordPress is the vibrant community full of talented developers and designers who care about the application and want it to be the best it can be. Despite the overwhelmingly positive response we’ve gotten when showing 2.7 at WordCamps and from the majority of the community, there will always be people who would prefer it to be structured another way, which is why we love plugins! The decisions that went into 2.7 were based on a combination of usability testing results from 2.5 and Crazyhorse (both including laser eye tracking, official report to be released soon, but slides from WordCamp SF available in meantime), community feedback, personal and professional opinions, and some thinking about where the next couple of versions will be going in terms of new features, so that we will have a design that scales to accommodate some the features we hope to incorporate in the future.

So, I hope you enjoy getting an inside look at how we’ve been organizing our thoughts around 2.7, and that when the community feedback starts flowing everyone remembers that we all want the same thing: the best WordPress possible.