Save 37% off PRO during our Black Friday Sale! »

Comics and Communication: A Practical Introduction

609b3b03baf8375ab06dea373f9a9a84?s=47 almostexact
April 20, 2015

Comics and Communication: A Practical Introduction

Slides from my workshop for the GDS team.

609b3b03baf8375ab06dea373f9a9a84?s=128

almostexact

April 20, 2015
Tweet

Transcript

  1. Comics and communication Bonny Colville-Hyde @almostexact A practical introduction  

  2. User research is Awesome.

  3. None
  4. Documenting & communicating Human experiences is hard

  5. None
  6. ‘Deliverables’ Suck

  7. None
  8. If we don’t engage decision makers, we fail.

  9. h#p://www.slideshare.net/birgitgcom   @birgitgcom  

  10. Communication is hard

  11. None
  12. We can engage people with experiences.

  13. People love Stories

  14. People Love Comics

  15. None
  16. None
  17. None
  18. None
  19. None
  20. h#p://bza.co/joshln  

  21. 17,897

  22. 17,897 Comic strips 50 years Peanuts,  Charles  Schulz  

  23. the longest story ever told by one person

  24. Why are comics so successful?

  25. Verbal Non Verbal

  26. Facial Expressions Eye contact Body language Gestures Speech

  27. The magic of non-verbal communication

  28. None
  29. None
  30. None
  31. “…But comics are for kids – My Team wouldn’t get

    it…”
  32. Charles  Schulz  

  33. None
  34. None
  35. None
  36. Comics in action

  37. Share research (A.K.A: Bringing research to life)

  38. Experienced   Novice   SkepDcal     TrusDng   BOB

      SUE  
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. Test ideas with users

  46. None
  47. Kevin  CHENG,  Yahoo  

  48. Develop personas

  49. Meet ‘Denise’:

  50. None
  51. None
  52. None
  53. Share & explore ideas

  54. Sco#  McCLOUD,  Google  Chrome  

  55. Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  

  56. Comic  created  for  conceptual  iOS  fitness  app  ‘Training  Buddy’  

  57. What makes a comic?

  58. Single panel:

  59. Strip:

  60. Pages:

  61. Yay! Gutters!

  62. None
  63. None
  64. ? !!!

  65. None
  66. storytelling

  67. Buy this

  68. None
  69. “…But I can’t draw…”

  70. Drawing is not scary

  71. It just takes practice

  72. xkcd.com/386  

  73. Drawing faces

  74. None
  75. None
  76. None
  77. Lets play Emotion charades

  78. TASK! -  Get into pairs -  Take it in turns

    to choose an emotion and act it out, without using words -  Act out at least two different emotions Happiness   Sadness   Fear   Depression   Confusion   Boredom   Anger   Excitement   Sorrow   Pride   Disgust   Relief   Shame   Frustration   Joy  
  79. Drawing expressions

  80. None
  81. Sad   Neutral   Happy   TASK! -  Draw five

    circles/head shapes -  Add expressions on each face: Start with sad on the left, and end with happy on the right
  82. Drawing figures

  83. None
  84. None
  85. None
  86. TASK! -  Draw two stick people standing next to each

    other, showing different emotions -  The emotions should be opposites Happiness   Sadness   Fear   Depression   Amusement   Boredom   Excitement   Sorrow   Pride   Relief   Shame   Joy  
  87. None
  88. None
  89. None
  90. None
  91. 1. Skeleton   2. Sausages   3. Detail   4.

    Inking  
  92. 5. Tidy up   6. Vectors   7. Colour  

  93. characters

  94. None
  95. Find a style that works for you (and practice)

  96. A scenario •  We’re  working  for  an  ecommerce  photography  site

     called  ‘The   Camera  Shop’.   •  They  sell  lots  of  different  cameras  and  photography  gear  to  a   variety  of  customers,  though  most  of  them  are  passionate   photographers.   •  They  want  to  know  how  they  can  appeal  to  customers  who  don’t   consider  themselves  photographers  and  who  spend  less  on   cameras  (because  there  are  a  lot  more  of  these  people  than  the   passionate  photographers).   •  Before  they  commission  a  large  piece  of  research,  they  want  to  see   what  insight  we  can  give  about  this  audience.   •  We  need  to  quickly  create  a  comic  that  shares  some  of  the   problems  and  potenDal  soluDons  The  Camera  Shop  could  provide   to  laymen  photographers.  
  97. Finding an idea Via  the  Money  Saving  Expert  forum  

  98. What’s going on here? •  ‘Bob’  wants  to  buy  a

     new  compact  camera.   •  He  has  shopped  around,  but  has  been   overwhelmed  by  the  variety  and  choice  of   cameras.   •  He  doesn’t  want  a  lot  of  fancy  features,  but  he   does  care  about  the  image  quality.   •  He  has  up  to  £100  to  spend.   •  He  is  looking  for  help  to  make  a  decision.  
  99. Making the story •  Bob  wants  to  buy  a  new

     camera  because  his  current  one   has  broken.  He  wants  to  replace  his  camera  before  he  goes   on  holiday.   •  He  has  looked  on  several  websites,  but  has  been   overwhelmed  by  the  choice.  He  needs  help  to  refine   appropriate  cameras  into  a  more  manageable  shortlist,  or   even  to  find  the  best  one  for  him.   •  The  site  or  app  needs  to  allow  him  to  control  his  searching   and  browsing  so  he  can  manage  the  volume  of  results.  It   needs  to  give  him  choice  but  not  overwhelm  him.   •  He  needs  to  be  able  to  look  at  cameras  based  on  their  size   (he  wants  it  to  be  compact),  their  image  quality  (it  needs  to   take  nice  pictures)  and  its  price  (it  must  be  under  £100).  
  100. None
  101. Planning  the  comic   1.  Introduce  Bob   2.  Bob’s

     camera  has   broken   3.  Bob  looks  for  cameras   online   4.  Bob  gets   overwhelmed   5.  Bob  finds  The  Camera   Shop   6.  Bob  finds  ‘The   Compact  Camera’  finder   7.  Bob  filters  compact   cameras  by  price  and   size   8.  Bob  finds  a  camera  he   is  interested  in   9.  Bob  browses  photos   taken  with  the  camera   from  Flickr   10.  Bob  feels  saPsfied   and  purchases  the   camera  
  102. None
  103. None
  104. Ordon District NHS Trust Six hospitals: The Nightingale University Hospital,

    Redmill (has A&E, others don’t)
  105. Meet Karen Karen lives with her two children (Sophie, 4,

    and Jack, 2). During the week, her partner Mark works away from home. They recently moved to Redmill, and are still settling in. Her closest family members live a two hour drive away.
  106. None
  107. One Monday afternoon, Karen and the kids are in the

    garden, enjoying the sun. At 3pm Jack falls over and hits his head. A bump appears. Karen takes Jack and Sophie in doors. He wont stop crying. She becomes worried. Sophie starts to get scared and upset.
  108. None
  109. At 3:30pm Karen decides to take Jack to the hospital,

    she knows there’s one nearby, but she’s not sure where it is. Karen uses her PC laptop to search for the hospital. Once she’s found the right hospital, she puts its postcode into her phone which has a sat-nav app on it.
  110. Other things to consider: There are two hospitals near her

    postcode, only one has an A&E department. There are road works near the hospital. The hospital car park is pay and display. There are limited parent and child parking spaces at the North entrance. There is a shop and café at the hospital which close at 5pm. Sophie and Jack usually eat at 5:30pm.
  111. How do we turn this into a comic?

  112. 1   2   3   4   5  

    6   1:  Plan  the  story   2:  Design  the  characters   3:  PracPce  the  character’s   emoPons   4:  Draw  the  comic   5:  Get  feedback   6:  Refine  the  comic  
  113. What have you got?

  114. Tools Brush  textures  for  Photoshop  created  by  Alex  Dukal:  h#p://circografico.com.ar/shop/

     
  115. Comic Life

  116. Key points to remember

  117. engage decision makers

  118. Don’t obsess about process

  119. Speak to users as often as possible

  120. Plan!

  121. Make it easy for yourself

  122. Wait for ink to dry before using an eraser

  123. Have fun

  124. Thank you! @almostexact