cool tech graphics

Drupal UI: The Usability Challenge

Anyone who has delivered a Drupal site to a client knows that the user interface does not always receive a warm reception. As Drupal geeks we have grown accustomed to the admin interface and workflow of creating and managing content. However, for many clients Drupal is uncharted territory and the user experience can be one of confusion and fear (‘you’re not in Facebook anymore!’)

Dorothy struggles to understand Drupal

At this year's Pacific Northwest Drupal Summit I was fortunate to attend two sessions that addressed this issue; “Drupal UI Tweaks” by Darko Hrgovic (Agentic), and “Developing Information Architecture with Non-Technical Stakeholders” by Vanessa Turke (ImageX Media.) Both speakers addressed client concerns that come with using and managing Drupal sites and offered solutions to combat some of Drupal’s greatest UI challenges. Here are some key points that really stood out.

Usability needs to be in the project scope!

Darko made the point that clients often ask for complex features on their site and expect that usability will be included. He noted that usability is project specific, and that use case scenarios take time and budget to address. Creating a Drupal site that has a great custom interface with good usability requires earlier client involvement and more management. Vanessa Turke suggests asking clients “how would you imagine this working?” to gain insights on how to make your site more usable and to better define your content types.

When it comes to UX, user stories matter

Vanessa made some great points about the value of creating user stories and mapping them to features. Defining the ‘mission critical’ task users must complete helps to define roles and to improve usability. She likes to create a spreadsheet that follows the formula “As a [type of user] I want to [goal] so that I can [reason].” By clearly defining the specific actions each user will preform the workflow for that process can be streamlined in terms of the user interface. If developers can make a five step process a two step process through simple UI tweaks they will greatly improve the experience for content editors.

Dorothy struggles to understand Drupal

Drupal Education: Start early and get your clients in the game!

There is nothing more intimidating for a client than to be handed a Drupal site and told, “well, our team is all done, now have at it!” It is never too early to warm clients up to the general processes and workflow of Drupal; that way upon project completion that site will receive a warm reception rather being treated like a foreign object that everyone is afraid of breaking. Vanessa emphasized the importance of training clients to think of their site in terms of content, not pages. The more that clients can understand the role of content types and content workflow the better. Darko recommended that once a site has base level functionality to set up a dev server so clients can start adding content and playing with it. Even if the site is not themed yet clients will get a hang of content processes and start becoming familiar with the interface.

Proper Training and Documentation is a must

Darko recommends that one representative of a clients team should receive in depth training before the rest of their group. Once that individual has been trained, invite the rest of the content editors in and have the ‘trainer’ train their own team. To spice it up make sure the training sessions are recorded for documentation purposes (Agentic uses ReadyTalk.) An added perk of the recording is that everyone pays close attention to avoid looking incompetent on video! The more training sessions and the more documentation the better; Darko says that RTFM’ doesn’t work when there’s no ‘M,’ or if nobody knows where the ‘F’ the ‘M’ is!” Anticipate that there will be staff turnover, and you want your training sessions to transcend for future employees and content editors.

Some practical UI tweaks

Darko gave some helpful tips and observations regarding tweaking Drupal’s default UI. One observation is that clients seem to understand editing blocks more than views or panels. This may not be true for every client, but it is something that should be considered. Also, any time an edit link can be added to directly modify a piece of content, add it. In addition, write quality help text and make you sure it is readable (.6 em is not an optimal size if you want clients to actually read your help text!) There are many modules that can be used to restructure and customize the interface for clients, a few to check out are Views Bulk Operations (VBO), Contextual Administration, Views UI, and Modal Nodereference. In my opinion, the key is not to focus on what tools you use to tweak the UI, but what the end result is and how well it meets your users needs. Often simple tweaks and adjustments can do a lot to improve a user experience.

My favorite takeaway from the presentations was a quote Darko recited; “The optimal learning comes from the optimal level of discomfort.” For clients, learning a new CMS can be awkward and intimidating at first, but that is truly a part of any learning process. Our job as developers is to make the learning experience as intuitive as possible and to help clients through this initial awkward phase. Once they come through to the other side they can truly appreciate the power and flexibility of their Drupal site as much as developers do. Drupal’s usability reputation is in our hands; let’s deliver a great experience!

Date posted: October 24, 2011


Interesting post, thank you.

I'm wondering if it is really "never too early to warm clients up to the general processes and workflow of Drupal" - it seems to contradict the "optimal level of discomfort" part. After all, if a new CMS can be awkward and intimidating, an unfinished CMS can be even more awkward, especially if some of the UI tweaks are not in place yet.

How do you make sure that an early introduction to a new Drupal site doesn't result in a bad initial experience? A bad start is hard to fix...

Great point- when it comes to Drupal I definitely believe that a clients first impression needs to be a positive one.

I think what the presenters meant is that waiting till the project is complete (or nearly complete) to begin training and education could result in some really overwhelmed clients. Learning a new CMS can definitely be awkward and uncomfortable, and I can imagine that stress being magnified by an impending launch date. What I heard from both Darko and Vanessa is to get your clients to start inputting content as early as possible, that way you can catch oversights in content types early on and tweak the UI according to client feedback.

Even if you don't have a 100% finished and pretty site yet, getting clients to input some content could bring up some great ideas and UI modifications before the development cycle ends. Delivering a polished product to clients with a slick UI is great, but there is always a chance that you may have missed something by not involving the client till the very end. I would love to know what has worked for others in the past and what they recommend, thanks for your feedback :)

I think I once saw a similar module to modal_noderef available for Drupal 7. Can't find it at the moment, anyone knows about that?

Thanks for the great write-up. What sort of documentation or training material do you use for training your clients the basic use of Drupal? I often find it hard to find clear training material.

I agree that it is hard to find Drupal Training materials for non-technical users. My coworker Kronda wrote a nice post addressing this issue that you should check out (Where's the Love for Drupal Content Editors? (UPDATED).)

Here at Metal Toad we create are own custom training materials, which range anywhere from instruction sheets to annotated screenshots to video screencasts of a developer using the site. Because each project varies in terms of site type and client skill level it can be difficult to reuse training materials. Our training processes are always being improved upon as we come up with new ideas, I would love to see a series of videos where Drupal is explained in plain terms anyone can understand (if I don’t find any maybe I will make them myself at some point!)

Does anyone know of some good Drupal training videos for non-technical users? If so please share some links!

It definitely could use some work, but Drupal really is one of the best platforms that we have on the web, that's just my opinion. A lot more improvements are needed but I can see Drupal getting there soon. So everyone should watch out.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?