The CSS of Design Storytelling:Context, Structure & Spine

By: Traci Lepore

2

S

What’s our agenda?

CS

Context

Spine

THEME—the setting of a story

MOOD—the emotional aspects

AUDIENCE—the users>Plot—the basic outline

Characters—the story involves

Climaxes—the big moments>Patterns—the learning tool

Infrastructure—the platform

Through-line—the pathway>

+++Structure

Storytelling tenants The elements Design Tips

3

Storytelling, and age-old tradition

• Learning is similar to storytelling– Learning requires vivid, memorable & emotional descriptions of info– When you learn with compelling metaphors, info sticks because attention is

caught and emotion engaged– Without metaphors, ideas are dry and slip away quickly

• Stories allow people to "experience” material in an engaging, visual & imaginative way and engage their emotions

• The more you engage people's emotions, the more likely they are to get and remember your point

4

Telling an old story should be easy…

“We all tell stories. It’s one of the most natural ways to share information, as old as the human race.”

– Storytelling for User Experience

A classic story of love, lust, and mischief

Done in a not so classic way…

5

CSS

But is difficult when lacking tenants of a good story

Context Setting, theme/message, the big picture

Spine Basic storyline(s) that runs throughout

Plot and characters

Structure Progression of the story

“Traditional” ?

Why is Bottom female?

Stand-in Missing

but we were missing context & that messed me up!

Shakespeare provided structure and spine…

6

The role of storytelling in ux design

“Design is a social, collaborative activity.”

– Tom Erickson, “Design as Storytelling”

UX Bridge

Product

Marketing

Design

Development

Users

Stories are an essential communication vehicle in the user experience world – they pull all the pieces together

7

We are the evangelizers of the story

Managing the pieces to communicate a compelling and engaging story

Giving a voice and a face to the users

Negotiating a balance of time, technology & business needs/constraints

Getting buy-in without leaving anyone out in the cold

8

The elements of context

THEME—the setting of a storyPhysical location, time in history, geographical place, and other elements of the world

MOOD—the emotional aspectsStyle, tone, rhythm, and intonation

AUDIENCEUnderstanding and reflecting the audience in a way that engages them

9

The theme sets the tone for what is to come

Consider the basic concept behind the story’s plot • How does your product or site differentiate itself from the

competition? • What is your key value proposition? • It’s also important to remember the current culture and norms that

your design must live within – Do your technology and its capabilities match or exceed what is currently

available? – Do you understand current aesthetic tastes?

10

The mood determines the emotional perception

• Elements like typeface, color, writing tone—even formality, diction, and grammatical correctness—can affect the emotional response of users

• Other elements of interaction also affect mood, including the kind of animation you use, the speed and fluidity of interactions, and even the sounds you choose to use

• Rapid growth of touch smartphones & tablets gives these elements a more detailed focus that can make or break an experience

11

Your audiences needs to feel that you “get” them

• The best way to know your customers is to do user research– Gain a basic understanding of broad market segments – Survey, focus group, etc– Get more detailed with Contextual Inquiry and affinity diagramming

• Case studies and testimonials from other users help to engage and demonstrates your understanding of the audience

• Show your knowledge with recommendations and targeted content

vs

12

Design Tips: Context

Theme• Use recurring references or themes to maintain consistency or plot movement• Use foreshadowing to establish viewer expectations; tie together scenes,

articles, or sections; and create movement through loosely connected content

Mood• Decide when there are appropriate places to give the user control • Eliminate irrelevant pages or content that don’t have a good reason to exist–

fluff will always kill the pace• Use mid-sentence breaks to entice people to continue stories that scroll or

flow over several pages

Audience• Movies and other mediums sometimes add to tension by delaying events that

are both clearly expected and extremely exciting

From: “Improving Web Site Usability and Appeal” by Kevin Keeker

13

The elements of Spine

Plot—the basic outlinethe what, where, when, and how of the story

ClimaxesThe story’s big moments and spectacular experiences

CharactersWho the story involves

14

Pull the outline together in the plot

• In UX design, the plot must cover the goals and scenarios that dictate what a design solution should be

– User research, stakeholder conversations & focus-setting meetings help put the plot outline together

• Scenarios reflect how we intend users to achieve their goals– Fill in the story with its Context and Structure– The story must be coherent and each “scene” connected– Each “scene” should have a beginning, middle, and an end– Develop storyboards & prototypes

15

Characters are the soul of the story

• Personas are great tools in helping us to build a story effectively– What’s My Persona? Developing a Deep and Dimensioned Character

• People you work with in your organization are important characters in the story of design

– The Holy Grail of Innovation: It Takes an Ensemble to Achieve Inspired Creativity

16

Climaxes keep the story in the listener’s mind

• These are great additions to a story’s spine, but shouldn’t be the whole story • They help embellish a story, but there needs to be a structure surrounding

such moments—as well as reasons for being – Otherwise, they’re gratuitous uses of Flash in web site intros

17

Design Tips: Spine

Plot• Users are prepared to believe the familiar–familiarity adds believability & identification• Create challenge by leaving out details–let the reader fill them in with personal

knowledge or inferences• Define turning points clearly• Subplots also increase complexity and provide an opportunity to provide themes that

may be compelling to other groups of people

Characters• When possible, give the viewer someone with whom they can build a relationship• People must respect hosts and narrators as talents in their field

– They must relate and think their perspective is similar to their own or relevant to their lives

Climax• Write the user experience with the climax(es) in mind–including resolution

– Make sure you can summarize the main story arc in one line

• Permanently moving (looping) animations make it hard to concentrate on other content• Use animation to draw attention to a single element out of several, alert people to

updated information, or changes from one state to another

Partially from: “Improving Web Site Usability and Appeal” by Kevin Keeker

18

Structure keeps the story moving fluidly

Through-lineThe way a story’s goals come to their conclusion—from the beginning to the end of the story

PatternsIncludes page types and components, visual design, and even sound

InfrastructureThe technology platform and content on which a story sits

19

Patterns overcome learning roadblocks

• Patterns help keep people grounded in a story’s context and structure

• Consistent design patterns help users understand the use of sections and components within page types—without their having to learn everything anew each time

• Consistent branding reinforces a clear message

20

Infrastructure is a silent communicator of the story

• If you choose to create a Web application versus a desktop client or a mobile application, that decision affects how you layer the other aspects of the story on top of that foundation

• Make sure you understand the choices you are making and how your platform affects what you can and cannot do

21

The through-line is the pathway through the spine

• This includes determining how to get from the beginning to the end and the natural ebb and flow of the story

– Remember, there is always a beginning, middle—which usually includes one or more climaxes—and an end, or conclusion, to a story

• Without all of these pieces in place, a user can become confused, because the way forward is unclear

22

Design Tips: Structure

Patterns• Create structural diagrams for page types that can be reused, as well as components• Use meaningful and consistent button and header names • Distinguish between decorative and functional graphic elements (links)• Place navigation elements or navbars in a consistent and/or predictable location• Group navigation elements in a common space that is easily distinguishable from content

Infrastructure• Avoid page-load tricks that trap people in an endless loop when they try to use the back

button to leave some part of your site• Make sure you test cross-platform• Validate concepts with development before finalizing design

Through-line• Grouping choices into functional units will reduce mental effort & help people quickly

interpret the whole page • Break text in mid-sentence and/or use visual design cues to keep people reading past

"visual cliffs" or "below the fold” • Never make the viewer scroll to locate important navigation buttons or the focal point of a

page (such as "Buy now”)

From: “Improving Web Site Usability and Appeal” by Kevin Keeker

23

SS

The CSS of Design Storytelling

"Design creates stories, and stories create memorable experiences, and great experiences have this innate ability to change the way in which we view our world.” Christian Saylor

CContext Setting, theme/message, audience

Spine Basic storyline(s) that runs throughout

Plot and characters

Structure Progression of the story

And delivers a compelling, engaging and memorable experience

A good story covers all of the components:

24

Resources

• Erickson, Thomas. “Design As Storytelling.” Originally published in Interactions, Volume iii, Number 4, July/August 1996. Retrieved July 17, 2011.

• Quesenbery, Whitney, and Kevin Brooks. Storytelling for User Experience. Brooklyn, New York: Rosenfeld Media, 2010.

• Keeker, Kevin. “Improving Web Site Usability and Appeal.” Republished September 2008. Retrieved May 8, 2012.

Twitter: traciuxd

LinkedIn: http://www.linkedin.com/in/tracilepore

UXmatters: http://www.uxmatters.com/authors/archives/2008/09/traci_lepore.php

Find me in the world