Interface List Design – Drupal

This is a quick UI critique on a list design pattern that’s in a proposed stages for Drupal7. The UI being critiqued is not final, as such the feedback is meant to be helpful to both the Drupal team and anyone else designing list based design patterns.

Before:

drupal_content_list

Example image from drupal 7 content list

Key points with this screen:

  • The title areas don’t tell you what you’re supposed to do on this screen. In fact there are at least three competing title areas. “Content” as a title, “Content” as a tab, “Add new content” as a secondary title and two group boxes that cover filtering and updating. The actual title of the screen doesn’t reflect the modal nature of dialog. You’re actually adding content to something else and it’s not clear what that is.
  • The information is presented in the wrong reading order.  The content table should be first.  You first have to read the list to see what you’re dealing with before you decide to either filter it or update it.
  • An empty list is a dead-end. It tells you there is no content but doesn’t direct you on how or where you should go to create some.
  • The X in the upper doesn’t make it clear what it would close. The tab? The dialog? A simple cancel button or a standard cancel button or a close button in the upper right would be more obvious.

After

drupal content list updated

Key points

  • Title should say what you’re doing.
  • Filters should sit above column headers whenever possible. No additional button action should be needed and multiple filters can be applied at the same time.
  • It should be easy to reset the filters and hide them. Hidden should be the default.  The filters should give you a clue as to the number of items in each filter bucket:  Articles (3)  Posts (120). This makes it easier to select the right filters.
  • If the table is empty it should be easy to get to a content creation page.
  • Buttons along the bottom of a dialog provide clear ways to exit or complete the task.
  • Things that don’t map to the core task should be hidden.  In the original mockup there were options to update the status of content from published to unpublished. This type of functionality belongs in a management section, not when you’re “adding content.” It should be removed or hidden in a similar way that filters can be hidden.

Post to Twitter

Death to API’s, Long live standards

There are too many API’s in the world and the problem is getting worse not better.  Before the web the number of people creating programing interfaces was relatively small.  Most software applications didn’t have plug-ins and most applications were self-contained. 

Now every web site that’s developing software has their own API to allow developers to code to their website. Let’s take a simple example of 10 more popular sites for photos: Flickr, Facebook, Picassa, SmugMug, Kodak, Snapfish, Shutterfly, Photobucket, MobileMe and Phanfare.  Each one has it’s own API and each one has it’s own authentication layer, it’s own way to send, enumerate and thumbnail files. It’s stupid and broken.

It’s broken because anyone who wants to support multiple partners needs to code at least 10 different tools to support each one.  This is perhaps great for Flickr since they are high on the list but generally bad for everyone else.

Consider instead how standards work. What if each one of these sites supported a simple standard such as FTP.  In a manner of minutes you could add support for 10-20 or even 100 different photo sites.  Sure FTP’s not perfect, nor is it optimized for photos but standards rule and we as a web-community need push, evangelize and encourage sites to move back to standards and away from API’s. 

Myabe I’m being extreme. After all, API’s are a good way for two systems to talk to one another.  Especially when those systems are proprietary.  Oh and what if the existing standards are poorly written or poorly designed?  Sure API’s have thier place but it shouldn’t be the tool of choice. 

If you’re a developer trying to connect to a popular site it may not matter. You code with what you have. If there’s an API you use it, if there is a standard you use that. If that fails perhaps a little reverse engineering.  

But if you’re in that same developer on the other side of the fence trying to decide how others may interact with your service ask yourself if it wouldn’t be better to use conform to a standard rather then write a whole new API? If a standard doesn’t exist take the extra effort to build a community and evangalize one.

Post to Twitter

Multi-touch audio application

This is a pretty interesting video of a new type of musical instrument.

People are still figuring out what to do with multi-touch technology. While the same interface could be done on a 2D screen with controls and UI to control connections and devices there’s something about physically interacting with the device that makes it more of a musical instrument and less of a computer.

Post to Twitter

What not to do, MsgBox edition

Bad Message Box Buttons

If you decide to use a message box use the appropriate buttons and use the appropriate text. The text in this dialog is strange enough without the extra language backflips that the developer added.

Another example from the same program:

Bad Message Bad Buttons

Here you’re showing an information box and you have a “Yes” button. It’s just weird. What are you saying yes to? Instead display a progress indicator while data is downloading and add the warning text not to disconnect.

Post to Twitter