$30 off During Our Annual Pro Sale. View Details »

Communicating Experiences with UX Comics

Communicating Experiences with UX Comics

Slides from my workshop at UX Bristol 2014

almostexact

July 18, 2014
Tweet

More Decks by almostexact

Other Decks in Design

Transcript

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

    View Slide

  2. COMMUNICATING HUMAN
    EXPERIENCES IN
    DOCUMENTATION IS HARD.

    View Slide

  3. View Slide

  4. View Slide

  5. BORING

    View Slide

  6. “A lengthy description
    of a glass of water is
    no substitute for the
    experience of drinking
    a glass of water”!
    Ivan BRUNETTI!

    View Slide

  7. View Slide

  8. BUT WHy COMICS?

    View Slide

  9. COMICS ARE PART OF OUR
    VISUAL CULTURE

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. COMIC HISTORy

    View Slide

  14. 4000 BC!

    View Slide

  15. 1070’S!

    View Slide

  16. 1740’S!

    View Slide

  17. 1950!

    View Slide

  18. 1961!

    View Slide

  19. 1976!

    View Slide

  20. 1985!

    View Slide

  21. 2005!

    View Slide

  22. NON-VERBAL COMMUNICATION

    View Slide

  23. VERBAL
    NON-VERBAL

    View Slide

  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 !
    !

    View Slide

  25. NON-VERBALS & COMICS

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. “Words and pictures
    can combine to create
    effects that neither
    could create
    separately”!
    Scott McCLOUD!

    View Slide

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

    View Slide

  34. Charles Schulz

    View Slide

  35. RESEARCH TIME!
    - GET INTO PAIRS
    - WHAT PHONE DOES yOUR
    PARTNER HAVE?

    View Slide

  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.!

    View Slide

  37. ANyONE CAN MAKE A
    MEANINGFUL COMIC

    View Slide

  38. …yOU DO NOT NEED EXTENSIVE
    ARTISTIC SKILLS

    View Slide

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

    View Slide

  40. View Slide

  41. LOOKING AT THINGS

    View Slide

  42. LOOKING AT THINGS

    View Slide

  43. SKILL:
    DRAWING FACES
    EXERCISE:
    DRAWING EXPRESSIONS

    View Slide

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

    View Slide

  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!

    View Slide

  46. View Slide

  47. SKILL:
    DRAWING FIGURES
    EXERCISE:
    DRAWING SKELETONS

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  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

    View Slide

  52. View Slide

  53. ADDING WEIGHT TO THE SKELETONS
    1: Skeleton 2: Sausages 3: Details 4: Inking

    View Slide

  54. ADDING WEIGHT TO THE SKELETONS
    5: Erase pencil 6: Vector-ise 7: colour

    View Slide

  55. MAKING CHARACTERS IDENTIFIABLE

    View Slide

  56. GET TO KNOW yOUR CHARACTER

    View Slide

  57. GET TO KNOW yOUR CHARACTER

    View Slide

  58. THE LANGUAGE OF COMICS

    View Slide

  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’!

    View Slide

  60. SINGLE PANELS

    View Slide

  61. STRIPS

    View Slide

  62. PAGES

    View Slide

  63. GUTTERS

    View Slide

  64. GUTTERS

    View Slide

  65. FRAMING

    View Slide

  66. SPEAKING

    View Slide

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

    View Slide

  68. THE POWER OF SUGGESTION

    View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  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!
    !

    View Slide

  73. View Slide

  74. SKILL:
    STORyTELLING
    EXERCISE:
    CREATE A SINGLE PANEL COMIC

    View Slide

  75. STORyTELLING: THE BASIC ARC

    View Slide

  76. THE FIVE C’S OF COMICS
    Calligraphy!
    !
    Composition!
    !
    Clarity!
    !
    Consistency!
    !
    Communication!
    By Ivan Brunetti

    View Slide

  77. THE CATCHER
    IN THE RyE,
    IN ONE PANEL
    By
    IVAN BRUNETTI

    View Slide

  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!!

    View Slide

  79. TASK!
    Get feedback!:!
    !
    -  Show your partner your comic panel and ask for
    feedback!
    !
    How would you do it differently? Why?!

    View Slide

  80. UX COMICS IN THE WILD

    View Slide

  81. View Slide

  82. View Slide

  83. View Slide

  84. GENERATING & EXPLORING
    IDEAS

    View Slide

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

    View Slide

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

    View Slide

  87. View Slide

  88. View Slide

  89. COMMUNICATING RESEARCH
    FINDINGS

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. SHARING INFORMATION

    View Slide

  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?

    View Slide

  95. SEVEN RULES OF (UX) COMIC
    MAKING

    View Slide

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

    View Slide

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

    View Slide

  98. DEVELOP yOUR CHARACTERS:
    MAKE SURE THEy ARE A FAIR
    REPRESENTATION OF
    AUDIENCES
    RULE 3:

    View Slide

  99. CREATE EMPATHy:
    LOOK FOR WAyS TO GET
    READERS TO EMPATHISE
    WITH CHARACTERS
    RULE 4:

    View Slide

  100. DON’T BE AFRAID TO FAIL…
    THAT’S WHAT ERASERS ARE
    MADE FOR
    RULE 5:

    View Slide

  101. CUT OUT
    UNNECESSARy
    WORDS
    RULE 6:

    View Slide

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

    View Slide

  103. HAVE FUN
    BONUS RULE!:

    View Slide

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

    View Slide

  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!
    !

    View Slide

  106. COMIC LIFE

    View Slide

  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’

    View Slide

  108. THANK yOU!
    @ALMOSTEXACT
    #UXBRISTOL

    View Slide