You are here

Usability

Spark update: unified in-place editing

A major focus of usability efforts in Drupal core has been around making it easier to edit things on your site. In Drupal 7, we introduced the Contextual links and Overlay modules to make it simpler for content authors and site builders to jump directly to the parts of the administration that relate to the things they see directly on the page, such as blocks or menus. Drupal 8 has now upped the ante with the new in-place editing feature, which allows for direct modification of content on your site, within the context of the page it is displayed on.

The next logical step is to take in-place editing to the next level by unifying contextual editing paradigms: combining the concept of "edit mode" with the ability to contextually edit more than just fields on content, in order to allow for contextual editing of everything on the page, in a mobile-first way.

Specifically, we need to address the following challenges:

  • Conflicting patterns confuse users: There are contextual gears to edit content, local tabs to edit content, and "Edit mode" to edit content. These patterns need to be streamlined.
  • Tasks are not intuitive enough: Seemingly simple tasks can often result in "pogo-sticking" around in the admin backend trying to locate where to change a given setting.
  • Unnecessary information slows users down: Drupal forms tend to be long and full of advanced/confusing options, which can overwhelm users trying to complete simple tasks.
  • Interactions don't work with smaller devices: With Drupal 8's Mobile Initiative, it is critical that these tools be as easy to use on the desktop as they are on a smartphone or tablet.

Here is a video showing what we'd like to propose for solving these problems in Drupal 8 core:

We've now performed several rounds of internal usability testing on this functionality, and it has tested really well so far, with a high emotional value: in general, people can't believe this is Drupal. :-) Check out the prototype yourself at https://projects.invisionapp.com/share/U2A4IAGX.

I'm very excited about these changes, and feel that if we can get this into Drupal 8 it could be game-changing. But what do you think? If you like it, we'd love help with implementation and reviews in the core issue at http://drupal.org/node/1882482.

Spark update: in-line editing in Drupal

The goal of the Spark distribution is to incubate authoring experience improvements in a Drupal 7 and Drupal 8. It was announced earlier this month, and since then we've been hard at work on initial research and design.

The Spark team's primary focus is on improving Drupal's content authoring and editing experience, and the first feature we're prioritizing is in-place editing: the ability to edit content, menus, etc. directly on the page, without the need to navigate to a separate edit form. Think of it as "true" WYSIWYG.

Members of Acquia's design team spent time analyzing how some of the most widely adopted Open Source as well as proprietary CMSs do in-place editing. We then prototyped some initial ideas, and performed usability testing on those prototypes to see what works and what doesn't. After a number of iterations, we're happy to report that the usability testing has validated Spark's general design direction. People loved the prototype. Now is a good time for us to share our initial prototype and to solicit further feedback from the community so we can shift gears into implementation.

The following 5-minute video walks through the HTML/JS prototype, and also provides a bit of background on the Spark project:

Our goal is to deliver this functionality in a contributed module for Drupal 7 first and foremost, which will live at the In-Place Editing project on drupal.org. This module will be bundled into the Spark distribution. Depending on how it is received, I hope we can also target this functionality for Drupal 8 core.

From a technical architecture standpoint, we are currently in the process of selecting the WYSIWYG editor to use in Spark for in-place editing of HTML content. For now, we plan to focus on supporting only the Filtered/Full HTML text formats in order to get us to something testable faster.

Later, we are hoping to branch out into other areas of authoring experience too, including helping with the content creation form improvements that the Drupal usability team has been spear-heading, as are well as the layouts UI work being actively discussed in the usability group. The Drupal usability team is doing an incredible job with these issues, and once fully staffed, I would like to see the Spark team help implement these improvements for Drupal 8 and backport them to Drupal 7 so we can ship it with the Spark distribution. (Did I mention that the Spark team is hiring? ;-))

As you can see, things are starting to move along quite nicely. Please join the discussion in the Spark issue queue if this functionality sounds exciting to you and you'd like to help!

Announcing Spark: authoring improvements for Drupal 7 and Drupal 8

At DrupalCon Denver, I announced the need for a strong focus on Drupal's authoring experience in my State of Drupal presentation. During my core conversation later in the week, I announced the creation of a Drupal 7 distribution named "Spark" (formerly code-named "Phoenix"). The goal of Spark is to act as an incubator for Drupal 8 authoring experience improvements that can be tested in the field.

I hope for Spark to provide a "safe space" to prototype cutting-edge interface design and to build excellent content tools that are comparable with the experience of proprietary alternatives. While not a final list, some initial thinking around the features we want to experiment with is:

  • Inline editing and drag-and-drop content layout tools ("true" WYSIWYG)
  • Enhanced content creation: auto-save, save as draft and more
  • Useful dashboards for content creators
  • Mobile content authoring and administration support

The vision behind the Spark distribution is to be "the Pressflow of Drupal authoring experience". Pressflow provided a "spoon" of Drupal 6 with various performance enhancements that made their way into Drupal 7 core while it was in development. The same improvements were made available to Drupal 6 users so they could easily be tested in the field. With Spark, we want to test authoring experience improvements in Drupal 7 on real sites with real users and real content. We also want to target the best improvements for inclusion into Drupal 8 core.

I'm excited to announce that Acquia will fund the Spark distribution. Core developers Gábor Hojtsy and Wim Leers will work on Spark full-time starting in late May. They will work along side Angie Byron (webhchick), Alex Bronstein (effulgentsia), myself and other members at Acquia. While we have some promising candidates so far, Acquia is still seeking applicants to join the Spark team (with a strong preference to candidates located in or willing to move to the Boston area):

The Spark team will collaborate with the Drupal usability and the core development teams.

Drupal 7 usability code sprint in The Netherlands

On Friday, there is a Drupal meetup happening in Utrecht, The Netherlands. I'm planning to attend so looking forward to meet some of you there.

On Saturday and Sunday, a smaller group of core developers will meet in the offices of One Shoe in downtown Utrecht to work on the ongoing Drupal 7 usability efforts. According to the event page on groups.drupal.org, confirmed attendees for the sprint include Leisa Reichelt, Mark Boulton, Gábor Hojtsy (goba), Damien Tournoud (DamZ), Erik Stielstra (sutharsan), Bojhan Somers (bojhan), Roy Scholten (yoroy), Bart Feenstra (Xano), Gaele Strootman (gaele), Kristjan Jansen (kika), Thomas Moseler (eigentor), Konstantin Kaefer (kkaefer), Philip Vergunst (skilip), Willem Mol (Whatdoesitwant), Berend de Boer (berend), Maarten Verbaarschot (mverbaar), Johannes Haseitl (derhasi), Steve De Jonghe (seutje), Clemens Tolboom (clemens.tolboom), Thijs Zoon, and Floris Derksen. I plan to stop by on Sunday as well.

Though the open sign-up for the code sprint on Saturday and Sunday has already closed due to the number of attendees already confirmed, contact Thomas Moseler (eigentor) if you want to attend and he may be able to squeeze you in. He's also actively looking for sponsors to help some European core developers to attend the Utrecht activities; if you can help, please send him an e-mail. Thanks!

Google Wave is "wow"

Google Wave is one of the most exciting products I've seen in a while -- it could reshape how we work, how we collaborate and how we do business. This is big. Provides me a ton of inspiration for Drupal ...

Drupal 7 usability: next steps

Improving the usability of Drupal is very important. Yesterday, I wrote about the progress that was made on Drupal 7 usability -- the community has made a ton of incremental improvements, while Mark and Leisa have been preparing mockups and wireframes that provide significant over-arching improvements to Drupal's ease of use. Combined, I believe these efforts could make Drupal 7 a great release. A release that the Drupal project needs since our competitors are catching up in terms of functionality and flexibility. Likewise we need to catch up in terms of design and usability. It is my belief that we can develop a user experience for our project that is game changing, and that completely resets people's expectations both for Drupal and our competitors.

As I wrote in yesterday's status update, an objective without a strategy remains a dream. We added a strategy by inviting Mark and Leisa to help but unfortunately, a strategy without execution remains a dream too. In other words, the time has come to start translating some of Mark and Leisa's work into working code. With 3 months until the Drupal 7 code freeze, it is time to build working prototypes so we can do user testing, refine the user experience, figure out the remaining design questions, and ultimately, get everything right for inclusion in Drupal 7.

Needless to say, this is a non-trivial amount of work that requires a highly collaborative process in what seems like a very limited time. It's easy to throw up our hands and say that it's impossible, that we should wait for Drupal 8, or whatnot. However, maintaining the status quo is simply not an option. Drupal 8 won't be used in production for, probably, at least another two years. As I wrote before, I don't want to compromise on Drupal 7's usability.

Few projects win by maintaining the status quo. Projects that win are those that go ahead and always improve. It is OK to be afraid about the work that is ahead. If you're not scared, you're not doing the right thing. Both winners and losers have fear, but all winners have faith. We can do this -- we've done it before.

We have to acknowledge that we arrived at a special point. The time has come to start working together even more but as a community, we're still learning how we can best work together on usability and design issues. Retrofitting a usability process into what has traditionally been an engineering process comes with some challenges and frustrations. Based on the progress that we have made recently, I'm confident that we'll figure this out, and that the process will feel completely natural in the long term.

Here is how I think about it in the short term, and how you can help.

Mark and Leisa will be helping us until the end of July to refine the current mockups based on more user testing, feedback from the community, and additional research -- they'll also be available to help answer questions and to help all of us sort through any implementation details. Their current mockups are a great starting point -- they'll force us to collaborate more and to streamline the process. The more mockups we can implement and the sooner we can implement them, the more testing Mark and Leisa can do, the more problems we'll discover, and the easier it becomes to refine things.

If you are a Drupal developer, look for issues tagged 'd7ux'. We're also using a tag called 'd7ux-design-question' to track non-engineering questions for Mark, Leisa and the usability team -- this should make it easier for everyone to stay on top of the progress. For people new to Drupal, Leisa and other people in the Drupal usability team launched a micro-projects initiative.

At this point, I've no plans to postpone the code freeze date. We started working on Drupal 7 in February 2008, so it has been a long release cycle already -- as it stands, Drupal 7 probably won't be released before January 2010. Instead of pushing back the code freeze date, I'd like to invite all of you to help with the implementation of the mockups that Mark and Leisa are providing. If you are a company, you can help by contributing some dedicated resources to help. If you're contributing as an individual, we appreciate every hour or day that you can put into this project. If you are a module maintainer, now would be a good time to figure out what this means for your module and how it could fit in. Get involved now, and help make Drupal 7 a game changing release!

To help, Acquia will start contributing a significant amount of its engineering resources. Starting this week, we'll contribute two or three people full-time until the end of the summer! Probably a combination of Gábor Hojtsy, David Rothstein, and Paul Lovvik. Jeff Noyes and Jason Reed will assist with user testing and design. Also, after talking to Mark Boulton, he has agreed to contribute one week a month of Tim Millwood's time (a Drupal developer that they have on staff) from now on to code freeze.

I hope others will step up to dedicate some of their time and resources as well -- when you do, make sure to announce it in the comments and on your blogs. Together, we should be able to make a lot of progress. The more people from the Drupal community that can jump in to help, the better Drupal 7 will be for us all. Now is the right time to bring vision, strategy, and execution together to achieve our objective. Fear not, Drupal 7 will be a game changing release.

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.

Pages

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