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

Communicating Experiences with UX Comics

609b3b03baf8375ab06dea373f9a9a84?s=47 almostexact
July 18, 2014

Communicating Experiences with UX Comics

Slides from my workshop at UX Bristol 2014

609b3b03baf8375ab06dea373f9a9a84?s=128

almostexact

July 18, 2014
Tweet

Transcript

  1. COMMUNICATING EXPERIENCES WITH UX COMICS BONNy COLVILLE-HyDE #UXBRISTOL @ALMOSTEXACT

  2. COMMUNICATING HUMAN EXPERIENCES IN DOCUMENTATION IS HARD.

  3. None
  4. None
  5. BORING

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

    substitute for the experience of drinking a glass of water”! Ivan BRUNETTI!
  7. None
  8. BUT WHy COMICS?

  9. COMICS ARE PART OF OUR VISUAL CULTURE

  10. None
  11. None
  12. None
  13. COMIC HISTORy

  14. 4000 BC!

  15. 1070’S!

  16. 1740’S!

  17. 1950!

  18. 1961!

  19. 1976!

  20. 1985!

  21. 2005!

  22. NON-VERBAL COMMUNICATION

  23. VERBAL NON-VERBAL

  24. 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 ! !
  25. NON-VERBALS & COMICS

  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. “Words and pictures can combine to create effects that neither

    could create separately”! Scott McCLOUD!
  33. “…COMICS ARE FOR KIDS, CLIENTS WOULDN’T GET IT…”

  34. Charles Schulz

  35. RESEARCH TIME! - GET INTO PAIRS - WHAT PHONE DOES

    yOUR PARTNER HAVE?
  36. TASK! Get into pairs.! Interview each other about the last

    photo you took on your phone (nothing rude please!).! You need to understand the whole process your partner went through to take the photo.! Make sure you take notes!! ! Later on: You will use this to make a comic that shows how they took the photo.!
  37. ANyONE CAN MAKE A MEANINGFUL COMIC

  38. …yOU DO NOT NEED EXTENSIVE ARTISTIC SKILLS

  39. SKILL #1: DRAWING FACES EXERCISE: DRAWING A FACE

  40. None
  41. LOOKING AT THINGS

  42. LOOKING AT THINGS

  43. SKILL: DRAWING FACES EXERCISE: DRAWING EXPRESSIONS

  44. CREATING FACIAL EXPRESSIONS … EYEBROWS AND MOUTHS ARE VERY IMPORTANT!

  45. TASK! 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!
  46. None
  47. SKILL: DRAWING FIGURES EXERCISE: DRAWING SKELETONS

  48. None
  49. None
  50. None
  51. TASK! Draw a skeleton showing an emotion! Use BODY LANGUAGE

    to communicate the emotion! Happy sad surprised excited ANGRy sleepy Confused proud nervous confident
  52. None
  53. ADDING WEIGHT TO THE SKELETONS 1: Skeleton 2: Sausages 3:

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

    7: colour
  55. MAKING CHARACTERS IDENTIFIABLE

  56. GET TO KNOW yOUR CHARACTER

  57. GET TO KNOW yOUR CHARACTER

  58. THE LANGUAGE OF COMICS

  59. “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’!
  60. SINGLE PANELS

  61. STRIPS

  62. PAGES

  63. GUTTERS

  64. GUTTERS

  65. FRAMING

  66. SPEAKING

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

  68. THE POWER OF SUGGESTION

  69. None
  70. None
  71. None
  72. 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! !
  73. None
  74. SKILL: STORyTELLING EXERCISE: CREATE A SINGLE PANEL COMIC

  75. STORyTELLING: THE BASIC ARC

  76. THE FIVE C’S OF COMICS Calligraphy! ! Composition! ! Clarity!

    ! Consistency! ! Communication! By Ivan Brunetti
  77. THE CATCHER IN THE RyE, IN ONE PANEL By IVAN

    BRUNETTI
  78. TASK! Looking at your interview notes:! ! -  What is

    the story here? ! -  How can it be summarised into a single image?! -  What dialogue (if any) is needed?! -  Plan how you will lay out the elements in your panel – do at least three thumbnail sketches before starting your actual panel! -  Once you’ve planned it DRAW IT!!
  79. TASK! Get feedback!:! ! -  Show your partner your comic

    panel and ask for feedback! ! How would you do it differently? Why?!
  80. UX COMICS IN THE WILD

  81. None
  82. None
  83. None
  84. GENERATING & EXPLORING IDEAS

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

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

  87. None
  88. None
  89. COMMUNICATING RESEARCH FINDINGS

  90. None
  91. None
  92. None
  93. SHARING INFORMATION

  94. 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?
  95. SEVEN RULES OF (UX) COMIC MAKING

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

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

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

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

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

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

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

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

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

    BONUS RULE!:
  105. 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! !
  106. COMIC LIFE

  107. COMPETITION TIME! Make another SINGLE PANEL COMIC where you solve

    any problems your partner had taking their photo. ! Tweet @almostexact photos of your comic with the hashtag #UXBristol! The comic with the most re-tweets by 12noon tomorrow will get a prize J! ! AKA ‘Homework’
  108. THANK yOU! @ALMOSTEXACT #UXBRISTOL