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. ... Read more No comments

Drawing ideas in real time helps workshop teams imagine the future more effectively.

In concept design projects, we help our clients to envision how people will use technology in the future. But people who are experts in particular subjects (like their current customer experience or business process), are often less comfortable imagining or describing how things might become. Sometimes, Flow uses client workshops with graphical facilitation to help everyone get a solid grip on abstract ideas.

Augmented conversations

The idea of a graphical facilitation is simple to say, but harder to do: Draw everything that's being said in real time on gigantic sheets of paper. For maximum effect, paper the whole room, so that all ideas remain immediately available throughout the workshop.

An extract from a large mural created during a workshop

Here's some rationale...

• People have new ideas through conversation. Well managed conversations provide inspiration, as well as tests and checks that can help new ideas take shape.
• Conversations about complex things stop working well unless they are recorded as you go. A visible, running record of the ideas helps the team reach agreement and accept new ideas as building blocks for the next iteration of the discussion.
• Images are a very powerful record. Most of us can scan images quickly and find things again efficiently. They're also very information rich.
• Some concepts are more easily expressed in terms other than words. Mathematicians and physicists use mathematical notation. Architects use sketches, models and blueprints. Describing a building or a law of physics in words alone would be exhausting. Expressing complex, interrelated ideas behind a vision of the future will always be easier in pictures.

Visualising the presentation of a new system

The effects of thinking in pictures

I asked a couple of Flow's user experience consultants about using graphical facilitation.

"The future is unfamiliar territory, and that can be unnerving. Real time graphic output helps make everyone comfortable," Simon Hatch told me. "In a recent workshop, there was visible, engaging output even before we broke for lunch on day 1, and that really helped people feel they were making progress."

But as well as helping people see progress, the imagery on the walls helps people to think more effectively.

"It enables us to uncover and unpack things in a different way," explained Stuart Penny. "Seeing everyone's words represented on the wall helps each team member to absorb everyone else's ideas. And thinking in pictures reduces the effort of working an idea through and visualising its impact and consequences."

Smaller scale

Images are a great way of summarising and communicating the contents of a meeting too. We've been experimenting with writing up some of our meetings using images. You could see it as putting doodling to constructive use!

For fabulous drawing talent, we like to work with Cognitive Media.

The BBC used ethnographic research to inspire and inform their Audio & Music team, as they design new services for young people aged 13-18.

How do young people find new music? What do they do with it? What technology gets used and why? Rather than statistics or abstract trend statements, the BBC Future Media and Technology department wanted vivid examples and concrete insights about the user base they were designing for. They asked Flow to help them.

Learning about people's lives

We worked with four different target groups, which we named The Gamers, The Streetwise Teens, The Social DJs and the Indie Teens. Each group had three members – all close friends with each other.

We worked through 4 activities with them over the course of a few weeks:

• Group sessions
• Diaries
• Shadowing
• Follow-up interviews

Shadowing means spending time participating in each person’s day-to-day life. Our ethnographers enjoyed a night out in Camden with two 18 year-olds, some live gaming on the Xbox with a 14 year-old boy in his bedroom, gossiping with two 16 year-old girls at their home and a lesson about hip-hop dance from a 17 year-old dancer. The insights from experiences like this go much deeper than surveys and focus groups ever can.

Sharing what we learned

We had workshops with the BBC team all the way through the project. This let the team hear discoveries "as they happened" and be inspired to ask new questions. The research team were about to direct their enquiry towards the areas which our clients thought looked the most fruitful.

The final results were written up in a highly-visual, 80-page book. The goal was for people all over the BBC to engage with the study so we made sure that the results were presented in an interesting and visual way. The report was publicised in Ariel, the BBC’s internal newspaper.

Observations

I asked Jude Rattle, the lead consultant on the project, what she had learned from the study. “All sorts of things that you can’t mention in a blog post,” she told me. “But a few that you can.”

