Front to back

Designing an effective Microsoft Fluent/Ribbon toolbar is not for the faint of heart. You need to understand your users' activity in detail and plan a consistent overall experience.

I'm working on two WPF applications at the moment. For both, we have to decide whether to use traditional File/Edit/View menus or an MS-Office-style ribbon. It's not an easy decision...

A piece of the Ribbon, from MS Excel 2007

Pro: It appears to be built on a sound theoretical basis and Microsoft tell us they've researched it to death with hordes of real users. They also say they're planning to use it more widely.

Con: Key players on both the teams I'm working with are against the ribbon. They say "I use Office all the time and I really don't want one of those things on MY software."

Con: Jakob Nielsen raises an eyebrow that a number of the best new applications of the year use ribbons. He points out that Microsoft have not always come up with the best interface innovations in the past. Pro: But he grudgingly admits that maybe "the Ribbon has legs".

Con: Some surfing around yields plenty of blogs posts from frustrated ribbon users.

Pro: The techsmith team implemented a ribbon on snagit 9 and say their research showed it worked well.

Con: And a couple of bits of software that allow you to replace the ribbon in MS Office 2007 with a more traditional menu bar. That's a sign that there's a potential market of people desperate enough to pay to get rid of the ribbon.

So what's going on?

Good if used with UCD

My analysis: The ribbon is a decent piece of interface, but like most things in UX, it's hard to design it well. And to design it well you really have to understand your users' needs, behaviours and work practices.

That's because the ribbon tries to show commands grouped together based on what users are most likely to want to do. So in Word 2007, for example, there's a tab for mail-merge, and one for page layout and one for referencing, whereas in Word 2003 those features are pushed lower down in a more generic menu structure. If you get the groupings right, your users will always find the selection of controls they need right there in the ribbon. But if you misunderstand what they need to do, they'll get an irrelevant list and you'll get complaints.

Microsoft have got a lot of it right, but a bit of it wrong.  And with Office's massive user base, an angry, vocal minority is still a million people or more.

Three ways to get Ribbon design wrong

1. Choose groupings that don't mirror real-world workflow. If you group menu options together in ways that don't reflect the way that people really work in the real world you'll cause frustration.  PowerPoint 2007 Beta 2 had some problems with this.
2. Make groups the wrong size. If a group isn't properly broken down it could end up displaying too many icons on the ribbon at once, making the ribbon hard to scan. Making groups too small means people might have to hunt through have too many tabs with not much on each.
3. Options that move about too much. If the same control appears in different areas of the Ribbon for different tabs, it becomes hard to know where to look to find what you want. For example, in PowerPoint 2007, the shapes gallery appears on several tabs in different places. If I'm in format mode, I'll find my shapes on the left. But on the home tab, I'll find them on the right. This makes the core activity of drawing a shape surprisingly hard to engage in. I think this sort of thing is what makes some people complain that they "can never find anything" in Office 2007.

The shapes gallery appears on the left of the format ribbon and the right of the home ribbon. This makes it a lot more effort to locate a key feature in PowerPoint 2007

This last point is, I think, the key issue that makes me feel uneasy about the Ribbon. As humans, we're not very good at remembering which mode or state a machine is in. We need to look at indicators and control panels to see it. But we are quite good at remembering where a given resource or tool sits in our environment. This is because of the way things behave in the real world. Our frying pan doesn't magically reposition itself on the hob just because we pick up some bacon. It stays put in the cupboard and we know where to find it.

So with interfaces, we might well expect that the controls we want will be in a fixed place. Remembering what mode a piece of software is in, and remembering a different control layout for each mode, is just too much. If we look up at the Ribbon and (fail to) see controls in unexpected places, it causes cognitive friction.

The opposite of dockable palettes?

Dockable windows or palettes are by definition always there, regardless of what mode the application is in. That's very different from the spirit of the Ribbon, which is supposed to be all about contextual relevance. Can the two co-exist?

