Design For Humans By: Kameron Williams (WordCamp Phoenix 2014)

  • 1,016 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,016
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
12
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. design for humans content strategy // interface design // user experience www.lillimedia.com @thekameronw @lillimedia
  • 2. define: digital storytelling www.lillimedia.com @thekameronw @lillimedia
  • 3. audienceposture User Interfaces Wireframing content strategy ux/ui tone information architecture Experience Design VOICE www.lillimedia.com conversion targets @thekameronw @lillimedia
  • 4. what’s your favorite story? (book, movie, play, video game) www.lillimedia.com www.lillimedia.com @thekameronw @lillimedia @thekameronw @lillimedia
  • 5. what’s your favorite story? why is it your favorite story? what did you take away from the story? www.lillimedia.com www.lillimedia.com @thekameronw @lillimedia @thekameronw @lillimedia
  • 6. a good story comes from intelligent design... www.lillimedia.com @thekameronw @lillimedia
  • 7. define:design www.lillimedia.com @thekameronw @lillimedia
  • 8. www.lillimedia.com @thekameronw @lillimedia
  • 9. www.lillimedia.com @thekameronw @lillimedia
  • 10. www.lillimedia.com @thekameronw @lillimedia
  • 11. de·sign /dəˈzīn/ to do or plan (something) with a specific purpose or intention in mind. www.lillimedia.com @thekameronw @lillimedia
  • 12. www.lillimedia.com @thekameronw @lillimedia
  • 13. let’s design a digital story... www.lillimedia.com @thekameronw @lillimedia
  • 14. What makes a good story? What does every story need? www.lillimedia.com @thekameronw @lillimedia
  • 15. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  • 16. audience www.lillimedia.com @thekameronw @lillimedia
  • 17. a list of segregated targets who, what, when, where…? www.lillimedia.com @thekameronw @lillimedia
  • 18. how do we find the right audience, kameron ?! www.lillimedia.com @thekameronw @lillimedia
  • 19. there’s an easy way, and a hard way... analytics www.lillimedia.com @thekameronw @lillimedia
  • 20. www.lillimedia.com @thekameronw @lillimedia
  • 21. www.lillimedia.com @thekameronw @lillimedia
  • 22. www.lillimedia.com @thekameronw @lillimedia
  • 23. BUT WAIT! THERE’S MORE! www.lillimedia.com @thekameronw @lillimedia
  • 24. the social media… lord and saviour www.lillimedia.com @thekameronw @lillimedia
  • 25. www.lillimedia.com @thekameronw @lillimedia
  • 26. so we know who they are... - _ - now what…?? www.lillimedia.com @thekameronw @lillimedia
  • 27. determine the... MVP www.lillimedia.com @thekameronw @lillimedia
  • 28. determine the... MVP MOST VALUABLE PLAYER www.lillimedia.com @thekameronw @lillimedia
  • 29. determine the... MVP MOST VALUABLE PLAYER www.lillimedia.com @thekameronw @lillimedia
  • 30. determine the... MVC MOST VALUABLE CONTENT www.lillimedia.com @thekameronw @lillimedia
  • 31. www.lillimedia.com @thekameronw @lillimedia
  • 32. www.lillimedia.com @thekameronw @lillimedia
  • 33. so where this MVC at, yo? www.lillimedia.com @thekameronw @lillimedia
  • 34. there’s an easy way, and a hard way... analytics www.lillimedia.com @thekameronw @lillimedia
  • 35. www.lillimedia.com @thekameronw @lillimedia
  • 36. www.lillimedia.com @thekameronw @lillimedia
  • 37. www.lillimedia.com @thekameronw @lillimedia
  • 38. what does this have to do with storytelling & audience…? www.lillimedia.com @thekameronw @lillimedia
  • 39. what does this have to do with storytelling & audience…? understanding content consumption t e a c h e s u s HOW TO CAPTIVATE OUR AUDIENCE www.lillimedia.com @thekameronw @lillimedia
  • 40. our job as designers... is to captivate our audience www.lillimedia.com @thekameronw @lillimedia
  • 41. let’s continue designing our digital story... www.lillimedia.com @thekameronw @lillimedia
  • 42. so far we know... www.lillimedia.com @thekameronw @lillimedia
  • 43. so far we know... - who we’re telling this story to... www.lillimedia.com @thekameronw @lillimedia
  • 44. so far we know... - who we’re telling this story to… - how/where they prefer to consume content www.lillimedia.com @thekameronw @lillimedia
  • 45. so far we know... - who we’re telling this story to… - how/where they prefer to consume content - what they’ve deemed as important www.lillimedia.com @thekameronw @lillimedia
  • 46. so far we know... - who we’re telling this story to… - how/where they prefer to consume content - what they’ve deemed as important - where their interests lay www.lillimedia.com @thekameronw @lillimedia
  • 47. we also know... www.lillimedia.com @thekameronw @lillimedia
  • 48. we also know... - it’s our job to be captivating www.lillimedia.com @thekameronw @lillimedia
  • 49. we also know... - it’s our job to be captivating - this story has to incite action www.lillimedia.com @thekameronw @lillimedia
  • 50. how to: understanding > captivation > action www.lillimedia.com @thekameronw @lillimedia
  • 51. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  • 52. captivation is stimulating information delivered www.lillimedia.com @thekameronw @lillimedia
  • 53. captivation is stimulating information delivered OR is it…? www.lillimedia.com @thekameronw @lillimedia
  • 54. sto·ry /ˈstôrē/ a situation viewed in terms of the information known about it or its similarity to another. www.lillimedia.com @thekameronw @lillimedia
  • 55. Story: a situation viewed in terms of the information known about it or its similarity to another. What is the the need of the user? Are you valuable? www.lillimedia.com @thekameronw @lillimedia
  • 56. Story: a situation viewed in terms of the information known about it or its similarity to another. Remember Content Consumption: shared / viewed / read / watched / listened to... what resonates with your audience? www.lillimedia.com @thekameronw @lillimedia
  • 57. Story: a situation viewed in terms of the information known about it or its similarity to another. The user only knows what the user only knows know what the user needs before they do... www.lillimedia.com @thekameronw @lillimedia
  • 58. Story: a situation viewed in terms of the information known about it or its similarity to another. Who’s your competition, and how do you compare to them? www.lillimedia.com @thekameronw @lillimedia
  • 59. information architecture the structural design of shared information environments by means of organization, labeling, search and navigation systems www.lillimedia.com @thekameronw @lillimedia
  • 60. information architecture the structural design of shared information environments by means of organization, labeling, search and navigation systems www.lillimedia.com @thekameronw @lillimedia
  • 61. make it easier for them... www.lillimedia.com @thekameronw @lillimedia
  • 62. information acquisition keep it simple stupid... www.lillimedia.com @thekameronw @lillimedia
  • 63. “intuitivity” effective information architecture creates interfaces on it’s own... www.lillimedia.com @thekameronw @lillimedia
  • 64. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  • 65. i.a. + content + u.i. = the plot of our story www.lillimedia.com @thekameronw @lillimedia
  • 66. I.A. + U.I = the plot of our story www.lillimedia.com @thekameronw @lillimedia
  • 67. plot /plät/ to devise the sequence of events in a story www.lillimedia.com @thekameronw @lillimedia
  • 68. how to: understanding > captivation > action www.lillimedia.com @thekameronw @lillimedia
  • 69. www.lillimedia.com @thekameronw @lillimedia
  • 70. www.lillimedia.com @thekameronw @lillimedia
  • 71. what’s the purpose of a page... www.lillimedia.com @thekameronw @lillimedia
  • 72. relevance vs. importance the never ending battle www.lillimedia.com @thekameronw @lillimedia
  • 73. reward interactions (what happens next…?) www.lillimedia.com @thekameronw @lillimedia
  • 74. i.a. + content + captivation = interfacing www.lillimedia.com @thekameronw @lillimedia
  • 75. appropriate content content mediums: captivate. captivate. captivate. www.lillimedia.com @thekameronw @lillimedia
  • 76. how much is to much? balance is key… listen to your users www.lillimedia.com @thekameronw @lillimedia
  • 77. www.lillimedia.com @thekameronw @lillimedia
  • 78. www.lillimedia.com @thekameronw @lillimedia
  • 79. www.lillimedia.com @thekameronw @lillimedia
  • 80. www.lillimedia.com @thekameronw @lillimedia
  • 81. www.lillimedia.com @thekameronw @lillimedia
  • 82. www.lillimedia.com @thekameronw @lillimedia
  • 83. www.lillimedia.com @thekameronw @lillimedia
  • 84. www.lillimedia.com @thekameronw @lillimedia
  • 85. your interface(s) are all the characters of your story www.lillimedia.com @thekameronw @lillimedia
  • 86. so far we’ve learned... www.lillimedia.com @thekameronw @lillimedia
  • 87. so far we’ve learned... - audience: segregated targets based on information interests www.lillimedia.com @thekameronw @lillimedia
  • 88. so far we’ve learned... - audience: segregated targets based on information interests - content: the medium in which you engage and create dialogue with your audience (to captivate) www.lillimedia.com @thekameronw @lillimedia
  • 89. so far we’ve learned... - audience: segregated targets based on information interests - content: the medium in which you engage and create dialogue with your audience (to captivate) - plot: using content, I/A, and UI to create sequential actions: moving a user toward a goal www.lillimedia.com @thekameronw @lillimedia
  • 90. .good-story { audience: !important; content: relative; plot: !important; takeaway: absolute; } www.lillimedia.com @thekameronw @lillimedia
  • 91. www.lillimedia.com @thekameronw @lillimedia
  • 92. ...the takeaway www.lillimedia.com @thekameronw @lillimedia
  • 93. volunteers: please return to the stage... www.lillimedia.com @thekameronw @lillimedia
  • 94. today’s takeaway www.lillimedia.com @thekameronw @lillimedia
  • 95. people do not buy products they purchase a better self-improvements www.lillimedia.com @thekameronw @lillimedia
  • 96. readers do not subscribe... they fulfill their need to solve problems www.lillimedia.com @thekameronw @lillimedia
  • 97. you are not a designer... you are a digital storyteller www.lillimedia.com @thekameronw @lillimedia
  • 98. continue telling stories... www.lillimedia.com @thekameronw @lillimedia
  • 99. www.lillimedia.com @thekameronw @lillimedia