In an excellent article titled “Does Mess really Exist”, Keith Lang of plasq writes:
Instead of seeing a mess, humans are good at seeing a ‘complex system with lots of clues’.
This applies even more if the mess in question is of their own creation. Lang argues that we should allow for some amount of messy design in our user interfaces. While I agree, I think it’s even more important to allow users to make their own mess.
What’s a mess, anyway?
When I wrote about spatial thinking, I showed this picture of my desk:
This is a mess, but it’s also perfectly organized. Even though it’s messy, I always know where to find what. It’s not a random mess, it’s a spatially organized pile of things. This is how humans think; not in alphabetical categories, but in spatial1 categories.
So how does this apply to computers? This is a typical folder in Mac OS X, shown as a list sorted by name:
This looks tidy. But actually, it’s very hard to find and identify things in this view. What’s styles.css? What’s “Untitled”? Where are my notes for the timesheet entry UI for our operations site? In order make this list usable, we need to introduce hierarchy.
Or, alternatively, turn it into a mess. Here’s the same folder, in a messy state:
While this looks less useful than the linear list at first glance, it actually is more useful. I know perfectly well where I put every file. I know what context the files relate to by their position, and I can now see that “Untitled” is a picture of me, and that styles.css contains styles for a redesign of our operations site, and that my UI draft is near the other documents detailing the redesign of the operations site.
Why being messy works
So the second screenshot is more usable, even though it looks messy and somewhat random. How can that be?
Landmarks vs. Homogenity
When things are homogenous, every item has the same visual importance. Nothing stands out; the user can’t orientate himself. It’s easy to get lost in a city where every building looks exactly alike; landmarks help us figure out where we are. The same applies to user interfaces.
Spatial thinking
One man’s mess is another man’s perfect order. My files aren’t unordered just because they look messy. They look messy because they are organized in two-dimensional space. Since I know where I put everything, and since the files are sorted topically, I can easily find everything I need and identify files based on nearby files.
Lessons for your User Interface
Now that we’ve established that messy organization can help users, we need to find out how we can help users make a mess. There are several things we can do.
Allow users to make a mess
Many applications actually prevent their users from making a mess. On the iPhone, you can’t freely place your application icons. On each screen, you have to start from the top left and add applications linearly. Even if Apple doesn’t want to let users position applications freely, why not allow for empty “slots” between applications?
If your application only has a list view, think about adding a two-dimensional view which supports free placement of your items on a 2D plane.
Allow users to color and resize items individually, so they can represent things like importance, making important things red and big, and unimportant things grey and small.
Store their mess
After users have made a mess, it’s important to safeguard that mess for them. Every pixel counts; never move anything except when the user explicitly wants something to be moved. Since users identify files by their position and looks, don’t touch these attributes.
Respect their mess
If you allow users to make a mess of their data, you need to support and respect this mess. For example, Mac OS X allows users to make a mess of their windows. You can have windows all over the place, overlapping each other. To help users manage this mess, Apple provides Exposé, which zooms and moves windows, showing them at the same time next to each other. It respects you organization and puts them back exactly where they were before you invoked Exposé, but it also respects your organization while it’s invoked. Instead of simply distributing the windows on the screen, Exposé tries to reflect your organization. Windows typically don’t move very far when you activate Exposé, which helps you find the window you’re looking for.
This is my screen:
And this is my screen with Exposé activated. Notice how all windows remain near where they were in the screenshot above, making it easier to find the window the user is looking for:
Exposé doesn’t always work perfectly. It tends to minimize zooming instead of optimizing for placement. In this screenshot, I’ve put pictures of me to the left of the screen:
When activating Exposé, I get this:
While this does allow me to see all windows at once, it breaks my spatial organization and forces me to reorientate myself. Even though I put all pictures of me on the left of the screen, they are now distributed all over the screen.
Exposé does the right thing and attempts to respect the user’s messy organization, but sometimes fails because it tries to keep windows as large as possible, instead of trying not to move them too far.
Search their mess
Most modern operating systems are terrible at supporting search in spatial environments. As soon as you start searching, they revert to list views. There is one part of Mac OS X which has spatial searching: The System Preferences.
Searching doesn’t switch to a list view. Instead, it highlights potential search results in their normal location.
A similar search feature could be implemented to point out specific files in a messy pile of files.
Conclusion
Being messy is good. Allow for some level of mess in your UI design, and even more important, let the user create a mess with his “stuff.” Protect and support the user’s mess.
But…
One final thing to consider is that “messy” organization starts to break down with huge numbers of files. iTunes organizes so many files that it is almost impossible to organize them spatially. There are ways around this, such as zoomable interfaces,2 but unfortunately, no popular modern operating system supports such paradigms out of the box.
August 7th, 2008
/ Tags: mess, messy, browsing, spatial thinking, usability, ui and us, plasq, keith lang / Trackback
