The Importance of Storytelling in Web Design, WordCamp Miami 2013

The Importance of Storytelling

in Web Design

Denise R. Jacobs

WordCamp Miami Miami, FL

6 April 2013

Tweeting Web Design Tall Tales

Your storyteller: @denisejacobs

This fine event is: @wcmia #wcmia

This story is about: #storyinwebdesign

“The universe is made of stories, not of atoms.”

- Muriel Rukeyser, Speed of

Darkness

http://www.flickr.com/photos/zlz212/198759134/

1 Why stories?

Not seeing the forest for the trees

Missing the Point

http://www.flickr.com/photos/verifex/3782787057/

Technique, best practices, process

Focus

Of web design, the web, and The Next Big Thing

Try to divine the future

http://nilanda13.edublogs.org/files/2012/09/crystal-ball-1k6d25c.jpg

Everyone is experiencing…

Because…

http://www.flickr.com/photos/brendio/71252025/

Users have evolved as well…

Information overload

http://www.flickr.com/photos/freeflyer09/7574540716/

User are more sophisticated

Information + Meaning

http://www.flickr.com/photos/smoy/6143338263/

+ connection

http://www.flickr.com/photos/thivierr/1501007265/

And we don’t even realize it.

We are powerful

http://www.flickr.com/photos/89927155@N00/2144275209/

That which we produce…

We take for Granted

http://www.flickr.com/photos/seanstayte/263927107/

…shapes, and manipulates users

influences

http://www.flickr.com/photos/johannahobbs/2412291551/

And manage our power

Enter into a pact with end-users

http://www.flickr.com/photos/wrote/2646295354/

Deliver information in a deep and meaningful way?

How can we…

http://www.flickr.com/photos/frozencapybara/1376454002/

Through Story!

http://www.flickr.com/photos/jeremyhall/3180031090/

…Means going back to the past

Designing and building for the future

http://wikamag.com/wp-content/uploads/2012/10/back-to-the-future-part-ii-original.jpeg

It’s the very essence and beginning of being human.

Storytelling is old

http://commons.wikimedia.org/wiki/File:Eastern_Story_Teller_%281878%29_-_TIMEA.jpg

Can plan for the future by looking at what has been done in the past

Can Practice Sankofa

Numbers and data are meaningful for very few humans.

Numbers don’t touch people

http://www.flickr.com/photos/carolynwill/4407204251/

“Stories are important cognitive events, for they encapsulate, into one compact package, information, knowledge, context, and emotion.”

- Don Norman, Things that Make Us Smart

To be human is to seek Story

http://commons.wikimedia.org/wiki/File:Spannende_Geschichte_19Jh.jpg

Language + desire to help = solves problems

http://commons.wikimedia.org/wiki/File:George_de_Forest_Brush_Study_for_The_Picture_Writer%27s_Story_c1884.jpg

The only animals that tell stories

http://www.flickr.com/photos/elsie/417959889/

…unless this story has a hint of verity…

“The Author of the Acacia Seeds” by Ursula Le Guin http://www.flickr.com/photos/binux/2495709841/ http://topwalls.net/wp-content/uploads/2012/01/Penguins-sea-blue-

swimming-animals-nature-background.jpg http://interconnected.org/home/more/2007/03/ acacia-seeds.html

Story may well be how and why we evolved.

Our very physiology may be due to story

http://en.wikipedia.org/wiki/File:Craniums_of_Homo.svg

How our Brains work

http://www.flickr.com/photos/44568283@N02/4097561067/

We are wired for story

http://www.flickr.com/photos/lorelei-ranveig/2294885420/

Catalogue & store with Story

http://www.flickr.com/photos/jonathanpberger/488748172/

And infuse them with emotion to make them stick

Place facts into context

http://www.flickr.com/photos/ableman/543078380/

Persuade. Convince. Teach.

http://www.flickr.com/photos/mplemmon/2745435974/

Clarify complexity

http://www.flickr.com/photos/bitterjug/7670055210/

Story is rampant on the web

From blogs, to news, to social outlets http://dooce.com/ http://facebook.com/ http://www.bbc.com/

We can be unaware that Story is what sucked us in

Unaware that it’s all about story

http://www.flickr.com/photos/allyaubryphotography/2443089993/

The same process?

How would this affect our creations? http://www.flickr.com/photos/jkannenberg/2772942288/

Is two-fold…

My goal

http://www.flickr.com/photos/listentothemountains/5612244584/

To make explicit what can go into storytelling a digital property

one

http://www.flickr.com/photos/thetruthabout/4321714366/

To raise awareness of that which has been implicit in your planning process and to make it explicit

two

http://www.flickr.com/photos/thetruthabout/4321713960/

http://www.flickr.com/photos/assbach/267598910/

2 Crafting Story for the Web

21st Century Bards

We are the creators, purveyors, and distributors of information, marketing, branding and services in the digital space. http://commons.wikimedia.org/wiki/File:Holl_Shakespeare2.png

Craft a narrative

http://www.flickr.com/photos/cannedtuna/4852756417/

Like Freddie Von Chimpenheimer IV!

Create Characters

http://mailchimp.com/

To provide orientation in the site or app

Establish scene & setting

http://www.flickr.com/photos/bachmont/2633601262/

Content, Visual, UX http://www.flickr.com/photos/ari/502329223/ http://www.flickr.com/photos/thorne-enterprises/292027130/ http://www.flickr.com/photos/xixidu/505627002/

Additional layers

Websites are digital gamebooks

