Visual design clutter index for web pages

I'm currently working on a project where we're trying to come up with way to establish a visual design "clutter index."  The goal is to see if there is some threshold beyond which web page clutter impacts actual business metrics like conversion and click-through rates.  The challenges are widespread of course, and mainly focused on the following 3 areas:

• The definition and measurement of clutter.  There are a variety of ways to measure clutter on pages, ranging from the completely objective (e.g., % of white space on a page) to completely subjective (e.g., how do users rate the page on a clean vs. cluttered scale). 
• The definition of conversion.  Since some pages on an e-commerce web site are revenue-generating, and others aren't, an important question is how you define conversion.  For revenue-generating pages (e.g., pages with a "checkout now" button) this is easy -- did the page result in a sale.  For other pages, like product information pages, this measure won't work, so some other measure of engagement with the page becomes necessary.
• Controlling for other influencing factors.  In conjunction with to first 2 points comes the problem of causality vs. correlation.  Assuming you have your definitions of clutter and conversion nailed down, how can you be sure any changes you see in conversion is caused by clutter (causal relationship), and not some other factor you are not accounting for (there's correlation but no causal relationship).

The way to go about it is to take as many measurements of clutter as you can, throw it into a model with a variety of conversion metrics, and see what comes out.  You also have to find a way to account for other influencing factors so that you can control for that in your model.  Easy, right?  Ok, so there are a lot of open issues, but they're definitely not insurmountable.  I also believe it's a worthy pursuit, the hypothesis being that there are clear business reasons for keeping designs and interfaces simple. 

And apparently we're not the only ones thinking about this...  Ruth Rosenholtz and her colleagues at MIT recently wrote a paper (Measuring Visual Clutter) where they seem to have developed what they call a "clutter detector" for a variety of interfaces, mostly offline (desk clutter, map clutter, etc.).  They describe some of their challenges in doing this as follows:

The fact that one person's clutter is the next person's organized workspace makes it hard to come up with a universal measure of clutter. Rosenholtz and colleagues modeled what makes items in a display harder or easier to pick out. They used this model, which incorporates data on color, contrast and orientation, to come up with a software tool to measure visual clutter.

On the issue of subjective measures of clutter:

Although there was a fair bit of disagreement among the people being tested about what constituted clutter, when the researchers compared results from their clutter measure to those of their human subjects, they found a good correlation.

I'm still digesting the paper, but it's a fascinating read so definitely check it out.  Thoughts on how to approach this for e-commerce web pages are more than welcome by leaving a comment or emailing me at rian at ux-sa dot com.

The trouble with computers (and Microsoft)

There is a very interesting article in The Economist about the many things that are wrong with computers today.  It's called The trouble with computers, and it starts by making some remarks about user interfaces and complex design:

Consider the Nokia 6680 mobile phone, says Adam Greenfield, an expert in computing culture at New York University [...]. He found that 13 clicks were needed to change its ringtone. “It's an interface designed by engineers for engineers,” he says. Steven Kyffin, a senior researcher at Philips, a consumer-electronics giant based in Eindhoven in the Netherlands, concedes that computer programmers and engineers, himself included, are often guilty of designing complicated systems packed with too many features. “We're compelled by complexity,” Mr Kyffin says. “There's a point where humanity just can't handle it.”

And this statement then gets right to the heart of the problem:

Part of the problem is that programmers have traditionally had more power than designers. Programmers put in place the myriad features they want; interface designers then struggle to wrap them all up in a product that is simple to use. The results, all too often, are clunky interfaces.

Now, what bugs me is how Microsoft is claiming to be on the forefront of a movement to give designers more power:

Ken Wood, deputy director of Microsoft's research laboratory in Cambridge, England, says his company is putting greater emphasis on interface design. Three years ago, he says, none of his lab's budget was earmarked for pure HCI [Human-Computer Interaction] research. Today, a quarter of the lab's budget goes on it.

They may spend money on it, but the company's products are clearly show that in most cases decision-making still doesn't sit with designers.  There are so many examples -- like the superficial bells-and-whistles changes in the new version of Excel, without any real improvements to areas that desperately need it like the graphing engine.  What I find even more troubling is how the Vista operating system is being showcased as a product that exemplifies good design:

Andrew Herbert, managing director of Microsoft's Cambridge laboratory, told attendees [of HCI 2020] that interface simplification is vital if the computing world is to be opened up to new consumers such as the elderly, children and people with little computer experience. Microsoft says new features in its Windows Vista operating system, such as 3-D graphics intended to make navigation easier, demonstrate its commitment to greater ease of use.

Um... has anyone used Vista lately?  I would love to see the research that shows that 3-D graphics make navigation easier.  The truth is that it simply doesn't -- especially not in the clunky way Vista implements it.  How would adding a 3rd dimension onto a 2-dimensional screen create an easier interface?  If you can't get the design right in 2 dimensions, a 3rd one isn't going to fix the problem.  It might look cool, but it doesn't help you much.  At least The Economist picked up on that:

But tweaking an existing window-based interface is hardly a radical step.

Discussing the future of computing, the article concludes:

Many futurists and computer experts believe that the logical conclusion of all of these new input devices, sensors and smarter software to anticipate users' needs, will be for computing to blend into the background. In this “ubiquitous computing” model, computers will no longer be things people use explicitly, any more than they “use” electricity when turning on a light or a radio. Mr Greenfield says a digital “dream world” that provides “one seamless experience of being immersed in information” hinges on one big if: computers and their interfaces must become so good that, like electricity, they rarely require concentrated attention. The trouble with computers in their current form is that they are still all too conspicuous.

I'm not sure I agree with this notion that computers should "blend into the background" so that we don't notice them.  It not only sounds creepy (ok, maybe I've see The Matrix too many times), but more importantly, I don't think this will help users accomplish their goals.  It goes against almost all of Nielsen's Usability Heuristics, especially the following three:

• Visibility of system status.  The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
• Recognition rather than recall.  Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
• User control and freedom. Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

If you can't see the computer, how will you know when you made a mistake, and how will you recover from it?  We simply can't rely on computers to figure out by itself what our needs are and how the system should meet those needs.  I believe that these technological advances into 3-D spaces, ubiquitous computing and novel input devices are going to exacerbate the enormous amount of usability issues that currently exists in software and web applications.  Again, if we can't even get it right in 2 dimensions, adding another one that looks "cool" isn't going to help.  We are, indeed, "compelled by complexity."  But maybe I'm wrong.  I hope so...

A great user experience on Wine.com

A craving for a South African Pinotage led me to Wine.com last week, and I was extremely impressed with the site and the overall experience. Here's why I liked it so much. I think these principles should be top of mind during product design and development:

1. An online search experience designed around the natural offline experience. Even though there is a search box to look for a specific wine, it is not very prominent. Instead the "Shop For Wine" page is designed to help you find the wine you need based on price, location, varietal, etc. I was able to find South African Pinotages <$20 in less than a minute. You are able to add and remove filters in any order you'd like. I like this experience because they thought about the type of users that are going to come to the site, and what their needs are going to be. Buying wine is a browse & taste experience offline -- and they recreated that experience online through a really good browse experience.
   
2. Progressive product information disclosure. Once I got to $20 and Below > South Africa > Red Wine > Pinotage, a description appeared underneath the breadcrumb: Pinotage, a crossing made by the South Africans, is a hardy, rustic grape, with gamey and smoky mixing with wild berry flavors. Underneath this one-sentence overview was a "read more" link which exposes a dynamic layer pop-up on the page itself so that you can read more about the varietal without having to leave the page (more on that later). The search results gives you the information you need, and clicking into a specific wine leads to a world of additional information. But they don't dump it on you all at once -- progressive content disclosure is a difficult concept to get right, but they do it perfectly here.
   
3. Dynamic page elements allows maximum interaction without having to leave the page. I mentioned the "read more" link about the varietal in my second point, but I also noticed a great interaction element that I haven't seen on any other sites before. Clicking on "Add to cart" doesn't take you to your shopping cart -- it has a dynamic element that provides feedback about your action, but allows you to continue to shop without ever leaving the page. Below is a short video of it -- notice how the number of items in your cart updates automatically as well.
   
   
   
   
4. The experience doesn't end once you place an order. Let me just say that this is a company that understands wine-drinkers, and aims to provide a total experience with their products.
   • Once you place your order, you have the option to download and print "Cellar Notes", detailed descriptions of the wine you just bought, with an area to write down your own notes.
   • The wine arrives with a welcome letter that also gives you 1c shipping on your next order.
   • The box includes labels for your wines that you can hang on the bottles to make them easy to identify

This is only the second time it's ever happened to me that I become a loyal customer after my first interaction with a company (the other was Vonage, if anyone is wondering...). This experience was designed to be consistent online and offline. It was designed to never let technology get in the way of your goal -- to buy the perfect bottle of wine. And let me end with this picture of the brilliant Simonsig 2003 Pinotage that was the perfect ending to this story...

Bad Microwave UI

It is amazing to me that we're approaching 2008 and there are still microwave user interfaces out there that are close to impossible to figure out.  I tried to do a fairly simple but vital task on this microwave at a friend's house last night -- heating up my coffee -- but I just couldn't figure it out.  Maybe I'm stupid, who knows, but this was just too much for me.

Here are some issues I see with it:

• The "Start" button doesn't actually start the microwave.  And once you get it going (the only way I could figure out how to start blasting is by pressing the "Express" button), the "Off" button doesn't turn it off
• The labels are non-universal and therefore doesn't map to existing mental models of what microwaves should do.  What does "Combination" mean?  "Sensor"?
• The big round knob in the middle is for turning, and as far as I could tell, if you turn it, it does something to the length of time the microwave is on.  But there is no label on this knob and no way of knowing what it does.
• All the buttons are the same size, while different shapes and sizes can help users understand what the buttons are for (if you've seen the TiVo remote you'll know what I mean...).
• And a whole lot more but I'm already a dork for posting about this so I'll stop now

I actually do want to make a point here though...  Has anyone seen the user manual for the iPod or the iPhone?  It's only a few pages long.  That's how much confidence Apple has in the intuitiveness of the UI.  And they have every right to be -- it only takes a couple of minutes to figure it out, you don't even have to open the manual!

This microwave probably has an enormous user manual.  And for good reason -- it's a lazy design...  So anyway, it's a bad photo, but hopefully you'd be able to see what I mean: