Telling stories

Christmas is a good time for sitting around a fire and telling stories. Practice your storytelling this Christmas, and hone your interaction design skills for 2009.

People love stories. But beyond that, stories are fundamental to the way we think as human beings. Salesmen tell persuasive stories about successful installations and satisfied customers. Social workers pass on complex case histories as stories. Just about every culture in the world passes on valuable knowledge to the next generation in the form of stories.

Christmas tree

When properly told, stories incorporate all the ingredients people need to think and learn: situation, actors, events, challenges, consequences… They help us gain a little of the benefit of direct experience, with much less of the pain.

So it makes sense that interaction designers need to be great story tellers. I’ve picked three kinds of storytelling used in interaction design…

  • Scenarios
  • Specification
  • Rationale

Scenarios: Invent a story

Because we’re not fundamentally good at imagining futures or situations different to the one we are in, we have to consciously and explicitly create stories to make sure we do things right. Interaction designers create personas (the characters in the stories), describe the context of use (situation and back story) and the personas’ goals.

Then we create scenarios. We try to tell a compelling and realistic story of how our personas will reach a happy ending by using the product. Because we’re all good at listening to stories, the team can spot the good ones, the implausible ones and the radical-amazing-breakthrough ones quite quickly.

A storyboard

Specification: Many stories

A specification – however sketchy or detailed – is a story. Actually it’s many stories, captured simultaneously. What will happen if the user goes here or there? A good specification has a lot in common with a Choose You Own Adventure story. (Did somebody say adventure? Now there’s some classic interaction.)

Choose your own adventure: Mystery of the Maya

The trick for a good interaction designer, though, is to make sure that the story of your product has no dead ends. So the best specs spend plenty of effort on handling error situations, as well as just the positive story.

Rationale: Meta-story

The importance of rationale is often underestimated. Rationale is the story of how and why a design decision has been made. “We’re doing it like this because…” When your storytelling has led you to a non-obvious (but demonstrably right) conclusion you don’t want your team and your stakeholders re-creating all the failed stories you’ve already told all over again. It takes too long.

Rationale also demonstrates how much effort has been put into reaching a conclusion, so that the team doesn’t forget how far they’ve come.

Pictures are not stories

A picture, in this context, doesn’t tell a story so much as beg for one. A beautifully drawn image of an interface, frozen in time, might look persuasive – and it might hint at past and future interaction. But it doesn’t answer many of the important questions: how do your users reach this point? Where do they want to go next? Will they know what button to choose? What will happen if they click that button? A picture on its own is open to misinterpretation by everyone who looks at it, from developer to CEO.

When you surround it with other pictures and information about the sequence they link in, then a story unfolds. And that’s what interaction design is all about.

Designing future happiness

Humans are not very good at predicting what will make us happy in the future. Designers need user centred design techniques to help them to overcome that limitation.

We don’t know what’s good for us

In Stumbling on Happiness, Harvard psychology professor Daniel Gilbert, describes recent research on “prospection” – the act of considering the future. Our ability to simulate future experiences is one of the things that makes us human. But our experience simulator (the pre frontal cortex) makes lots of mistakes. A key mistake is to imagine the future will be like the present.

Will people want to live in homes like these? Nope!

For example, past visions of the future included rocket cars and jet packs, but usually the people’s behaviour didn’t change a bit. Mom still hung out in the kitchen, even though the work was being done by machines. And people lived happily in high-rise, concrete complexes. Today, retro-futuristic visions are more a quaint commentary on the time when they were made than a relevant description of the present.

Yummy duck dinner. FotoosVanRobin: http://www.flickr.com/photos/fotoosvanrobin/

On an individual level, we’re bad at predicting what experiences will make us happy in our own future. After finishing a delicious roast duck dinner at a favourite restaurant, I will be full and I will have “habituated” to the duck. So future duck dinners will not seem so appealing to me. If asked to pre-order for my next visit in a month’s time, I’m more likely to choose something other than duck. But when I arrive at the restaurant a month later, I am more likely to actually choose the duck again. When I made the choice about my future, I assumed it would be like my present, where I’d had enough of the duck. But when the future came, I was actually hungry – a frame of mind that I did not predict.

Methods for predicting the future

On a straightforward level, designers need to make this prediction: “What will people want to do with this product?” For example…

  • Will people want to shop on my website by brand, price or by specification?
  • Will people want to devote full attention to this mobile device or just glance at it?
  • Will people want to watch a 30-second animated intro to my website?
  • Will people want to click a button to clear all the data from a web form ans start again?

In all these real-life situations, the designers had to imagine future usage of their product and make decisions accordingly. A lot of them got things wrong, because they imagined that when using the finished product in the future they would be in the same frame of mind as when they were designing it.

Bringing the future to the present in a usability test

Since we’re actually better at thinking about the present than the future, designers who want robust results need to bring the future into the present. In some respects, that’s what user centred design is.

  • Ethnographic studies: Since target users are (usually) human they can’t predict accurately what will make them happy in the future. So it’s best to watch what people do instead. Study what makes them happy, and what unhappy moments you can address with design.
  • Iterative prototyping: The future product isn’t finished yet. But make a mock-up of it and get target users to try it out. By simulating real usage, you’re simulating the future more accurately than you can imagine it.
  • Scenarios and cognitive walkthroughs: Be methodical and write down what people’s future situations might be. Then you’ve got a better chance of predicting their future behaviour.
  • Field trials: For particularly huge and life-changing ideas, your prototypes need to be a bit more solid. Leave them with a select few for a while and see what you get. For example, Microsoft’s SenseCam and whereabouts clock. Or Bill Gaver’s Flight tracker.

Field trial of the  Whereabouts clock in a  family kitchen

Making future happiness evident

Designers are often asked to design things that look desirable – that convince people to buy, rather than to deliver ongoing satisfaction. In a way, the user experience design movement has been about changing that: creating products that make people happy over time.

But since our customers can’t predict what will make them happy, they might buy the wrong thing. Something with lots of impressive-looking buttons, for example. So not only does the product have to make people happy, it has to look like it will make them happy.

One trick is to emphasise simplicity (which is what seems to make most people happy) as a feature. Sometimes it works.

Using the Microsoft Ribbon without anyone getting hurt

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…

MS Office Fluent Interface Ribbon
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.

Powerpoint ribbon: Same controls, radically different locations depending on context
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.

Update: guidelines from Microsoft

I’ve discovered some updated guidelines from Microsoft that really help. Along with other nuggets, this one addresses dockable palettes issue below…

Ribbons must be used in place of menu bars and toolbars. However, a Ribbon may be combined with palette windows and navigation elements, such as Back and Forward buttons and an Address bar.

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.

Our technologies shape us

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.

Winston Churchill: We shape our homes and then our homes shape us

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

Modified quote: we shape technology and our technologies shape us

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.

Apalling and astonishing

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

Bad web design

Worse web design

Ten futuristic user interfaces

Futuristic glass integrates information services with everyday life

A 180 dome display makes gaming more immersive

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.

New facebook design confirms a drift to the right (nav)

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

Facebook navigation
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 nav
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…

Web navigation: a mental model

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.

To-scale paper prototyping for the home

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
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 lounge/dining space with newspaper
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.

Social design for Springleap

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 holding a Springleap shirt
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.

Springleap T shirts in their bags
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!

What makes us productive and what makes us stupid

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.

Mihaly Csikszentmihalyi proposed the idea 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.

Making user experience a hot topic in Cape Town

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]

Presentation slide thumbnails

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.

The forum in session

A few attendees (whose websites I know):

… 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).