Your SlideShare is downloading. ×
The CSS of Design Storytelling: Context, Spine & Structure
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The CSS of Design Storytelling: Context, Spine & Structure


Published on

Published in: Design, Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Storytelling is as old as humanity, I have even have heard it called the first human instinct. From the days of the bible stories, to the days when newspapers and radio and TV dominated storytelling, to the conference room a story is a story and the basic tenants haven’t changed over time. WHY is this important: Because people learn better from stories than any other method.You may not think of it deliberately, but learning is very similar to storytelling. You need to give yourself vivid, memorable and emotionally descriptions of the information. When you learn with compelling metaphors, information seems to stick easily. Without metaphors, ideas are dry and slip through your ears without a second thought.Stories, that is, that illustrate the content and bring people in, enabling them to "experience" the material in an engaging, visual, and imaginative way. A way that will be remembered. One can use analogy, or metaphor, or the depiction or verbal reenactment of actual, relevant events that illuminate and make the material more real and more memorable. Stories have an emotional component and when you engage people's emotions, even just a little bit, you stand a better chance of them paying attention and remembering your point
  • Last summer, I auditioned and then accepted a part for a role in Midsummers. This should have been awesome. Midsummers is the first Shakespeare I ever did, and so the nostalgia factor alone is quite high. But I found myself having trouble connecting with what is going on and falling behind in my line memorization. This was seriously frustrating to a dedicated actress that usually throws herself wholeheartedly into any production.It’s took me a couple weeks to figure out why this was happening.
  • But I finally realized that it’s because I’m not clear about the story we are telling through our production. Now, of course, I realize that the obvious answer is Midsummer’s, but what I’m looking for is our interpretation and vision of the story. I’m missing one of the key components of storytelling: the Context, and it’s throwing my experience for a loop.What is our setting for this production? Our director has told us only that it is to be “traditional.” In most cases, the director has a time period in mind for a production or a particular theme to focus on. Without that, it’s hard to do character development and really give life to the words. Also, we haven’t yet worked with any groups of actors other than those we have scenes with, so we aren’t seeing how all the pieces come together.Focusing on only small parts, without that bigger picture, is challenging to say the least.
  • Storytelling is important not only to theater.I believe a UX designer’s role is to bridge all of the pieces that bring a design to life—from product management, marketing, user research, and design all the way through development. If that is true, communication is critical. Stories become an essential communication vehicle in the user experience world. Quick: Who’s paying attention, what trick of learning that I talked about am I using here???
  • Every day, we talk to users, bring back their stories, and co-create with them.Major parts of our work are building personas, creating scenarios, and creating and using prototypes in usability testing—all of which connect our work to real users. Of course, we must also talk with various people within our organization to understand the case for a product’s business value, as well as relevant technical constraints, and negotiate a balance between all of these factors. But, in the end, to get buy in, we need to tell a compelling and engaging story about our design and its value. And we need to evangelize that story. To be successful in design, as well as theater, it makes sense to spend some time on the CSS—the Context, Spine, and Structure.
  • The context is the first introduction to the design, and will be felt in the first moments and set the stage for the entire experience – so it’s an important piece, but sometimes these elements get forgottenI think it will be interesting to see what challenges we encounter as consumer technology moves into the business space and changes the expectations we must meet. Functionality that merely gets the job done will no longer be acceptable. It will be important to understand how to make business more consumer friendly.
  • The theme sets the entire tone, and it is crucial to consider these questions when deciding the theme.When I think of examples of a strong theme, certain things come to mind: Mint capitalized on economics, and technological capabilities of the time for a huge success and a whirlwind user base buildingProgressive created a whole world and has a strong value prop that comes across, pretty clearly. Anyone? What are their key differentiators? A la carte picking of what you want, name your price, flexibility to build a plan that you can afford?Target has an immediately recognizable theme, even when you see new commercials. Trends in color….went from corporate blue, to red and black, to orange and teal, to Pantone’s color of the year, pink?
  • The mood you create can be a critical factor in communicating your story properly. This is especially true in interaction design, because you won’t be there to explain the story when users encounter your design. Even a lack of “mood” creates a mood. People will respond (or not) to what is in front of them, so don’t think you can get away without thinking about it. examples where mood has been influential on more than just the company:Twitter helped drive a more casual and colorful aesthetic at a time when style was moving beyond “corporate”starbucks has a mood that they have worked hard to capitalize on – its in the setting, the products, even the music iphone is all about the emotional response from the appearance to the interactions and has defined a genre of electronics
  • They want to be able to relate to you because you are “kindred” and that what you have is for them. Also they don’t want to have to do all the digging around, they want you to help surface stuff to them. Especially in this age of information overload. Or even netflix or tivo making suggestions based on your choices and letting you help refine them. Just be careful not to get creepy like target with the targeting based on knowing when a woman is pregnant. They monitor what you look at can pinpoint very closely when you will have a baby. They send targeted coupons. One man came in engragedbc his teenage daughter got baby coupons. He was like “are you trying to encourage this?”. Turns out, she was pregnant. He came back and apologized.
  • Theme – such as the Aflac duck and his situations, even your iconography and visual theme should be reoccurringGive short descriptions of things you are linking too, show what the next step in a process will be, promote contextually relevant contentMood Don’t do what does with its advertising –totally hijacking the screen on users, including shoving the content completely out of the way. It will disrupt, confuse, and irritate users. AudienceLike with invites to betas of highly anticipated new things,, or sign up and get information early
  • The elements of spine should be familiar ones. The who, what, where, when, how? We all learned this back in English classes, and it holds true now too. No story can exist without them.
  • User research and stakeholder research are the best ways to understand the basic storylines that need to be addressed. What tasks did you see happening? What business needs need to be met?Storyboards are great ways to help flesh out stories, and keep the idea that each cell needs to be complete in and of itself. Also if you take one cell out, how does that affect the rest of the story? If you have a complete and connected story, it should.
  • Such a persona will also havemultiple traitspsychology, physiology, and sociologyinner needs and goalsinterpersonal desiresprofessional ambitionsAn authentic story encompassesa user’s surroundings—physical space and the available toolsthe character traits that characterize a userthe goals, tasks, and accomplishments that characterize a user
  • And great climaxes become a part of cultural knowledge. Like Eve eating the apple, or the titanitic hitting the iceberg, or what’s the famous line in the climax of Julius Caesar?? Et tu Brutus?
  • Use knowledge of your audience to put in familiar scenarios – situations people are actually inSubplots – related things of interestSocial media helps build that sense of relationship in new ways that weren’t previously available.Remember to use interactions and “splash” or “bling” to highlight climax and not dilute the arc with extraneous interactions (microsoft site)
  • When things work just like something they already know, users can jump in quickly and feel confident they know what they’re doing. For example, if you style all buttons on a site consistently, users can figure out where the actions are on a page, no matter where they are.
  • Users may never know anything about the infrastructure, but it can have huge impact on the story. The way its told, the context, and the general emotional experience. Its important to understand the impacts it will have.
  • Draw a rough vision of the story to see how the ebb and flow works. Its as easy as taking one of your personas and doing a story of how they will walk through the new design. I would suggest even doing this before storyboards, it can be more high level than them. That way you will see the basic pathway of the story. Use the storyboards to flesh out details.
  • Think about the sections and relationship between components – what things “belong” together.For example, with the appropriate layout people will quickly interpret a list of 12 adjectives (such as comedy, drama, western, and so on) as a single set of movie genres.
  • Transcript

    • 1. The CSS of Design Storytelling: Context, Structure & Spine By: Traci Lepore
    • 2. What’s our agenda?Storytelling tenants The elements Design TipsC > + THEME—the setting of a story Context MOOD—the emotional aspects AUDIENCE—the usersS > + Plot—the basic outline Spine Characters—the story involves Climaxes—the big momentsS Structure > Patterns—the learning tool Infrastructure—the platform Through-line—the pathway + 2
    • 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 peoples emotions, the more likely they are to get and remember your point 3
    • 4. Telling an old story should be easy…A classic story of love, lust, and mischief ―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 Done in a not so classic way… 4
    • 5. But is difficult when lacking tenants of a good storyC Context Setting, theme/message, the big picture ―Traditional‖ ? Why is Bottom female?S Spine Basic storyline(s) that runs throughout Stand-in Missing Plot and characters StructureS Progression of the story Shakespeare provided structure and spine… but we were missing context & that messed me up! 5
    • 6. The role of storytelling in ux design ―Design is a social, collaborative activity.‖ – Tom Erickson, “Design as Storytelling” Development Design Product UsersMarketing Stories are an essential communication vehicle in the user experience world – they pull all the pieces together 6
    • 7. We are the evangelizers of the storyManaging the pieces to communicate a compelling and engaging story Getting buy-in without leaving anyone out in Giving a voice and the cold a face to the users Negotiating a balance of time, technology & business needs/constraints 7
    • 8. The elements of context THEME—the setting of a story Physical location, time in history, geographical place, and other elements of the world MOOD—the emotional aspects Style, tone, rhythm, and intonation AUDIENCE Understanding and reflecting the audience in a way that engages them 8
    • 9. The theme sets the tone for what is to comeConsider 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? 9
    • 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 10
    • 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 11
    • 12. Design Tips: ContextTheme• 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 contentMood• 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 pagesAudience• Movies and other mediums sometimes add to tension by delaying events that are both clearly expected and extremely excitingFrom: ―Improving Web Site Usability and Appeal‖ by Kevin Keeker 12
    • 13. The elements of Spine Plot—the basic outline the what, where, when, and how of the story Characters Who the story involves Climaxes The story’s big moments and spectacular experiences 13
    • 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 14
    • 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 15
    • 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 16
    • 17. Design Tips: SpinePlot• 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 peopleCharacters• 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 livesClimax• 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 anotherPartially from: ―Improving Web Site Usability and Appeal‖ by Kevin Keeker 17
    • 18. Structure keeps the story moving fluidly Patterns Includes page types and components, visual design, and even sound Infrastructure The technology platform and content on which a story sits Through-line The way a story’s goals come to their conclusion—from the beginning to the end of the story 18
    • 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 19
    • 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 20
    • 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 21
    • 22. Design Tips: StructurePatterns• 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 contentInfrastructure• 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 designThrough-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 22
    • 23. The CSS of Design Storytelling"Design creates stories, and stories create memorableexperiences, and great experiences have this innate ability tochange the way in which we view our world.” Christian SaylorA good story covers all of the components:C Context Setting, theme/message, audienceS Spine Basic storyline(s) that runs throughout Plot and charactersS Structure Progression of the story And delivers a compelling, engaging and memorable experience 23
    • 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.Find me in the world Twitter: traciuxd LinkedIn: UXmatters: aci_lepore.php 24