“Sharing music with friends is an important social activity. In the 70s and 80s young people made mix tapes. Now MP3s get swapped from phone to phone whenever people feel like it. But there’s a twist. The DRM mechanisms designed to stop digital piracy also stop people from engaging in that key social behaviour. So a lot of our participants had an added incentive to seek out pirate MP3s on Limewire: the file they got would be readily shareable.”

“People often think that young people are universally brilliant with technology, but they are not. In our study we found that teens will go to great lengths to use technology that does things that are important for them. But there are other things that older users might take for granted, which teens don’t know how to do. For example, some of our participants did not know how to burn a CD, even though they did know how to copy an MP3 onto a mobile phone’s memory card or Bluetooth it to a friend.”

Giving innovators an edge

Imagining the future is hard. Designing future products and services that will be discovered and adopted is harder still. In large organisations, design teams can easily become far removed from the people they are designing for. To stand a chance, they must have rich detail about what their target users actually do, what they like and what they need.

Ethnography helped the BBC to connect with teenagers as they consume music – and gave them practical insights that they can use as a basis for innovation.

Seedcamp is a week-long event where young entrepreneurs come together with advisors and investors to put together viable start-up businesses. Flow will be there to provide user experience advice to the teams.

Venture capitalists know a thing or two about investments. Which is why user experience is one of the factors involved in seedcamp. For interactive projects, user-centred design reduces risk and increases returns.

User centred design techniques dramatically reduce the risks associated with innovating and launching new products. After all, if you've worked with your target users throughout the design process, you should feel pretty comfortable that you've made something your customers will buy.

As well as reducing risk, designing a good user experience boosts returns.The effort and money you put into research, concept and design will be paid back many times over through increased conversion and usage, a stronger brand and reduced customer acquisition costs.

Some of the literature quotes typical returns on investment at several hundred percent. It's entirely believable. In some situations, a simple usability test, or a piece of insight from the field, can prevent a key problem that would stop users from adopting an new interactive product.

Shrink to fit

Start-up ventures don't have much to invest. That's ok: the process doesn't have to be difficult or expensive. User-centred design techniques shrink to fit. You can perform basic user research with friends and family. Sketch prototypes are easy to create with just a pen and paper. You can perform rapid iterative usability tests in just a few days. When Flow worked with Moo Print during its start-up phase, the team powered through five design iterations in a week.

The point is though, that like any investment if you put nothing in, you'll get nothing back.

So here's our investment advice for all 22 teams at seedcamp. Focus on understanding your users' needs, motivations and real-world behaviours. Then use your insights to help you design and deliver the right user experience. Payback won't be far behind.

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.

We just got the first figures back about how the National Express East Coast booking engine has been performing. The site (researched and designed by Flow) has shown impressive increases in revenue and conversion rates.

The figures for the first 6 months:

• 30% increase in online revenue
• 50% increase in conversion rate

This demonstrates, once again, that the right user experience boosts the bottom line. And a talented team of design thinkers following a user-centred design process is a low risk way to get it.

Find out more

• We've published a case study about the project.
• Or you can read more about the design process that the team followed.
• And here's more about customer feedback and loyalty for the site.

Or you could always try the site out for yourself...

Freemans has launched its new website, delivering a state-of-the-art online customer experience. Flow was pleased and proud to help them on the project.

Freemans understood that the right user experience would increase visits, sales and repeat business. But to deliver those benefits with minimal risk you need a user-centred design process. So we started our engagement with Freemans by creating a user-centred design project plan, then got started on the first step - research.

Research

Paul Heath was Flow's lead consultant on the project. I asked him about the research phase. "The research told us what users think and feel, and the kinds of experiences they encounter when they are shopping online and offline. We also undertook a competitive analysis of the fashion sector and an expert evaluation of the Freemans site."

"All of this data let us understand and priotitise the project requirements effectively. But it also let us innovate new ways for customers to interact with the site. During the concept phase, our understanding of our customers' ideal shopping experience let us create... Read more

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 Mihaly Csikszentmihalyi. 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.

Ian Worley, Flow's Director of User Experience, was recently on a panel at the Media Futures 2008 conference in London. He was talking about the value of research in the design process: it lets you innovate with your eyes open.

Here's Ian's post...

Research is the foundation of all innovation. Design teams that augment their thinking with insights and feedback from their target audience will deliver better results. Be it ethnographic observation, participatory design or usability testing, research provides the stimulus and the constraints for a real (and really successful) innovation process.

What is the creative process? Here's one definition: it's about transforming what you observe in the world into meaningful and valuable artefacts through play, experimentation and feedback. What we call design research is really just a formalisation of those observation and feedback elements.

New technology is transforming the media. It's changing how people create, access, collect, share and consume information and entertainment. Ethnographic and participatory research are really valuable tools for understanding these changes. They uncover the nuances of new attitudes and behaviours at different social and cultural scales from individuals to communities.

If your organisation is hoping to turn a profit in this new media landscape, you need a deep understanding of the new ways people are consuming media now. Then you can design how they will consume it tomorrow.

Media Futures 2008 was an interesting day, a great opportunity and an amazing collection of people.

• Flickr set of the conference by Nico MacDonald
• More about the Media Futures 2008 conference

Flow helped the Training and Development Agency to build a user experience roadmap for their website and create a user experience scorecard for measuring its success.

Ethnographic approaches, such as contextual enquiry and experience labs, help organisations understand their target customers needs, behaviours and motivations. To get really insightful discoveries, researchers immerse themselves as deeply as possible in the lives or jobs of a limited sample of target users and try to discover what those people really think and need.

On the other end of the spectrum lies automated quantitative usability testing. Here you never see your users at all. But you get accurate measurements of how successful they are at achieving key tasks on your site. Gaining a quantitative understanding of your website's performance lets you chart your site's improvement over time, and identify where it could be performing better.

Ethnographic techniques tell you what your users want to do. Quantitative testing tells you how many of them are managing to do it.

And often, successful UX strategies will combine the two. Our project for the TDA did.

Building a UX strategy for the TDA

We began by conducting contextual research with people from the TDA's 7 target user groups - including teachers, support staff and school leaders. We gathered stories of actual experiences that they had lived through, and the sequences of activities they had engaged in. We also played some simple participatory design games with them to bring out ideas for the "ideal" TDA website.

With a separate sample, we usability tested the existing website. Using a huge quantity of sticky notes, the researchers put all the data together and analysed it. They uncovered a selection of 70-80 tasks that the different target groups needed to perform on the website. (We also discovered that there were really only 4 groups with different needs, rather than 7).

Next came a "task matrix". For each task, we identified:

• The audiences who do it
• Related tasks or sub tasks
• Triggers that cause someone to engage in the task at a certain point (events like assessments, deadlines, changes in staff)
• Target web pages where useful information would be found.

Straight away, this let us see where there were improvements to be made. If we struggled to find suitable target pages, or if the information or findability of a target page seemed poor, we knew we had an opportunity to improve things.

To take us beyond expert opinion, we also used the TDA's web analytics data. We checked how many people were visiting each target page, and assessed that figure in relation to task importance and audience group size. That gave us additional evidence about whether pages we easy to find or not.

Finally, we worked with stakeholders to assess the effort needed to improve the website for each task. Plotting each task on a chart of priority versus effort (for users and for the organisation) gave us a solid roadmap: small, high-value changes first; larger changes later.

User experience scorecard

To make it easier to measure and chart improvement in the site's UX, we set up a user experience scorecard using UserZoom.

UserZoom performs automated remote usability testing. It asks a quantitative sample of target users to try doing certain tasks, gathers clickstream data and quizzes them to check comprehension and attitude. The scorecard treats user tasks as key performance indicators of the site's user experience. The TDA is running benchmark UserZoom studies every six months, and the results are being fed onto an interactive dashboard.

The scorecard will help the TDA team to monitor the impact on the user experience as they work through the steps on their UX roadmap.

Flow's team: Mary Henley, Anthony Mace, Claire Mitchell, Leisa Reichelt, Sarah Herman, Pav Chahal, Nick Bowmast, Vanessa Kirby, conducted the research. Karen Wall looked after the client relationship.