Snag-It 9 seems to have included dockable windows in their interface. And even Powerpoint does actually have a few non-modal dialogs (windows you can leave open all the time while you're doing other things) - the format shape dialog, for example. So perhaps it's ok.

Proceeding with caution

I think I'll suggest using a Ribbon for the applications I'm working on. We'll need to look carefully at sensible task groupings, and make sure that features don't jump around too much. Then usability test it a lot.

If I find any specific reasons why the Ribbon doesn't work, I'll post.

As the world around us changes, we need new technology and improved interaction to help us. But what causes the world to change? The very technology that we introduce.

I saw this quote stuck up on the wall of a furniture shop the other day.

It set me thinking: if you replace "homes" with "technology" you get an insight into the business of interaction design.

Hitting a moving target

Good interaction designers know that their job is never done. As people adopt a new technology, their behaviour changes. And the technology needs to change with them, if its going to stay useful.

• When everyone has a mobile phone, we discover we like sending text messages.
• Multi-tap is a bit cumbersome for creating text messages. So predictive text helps us send more texts faster.
• Blogs are great. But we can't keep up. So we subscribe via RSS.
• We can't keep up with RSS. So we use an RSS ticker to help me stay on top of the flood.
• We're stuck in front of computers all day so Twitter helps us stay in touch with our friends and family.
• We need the best quality information to be filtered from the noise. So Digg and Delicious help us share attention and opinion data.
• We have lots of information available to us but we discover we want to mix and match it. So RDF, promises the next evolution, along with interfaces like Ubiquity and Aurora.

I think there's a recurring theme here:

Information technology empowers people to produce more information more quickly. (SMS, Predictive text, Blogs, Twitter, HTML, IM, Ubiquity...)
Information technology protects us from the flood of information we have been empowered to produce. (RSS, Digg, Google, Technorati, Aurora?...)

We're in a bizarre arms race with ourselves. I think the "producer" team is winning. Some people say that the "protect" team don't stand a chance.

That's progress

So, it seems, it has always been. Venerable sociologist and economist Thorstein Veblen put it like this:

"Invention is the mother of necessity."

This probably means two things, but I'm interested in just one meaning: When we use technology to solve one problem, we often create a new and different one, which in turn needs a solution.

Technology for our children

Well, since I had a few minutes to spare I asked my daughter to take that photo in the furniture shop, using my mobile phone. She's 4. She managed it fine.

When the first mobile phone designers started out, I'm sure they had no idea of that requirement.

Two flowsters, Ofer Deshe and Simon Johnson, dug out these two fine blog posts and sent them to me.
The five worst website designs in the world

Ten futuristic user interfaces

What I take from this:

• The web on a computer is old, flat and slow.  But still incredibly useful.
• When you ask cutting edge design teams to create interfaces, you get discernably better results.
• The value that good design brings to a business couldn't be clearer.

Facebook's homepage moves more of the navigation to the right - a signal that the convention of left navigation bars is shifting.

Facebook's welcome page - lots of functionality has moved to the right.

When I first saw a left hand navbar in 1995, I was amazed at the idea of dividing the page up into zones, and dedicating one of them to this cryptic concept called "navigation". I never stopped to wonder whether putting it on the left was a good idea. Fundamentally, I don't think it is.

Left to right

In the west, we read from left to right. Eye tracking studies generally indicate the the top left area of the page is the place where everyone looks. But when we arrive on a page, we first want to assess if it brings us closer to our goal. Getting closer to our goals makes us happy. So content, not navigation should go in the prime, left-side spot.

At worst, a navbar says "Are you sure you wanted to be on this page? Why not try a different one?" And because it is there on every page, the question is quite incessant. It's like having the store guide in a department store follow you around on wheels. Or the table of contents appear on every page of a newspaper.

Long left navbars: Do we really need to be able to navigate from anywhere to everywhere else?

Breaking with convention

Mercifully, around 3-4 years ago, left navs started disappearing. Maybe it was eye tracking studies that did it.

Blogs were among the first to shift- the standard templates didn't feature left navs. The changes were a difficult decision for interaction designers. So deep rooted was the left-nav habit, that angst-ridden designers posted on lists asking, "Is it ok to put my nav on the right?"

Some debate ensued. Wasn't convention the most important thing for ease of use? Convention said navbars went on the left. Right was for cross-links, bits and pieces. But a study showed that actually, it didn't make a significant difference. People could complete key tasks with no training with pretty much the same levels of efficiency and effectiveness, with both right and with left navbars.

What we think while we navigate

I like putting the navigation on the right. Here's why. I think people conceptualise their navigation through a website taxonomy like this...

This comes from watching people during a lot of usability tests. If you think about web navigation like that, then right equals forward and left equals backward (just like in a book). People like going forward, making progress towards their goals. So if interaction designers can ensure there is always an interesting place to go forward to, left navigation becomes much less important. You can collapse it into top menus or push it into a rather lovely bottom navbar.
(The other key form of navigation, probably most effective of all, is inline links. But that's another post).

Facebook is moving the emphasis to the right with its redesign. It hasn't given up on the left navbar yet, but I think it will over time, and so will most other websites. Because overall, I think content on the left and onward links on the right suits the way we think.

I'm iteratively prototyping my new room layout at full scale with newspaper.

This is the second time I've tried this and it really works well. You stick sheets of newspaper together to represent the kitchen cabinets or the new sofa or whatever. Then you lay the sheets out in the room itself and see what it's like. Of course, it helps a lot if the room is empty.

Paper prototyping a kitchen to scale with newspaper

It's a very similar process to designing good user experiences. Create a prototype. Simulate use. Discover what works. Iteratively improve.

The motivation is also the same. If I'm going to spend thousands or a new kitchen or a new sofa, I want to be sure I don't end up with an expensive mistake. I want something efficient, comfortable and lovely to live with. Any organisation launching a website should be thinking something similar. "Measure twice, cut once," as the saying goes.

Paper prototyping a a lounge/dining space with newspaper

And what I have learned on both occasions?

• Leave more empty space between the objects
• Make sure there's good flow from one space to the next

Which sounds a lot like interaction design too.

Cape Town's new collaborative T-shirt design website is a really interesting piece of social design.

A couple of weeks ago, Eric Edelstein, the CEO of Springleap asked me to pop by and chat about the user experience strategy for his site.

The idea for the site is simple: Designers submit designs for t-shirts, the community votes on the designs, and the winning t-shirts get printed and made available for to buy on the site. The designers of those shirts get a cash prize and people can come and buy the shirts.

Eric Edelstein and one of Springleap's shirts.

It's similar to Threadless but the community rules and processes are a bit different. And therein lies the challenge. Designing a community that works, and that makes money, is not easy but always interesting.

The number one rule for social design is: deliver personal value to each individual user. That way you'll attract members regardless of how big or small the network is already. When you've attracted members, value will start to emerge from their interactions, and the whole becomes greater than the sum of the parts.

Now: where's the personal value? Designers see value in submitting designs: they might win money, and they will certainly get exposure. And shoppers see value in buying: the shirts are limited editions by talented designers. The tricky part is the getting people to vote. There's no obvious incentive for them to do it.

But people are already voting, and with some planned improvements to the site, they should soon be voting even more. Here are some reasons:

• The designers encourage people to come and vote for them. This means the promotional activity for the site is distributed to the members themselves. That's very scalable.
• People who came to the site as designers or shoppers can be "seduced" into voting. Once they have completed their primary goals, designers want to check out the competition and shoppers want to find new things to buy.
• Voters will earn kudos for voting, and particularly for predicting the winning designs. So if you vote well, you can become a respected design pundit on the site, and get free stuff too.
• Voting will be very very easy. That's a straight usability challenge. Put voting opportunities in attaractive locations, and make the voting process extremely quick.

Getting a Springleap t-shirt is a great customer experience. There's a mini brochure of that month's winning shirts, and a postcard and badge of your chosen design.

It's working so far

There are all sorts of business and community design challenges for Springleap to tackle. But the bottom line is: they're getting designs in, selling t-shirts and doing something amazing. The web gives them world-wide reach, and there's no need to stop at just t-shirts, either.

There's a great vibe in the office, and we had a lot of fun brainstorming ideas. But the best thing about my visit: they paid me in T-shirts!

Your working environment has a big impact on your productivity, creativity and happiness. And good user experiences follow the same rules.

The interruptions caused by email and other digital communications reduce your IQ by up to 10 points, and cost large corporations UD$1m in revenue per annum. They also make people unhappy. Among many corporations, Intel has been running a "quiet time" initiative, where every Tuesday morning is set aside for quiet thinking only. No email, no IM, no phone calls, even.

On the flip side, I found interesting research about how corporate environments that provide clear goals, facilitate progress and praise success make people happier, more creative and more productive.

It struck me that most of this is linked to the concept of Flow, proposed by Mihály Csíkszentmihályi. Flow is a state of optimal experience (very closely linked to happiness). If you've ever looked up at the clock and realised that an hour or two has rushed past unexpectedly, chances are you were in a state of Flow.

Flow is frequently caused by having clear and worthwhile goals, making visible progress towards those goals, and being appropriately challenged as you go. Almost exactly like that description of the happy and productive working environment.

But how many times have you sat down at your desk expecting to make rewarding progress, only to realise that you have a pile of unread email? Suddenly you're wading through unexpected issues and problems, and your original goal for the day is pushed further away. That's a recipe for no flow, and a feeling of frustration. No wonder the Intel pilot group look forward to Tuesday mornings.

Happy interaction

So, if you're a manager, you need to be shaping your team or organisation to work in a Flow-inducing way.

If you're an interaction designer, you need to design interfaces to help your users experience Flow. Three fairly plain lessons:

• Don't interrupt your users. People using computers are goal directed - they're online to get a task done. Excessive confirmation dialogs cause frustration. Interstitial and pop-up ads are worse. Flash intros are, mercifully, a thing of the past.  And perhaps the cardinal sin is emailing your customers too much. Why any brand would want to be associated with these negative, frustration-causing events is a mystery to me. "Are users stupid?" some unenlightened designers have been heard to ask. Well, if you keep interrupting them, you're reducing their IQ.
• Help your users to accept new ideas. Innovation is a hot topic for corporations looking for an edge. Helping your customers to innovate makes them happy too. Blogger.com helps new users understand blogging and create a blog in astoundingly simple steps. Google Adwords suggests new products and services that are specifically selected to be relevant to the user's goal. Amazon does the same, and also keeps many of it recommendations for after you've made some productive steps towards your goal - it recommends most stuff when you add to basket and when you complete a purchase.
• Help your users to think creatively. A lot of Web2.0, and the latest thinking in UCD, is about helping people to express themselves by building or creating something. Myspace and Facebook pages and relationships are a labour of love for some. Family trees are loving crafted in Geni. Photobox lets you craft beautiful paper photo albums using custom software. All Flow activities, where users make clear progress towards desirable goals, and learn something on the way.

To be effective interaction designers, we need to be happiness experts. And because the organisation behind the interface will always show through, we need to be happy and work in happy places. Now that's a goal worth working towards.

Last week we had the SA UX Forum Cape Town meet-up. 16 people braved the rain and cold to show up and share ideas about user experience.

Because user experience is just getting a foothold down here, we started at the beginning.  I did a talk called "What is user experience and why do we care?"  [PDF 8MB]

Led by Bertus "AJ" Kock, the group also took a look at various attendees' computer desktops. We pondered what the different layouts said about them, and about the limitations of the desktop GUIs they used.  Fun and fascinating.

Web and mobile services are growing fast in South Africa as broadband prices drop. And all the South African businesses I speak to are keen to get the benefits of UX. They know they need input, but don't always know where to start. Hopefully the UX forum, and the face-to-face meetings, will help spread the word and raise awareness.

A few attendees (whose websites I know):

• Piet Alberts from Clayant
• Dennis Williams from DNA
• Jacobus Van Niekerk from Azapi
• Anne Sophie Leens from Apartment
• Vanessa Clark from burgeoning social media consultancy TwoKats
• Andrew Smith and Shane Dryden from Yuppie Chef
• Shaun O'Connell from Career Junction

... and many more wonderful people whose website addresses I can't recall now. That's just the Cape Town gang. The Johannesburg gang had a larger gathering a little while back - and there's another one scheduled soon.

Overall the forum has 80 people.  Maybe you should join too. (It's free).

Organised, industrial society creates left-over time for its citizens -- and that time has to be used up somehow. At first it was with gin. Then TV. Now it's just beginning to be with mass creation and collaboration.

Thanks to Anne Sophie Leens for the pointer. And "wow" to Clay Shirky for such a great post. I hope the book is just as good.

I have to say - it really shifted my mindset.

...if you take Wikipedia as a kind of unit, all of Wikipedia, the whole project--every page, every edit, every talk page, every line of code, in every language that Wikipedia exists in--that represents something like the cumulation of 100 million hours of human thought. I worked this out with Martin Wattenberg at IBM; it's a back-of-the-envelope calculation, but it's the right order of magnitude, about 100 million hours of thought.

And television watching? Two hundred billion hours, in the U.S. alone, every year. Put another way, now that we have a unit, that's 2,000 Wikipedia projects a year spent watching television. Or put still another way, in the U.S., we spend 100 million hours every weekend, just watching the ads. This is a pretty big surplus. People asking, "Where do they find the time?" when they're looking at things like Wikipedia don't understand how tiny that entire project is, as a carve-out of this asset that's finally being dragged into what Tim calls an architecture of participation.

See? Read the whole thing...

If if the 1st Gen iPhone was so "bad" - what was Apple thinking when they launched it?

Lots of people are excited about the new iPhone because they think it will address many of the annoyances present in the first one. (Well - not all of those issues are getting addressed, in fact. But some are.)

There was much complaining about the iPhone 1.0. And vocal user complaints are not usually a great recipe for a popular product and strong sales. In fact often, companies that rush products out to be "first to market" end up having their lunch eaten by products that arrive a little later, but offer a better UX. Apple themselves demonstrated with the ipod that late-comers can steal the the show by being "best-to-market."

Here are 5 reasons I can think of why Apple launched a "bad" product, braved all that negative publicity, and gave companies like Samsung and HTC a chance to take a shot at them.

1. Launch simple products first.

Apple like everyone else had to launch a version 1.0. Business reality and human psychology demand it. At some point you have to get something out the door becfore you run out of cash or go insane. iPhone 1.0 was a product of controlled project scope.

2. Get feedback from beta testers

Getting live market feedback works well - but mostly with early adopters. So perhaps Apple didn't want go mainstream yet. Did they elect to keep sales constrained and stay with the iPhone *BETA crowd until they had perfected the product?

3. Move the focus to UX

The iPhone caused a stir because it moved the focus to a different aspect of the mobile UX. Were Apple deliberately saying "it's not about hardware. Stop competing on hardware. This new phone is all about the user experience." So in a way, the hardware shortcomings drew attention to the UX. People complaining about missing hardware could be accused of "missing the point/having no vision" - and frequently were.

4. No competitors stand a chance anyway

Apple decided it didn't matter if their prodcut wasn't perfect, because they were confident that none of the existing mobile manufacturers could get their act together to compete on Apple's UX turf nearly fast enough. Efforts from HTC and Samsung were hardly mind-blowing. Nokia's device is still in development.

And realistically, that wasn't hard to predict. For traditional electronics companies try to squeeze into the Apple mold seems to be all but impossible. So Apple put their money where their mouth was and went first to market with an incomplete product. They knew they would get a way with it.

5. And now they can generate more buzz by launching version 2.

All publicity is good publicity.

Are people going to buy iPhone2? Some more will. That I suspect that question doesn't matter to Apple too much. We're still, arguably, in beta 2. One more release and it's going to get interesting.