Geeks With Blogs
Chris Falter .NET Design and Best Practices

One of the cool features of the software my company builds is the ability to create "ad-hoc queries."  The concept is simple but powerful: developers build SQL views for important data, which are available to users via a visual interface.  After the user has visually built a query for the exact data she needs, our software generates a SQL language query that uses one or more of the views to extract/filter the requested data.  The query can be saved with a name, an owner, security permissions, and other relevant properties, and re-used as needed.

Since many customer organizations have built hundreds and even thousands of these queries, they have been requesting a way to manage the queries in groups.  We decided that the folder metaphor, familiar to anyone who has used the file system on a computer, would work nicely.  The design team was even inspired by Windows File Explorer to provide functionality that would allow users to move folders and queries around in a single treeview control.

Developers worked hard on implementing the requirement via an extJS TreeView control (since we are targetting the browser UI for all our new features).  Then QA set to work on making sure that the control would work as specified; they made sure a few folders could be added, deleted, moved by dragging and dropping, and so forth, and that a few named queries could be dragged into folders.  Finally, the team demo'ed the feature for internal and external audiences.  They showed a few queries in the control, then they added a couple of folders, and even dragged and dropped the queries and folders into a sensible hierarchy. Everyone remarked at how wonderfully it worked.

Then one of our customers (who has thousands of queries) tried to use the feature.  After waiting a minute for the treeview to load, error messages about slow-running scripts started to show up on the screen.  Needless to say, the customer called our support hotline, and we got right to work on trying to fix the performance problem.

Unfortunately, there was no quick fix.  The problem is that the treeview control is very processor-expensive, and there is no way for the interface to avoid loading all the queries the first time (when there are no existing folders and the query hierarchy is completely flat).  So we are going to have to re-do the design.  Only folders will be managed via the treeview, probably.  Then we will provide a filterable list for the queries, which will permit a user to select multiple queries and assign them all, in one fell swoop, to a folder.

The root cause of our problem had nothing to do with the technology, however.  The root issue was that everyone on our development team was focusing on how to deliver some cool functionality to our customers, rather than thinking of how our customers would be using it.  If we had been thinking of how it would be used...

  • The design team would have questioned whether it made sense to drag thousands of objects around in a single window.
  • Our developers would have questioned whether a metaphor that worked well on Windows would work as well in a browser UI.
  • Our QA team would have tried to come up with test scenarios that reflected real-world usage, rather than being satisfied with verifying that drag-and-drop functioned correctly on a small number of queries and folders.

Ultimately, you could say that we failed to heed David Platt's "First, Last and Only Law of User Interface Design":

"Know Thy User, for He is not Thee."

I'm proud of my employer and the software we develop.  One of the chief things that makes me proud, though, is that we do our best to identify root causes and not commit the same mistake again.  It will be a long time, I think, before we again fall into the trap of organizing our development efforts around demos, rather than usability.

Posted on Sunday, July 25, 2010 6:46 PM | Back to top

Comments on this post: Courting Disaster by Designing for Demos

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Chris Falter | Powered by: