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.

Not all of Seedcamp's cutting edge entrepreneurs understood how to design for customers.

After last year's success, Flow was asked to come back to Seedcamp to mentor on the product and marketing day. I got the opportunity to go and talk with a range of people about how they conceptualise and design new services.

The keynote panel for the day focussed heavily on usability and user-centeredness - in that order. It seems that for most people, the route to user-centered thinking still sparks the notion of usability testing your service/product after build, squeezing it in at the end. Since the cost of changes to software can tend to increase exponentially as you get closer to launch, making changes at the end is not a great way for young businesses to conserve their limited cash.

Soup.io: One of Seedcamp's winners

But from usability, the discussion branched out into the notion that a user-centred approach to strategy early on in the process is much more valuable. This was really valuable for the competing teams. The feedback made it clear that most young entrepreneurs weren't thinking or developing around customer needs. In conversation most said the one thing they didn't have was a differentiated picture about who their users are or how a usable interface might look.

I worked with five of the finalist teams to see if I could help!

Social, efficient, usable

This year's winners seemed to follow a consistent theme: publishing better content, with less effort, and tying it into your social networks. That certainly seems like the mood of the moment on the web.

My favourite

A company called Uniki didn't make it into the final seven. But they were a personal favourite of mine, as an interaction designer. They've created a system to allow gestural interfaces for projected screen. So you can stand near a data projector, wave your hand and turn an on-screen page.

A uniki user gestures at the projected image of an old book to turn the page

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.

Observing target customers in their homes or while they shop can provide the insights you need to build a better website - and a better multichannel experience.

I wrote this article about cross-channel ethnography for Internet Retailing Magazine earlier this year. I'll be talking about this topic at the Internet Retailing event in October.

Insight to innovation: The power of cross-channel ethnography

When Bronislaw Malinowski decided to study the habits and culture of the natives of the Trobriand Islands in the South Pacific during his exile in the First World War, little could he have imagined that the techniques he developed to learn about other cultures would be used to revolutionise the marketing and sales of consumer goods and services. However, this is exactly what is happening.

Ethnography, once confined to academic research departments has, over the last 20-30 years, become a widely used and powerful research technique for companies seeking to improve how they market and sell to customers. They have even turned the lens on themselves to improve how they manage their own businesses.

More recently, the desire to provide compelling multi-channel customer experiences that lure customers away from competitors has become the holy grail for many retailers. However, there is a noticeable gap between the precision with which research is used to understand customer behaviour offline and how it is applied in the design of online stores.

This gap is closing, however. As online retailing enters the mainstream, multi-channel retailers are investing more to improve the quality and effectiveness of their online stores. They are also looking for ways to build customer loyalty in a world where technology is making customers more and more promiscuous. Cross-channel ethnography is one of the tools retailers are turning to for insight.

The trouble with websites...

"Well, I can't really tell what the phone looks like from the picture...", said Katie, a participant in a recent usability study for one of the UK's leading mobile operators. "I would go to a shop at this point, before I make a decision".

From a research point of view, this is not surprising behaviour. It has long been understood that ... Read more

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

The Transport for London website team's dedication to user centred design has helped make their site a leader in the public sector.

A recent report from the Public Accounts Committee has been critical of the way that UK government websites are designed and managed. But TfL.gov.uk, the Transport for London website, was one of the few cited for good practice and performance. It's no real surprise: the TfL team really understand the value of listening to customers, and designing for their needs.

Sometimes, we're pleased to say, TfL hire Flow to help them.

What London travellers really need

TFL's flagship offering is Journey Planner. Back in 2006, we helped TFL research and design the mobile travel alerts element of the service. Designing personalisation features for a website is never easy - because most of the time, people don't want to personalise. We all just want the website to do what we need with minimal effort.

Flow ran experience labs: one-to-one sessions with a range of different people. The lab sessions focussed on digging out the reality of London travellers' needs, motivations and behaviours.

A key technique was retrospective accounts: we gathered detailed stories about what people really did in specific situations. So rather than asking "what do you think about travel in London" we asked things like "Tell me how you got to this interview today," and "tell me about the last time something went wrong with your commute to work." To keep the conversation fun and manageable, we also collaborated with the respondents to create pictures, lists and timelines using sticky notes and marker pens.

Once we understood user needs, we could identify a service that people would really like. The travel alerts system lets you identify the routes you are interested in (typically the ones you commute on every day), and get travel alerts for those routes at specific times. We defined the concept, worked with TFL to create wireframes, then fine tuned them with two iterations of usability testing.

TfL personalised travel alerts: Prototype and live site.

Practical commitment to customers

Since then we've helped TfL research and optimise all sorts of things from the Oyster Fastload process to the London Transport museum website. And since communicating with travellers is a multichannel activity we've even run iterative usability testing in London Underground stations - quite a challenge.

Now approaching...

Flow is now working with TfL on a strategic project to map out the future for the website, and we're basing the process on user research.

To improve on the experience labs methodology, we're asking our research subjects to fill in diaries. We're catching reports of travel experiences while people are travelling, then following up on the details in the lab afterwards. From there we'll be using a scenario-based approach to map out what people's travel experience and identify the TfL website's optimal role.

The finished site will offer London's travellers an even more useful, usable and appealing travel experience.

Much like genres (see previous post: Can we describe interfaces as genres?), design patterns aim to create a classification scheme. Alexander created his methodology, in response to his feeling that designers in a post-industrial society lack the knowledge of materials and construction methods that people in a pre-industrial society have, via tradition. The slow evolution of tradition allows humans to adapt, slowly, in context, therefore identifying optimal solutions (optimal for humans, optimal for nature and the materials in use). To compensate for the lack of tradition in new materials and construction methods, Alexander described a methodology that consolidated research about human behaviour and the form that is required to support that behaviour into a hierarchical ‘language’.

He describes his methodology as a language with elements that have an explicit relationship up and down the hierarchy: in a way that the syntax of a language might work. Users of the pattern language identify the pattern (unit of the language) most relevant to their design problem (perhaps designing a house). They should look up and down the hierarchy to identify the other patterns (designing a street of houses or designing a kitchen) that also have an effect on the problem. In this way the designer can discover the entire context in which the problem sits and circumvent the lack of tradition.

Often with patterns the issue of stifling creativity is raised. Patterns are created and presented in a way that present the context, form and a high level solution to a problem without specifying the detail. Alexander went so far as prescribing the way patterns should be communicated: relying on clear labels, open descriptions and what he calls constructive diagrams (diagrams that appear in sketch format, describing the solution at a high level) to describe the pattern. Patterns can be used to speed up the design process, ensuring that designers do not reinvent the wheel with every new project they undertake. A designer can focus on adding to our body of knowledge and tackle new, more demanding problems when familiar and common problems clearly are described.

The question is whether we, as interface designers, can create languages that apply to our design problems? Interfaces have a history of only approximately 40 or 50 years; design patterns would definitely help us overcome our lack of tradition. There are reoccurring problems that occur. My opinion is that, yes, we could create a pattern language for interfaces if the focus of that language was user behaviour in reaction to a context and not specific interface layout.

Many people have created pattern languages for interfaces. Among the most referred to are: the Yahoo! pattern library and Tidwell’s Designing Interfaces. Both are interesting and provide insights that add to any design challenge. However I find them quite prescriptive. There is a lack of overt hierarchy and solutions seem to be specific where writers have chosen to include individual examples rather then stick to the high level constructive diagrams that Alexander described. I did find one example (after an inexhaustive search: other examples are welcomed) that I found to be true to his methodology and useful to me. The Design of Sites, although potentially out of date now, provides an almost hierarchical organisation scheme and describes the relationship up and down that scheme; informing the designer of contexts and reactions to them. Solutions are described using constructive diagrams, allowing for creativity.

I think that we are only beginning to conduct enough research to create a true pattern language and all interface pattern languages should be regarded as works in progress as there are many more contexts to understand thoroughly. We will get there however; it did take Alexander 10 year and he had many collaborators to provide us with his one example.

I was invited to talk to the students at the Akademie Fur Kindermedien in Germany on the topic of classifying interfaces. Two other speakers also spoke: Mario Giordano and Nicole Kellerhals (a consultant script writer).

We were asked: how can the rules of genre help define the creative and productive process. Immediately this statement made me uncomfortable. The use of the word genre seemed inappropriate as it promised more then we currently know. The definition of genres, in writing, film, theatre etc., has developed over a long time. When a particular genre is mentioned, instantly we (the general public) have an idea of what it refers to; take a thriller film as an example. The thriller genre has a fast pace with frequent action; they are full of suspense and often end in cliffhangers. In this way films can be arranged into clear categories, genres, which the audience understands. Producers and publishers exploit our understanding of genres in order to market new releases.

Genre is used as a tool during the creation process where authors can use the rules of a particular genre to guide them. Nicole Kelerhals spoke about this: describing the commonly understood elements of many film genres, she showed how each have their own distinctive elements. Mario Giordano gave authors instructions based on Raymond Chandler’s rules of crime stories. For example: do not give the detective a love interest as it detracts from the main story line, the mystery.

Interfaces, I feel, do not have such clear definitions or rules. I use the IA organisational schemes, taxonomy versus folksonomy, as metaphors to describe the difference:

• A producer or publisher identifies an item as it is released into a genre much like an information architect creates a taxonomy.

• Interfaces are created and released without explicit association with a type. The creators of interfaces vote for types by choosing to create them.

Genres are created in a top down method while interfaces, unconsciously, are created with a bottom up approach.

If the objective is to identify a model to aid the creative and productive process then we do have such things, but they are not genres. Without the years of development that it has taken for genres to form we need to learn about the context of use. The tools that I use in order to do this are: research, iterative design, design patterns and personas and scenarios.

Much like genres, design patterns aim to create a classification scheme via which we can aid the creative process. They do not talk about rules but outline the context, form and solution of the problem allowing the designers to resolve the problem. I talk about my understanding of UI Design Patterns in the ‘Are design patterns a truly useful design tool when designing interfaces?’ post.

Mario, Nicola and I had a discussion where they suggested that patterns were genres by another name. Could it be that in order to identify a genre the patterns for that genre need to be clear (fast pace, frequent action, suspense, cliffhangers)? Interfaces do not yet have genres, as we have not yet identified complete pattern languages for them. Each practitioner is consciously or unconsciously identifying patterns as they work. In time perhaps we will have UI genres when we amalgamate and rationalise our patterns, but we are currently too young for that as we are only just discovering the patterns.

For cost-effective air travel, everyone thinks of easyJet. But easyJet also offers hotel booking, car hire and travel insurance. Helping customers to discover those newer offerings, and come to associate them with the easyJet brand is not straightforward. Bolting hotel and car hire offers onto a flight checkout process doesn’t do them justice, and can look like “hard sell”.

Flow and Splendid (our favourite visual design agency), working with Microsoft, recently undertook a user-centred design project for easyJet. They wanted to explore whether rich applications could be used to increase the number of flights booked, build customer loyalty and expand those newer revenue streams.

We started with user research, created user personas and mapped out their travel lifecycles. The concepts and detailed designs were usability tested with target users, and iteratively improved based on the feedback.

The Flow/Splendid team implemented a proof-of-concept for easyJet using its new Silverlight technology and users told us in the tests that the results are really compelling.

Microsoft made a video case study of the project which was featured on the MIX08 conference website. Take a look. There are interviews with Flow, easyJet and Splendid as well as some screen shots of the actual application.

When and where you want to go

We worked with individual target website users in our labs and got them to map out their most recent travel booking experiences with paper, pens and sticky notes. We created 3 personas, each with their own lifecycle diagram, to sum up target user needs, behaviours and motivations in a way that the whole team could relate to easily.

Research showed us that the easyJet site catered well for people who knew where they wanted to go and knew when they wanted to travel. So to increase the site’s appeal we focussed on design for other groups:

• People who know where they want to go, but not when. They need help finding the cheapest flight, possibly in the space of several weeks/months ahead.
• People who don't know where they want to go, but know roughly when. They need to compare destinations and prices.
• People who don't know where, and don't know when. They need to find advice and inspiration.

Research also emphasised some design drivers that we seen time and again when designing travel site.

• People value honesty about the fares, and facilities to compare prices across a range of destinations and dates.
• People are really hungry for information about their possible destinations. They will happily digest a lot of content.

Fare-finding and destination-finding

Flow's strategy was to provide users with a more integrated experience addressing their whole travel lifecycle, rather than trying to add on other products during checkout. The final proof of concept included:

• A fare finder that gives you the total price for your party, and lets you flip through different dates easily without resubmitting a query.
• A chart that helps you find the cheapest dates to travel if you’re sure of your destination.
• A destination finder that shows destinations on a map based on criteria you choose, including activities, dates and budgets.
• Rich destination information - text, video, photos and maps in a full screen format all helped to give a real feeling for what a visit to each destination would be like.

To top it off, we designed a streamlined booking process, to ensure that the user experience stayed good right to the end.

By the time we reached the last round of user testing there were few surprises. Our tests showed that users liked the full screen video guide, the clarity of the flight details and the transparent pricing. The simplified flight booking process went down very well too.

Paul Curtis, head of application architecture at easyJet had this to say.

”We were really keen that what we built was what our customers want so we’ve got something really good to build on for the future. Working with Splendid and Flow enabled us to use a user-centred design approach.
We’re really excited about what this new interface will do for us.[..] For us as a business it's about increasing customer conversion and we really feel that with these new technologies and this new customer experience we’ll be able to do that.”

Congratulations to the team: Peter Otto, Beau Ginbey (Splendid), Claire Mitchell, Catherine Pierce and our Director of User Experience, Ian Worley. Thanks, also, to Splendid and Microsoft!