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

UX Comics: Make your first UX Comic

609b3b03baf8375ab06dea373f9a9a84?s=47 almostexact
September 11, 2014

UX Comics: Make your first UX Comic

Slides from my workshop at UX Cambridge 2014

609b3b03baf8375ab06dea373f9a9a84?s=128

almostexact

September 11, 2014
Tweet

Transcript

  1. BONNy COLVILLE-HyDE #UXCAM @ALMOSTEXACT UX COMICS: MAKE yOUR FIRST COMIC

  2. COMMUNICATING HUMAN EXPERIENCES IN DOCUMENTATION IS HARD.

  3. None
  4. None
  5. BORING

  6. None
  7. “A lengthy description of a glass of water is no

    substitute for the experience of drinking a glass of water”! Ivan BRUNETTI!
  8. None
  9. MOTIVATION & PROJECT ENERGy

  10. TEAMWORK Image source: http://goo.gl/G7Q39w

  11. None
  12. THE SECRET TO PROJECT SUCCESS: EMPATHy

  13. Empathy

  14. None
  15. None
  16. WHAT ABOUT BRAND EXPERIENCES?

  17. None
  18. None
  19. BUT WHy COMICS?

  20. COMICS ARE PART OF OUR VISUAL CULTURE

  21. None
  22. None
  23. None
  24. COMIC HISTORy

  25. 4000 BC!

  26. 1950! 17,879

  27. 2005!

  28. USER EXPERIENCE. USERS. USER RESEARCH…

  29. None
  30. RESEARCH WITH REAL PEOPLE! 1.  Get into pairs 2. Interview

    each other (2 x 5 mins) What was the last photo your partner took on their phone (nothing rude)? Find out all you can about how the photo was taken, the app, the scenario… make notes! you’re client is a mobile manufacturer. They want you to find out how people use their phone cameras. They want to understand what is working and what could be improved. Keep your notes – we’ll use them later on…
  31. THE SECRET TO COMIC SUCCESS: NON-VERBAL COMMUNICATION

  32. VERBAL NON-VERBAL

  33. TyPES OF NON-VERBAL COMMUNICATION Facial expressions: smiling, frowning, scowling" "

    Eye contact: gaze, eye movements, pupil size" " Body language: posture, open/closed actions" " Gestures: hand movements, speed, flow" " Speech: tone of voice, speed " !
  34. NON-VERBALS & COMICS

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. “Words and pictures can combine to create effects that neither

    could create separately”! Scott McCLOUD!
  42. THE POWER OF SUGGESTION

  43. None
  44. Great! I’ve booked my train home!

  45. “…COMICS ARE FOR KIDS, CLIENTS WOULDN’T GET IT…”

  46. Charles Schulz

  47. ANyONE CAN MAKE A MEANINGFUL COMIC

  48. …yOU DO NOT NEED EXTENSIVE ARTISTIC SKILLS

  49. SKILL: DRAWING FACES

  50. None
  51. LOOKING AT THINGS

  52. LOOKING AT THINGS

  53. STOP JUDGING yOUR DRAWING!

  54. SKILL: DRAWING EXPRESSIONS

  55. CREATING FACIAL EXPRESSIONS … EyEBROWS AND MOUTHS ARE VERy IMPORTANT!

  56. CHANGING EXPRESSIONS Draw FIVE empty circles in a line! Happy

    sad Neutral Draw a SAD face in circle one, ! then a slightly LESS SAD face in circle two…! continue until you reach a HAPPY face!
  57. None
  58. SKILL: DRAWING FIGURES

  59. None
  60. None
  61. None
  62. ADDING WEIGHT TO THE SKELETONS 1: Skeleton 2: Sausages 3:

    Details 4: Inking
  63. ADDING WEIGHT TO THE SKELETONS 5: Erase pencil 6: Vector-ise

    7: colour
  64. MAKING CHARACTERS IDENTIFIABLE

  65. GET TO KNOW yOUR CHARACTERS

  66. GET TO KNOW yOUR CHARACTERS

  67. DRAWING EMOTIONS Look back at the notes you made in

    your interview.! What emotion did your partner have? Draw a character showing this emotion! Use BODY LANGUAGE to communicate the emotion! Happy sad surprised excited ANGRy sleepy Confused proud nervous confident 1. Draw a skeleton 2. Add weight to the skeleton 3. Add details
  68. THE LANGUAGE OF COMICS

  69. “Comics have a vocabulary that doesn't even require language. In

    fact, many of its symbols could be considered a language of their own that requires no teaching or explanation”! Kevin CHENG ‘See what I mean’!
  70. SINGLE PANELS

  71. STRIPS

  72. PAGES

  73. GUTTERS

  74. GUTTERS

  75. FRAMING

  76. SPEAKING

  77. IT DOESN’T EVEN HAVE TO BE WORDS! ? !!!

  78. SKILL: STORyTELLING

  79. STORyTELLING: THE BASIC ARC

  80. None
  81. THE FIVE C’S OF COMICS Calligraphy! ! Composition! ! Clarity!

    ! Consistency! ! Communication! By Ivan Brunetti
  82. SCENE SETTING Key rules to note: • Use simple props

    to set the scene! • A few, key items are better than loads of detail (it just creates noise)! • Consider each item’s role in the story! !
  83. None
  84. THE CATCHER IN THE RyE, IN ONE PANEL By IVAN

    BRUNETTI
  85. 1.  What’s the story? you’re going to make a single

    panel comic about your partner’s experience taking a photo with their phone. you need to use your notes to inform your panel content. Remember: you’re creating a single panel comic! TASK! MAKE A SINGLE PANEL COMIC 2. What are the key elements? Location, props, dialogue 3. Plan your panel: do at least three thumbnail Sketches before starting your final panel
  86. 1.  Show your comic to your partner you need to

    know if your comic is effective – it’s time to test it! Getting feedback about comics is essential TASK! TEST yOUR COMIC 2. What works? What doesn’t work? Why?
  87. 1.  Show each other your comics Find a new partner.

    you’re going to help each other problem solve the stories in your comics. TASK! PROBLEM SOLVING 2. Discuss how the photo taking experience could be Improved: what’s missing? What’s difficult? Note down your ideas. 3. Make a new single panel comic that improves the experience
  88. BEFORE AFTER

  89. UX COMICS IN THE WILD

  90. None
  91. None
  92. None
  93. None
  94. PRACTICAL USES FOR COMICS: CASE STUDIES

  95. SPEC WORK FOR PITCHES THE PROBLEM: Need to create ‘something’

    for a pitch – there is no time or budget to do proper research.! ! Speculative work can come back to haunt you.! !
  96. Camera Shop The EXAMPLE CLIENT:

  97. GETTING STARTED: The client’s brief describes how they currently have

    a well developed customer base of professional photographers, but they want to increase the number of amateur photographers shopping with them. ! ! We could ‘guess’ what amateur photographers want, or, we could look for evidence to spark our ideas.!
  98. FINDING AN IDEA Via the Money Saving Expert forum

  99. 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.!
  100. 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).!
  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 satisfied and purchases the camera
  102. None
  103. None
  104. COMIC BENEFITS: •  We have evidence behind our assumptions and

    ideas about the audience! ! •  We can talk confidently about a scenario, without having to commit to details! ! •  We still have something visual to show to clients in a pitch! !
  105. EXPLORING IDEAS THE PROBLEM: As a team we need to

    see how an idea could work as a complete product.! If we focus on designing the interface too soon, we may miss opportunities to refine the process, or improve the structure.!
  106. User Registers for ‘My Training Buddy’ Dashboard Sets Goals Find

    Friends Track Performance Track Friend’s Performance Issue Performance Challenges
  107. Comic created for conceptual iOS fitness app ‘Training Buddy’

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

  109. COMIC BENEFITS: •  We can test the comic with target

    users and get feedback before we create wireframes or a prototype (faster, cheaper)! ! •  Helps all team members understand how we’re proposing a process works – little imagination is needed! ! •  We have a visual document that can be easily shared and reviewed with clients! !
  110. EXPANDING PERSONAS THE PROBLEM: Personas have a mixed reputation. !

    They can be hard to empathise with.! Communicating a persona’s core tasks and their setting helps build understanding. !
  111. MEET ‘DENISE’:

  112. None
  113. None
  114. None
  115. COMIC BENEFITS: •  Easier to engage stakeholders and team members

    with a comic than a ‘flat’ persona! ! •  Comic story can trigger more questions and feedback – meaning the team is sharing more information! !
  116. COMMUNICATING RESEARCH FINDINGS THE PROBLEM: Long reports require a lot

    of effort to read! Getting things done can mean leaving out the little details! ‘Seeing is believing’ !
  117. None
  118. None
  119. None
  120. None
  121. COMIC BENEFITS: •  Faster to read than a report! • 

    Subtleties can be communicated with facial expressions and body language! •  Brings people to life (important if stakeholders & team members didn’t attend any research sessions)!
  122. TESTING IDEAS WITH USERS THE PROBLEM: You’re not a unicorn!

    and/or! You don’t have time to prototype! You want to test an existing product, before it gets re-developed!
  123. None
  124. COMIC BENEFITS: •  Fast!! •  Participants enjoy working with comics!

    •  Rapid iterations!
  125. SHARING INFORMATION THE PROBLEM: You don’t want to write (yet

    another) blog post!
  126. Across the UK and around the world there have been

    over 80 colloquial names recorded that people use to describe this common land-based crustacean. How woodlice can help your website The humble woodlouse is known by many names Depending on where you go, you can hear people talking about woodlice using vastly different names, for instance: 'slater' (scotland), 'Grammersow' (cornwall) and even 'Boat Builder' (CANADA). Did you know? roly poly Slater Butcher boy But why should this matter to you?
  127. SEVEN RULES OF (UX) COMIC MAKING

  128. PLAN yOUR STORy: IF yOU FAIL TO PLAN, yOU PLAN

    TO FAIL RULE 1:
  129. KEEP IT SIMPLE: FOCUS ON WHAT REALLy MATTERS RULE 2:

  130. DEVELOP yOUR CHARACTERS: MAKE SURE THEy ARE A FAIR REPRESENTATION

    OF AUDIENCES RULE 3:
  131. CREATE EMPATHy: LOOK FOR WAyS TO GET READERS TO EMPATHISE

    WITH CHARACTERS RULE 4:
  132. DON’T BE AFRAID TO FAIL… THAT’S WHAT ERASERS ARE MADE

    FOR RULE 5:
  133. CUT OUT UNNECESSARy WORDS RULE 6:

  134. GET FEEDBACK: CHECK yOU’RE TELLING THE STORy yOU THOUGHT yOU

    WERE RULE 7:
  135. HAVE FUN BONUS RULE!:

  136. WAIT FOR INK TO DRy BEFORE USING AN ERASER! BONUS

    BONUS RULE!:
  137. ESSENTIAL READING Understanding Comics, Scott McCLOUD! Making Comics, Scott McCLOUD!

    See What I Mean, Kevin CHENG! Cartooning: Philosophy & Practice, Ivan BRUNETTI! ! TOOLS Comic Life, Plasq! !
  138. COMIC LIFE

  139. THANK yOU! @ALMOSTEXACT #UXCAM