Earlier this week I was struggling, as usual, to navigate my way around our Web Analytics provider, Omniture (SiteCatalyst in particular).  Specifically, I once again had to hover over every single icon in one of the views to figure out what they mean.  I was looking for a specific menu item called “Add Metrics,” which ended up not being an icon at all, but rather a text link.

Anyway, in frustration I tweeted this screen shot, and implied that if your icons require users to hover over them to figure out what they mean, you’re dong it wrong:

To their credit and my surprise, quite a few people at Omniture follow mentions of the company on Twitter, so pretty soon I got this comment on the post from one of the Product Managers at Ominture:

Hi Rian – this is great feedback you have given us. We are taking steps to address your specific point in an upcoming release of SiteCatalyst. The icons will be clearer, and tool tips will not be necessary.

But not everyone was happy.  I also received this reply from @RRS_ATL:

We moved the conversation to email, and Rudi is a really nice guy — we had a very healthy debate about the issue.  I wanted to spend a little time here to summarize my thoughts on this particular issue and icon design in general.

First, let me say that I am not against tool tips and alt text when they provide additional context for text where space is limited, or more information about an element on the page. My specific issue with the Omniture icons is that they are not easily recognizable and mapped to what they actually do.  That breaks an essential UI rule which states there needs to be a match between the system and the real world:

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. (from Nielsen’s 10 Usability Heuristics)

For example, as you can see in the photo above, the Omniture icon for “link to this report”  has a chart and an arrow in it – that’s simply not intuitive enough.

What I am proposing in the Omniture case is one of two solutions:

1. Redesign the icons to be more intuitive (which, from the PM’s comment on my post, is what they’re doing), or
2. Turn them into text links (because what’s the use of icons if you have to use text to explain them?)

Icon design is hard, and I think it defeats the purpose if your icons are not easily understandable.  In a great post on UX Magazine called Realism in UI design they discuss this issue in depth, and explain why it is so hard to get right:

People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle.

The trick is to figure out which details help users identify the UI element, and which details distract from its intended meaning. Some details help users figure out what they’re looking at and how they can interact with it; other details distract from the idea you’re trying to convey. They turn your interface element from a concept into a specific thing. Thus, if an interface element is too distinct from its real-life counterpart, it becomes too hard to recognize. On the other hand, if it is too realistic, people are unable to figure out that you’re trying to communicate an idea, and what idea that might be.

This only scratches the surface of icon design, so for more interesting reading on the topic, see:

• 10 Mistakes in Icon Design
• 7 Principles of Effective Icon Design
• And for those who like their design mixed in with a little Science, there’s the excellent Icon Analysis from Boxes & Arrows.

To summarize, I stand by my view that if you have to hover over every single icon to see what it means, you either have to design better icons, or just use text.  But I’m open to counter-arguments for sure… What do you think?

This week I was in Johannesburg for the debut of Tech4Africa, a conference about web technology in the African context. It was a fantastic experience, an opportunity to learn from and meet some great people, and I will most certainly be back next year (but hey, Gareth, let’s move it to Cape Town next year!). Yes, there were the usual small conference hiccups, but nothing that can overshadow the importance and significance of this event.

The mere fact that we were able to listen to speakers like Clay Shirky, Andy Budd, and John Resig, as well as some top South African thinkers & doers, and discuss with them the uniquely challenging opportunities that exist here in Africa, made this conference a winner. The content was mostly great, but the conference was more than that — it was about being inspired and energized about being in this industry, at this time, in Africa. You should follow Tech4Africa and its head organizer, Gareth Knight, for updates on the conference. And no matter where you live, you should attend next year. This event is here to stay.

I also had the great opportunity to speak on a web design panel with Allan Kent, Basheera Khan, and Mike Lewis. We took a User-Centered Design (UCD) approach to redesigning Payfine.co.za, a web site that allows South Africans to pay the many traffic fines they get every… well… every month or so.

We’ve never met each other before the conference, and we were all in different locations. So, since we had to do this remotely and in our limited spare time, we broke the process up into three distinct user experience elements and each took responsibility for one of the tasks: content strategy (me), interaction design (Bash), and visual design (Mike). We collaborated a lot along the way, but we decided to each lead the creation of one piece of the puzzle, and then put it all together in a coherent story (this was Allan’s job!).

The end result? Well, you should judge for yourself. Here is what Payfine currently looks like:

And this is the proposed redesign:

The one thought I want to pull out above the rest about this process, is that UCD is not rocket science. It’s not easy, but it’s not rocket science. There is a process, and there are rules (they can be broken, but they help focus the design process).

But. It does require a mind shift (I hate that word — can anyone suggest something different?) in the African web space — a realization that the interfaces we currently have on our banking sites, our e-commerce sites — even our entertainment sites — are simply not good enough. And it requires a commitment by those companies to invest in the user experience of their sites, because it will have a positive effect on the business.

Below are the slides we went through during our session, which I amended to make it a little bit easier to read without the voice-over we provided. We’re all happy to answer any follow-up comments or questions on this, so please let us know if you have any. And I really want to thank the rest of the team — this has been a great experience — let’s do it again!

