A user interface design pattern library for Drupal

Roy — Tue, 06 Oct 2009 21:45:49 +0000

A user interface design pattern library for Drupal Roy 06-10-2009

“…Surgical teams that follow a basic checklist in the operating room, from discussing expected blood loss to confirming the patient's name, reduced the rate of deaths and complications by more than a third.” (source)

Drupal module development will hopefully not cost human lives one way or the other. But when building your module's UI the same principle is at work. It's all too easy to skip the basics, and go straight for the more complex parts of the problem. That’s the interesting part after all.

There’s literally thousands of contributed modules out there. If you have forty of those installed on your web site, the user experience will be much improved if the UI for each behaves in consistent ways. We hear developers wouldn’t mind having some advice on how to do this, either.

At Drupalcon Paris Bojhan and I presented the talk ‘Building blocks for your module's UI’. Consider it the kick-off for creating this checklist. We'll call it a user interface design pattern library.

A design pattern is a generalised, reusable solution to a commonly occurring problem. It should:

Describe the common problem
Offer a solution
Give a rationale for why (and when) this solution works
Provide visual examples

In our presentation we do this for fieldsets, tables and vertical tabs amongst others. There’s a big part on copy writing in there as well. But we’ll save that for another post.

So, now to make this first outline into a useful reference for core and contrib developers that will actually get used! The outline and inital content is there. We'll need some help getting it done for real though. Have a look at the presentation if you will. Then, we'd love to hear from you if want to help with documenting and writing these patterns.

drupalplanet

Drupal

pattern