Downloaded 11 times
Uploaded byAvtex
Engage 2013 - Trends in user experience
This document discusses how storytelling principles can be applied to user experience design. It begins by establishing the universal power of stories and how humans are wired to consume them. It then outlines the basic elements of story - character, setting, and plot - and maps them to UX design concepts like persona, presentation trends, and user flows. The document uses the framework of a three act story structure to explore current trends in areas like responsive design, content strategy, and visual style. It emphasizes that an effective online experience tells a compelling story that immerses the user through a deep understanding of character needs and a well-crafted narrative across the design.
More Related Content
Similar to Engage 2013 - Trends in user experience
Engage 2013 - Trends in user experience
- 1. What’s Your Story? Trendsin UX process & design Stu King Director of User Experience
- 2.
- 3. The Power ofStorytelling We all have the power of story
- 4. Why Story Matters Behold,the universal power of story Story makes us human 1. We all tell them 2. We all hear them 3. We all know instinctively when we have heard or seen a good one
- 5. “Human minds yieldhelplessly to the suction of story. No matter how hard we concentrate, no matter how deep we dig in our heels, we just can’t resist the gravity of alternate worlds.” Jonathan Gottschall The Story Telling Animal
- 6. “…Americans spend nineteenhundred hours per year awash in the glow of television and movie screens. That’s five hours per day.” Jonathan Gottschall The Story Telling Animal
- 7. Question 1: If youhad to guess, how many hours per day do you spend consuming stories, including; TV, Movies, Music, Books and Games? (a) 1 (b) 2 (c) 3 (d) 4 (e) 5 or more
- 8. Story Structure A formulathousands of years in the making How does web design relate to story? 1. Character 2. Setting 3. Plot = Audience & Persona = Presentation & Design Trends = User Flows or Journeys
- 9.
- 10. Character Get to knowthe characters that will drive our story Character or Persona 1. Details – Name, age, gender, technical proficiency, hobbies, etc. 2. Tasks – Top 5 3. Mental Model 4. Optimism vs. Cynicism
- 11. Character Persona Bob Tabulator Tasks 1.Use online services 2. Find data tables 3. Search new products 4. Meet other accountants 5. Send feedback Mental Model 1. Email: PC & Phone 2. Smartphone 3. iPad 4. Google search 5. Internet Explorer 9 Age: 35 Gender: Male Location: NJ Likes: Coffee, Sudoku, Scrabble, White Toast, Pop Music & Apple Martinis Dislikes: Tea, Spicy Food, Mother-in-law, Long Haired Cats & Peanut M&Ms Occupation: CPA Bob Facts: Owns an Android phone, on the web 3-4 hours per day, collects antique pocket watches, drives a restored Gremlin Discovery Meeting accountants Find data tables Specific Online tools Search Product Send Feedback Search accounting topics Optimism Cynicis m Optimism 1. Impatient when unable to find info 2. Likely to call support numbers rather than use online support materials 3. Likes personal contact
- 12. Question 2: If youwere to think about yourself and the character archetype that best describes you, what would it be? (a) The Jester “You only live once” (b) The Sage “Truth will set you free” (c) The Magician “I make things happen” (d) The Ruler “Power isn’t everything, it’s the only thing”
- 13.
- 14. Setting What’s the environmentof our protagonist? A Sense of Place 1. Medium – App, web, other 2. Device – PC, tablet, phone 3. Window – Browser, custom interface 4. Design – Clean, vibrant, contempo rary, accessible
- 15. Question 3: When usinga web site, what impact does visual design have on your experience? (a) A big impact (b) Some impact (c) No impact
- 16. Building Our Set CurrentTrends
- 17. Setting: Responsive Design Let’stalk about “Design”! Why Responsive? 1. Making sites available on many devices and at many aspect ratios 2. The alternative to native applications 3. Design for mobile first 4. Touch capable interfaces
- 18. Setting: Responsive Design Flexibleinterfaces & fluid content
- 19. Setting: Content Strategy Focuson your content & tell a great story! Content First 1. Search indexes care about content 2. Content strategy is a critical investment 3. Content tells the story and includes text, images, interface
- 20. Setting: Mood &Style Skeuomorphism is dead different! Contemporary Design 1. Flat interface elements 2. Vibrant colors 3. Type as art 4. More white space 5. Larger controls & images Buzzwords: clean, modern, simple
- 21.
- 22. Setting: Big Images GoBIG or…don’t.
- 23.
- 24. Act 3 Plots &Subplots
- 25. The Perfect Plot Everyscene must turn the plot, if it doesn’t…cut it! A Collection of Scenes 1. We have a finite number of scenes in which to tell our story 2. Each scene must contribute to the telling 2. The protagonist must emerge from the scene different (hopefully better) than they went in 3. Well crafted scenes pull the audience through the story, making them crave more
- 26. Arch-Plot Arch-Plot 1. Linear TimeLine 2. Causality 3. Active Protagonist 4. Consistent Realities 5. Closed EndingMini-Plot Anti-Plot 73% 20% 7% AUDIENCE Arch-Plot Mini-Plot Anti-PlotThe Plot Triangle Linear Time Line Coincidence Passive Protagonist Consistent Realities Open Ending Nonlinear Time Line Inconsistent Realities Open Ending
- 27. Plot & WebDesign Plot types 1. Arch-plot 2. Mini-plot 3. Anti-plot
- 28. Question 4: Of thethree plot types we have discussed, as a movie fan, which do you find most compelling? (a) Arch-Plot (b) Mini-Plot (c) Anti-Plot
- 29.
- 30. What we know Tellingyour story on the web is about more than copy! Compelling Story… 1. Requires a deep understanding of our characters 2. Requires a setting in which our characters may thrive 3. Requires a well crafted plot with a satisfying
- 31. Story as DesignProcess Turning the scene
Editor's Notes
- #4 Passage from a story:The fob had three buttons: one for the doors, one for the alarm, and one which, he hoped, was a remote starter. He pressed this one first. From deep within the garage came a tart, single-noted bleep, the sound ricocheting like a bee-bee through the sealed space, followed by the throaty roar of the Ferrari’s engine. Another mistake: the Ferrari was parked nose to the wall. He should have thought of that. Not only would this slow his escape; if the car had been facing the opposite way, its headlights would have afforded him a better look at the room. As it was, all he could make out through the window was a distant, glowing region where the car awaited, a cat purring in the dark. The rest of the garage was veiled in blackness. The infected liked to hang from things, Kittridge knew. Ceiling struts, pipes, anything with a tactile surface. The tiniest crack would suffice. When they came, they came from above.The Twelve by Justin Cronin
- #5 Imagination fills in the holes.
- #19 Our sites and application tell a story. Compelling story draws in the viewer. We all understand when we have seen or heard a good story.Why shouldn’t we draw on the power of story?
- #20 Leverage vs. harness
- #21 Our sites and application tell a story. Compelling story draws in the viewer. We all understand when we have seen or heard a good story.Why shouldn’t we draw on the power of story?
- #22 Color and contrast
- #23 Unfettered type and vector icons
- #25 What’s important is why we do this? We are engaged in story telling.
- #26 Our sites and application tell a story. Compelling story draws in the viewer. We all understand when we have seen or heard a good story.Why shouldn’t we draw on the power of story?
- #27 Arch-plotLinear time lineCausality – Linked events, the successful conclusion of event 1 leads to event 2Active protagonistConsistent realities – regardless of which plot certain things are true to allClosed ending – Satisfying conclusion Regardless of good or bad outcome
- #28 Question 4: Of the three plot types we have discussed, as a movie fan, which do you find most compelling? (a) Arch-Plot (b) Mini-Plot (c) Anti-Plot
- #29 What’s important is why we do this? We are engaged in story telling.
- #30 What’s important is why we do this? We are engaged in story telling.
- #32 What’s important is why we do this? We are engaged in story telling.