Author Archive
October 17th, 2008 | 
Author: 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?)
This week at the Automattic team’s semi-annual offsite meeting (offsite since we have no office), the visuals you have been craving were finally created and approved. 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, which I’ll save explaining for early next week, but hopefully the preview will get you excited for the new design.
2.7 Dashboard
Posted in 
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.
October 1, 2008 Update: The survey is now closed. Thanks to all those who participated.
Another round of mini-mockups and multiple choice questions awaits the first 5000 respondents. WordPress 2.7 UI Survey #2 is now available to take your opinions regarding:
- Where to put the search box
- Where to put the Add New Post button/favorites menu
- How to label the Future Publish/Edit Timestamp function
The survey (hosted by the good guys over at PollDaddy.com) will automatically close after receiving 5000 responses, which only took about two days for the navigation survey, so hurry over and cast your votes.
Note: when the survey has closed, these links will be disabled and this post will be updated.
WordPress 2.7 is currently in development and as some people already know, it features a revised layout with a left-hand navigation column that was designed in response to user feedback regarding the use of screen real estate. Because the navigation came straight from the Crazyhorse prototype that was developed quickly for usability testing, it is still a work in progress.
Navigation sections and labels are being decided now, and as usual there are lots of good ideas floating around. As part of the mission to increase user involvement in design decisions, we’ve created a survey intended to give WordPress users the ability to play a part in deciding how the navigation options should be grouped and labeled. If you use WordPress and want to add your opinion, take the survey.