The Drupal 7 Media Library and Design Patterns

In their amazing effort to involve the community as much as possible, a while ago the Drupal 7 User Experience team — lead by Leisa Reichelt and Mark Boulton — introduced microprojects. These microprojects are about relatively small parts of Drupal which are in need of some user experience improvements.

Some examples of these microprojects include dashboard widgets (e.g. traffic data), appearance/choosing a theme and many more.

Media Library
After submitting some experimental mockups for several UX improvements to the Drupal Redesign pool, Maarten was selected to work on the media library. Currently, one of the bigger lacks of Drupal is a central place to manage files. It’s something most of our clients pretty much expect to be available though, so getting this into the Drupal core would be a huge step forward.

Various mackups for the media library

Of course, something like this needs to be thought through. There are loads of features you can think of but you don’t want to get a cluttered interface. I remember the issues that came up back when we used to build our own CMS at Merge. The media library was one of the bigger challenges for sure. For the Drupal media library, Maarten had a look at various systems that had implemented similar functionality, at the same time trying not to get influenced too much by others to keep the approach “fresh.” It’s about improving after all, not reinventing wheels.

An interface this complex can’t be done right in a single shot. It needs a lot of feedback from different target groups; designers, developers and end users, to achieve the “perfect” result.

At the time of writing, three iterations have passed and iteration four is beeing worked on.

During the weekend following the DrupalJam in Utrecht, work on the usability of Drupal 7 peaked during the usability code sprint. Leisa and Dries were among the attendees as well as Mark Boulton, Roy Scholten, Bojhan Somers, Kristjan Jansen, Gábor Hojtsy, Clemens Tolboom, Erik Stielstra and many more. You can read a recap of day 1 on Roy Scholten’s blog.

During the sprint, Maarten talked to Dries and Bojhan about the media library and received more feedback after a post on

Design Patterns
One of the greatest challenges in designing user interfaces for a complex system like Drupal, is maintaining a high degree of consistency across the whole system. Maintaining a library of design patterns can help to achieve this. In case of a User Interaction Design Pattern library, this will result in a consistent look and feel.

A pattern describes an optimal solution to a common problem within a specific context. If you use a design pattern library, you ensure everybody will use the same (user interaction) solution for a common problem.

For example, designing a functionality to re-order list items (menus, nodes) can be done in different ways. You could give each item a 'move up' and 'move down' button or you could enable drag-n-drop. Both solve the common task of re-ordering items. With a pattern library, you could say: “the best practice is drag-n-drop.” This way, similar functionality across a system will stay consistent, so end-users are able to understand and recognise certain functionalities faster and better.

Flip to slide 25: creating usable websites creating interaction design patterns

Leisa Reichelt also mentions the need to create such a library in her blog post Why Drupal needs a design community manager. To create such a library specificly for Drupal is no small task. There are some  discussions on this at the usability group and at the Do It With Drupal seminar last year; Creating Usable Websites. Also, one of the session proposals for DrupalCon Paris will be about Software Design Patterns.

Beach, Balls and Business

Read More »


This is the company blog of
Drupal specialist

We are located in Breda (Netherlands) and build websites using Drupal. More about us.

Content on this blog is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.

Creative Commons License

Recent Comments