design as story-telling david vronay research manager windows ui strategy microsoft, inc

Design as Story-Telling

David VronayResearch ManagerWindows UI StrategyMicrosoft, Inc.

© 2005 Microsoft, Inc.

Considering emotion in design

• Historically emotion has been undervalued in the design of computer software

• We don’t think enough about the circumstances surrounding the use of our products


Two weaknesses with software and emotion

• First, we don’t give enough attention to “emotional bugs”– Consider greeting card making software

• Second, we don’t consider the same technical feature may have radically different meaning in different settings– Missing a piece of spam mail vs.

missing a crucial timely announcement


A little Psychology is helpful

• In order for a task to feel correct to a person, three components have to be equal– The amount of time & energy the user

puts into the task– The amount the user cares about the

task– The amount of value other people

attribute to the task


In other words…

• If I don’t care about something, I want it to be quick and easy

• If I really care about something, I want to be able to spend a lot of time and effort on it

• And in any case, I want other people to know how much I care


Why greeting cards work

• If I don’t care, I can run into a store and buy a generic card off the rack. The person who gets the card knows it is generic.

• If I care a lot, I can spend a lot of time evaluating cards and picking the perfect one. The person who gets it knows that it is special

• Compare this to computers– Very little connection between my feelings, the

required effort, and other’s feelings– Tasks take as long as the task takes - efficiency


Tracking emotional bugs

• When the user sits to make a greeting card for their mom, they are full of happy thoughts about how much they like their mom and how much she will enjoy their card

• If they don’t have that emotion at the end of the process, we should consider that a bug– Just like if the card was printed with garbage on

it– Track it down and figure out where the bug

happened and how to fix it


Better greeting card software

• I should be able to spend as much or as little time on making a card as I want

• All of the effort that I spend should directly translate into a card that feels more special

• Challenges:– Limited physical media options– Handmade vs. mass-produced– How to make user choices apparent


Emotion matters, but how to include it?

• Challenge:– Emotional moments are difficult to

describe

• Solution:– Borrow techniques from a purely

emotional medium: drama

• UI as story-telling


How it works

• Who are the characters?

• What are the settings and locations?

• What are the story arcs?

• What are the emotional moments?


Characters

• The user is a character, of course– We can use our existing personas

• But also important to consider the other characters– sidekick, villain, hero, love interest

• Think about motivation?– What are the characters trying to do an

why?


Character examples

• In email, characters might be:– The user– His girlfriend– His boss– His co-workers– His mom


Settings

• The setting is the places where the characters are using your product

• A setting is not just a physical place, but also the surrounding environments and attitudes

• Think of the various traits of the setting– Quiet or loud, crowded or private

• What effect might the setting have on the task?


Setting examples

• For email, we might consider– The office– The subway (with Smartphone)– Home– Public Internet terminal at airport– Etc.


Story Arcs

• Story arcs are the things that actually happen

• The events and sequences

• Similar to a scenario, but more focused on the emotion and interplay of the characters

• May be many different arcs that could overlap– Think of a novel


Story arc examples

• User sends an email asking a question and gets no response. He sends it a few more times. Finally the response comes in.

• User sends email to a group of people trying to arrange a meeting time. Everyone comes back with different answers and user has to work hard to get a time right.

• User is sending email to his kid while on a business trip. Wants to make something that feels special to the kid.


Emotional moments

• Emotional moments are crucial to great design– Making something delightful

• Think about your story arcs and identify moments of significant emotion

• Emotional moments are not just the positive emotions– Consider anger, disappointment,

frustration


Examples

• You find an important email in your junk items folder – it has been there for a week

• You try four times to send a mail, and each time there is some error

• You send someone a mail and wait for a reply – after a week of waiting, the reply finally comes in!

• Every week, you get status email from your employees

• Your boss’s boss sends an email directly to you, with no one else on the CC line


Recognizing moments

• Remember that this is happening before design

• Focus initially on moments that are part of the story, not part of the design solution– “user is frustrated becomes the menu items

keep changing” is not about the situation

• You cannot eliminate all negative emotion – some things are inherently frustration, tedious, etc.


A big difficulty for us CS types

• Too often we are trained to avoid emotion in software design– Ignore it– Downplay it– Suppress it

• Considering it feels like extra work– Or worse, it feels like you are making an task

unnecessarily difficult– Most of us wish our users could just check their

feelings at the door

• But ignore the problem will not make it go away– Humans are emotional– Anything that we spend time on will take on an

emotional aspect


Creating moments

• If you want people to love your software, you have to embrace emotion

• Don’t just recognize the existing moments

• Create new ones in the design

• Great software produces emotional moments for the user that give them a bit of joy or delight

• Serendipity and surprise– Putting a web page in a slideshow viewer


Putting it into design

• Once you have these emotional moments, you can design around them

• Provide unique UI for the same task in different emotional contexts– Moving an email from inbox to saved mail folder

is not the same as moving it from junk mail to inbox

• Consider the way you are presenting information and the language you are using– Is it suitable for the emotion at hand?– Don’t use happy text in an error dialog box


Example: Windows XP error reporting

• Windows can detect a crash– Save the state– Usually save the work– Relaunch the app

• The state is very useful for debugging– Microsoft would like to collect that to im

prove the stability of future products

• But of course, we need permission to collect it


Designing a solution

• To dev this is simple– Just put up a confirmation dialog

• But it is important to consider emotion in this context– The program just crashed – how does

the user feel?– What is their primary concern?– How are they feeling about Microsoft

just then?– Is it a good time to ask for a favor?


A better design

• Start by an apology– Don’t phrase it as being from the computer, because

the user knows that the computer isn’t sorry

• Reassure the user that things are under control– The data is safe– The application is reloading

• Later, when the user is done with the computer, you can bring up the idea of sending in the saved state– Maintain the apologetic tone

• Remember that one crash is different than ten crashes– Escalate situations automatically


Key Take-away

• The same task may have different emotion in different circumstances

• Considering your user interface as a story can help define these moments and can help you design appropriate solutions

Assignment 3 Review

The mirror


Review of Assignments

• Bring them up

• Talk about your process

• Think about the story:– Characters– Plotlines– Emotional moments


Your experience

• How did you try to come up with the perfect mirror?– Did you brainstorm?– Did you think of a persona?– Did you try to do some cool hunting?– Did you try to use the aspect maps?

• What was easy & what was hard?

Assignment #4

The Cell Phone


Designing a new phone

• Cell phone is now a fairly mature technology

• Most people who want a phone already have one

• When a new phone enters the market, it has to provide something useful that other phones do not

• This is a great design problem, because the technology is ubiquitous

• Story telling can help


The Assignment

• Design a phone that will help a young single guy (or girl) get a date

• Use the story-telling technique– Who are the characters?– What are the plotlines?– What are the emotional moments?

• A few pages long, as usual

design as story-telling david vronay research manager windows ui strategy microsoft, inc

Documents