Drupal 7 usability: status update

Based on a survey that I conducted last year, it was clear that one of the community's key goals is making Drupal easier to use. This is not really all that surprising. An easier to use Drupal means a Drupal that attracts more users, and therefore more potential contributors. It also means existing contributors spend less time doing custom work on their sites or developing training materials to help make Drupal palatable to their clients, and more time on making Drupal rock. And finally, it is strategically important for the future of the Drupal project to make our usability match the prowess of our flexible APIs; our competitors are working to build out their feature set to match Drupal's, and if we do not work to make Drupal's usability radically better, we risk falling victim to The Ockham's Razor Principle of Content Management Systems.

In this post, I want to give an update on the Drupal 7 usability work that has been done to date.

The good news is that thanks to the hard work of many people in the community, a lot of great Drupal usability improvements have already gone into Drupal 7. For example, we improved support for WYSIWYG editors, added more drag-and-drop, improved administration of permissions, added a default install profile which starts to configure some sensible defaults for Drupal as a publishing system, improved the password strength validator, redesigned and simplified various configuration pages, implemented "vertical tabs" on content creation and editing forms (see screenshot below), removed extraneous interface text, and much more.

The more important trend, however, is that after years of tireless evangelizing, the Drupal community is starting to value usability increasingly more. Today, the usability team is more involved in the patch review process than ever before -- for example, Bojhan, a usability expert active in Drupal's usability team, has even learned how to create patches so that he can help make simple changes. Another good example, is that in the Drupal 7 development cycle, we have raised money to do formal usability testing. These efforts illustrate a fundamental underlying desire to get better at usability, so I expect to see even more great things in the months to come.

Vertical tabs

The current node edit form in Drupal 7, the next major version of Drupal that is currently under development. Note the improved text format selector and the vertical tabs near the bottom. The "vertical tabs" show different groups of settings along with a summary.

All this is great work that helps address some of Drupal's fundamental problems; however, a lot of these improvements are incremental -- making incremental improvements is what the Drupal community excels at. Making the drastic over-arching improvements to Drupal's ease of use that we really need for Drupal to grow its audience requires one to step back, take a fresh look at the big picture, interview people, analyze problems, and propose more radical changes that incorporate piles of feedback and ideas. Needless to say, this is a long and expensive process, and not something we'd be able to get to using incremental changes. An objective without strategy remains a dream so as I announced in February 2009, I thought it would be right for Acquia to finance Mark Boulton and Leisa Reichelt to help the Drupal community with exactly this.

For about 3 months now, Mark and Leisa have been working with the Drupal usability group and the larger Drupal community to figure out how we can improve the usability of Drupal 7. I figured an update was in order.

Mark and Leisa's work is being done in an open, collaborative, and transparent way, involving everyone in the Drupal community. The work is happening in a number of locations, and the best place to keep track of it all is at D7UX.org. Mark and Leisa also often hang out with the usability team on #drupal-usability on irc.freenode.net, and even have been known to venture into #drupal and #drupal-dev.

Some of the activities to date have included some 'blue sky design workshops' with community members at DrupalCon DC, one on one interviews a range of members of the the Drupal community and many potential future Drupal users, asking you to share the Drupal administration modifications you're already made and others you'd like to see made. As the work has progressed they have shared work in progress on Flickr, shared ideas, process and prototypes in videos on YouTube, conducted user testing on those prototypes (and reviewed some of your findings through crowdsourced usability testing), and much more.

Mbd header mockup

A Mark Boulton mockup of the "header" that we might see in Drupal 7.

In addition to paying Mark and Leisa, Acquia has contributed some of its own internal engineering resources. Jeff Noyes, Jason Reed (both senior designers) and myself traveled to meet with Mark and Leisa in London -- we flew in Yoroy, a key contributor to Drupal usability, to attend as well. We locked ourselves in a room for two days, and discussed and validated early design prototypes. You can read a summary of the visit on Jeff Noyes's site. Returning home from London, I couldn't be happier, because the designs and prototypes started to live up my vision and expectations of how easy to use Drupal could be.

Since then, Mark and Leisa have revised many of their prototypes based on the feedback that was provided, and continues to be provided by the larger Drupal community. The latest versions are available from D7UX.org. They aren't finished yet, but Mark and Leisa will be helping us until the end of July. Expect more mockups, working prototypes and lots of user testing and iterations. Eventually, we should also have some style guides. If you're interested in participating (and the more people who participate, the better Drupal 7 will be), you can view a list of current activities as well as well as the project framework, where the current thinking around 14 separate topics is being centrally collected and discussed.

However, beautiful usability improvements are no good to anyone unless they have code behind them. In my next blog post, I'll write about the next steps, and how we can all help translate these mockups into working code.

Comments

