Css design storytelling
Download as PPTX, PDF
1 like821 views
The document discusses the elements of context, spine, and structure that are necessary for effective design storytelling. It defines context as the theme, mood, and audience. The spine includes the plot, climaxes, and characters. Structure refers to the through-line, patterns, and infrastructure. Each element is described in detail and design tips are provided. The document emphasizes that covering all these elements leads to a compelling, engaging experience for the user.
Css design storytelling
- 1. The CSS of Design Storytelling: Context, Structure & Spine By: Traci Lepore
- 2. 2 S Whats our agenda? C S Context Spine THEMEthe setting of a story MOODthe emotional aspects AUDIENCEthe users> Plotthe basic outline Charactersthe story involves Climaxesthe big moments> Patternsthe learning tool Infrastructurethe platform Through-linethe pathway> + + +Structure Storytelling tenants The elements Design Tips
- 3. 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. 4 Telling an old story should be easy We all tell stories. Its 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. 5 C S S 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. 6 The role of storytelling in ux design Design is a social, collaborative activity. Tom Erickson, Design as Storytelling Product Marketing Design Development Users Stories are an essential communication vehicle in the user experience world they pull all the pieces together
- 7. 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. 8 The elements of context THEMEthe setting of a story Physical location, time in history, geographical place, and other elements of the world MOODthe emotional aspects Style, tone, rhythm, and intonation AUDIENCE Understanding and reflecting the audience in a way that engages them
- 9. 9 The theme sets the tone for what is to come Consider the basic concept behind the storys plot How does your product or site differentiate itself from the competition? What is your key value proposition? Its 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. 10 The mood determines the emotional perception Elements like typeface, color, writing toneeven formality, diction, and grammatical correctnesscan 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. 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. 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 dont 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. 13 The elements of Spine Plotthe basic outline the what, where, when, and how of the story Climaxes The storys big moments and spectacular experiences Characters Who the story involves
- 14. 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. 15 Characters are the soul of the story Personas are great tools in helping us to build a story effectively Whats 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. 16 Climaxes keep the story in the listeners mind These are great additions to a storys spine, but shouldnt be the whole story They help embellish a story, but there needs to be a structure surrounding such momentsas well as reasons for being Otherwise, theyre gratuitous uses of Flash in web site intros
- 17. 17 Design Tips: Spine Plot Users are prepared to believe the familiarfamiliarity adds believability & identification Create challenge by leaving out detailslet 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 mindincluding 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. 18 Structure keeps the story moving fluidly Through-line The way a storys goals come to their conclusionfrom the beginning to the end of the story Patterns Includes page types and components, visual design, and even sound Infrastructure The technology platform and content on which a story sits
- 19. 19 Patterns overcome learning roadblocks Patterns help keep people grounded in a storys context and structure Consistent design patterns help users understand the use of sections and components within page typeswithout their having to learn everything anew each time Consistent branding reinforces a clear message
- 20. 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. 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, middlewhich usually includes one or more climaxesand 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. 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. 23 S S 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. 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/tr aci_lepore.php Find me in the world
Editor's Notes
- #4: 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 havent 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
- #5: 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. Its took me a couple weeks to figure out why this was happening.
- #6: But I finally realized that its because Im not clear about the story we are telling through our production. Now, of course, I realize that the obvious answer is Midsummers, but what Im looking for is our interpretation and vision of the story. Im missing one of the key components of storytelling: the Context, and its 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, its hard to do character development and really give life to the words. Also, we havent yet worked with any groups of actors other than those we have scenes with, so we arent seeing how all the pieces come together. Focusing on only small parts, without that bigger picture, is challenging to say the least.
- #7: Storytelling is important not only to theater. I believe a UX designers role is to bridge all of the pieces that bring a design to lifefrom 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: Whos paying attention, what trick of learning that I talked about am I using here???
- #8: 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 testingall 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 products 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 CSSthe Context, Spine, and Structure.
- #9: 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 its an important piece, but sometimes these elements get forgotten I 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.
- #10: 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 building Progressive 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 Pantones color of the year, pink?
- #11: The mood you create can be a critical factor in communicating your story properly. This is especially true in interaction design, because you wont 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 dont 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
- #12: They want to be able to relate to you because you are kindred and that what you have is for them. Also they dont 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 engraged bc 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.
- #13: Theme such as the Aflac duck and his situations, even your iconography and visual theme should be reoccurring Give short descriptions of things you are linking too, show what the next step in a process will be, promote contextually relevant content Mood Dont do what boston.com 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. Audience Like with invites to betas of highly anticipated new things,, or sign up and get information early
- #14: 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.
- #15: 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.
- #16: Such a persona will also have multiple traits psychology, physiology, and sociology inner needs and goals interpersonal desires professional ambitions An authentic story encompasses a users surroundingsphysical space and the available tools the character traits that characterize a user the goals, tasks, and accomplishments that characterize a user
- #17: And great climaxes become a part of cultural knowledge. Like Eve eating the apple, or the titanitic hitting the iceberg, or whats the famous line in the climax of Julius Caesar?? Et tu Brutus?
- #18: Use knowledge of your audience to put in familiar scenarios situations people are actually in Subplots related things of interest Social media helps build that sense of relationship in new ways that werent previously available. Remember to use interactions and splash or bling to highlight climax and not dilute the arc with extraneous interactions (microsoft site)
- #20: When things work just like something they already know, users can jump in quickly and feel confident they know what theyre 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.
- #21: 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.
- #22: 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.
- #23: 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.