Making Drupal websites user-friendly

There’s a common belief that Drupal is inherently less user-friendly than some other open-source content management systems (cough, cough—Wordpress). I hear it from prospective clients all the time when I tell them we work exclusively in Drupal. “Isn’t it harder to use?” they ask warily, as though I’m about to suggest a nuclear submarine for their next fishing excursion.

In response, I say that the best way to think about Drupal is to imagine it as Legos. You can buy Lego packages with awesome ready-made items like dump trucks, robots, or an Empire State Building, but you can also modify those items, or build something completely new. Similarly, developing a Drupal website typically involves hooking lots of ready-made features (called modules) together, tweaking some of them, and building some from scratch.

Thumbnail
Just a little something I was working on over the weekend.

So back to the question about usability. Yes, Drupal can be wonderfully, beautifully user-friendly, and customized to your exact needs—you just have to build it that way. This is why we build the following usability improvements into all of our sites. To illustrate, we're using a few examples from Wellesley Magazine, the Harvard-Yenching Institute, and Harvard University Health Services.


WYSIWYG Editor

Believe it or not, Drupal 7 doesn’t come with a WYSIWYG editor out of the box. So your developer not only needs to install one, but configure it properly to get the most mileage out of it. There are a few things that we do to make it work smoothly.

Thumbnail
Before: Drupal 7 doesn’t have a WYSIWYG editor installed out of the box. Unless you are incredibly geeky, this is unacceptable.
  • Make sure your actual styles, colors, and fonts show up in it. You’d think this would happen automatically, but no, there’s some extra coding we have to do so you can see all the text styles within the WYSIWYG editor.
  • Program in all the custom styles you’ll need in one menu.
  • Make thoughtful decisions about which toolbar buttons you need and want. (Do you really want to give your intern the ability to add smiley faces or hot pink text? I thought not.)
Thumbnail
After: You can see all style options in one menu, and preview how they appear within the editor.

Image Cropping

Built-in image cropping is a great time and sanity saver. Without it, you have to crop your images to the right specifications in Photoshop or another image editor, then upload the image. That doesn’t sound so bad, until you see your image in context and change your mind about how it should be cropped. (And if you’re like me, it takes some trial and error).

If the cropping is built in to Drupal, you can just adjust your square (similar to how you would crop your profile photo in Facebook) and call it a day.

Thumbnail
Image cropping tools built into Drupal make it easy to change your mind. No Photoshop needed!

Preview

Out of the box, Drupal’s built-in Preview is a little confusing. First off, if you’re using an administrator theme that’s different from your site’s look and feel (as is often the case), then you’re not going to see your nice type styles and colors. Second, if you have blocks on your page (as is often the case), then you won’t see those either. And lastly, it’s painfully easy to forget that you’re in Preview mode and fail to save your work.

We’ve solved these problems by installing Page Preview. This previews your page as it’s really, truly going to be seen in a scrollable frame at the top of your page.

Thumbnail
Before: In the default Drupal preview, you can’t see your type styles or other page elements. That makes us sad.
Thumbnail
After: The Page Preview module gives you a much more accurate picture of what your page is going to look like before you click Save.

Custom Administrator Menus

Life is too short to dig through Drupal's byzantine administrator menu. I know Drupal well, and I don’t want to hunt through that menu every time I update our website. So we use QuickBar to create customized menus for each kind of content manager. Each person sees only the options that she needs, wants, and is allowed to have. Ah, simplicity.

Thumbnail
Before: For the love of God, I just want to add a new page! Where is that again?
Thumbnail
After: This simplified menu shows only the items I need and want. Phew!

Content Search

Finding content you’ve been working on can also be a hassle, especially if it’s not yet published or doesn’t have a link to it somewhere in your menu. Using Views Bulk Operations, we beef up the content search screen so that you can search by keyword, author, content type, or even other custom filters such as your own organization’s divisions or topics.

Thumbnail
This custom content management menu provides ways to search content on various criteria.

Related Content References

This is one of my favorite features, called Entity Reference. Whenever you want to feature related products, blog posts, news, events, or whatever else, you just pick it from the list and call it a day. We set things up so that the featured content automatically gets formatted properly, as in this example from Wellesley Magazine.

To get related content that looks like this....

Thumbnail

All you have to do is this.

Thumbnail

 


Easy Internal Links

Another great timesaver. Normally, to link to another page within your site, you have to go to that page, copy its URL, come back and paste it in. The danger is always that if you rename the page or change the URL later, your link could break. With the CKEditor Link module, you just start typing the name of the page you want to link to and it magically gets the right URL. Best of all, the link references the page's node ID (kind of like a serial number for each page) so the link will never break.

Thumbnail
Just start typing the name of the page you want to link to, and the options magically appear.

Link Styles

Link styles never fail to produce a round of “oohs” and “aaahs” when we’re training clients, and I love them too. Remember when to make a button you had to go into Photoshop, make a rounded rectangle with your text on it, maybe throw in a little bevel or emboss for good measure, save it out, and then upload the graphic? A much better way is to create link buttons in CSS, and build them into your WYSIWYG editor as an option.

Just choose one of these options in the WYSIWYG editor...

Thumbnail

...to get these nifty link styles.

Thumbnail

Block Styles

Similarly, we let you pick from different styles for your sidebar and content blocks so you can mix and match, making important content bolder and more prominent, and less important content a little plainer. Again, we take care of all the formatting depending which style you pick.

Thumbnail

Your Customization Here

While plain, out-of-the-box Drupal may not be the most user-friendly system in the world, it’s also not necessarily intended to be. It’s intended to be a giant toolbox that is infinitely customizable. All it takes is some thoughtful developers to put the right tools together to serve your needs, and we like to think we’re pretty good at that. Feel free to get in touch if you’re struggling with your own Drupal website and would love it to be more user-friendly.

Share the Love