What’s Your Story?Trends in UX process & design

Stu KingDirector of User Experience

PrologueWhy Story?

The Power of StorytellingWe all have the power of story

Why Story MattersBehold, the universal power of story

Story makes us human

1. We all tell them2. We all hear them3. We all know instinctively

when we have heard or seen a good one

“Human minds yield helplessly to the suction of story. No matter how hard we concentrate, no matter how deep we dig in our heels, we just can’t resist the gravity of alternate worlds.”

Jonathan GottschallThe Story Telling Animal

“…Americans spend nineteen hundred hours per year awash in the glow of television and movie screens. That’s five hours per day.”

Jonathan GottschallThe Story Telling Animal

Question 1: If you had to guess, how many hours per day do you spend consuming stories, including; TV, Movies, Music, Books and Games?

(a) 1 (b) 2 (c) 3 (d) 4 (e) 5 or more

Story StructureA formula thousands of years in the making

How does web design relate to story?

1. Character2. Setting3. Plot

= Audience & Persona= Presentation & Design Trends= User Flows or Journeys

Act 1Protagonist

CharacterGet to know the characters that will drive our story

Character or Persona1. Details – Name, age,

gender, technical proficiency, hobbies, etc.

2. Tasks – Top 53. Mental Model4. Optimism vs.

Cynicism 5. Discovery vs. Specific

Character PersonaBob Tabulator

Tasks1. Use online services2. Find data tables3. Search new products4. Meet other

accountants5. Send feedback

Mental Model1. Email: PC & Phone2. Smartphone3. iPad4. Google search5. Internet Explorer 9

Age: 35Gender: MaleLocation: NJ

Likes: Coffee, Sudoku, Scrabble, White Toast, Pop Music & Apple Martinis

Dislikes: Tea, Spicy Food, Mother-in-law, Long Haired Cats & Peanut M&Ms

Occupation: CPA

Bob Facts: Owns an Android phone, on the web 3-4 hours per day, collects antique pocket watches, drives a restored Gremlin

DiscoveryMeeting accountantsFind data tables

SpecificOnline toolsSearch ProductSend FeedbackSearch accounting topics

OptimismCynicismOptimism

1. Impatient when unable to find info2. Likely to call support numbers rather

than use online support materials3. Likes personal contact

Question 2: If you were to think about yourself and the character archetype that best describes you, what would it be? (a) The Jester “You only live once” (b) The Sage “Truth will set you free” (c) The Magician “I make things happen” (d) The Ruler “Power isn’t everything, it’s the only thing”

Act 2The Setting

SettingWhat’s the environment of our protagonist?

A Sense of Place1. Medium – App, web, other2. Device – PC, tablet, phone3. Window – Browser,

custom interface4. Design – Clean, vibrant,

contemporary, accessible

Question 3: When using a web site, what impact does visual design have on your experience?

(a) A big impact (b) Some impact (c) No impact

Building Our SetCurrent Trends

Setting: Responsive DesignLet’s talk about “Design”!

Why Responsive?1. Making sites available

on many devices and at many aspect ratios

2. The alternative to native applications

3. Design for mobile first4. Touch capable

interfaces

Setting: Responsive DesignFlexible interfaces & fluid content

Setting: Content StrategyFocus on your content & tell a great story!

Content First1. Search indexes care about

content2. Content strategy is a

critical investment3. Content tells the story and

includes text, images, interface

Setting: Mood & StyleSkeuomorphism is dead different!

Contemporary Design1. Flat interface elements2. Vibrant colors3. Type as art4. More white space5. Larger controls & images

Buzzwords: clean, modern, simple

Setting: Flat Design

Setting: Big ImagesGo BIG or…don’t.

Setting: Sticky NavigationNavigation always on

Act 3Plots & Subplots

The Perfect PlotEvery scene must turn the plot, if it doesn’t…cut it!

A Collection of Scenes1. We have a finite number of scenes in

which to tell our story2. Each scene must contribute to the telling2. The protagonist must emerge from the

scene different (hopefully better) than they went in

3. Well crafted scenes pull the audience through the story, making them crave more

Arch-Plot

Arch-Plot1. Linear Time Line2. Causality3. Active

Protagonist4. Consistent

Realities5. Closed Ending

Mini-Plot Anti-Plot

73%

20%

7%

AudienceArch-Plot Mini-Plot Anti-PlotThe Plot Triangle

Linear Time LineCoincidencePassive ProtagonistConsistent RealitiesOpen Ending

Nonlinear Time Line

Inconsistent Realities

Open Ending

Plot & Web Design

Plot types

1. Arch-plot2. Mini-plot3. Anti-plot

Question 4: Of the three plot types we have discussed, as a movie fan, which do you find most compelling?

(a) Arch-Plot (b) Mini-Plot (c) Anti-Plot

Epilogue

What we knowTelling your story on the web is about more than copy!

Compelling Story…1. Requires a deep

understanding of our characters

2. Requires a setting in which our characters may thrive

3. Requires a well crafted plot with a satisfying conclusion

Story as Design ProcessTurning the scene