View
2.629
Download
1
Embed Size (px)
DESCRIPTION
What if we strengthened our creations for the web by building them upon a foundation of Story? Let's explore the growing importance of storytelling in web design, how to communicate Story through all aspects of a website from content, to design, to ux; and how to apply key components of great storytelling in literature to the medium of the web.
Citation preview
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 [email protected]
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!