A look at the latest design trends and patterns impacting web and mobile experiences.
- 1. Whats Your Story? Trends in UX process & design Stu King Director of User Experience
2. Prologue Why Story? 3. The Power of Storytelling 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 yield helplessly to the suction of story. No matter how hard we concentrate, no matter how deep we dig in our heels, we just cant resist the gravity of alternate worlds. Jonathan Gottschall The Story Telling Animal 6. Americans spend nineteen hundred hours per year awash in the glow of television and movie screens. Thats five hours per day. Jonathan Gottschall The Story Telling Animal 7. Question 1: If you had 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 formula thousands 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. Act 1 Protagonist 10. Character Get to know the 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 you were 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 isnt everything, its the only thing 13. Act 2 The Setting 14. Setting Whats the environment of 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 using a 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 Current Trends 17. Setting: Responsive Design Lets talk 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 Flexible interfaces & fluid content 19. Setting: Content Strategy Focus on 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. Setting: Flat Design 22. Setting: Big Images Go BIG ordont. 23. Setting: Sticky Navigation Navigation always on 24. Act 3 Plots & Subplots 25. The Perfect Plot Every scene must turn the plot, if it doesntcut 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 Time Line 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 & Web Design Plot types 1. Arch-plot 2. Mini-plot 3. Anti-plot 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. Epilogue 30. What we know Telling your 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 Design Process Turning the scene