Jordi BufĂ­ (not verified):

The screenshots shows an impressive work. Selling Drupal to our clients will be easier than ever :)

May 26, 2009
Mithrill (not verified):

As I just installed Drupal for the first this week, I can't wait to see version 7. In ways, I wish it was already out as it was ease the steep learning curve required to grasp this powerful system. Keep up the good work.

May 27, 2009
Michael Loyst (not verified):

This is great! The current way options are set up when publishing content is very intimidating when I'm showing some of my older-age clients how to publish content. The vertical tabs are a huge improvement. What I'd like to see in Drupal 7 the most is AJAX in almost everything right out of the box. (This would be great on the module admin page, one click enable/disable with a popup to confirm.)

May 27, 2009
Paul Evans (not verified):

The condensed UI in the node edit form looks excellent - particularly with the summary alongside each section tab. Text format area (although condensed a little) doesn't look like a big improvement. This area of the CMS is one of biggest areas of concern, simply from a client perspective. When you wrap in rich text editing (which is a must for most clients) it's a difficult task to configure it and keep it looking simple!

The possible new 'header' looks very interesting and I like to see it taking some direction from admin_menu. It's far more convenient to have it removed from the page flow.

May 27, 2009
Javier Maties (not verified):

Excellent work!!

May 27, 2009
dbeall (not verified):

just browsing-- As a new user myself(since June 08) with D6,, I have seen the power of Drupal give ordinary people(not developers) control over their web site in ways they have only imagined in the past. And I must say, they are over the top with enthusiasm about it.
One of my clients(a boat dealer) said, "You really are a a geek, I owe you big time. In the past it took me 3 weeks to get the guy to make changes to my web site, everything was out of date all the time, now I can easily do it myself."
My reply, "It's not me, It's the Drupal community that put this all together."
If that doesn't say 'usability' already, I don't know what does. Great team work,, looking forward to D7.

May 27, 2009
Chris (not verified):

Wow this is amazing, especially wysywig editor core. I love drupal :)

May 28, 2009
SHL (not verified):

The changes in the screenshot truly look great!

The vertical tabs solve partly one of the main complaints I get from customers, regarding the UI; the amount of scrolling. So thumbs up for that! :)

Scrolling could be eliminated though, for a big portion of edits (when just adding a title and content), by supplying with another save button at the top of the page, as seen in many other systems.

Additionally, I second Paul Evans' comment about the text format area.

Looking forward.

May 28, 2009
Stephen Edwards (not verified):

Good improvements and much needed.

However, the most common request I receive from users is "how do I save as draft". When I point out the publishing options, they then ask why the draft option isn't a button next to submit and preview. I have to say I agree 100%.

May 28, 2009
Anonymous (not verified):

Draft module can add that functionality to Drupal 6:
http://drupal.org/project/draft

May 31, 2009
gbirch (not verified):

A quick anecdote for the usability team. I've been building websites nearly full time for over a year. I'm now learning how to use Drupal to do so. I've read whole books on Drupal. I'm not a complete idiot. I STILL couldn't understand what the "Split summary at cursor" button was for. And there it is again in your demo of how usability in version 7 is so great.

Let's note what's wrong with this phrase:
1) What "summary"? I don't know about you, but I'm editing something labelled "Body."
2) Why do I want to "split" the "summary" in the first place?

Eventually, I just pressed the button and worked out that it was to insert a mark in the body to show where a teaser display should end.

By contrast, when I install and use FCKEditor, the same function is supplied by a helpful button, with a suggestive icon, labeled "Teaser," that has "Insert Teaser Break" as its tool tip. Now THAT's understandable.

This is only one of the more egregious examples. In short, you might want to think radically about your terminology if you are going to get serious about usability.

Good luck!

June 1, 2009
Ximo (not verified):

I couldn't agree more. It's a very cool idea, and it works very well once you get it. But it confuses the heck out of the important 80% of Drupal's end users.

It should be mentioned that it was added long before the Usability team was formed, and I believe it's high up on the list of UX issues to fix.

June 3, 2009
Luigi (not verified):

And there is more.
Forget about splitting the body to have a teaser.
It must be a separate teaser field, not as a module but in the core. You know that a teaser is often a summary of the body, maybe with a picture, and you cannot write it at the beginning of the body and then repeat yourself in the page.
I cannot care less about interface usability or Ajax if I don't have a real html editor working flawless in the core, or a decent file manager. Get real.

June 10, 2009
EvanDonovan (not verified):

Teaser is a separate field in the {node_revisions} table. The UX for it needs to be better, but it can be implemented perfectly in Drupal as it is at the the database level.

June 12, 2009

Add new comment

© 1999-2014 Dries Buytaert Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
Drupal is a Registered Trademark of Dries Buytaert.