Non-Linearity

Who What Why

Where When

Must create strong connections between information

Causal Referencial Locational

Temporal

Content coherence

Comes from good content

Both micro- and macro- http://freshbooks.com/

Illuminating the narrative

Visual

http://www.flickr.com/photos/shyb/5027053990/

= Pictorial Superiority Effect

PSE

http://www.pythagora.com/the-picture-superiority-effect/

The basis of stories is linguistic, so how can we achieve visual storytelling?

Linguistic Analogues

http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/BilingualDictionaries.jpg/1038px-BilingualDictionaries.jpg

Sounds of web design

http://www.taginterativa.com.br/

Words of web design

http://mostlyserious.io/

Sentences/Phrases

http://www.deweyspizza.com/

Grammar and Punctuation

http://www.mydirtydesk.com/

Paragraphs

http://patterntap.com/

The stories of User Experience

Interactive: Turning the pages

http://www.flickr.com/photos/msiebuhr/3527878691/

Aspirational Functional

Memory

3 types of stories

From a user experience standpoint http://www.flickr.com/photos/thetruthabout/4320980479/

How we believe or hope an object will help us in the future.

Aspirational

http://www.flickr.com/photos/seeminglee/3893561976/

How the object helps us accomplish a repeated task.

Functional

http://www.flickr.com/photos/ebarney/3348965637/

Positive memories of having used an object.

Memory

Photo: Denise Jacobs

What does the process of incorporating Story into a project look like?

Stories, Clients, And Projects

http://www.flickr.com/photos/glsims99/4661181012

Start at the end and work backwards from that.

Reverse engineer

http://www.flickr.com/photos/argonne/4441693270/

What is the client’s and brand’s story?

What is the story the user wants to be told?

What is the story you want to tell about the project at the end?

Questions: The project

Here are a few good questions to start with… http://www.flickr.com/photos/atomicity/22489512/

Types of stories to provide structure

http://www.flickr.com/photos/carolynwill/4504703897/ http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/

These sorts of stories can help the client understand their goals better.

http://www.bang2write.com/wp-content/uploads/2013/03/tumblr_md87o5EcDB1r5inhvo1_500.jpg

3 Showing to Tell

What do you think they are?

Stories should have Key elements

http://www.flickr.com/photos/karent/3673326282/

Comes from the story you want to tell and based on a genre

Visual theme

http://carbonmade.com/

Plot, characters…what else?

Components of Story

http://www.themoleskin.com/2010/03/storytelling-in-business-elements-of-story-structure/

Like similes!

Literary Devices

http://www.barrelofmonkeys.org/

‘Nuff said.

Ur Doin’ it wrong

Where’s the story?

http://xhtmlcafe.net/

Get your story straight

http://wickedpalate.com/

In stark contrast…

Who’s Doing it Well

Photo: Denise Jacobs

Evocative

http://impressapenguin.com/

Interactive

http://captaindash.com/

Engaging

http://www.spokespedicabs.com/

Entertaining

http://forefathersgroup.com/

http://www.flickr.com/photos/sonialuna/2942020058/

4 Happily Ever After?

Why go through the effort? What will I get out of this? What are the advantages?

Why bother?

http://www.flickr.com/photos/auntiep/3083645776/

But one that has import…

No promises, just an idea

http://www.flickr.com/photos/onegiantleap/4124211492/

The way we gather, process, organize, structure and store information…

Intrinsic part of how we’re built

http://commons.wikimedia.org/wiki/File:The_Historian_%28The_How_and_Why_Library%29.jpg

that is there to be processed, thought about, taken in, used, stored, and leveraged…

The web is a repository of information…

http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg

of storytelling so that you can convey information the best way possible…

Understand the mechanics

http://www.flickr.com/photos/mag3737/304687602/

Effectively connect with people’s emotional centers…

Infuse Them with meaning

http://www.flickr.com/photos/pinksherbet/3212080263/

Your stories will leave your end-users with little choice but to become smitten with you.

Enchantment

Storytelling cannot be tacked on at the end – needs to be an integrated part of the process from the beginning.

Start at the beginning

http://www.flickr.com/photos/ilike/3707503212/

By increasing awareness about the company, brand, product and project at the beginning

Will Help Avoid confusion

http://www.flickr.com/photos/anotherjesse/243020629/

By give people what they hunger for

Contribute to Betterness

http://commons.wikimedia.org/wiki/File:School_Lunch_Programs.gif

“You are responsible for what you put into the world” - Mike Monteiro

Because

http://www.flickr.com/photos/siutou_amy/2306794554/

To live a better life

Give people the proper tools…

http://commons.wikimedia.org/wiki/File:Colored_Childrens_Library_in_US.jpg

And create something you can be proud of.

Create a better web for everyone

http://www.flickr.com/photos/pocait/2847866615/

“The web is made of stories, not of pixels.”

- Denise Jacobs, Web

Design’s Lego

The End.

And that’s

My books!

InterAct With Web Standards InterActWithWebStandards.com

My chapter: “Learning with the Web”

Smashing Book #3 & #3⅓: The Extension SmashingBook.com

My chapter: “Storytelling in Webdesign”

The CSS Detective Guide CSSDetectiveGuide.com

DeniseJacobs.com denise@denisejacobs.com

I speak. I tell stories. And I evangelize creativity.

Photo used with permission: http://www.flickr.com/photos/aarronwalter/4629078087/

twitter.com/denisejacobs facebook.com/denisejacobsdotcom

Now it’s really The End!

Thank You!