Your SlideShare is downloading. ×
0
What’s Your Story?
Trends in UX process & design
Stu King
Director of User Experience
Prologue
Why Story?
The Power of Storytelling
We all have the power of story
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 ...
“Human minds yield helplessly to
the suction of story. No matter
how hard we concentrate, no
matter how deep we dig in our...
“…Americans spend nineteen hundred
hours per year awash in the glow of
television and movie screens. That’s
five hours per...
Question 1:
If you had to guess, how many hours
per day do you spend consuming
stories, including; TV, Movies, Music,
Book...
Story Structure
A formula thousands of years in the making
How does web design relate to story?
1. Character
2. Setting
3....
Act 1
Protagonist
Character
Get to know the characters that will drive our story
Character or Persona
1. Details – Name, age,
gender, techni...
Character Persona
Bob Tabulator
Tasks
1. Use online services
2. Find data tables
3. Search new products
4. Meet other
acco...
Question 2:
If you were to think about yourself and the
character archetype that best describes you, what
would it be?
(a)...
Act 2
The Setting
Setting
What’s the environment of our protagonist?
A Sense of Place
1. Medium –
App, web, other
2. Device –
PC, tablet, ph...
Question 3:
When using a web site, what impact does visual
design have on your experience?
(a) A big impact
(b) Some impac...
Building Our Set
Current Trends
Setting: Responsive Design
Let’s talk about “Design”!
Why Responsive?
1. Making sites available
on many devices and
at man...
Setting: Responsive Design
Flexible interfaces & fluid content
Setting: Content Strategy
Focus on your content & tell a great story!
Content First
1. Search indexes care about
content
2...
Setting: Mood & Style
Skeuomorphism is dead different!
Contemporary Design
1. Flat interface elements
2. Vibrant colors
3....
Setting: Flat Design
Setting: Big Images
Go BIG or…don’t.
Setting: Sticky Navigation
Navigation always on
Act 3
Plots & Subplots
The Perfect Plot
Every scene must turn the plot, if it doesn’t…cut it!
A Collection of Scenes
1. We have a finite number o...
Arch-Plot
Arch-Plot
1. Linear Time Line
2. Causality
3. Active Protagonist
4. Consistent Realities
5. Closed EndingMini-Pl...
Plot & Web Design
Plot types
1. Arch-plot
2. Mini-plot
3. Anti-plot
Question 4:
Of the three plot types we have discussed, as a
movie fan, which do you find most compelling?
(a) Arch-Plot
(b...
Epilogue
What we know
Telling your story on the web is about more than copy!
Compelling Story…
1. Requires a deep
understanding of
...
Story as Design Process
Turning the scene
Upcoming SlideShare
Loading in...5
×

Engage 2013 - Trends in user experience

428

Published on

A look at the latest design trends and patterns impacting web and mobile experiences.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
428
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • Imagination fills in the holes.
  • 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?
  • Leverage vs. harness
  • 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?
  • Color and contrast
  • Unfettered type and vector icons
  • What’s important is why we do this? We are engaged in story telling.
  • 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?
  • 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
  • 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
  • What’s important is why we do this? We are engaged in story telling.
  • What’s important is why we do this? We are engaged in story telling.
  • What’s important is why we do this? We are engaged in story telling.
  • Transcript of "Engage 2013 - Trends in user experience"

    1. 1. What’s Your Story? Trends in UX process & design Stu King Director of User Experience
    2. 2. Prologue Why Story?
    3. 3. The Power of Storytelling We all have the power of story
    4. 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. 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 can’t resist the gravity of alternate worlds.” Jonathan Gottschall The Story Telling Animal
    6. 6. “…Americans spend nineteen hundred 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. 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. 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. 9. Act 1 Protagonist
    10. 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. 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. 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 isn’t everything, it’s the only thing”
    13. 13. Act 2 The Setting
    14. 14. Setting What’s 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. 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. 16. Building Our Set Current Trends
    17. 17. Setting: Responsive Design Let’s 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. 18. Setting: Responsive Design Flexible interfaces & fluid content
    19. 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. 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. 21. Setting: Flat Design
    22. 22. Setting: Big Images Go BIG or…don’t.
    23. 23. Setting: Sticky Navigation Navigation always on
    24. 24. Act 3 Plots & Subplots
    25. 25. The Perfect Plot Every scene 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. 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. 27. Plot & Web Design Plot types 1. Arch-plot 2. Mini-plot 3. Anti-plot
    28. 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. 29. Epilogue
    30. 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. 31. Story as Design Process Turning the scene
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×