I am moving countries with my family in 3 weeks, so I have been doing a lot of account canceling over the past week or so.  For the most part, it’s a pretty smooth process.  But that changed when I encountered the labyrinth that is the Microsoft Billing department. Describing how I was eventually able to cancel my Xbox Live account would take way too long, so let me just focus on one part of the experience that is indicative of a company stuck in late 90s Information Architecture.

In order to get to my payment options for Xbox, I have to follow this sequence:

1. Go to www.xbox.xom
2. Click on “Marketplace” at the top (this automatically shows the “Xbox LIVE” link in the second tier navigation as selected)
3. Hover over “My account”
4. Click on “Manage payment options”

Here is the screen with the major areas called out:

There are a variety of issues with this navigation structure, including:

• No connection (visual or otherwise) between the three navigation tiers. There are non-navigation elements between the tiers, so there’s no way to know how they are related.
• No visual hierarchy.  What is the main navigation on the page, and what is sub-navigation?
• Inconsistent “selected” link states.  The top tier doesn’t even show you what’s selected.  The middle tier uses black links that turn white.  And the third tier uses the tab metaphor.

The thing is that fixing this navigation isn’t that difficult.  It will take some time, but it requires a simple user-centered design strategy similar to what you would use to design any IA:

1. Compile a site map of all the links and page names.
2. Get a content strategist to write/edit link names so that they are understandable to users, and in line with the brand voice.
3. Do a card sorting study to understand how users would group the site’s content and links together (adjust link names as necessary).
4. Get a UX designer/engineering pair-up to design a single 3-tiered navigation structure.

I don’t understand why Microsoft can’t do this.  But there is simply no excuse for it.  It’s not like there aren’t plenty of resources and design guidelines for site navigation.  Here are just a few:

• 5 Navigation Bar Best Practices
• Tabbed Navigation, and What Makes It Useful
• Navigation Menus: Trends and Examples
• 25 Examples of Creative Navigation
• 30 Creative Javascript Navigation Menu Examples

If you’re a designer (or just into good design) and a music fan, I’d like to recommend the book U2 Show. The book is about how the various U2 tours were designed — from Boy all the way through Elevation. It explains the countless hours that go into stage design, lighting design, sound & speaker stack design, and a whole bunch of other areas (and it has some great photos too). I really enjoyed the window this book provides into what goes into the design of a large rock concert, and it showed me again that basic principles of good design translate to all media forms.

Here are some things I believe the design community can learn from the way U2 design their shows:

1. Don’t place limits on the design in the beginning

U2 tour manager Willie Williams on how the PopMart tour came into being:

There was also a very direct (and very rare) brief to me that this tour would be ‘design-led’, rather than being intimidated by scale or logistics. Having proved to themselves and to the world with ZooTV that, in terms of what can be toured, ‘anything is possible’, U2 were of a mind that the only limits to be placed on the creative ambitions of this tour were to be financial ones.

This is a really good principle.  The time for realism and feasibility will come — but in the beginning, think big

2. Challenge the limits of possibility

On the impossible design requirements given to the sound engineers:

Mark Fisher’s frustration with years of stage design constrained by traditional loudspeaker stacks led him to propose that we should keep the huge video screen free from clutter by placing the entire sound system in one central ball. Most sound engineers would have resigned on the spot, but Joe O’Herlihy rose to the challenge of mixing a live show through what would essentially be a mono PA.

Even during feasibility discussions, it is important to challenge your beliefs on what is possible.  Involve the engineering team in the product discussion — and challenge them to test the limits too!

3. Let the content shine through

I like how they talk about the huge differences between the PopMart tour and the Elevation tour:

After the broad, churchy strokes of the Lovetown show and the sensory assault of Zoo TV and the garish, high-concept japery of PopMart, here are U2 playing their songs hard, straight and in your face.

If you’ve seen the Elevation tour, you know what they mean.  The show was tastefully designed, but without distractions.  Just like a web site should be.  Design’s ultimate goal is to get users to the content and functionality they need as easily and pleasantly as possible.

4. Don’t design in silos

The book goes into detail on the simplicity of the Elevation stage and lighting design:

Video is not something that can simply be added to a show, a fact that is the downfall of many otherwise potentially interesting stage productions. We are so conditioned to look at television that moving camera pictures automatically become the focus of attention.

Because of this they went with what they call “Unmediated iMag”, which means that the screens showing the band members would be static cameras, showing everything in black-and-white to avoid distraction from what is happening on stage:

This is why it’s so important for Product Managers to include all parts of the organization during design, and why holistic design is so important.  You don’t want your company’s organizational structure to shine through in your design.

Pick up this book at Amazon if you’re interested — with more than just pretty pictures it brings a great design perspective to the enormous live concert industry.

I’ve been working on a project where we’re trying to come up with a way to establish a visual design “clutter index.”  The goal is to see if there is some threshold beyond which web page clutter impacts 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 the first two 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, feed them into a statistical 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 also more than welcome!