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

UX Comics: Communicating Experiences & Sharing Ideas

almostexact
July 22, 2014

UX Comics: Communicating Experiences & Sharing Ideas

Slides from my talk at the UXPA 2014 conference in London.

Tweet me any questions!

almostexact

July 22, 2014
Tweet

More Decks by almostexact

Other Decks in Design

Transcript

  1. BONNy COLVILLE-HyDE
    #UXPA2014
    @ALMOSTEXACT
    UX COMICS:
    COMMUNICATING
    EXPERIENCES & SHARING
    IDEAS

    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. MOTIVATION & PROJECT ENERGy

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. WHAT ABOUT BRAND EXPERIENCES?

    View Slide

  13. View Slide

  14. View Slide

  15. BUT WHy COMICS?

    View Slide

  16. COMICS ARE PART OF OUR
    VISUAL CULTURE

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. COMIC HISTORy

    View Slide

  21. 4000 BC!

    View Slide

  22. 1070’S!

    View Slide

  23. 1740’S!

    View Slide

  24. 1950!

    View Slide

  25. 1961!

    View Slide

  26. 1976!

    View Slide

  27. 1985!

    View Slide

  28. 2005!

    View Slide

  29. NON-VERBAL COMMUNICATION

    View Slide

  30. VERBAL
    NON-VERBAL

    View Slide

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

  32. NON-VERBALS & COMICS

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

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

    View Slide

  40. THE POWER OF SUGGESTION

    View Slide

  41. View Slide

  42. Great!
    I’ve booked
    my train home!

    View Slide

  43. View Slide

  44. That burger
    was amazing!
    5 Stars!

    View Slide

  45. View Slide

  46. Dad would love
    that burger
    place – I’ll send
    him the details

    View Slide

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

    View Slide

  48. Charles Schulz

    View Slide

  49. ANyONE CAN MAKE A
    MEANINGFUL COMIC

    View Slide

  50. …yOU DO NOT NEED EXTENSIVE
    ARTISTIC SKILLS

    View Slide

  51. SKILL:
    DRAWING FACES

    View Slide

  52. View Slide

  53. LOOKING AT THINGS

    View Slide

  54. LOOKING AT THINGS

    View Slide

  55. SKILL:
    DRAWING EXPRESSIONS

    View Slide

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

    View Slide

  57. SKILL:
    DRAWING FIGURES

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

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

    View Slide

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

    View Slide

  63. MAKING CHARACTERS IDENTIFIABLE

    View Slide

  64. GET TO KNOW yOUR CHARACTERS

    View Slide

  65. GET TO KNOW yOUR CHARACTERS

    View Slide

  66. THE LANGUAGE OF COMICS

    View Slide

  67. “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

  68. SINGLE PANELS

    View Slide

  69. STRIPS

    View Slide

  70. PAGES

    View Slide

  71. GUTTERS

    View Slide

  72. GUTTERS

    View Slide

  73. FRAMING

    View Slide

  74. SPEAKING

    View Slide

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

    View Slide

  76. SKILL:
    STORyTELLING

    View Slide

  77. STORyTELLING: THE BASIC ARC

    View Slide

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

    View Slide

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

  80. View Slide

  81. Matilda
    ’s Dad helps her play
    games on their iPad.

    View Slide

  82. UX COMICS IN THE WILD

    View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. PRACTICAL USES FOR
    COMICS:
    CASE STUDIES

    View Slide

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

    View Slide

  89. Camera Shop
    The
    EXAMPLE CLIENT:

    View Slide

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

    View Slide

  91. FINDING AN IDEA
    Via the Money Saving Expert forum

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  95. View Slide

  96. View Slide

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

    View Slide

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

    View Slide

  99. User Registers for
    ‘My Training
    Buddy’
    Dashboard
    Sets Goals
    Find Friends
    Track
    Performance
    Track Friend’s
    Performance
    Issue
    Performance
    Challenges

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  104. MEET ‘DENISE’:

    View Slide

  105. View Slide

  106. View Slide

  107. View Slide

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

    View Slide

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

    View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

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

    View Slide

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

    View Slide

  116. View Slide

  117. COMIC BENEFITS:
    •  Fast!!
    •  Participants enjoy working with comics!
    •  Rapid iterations!

    View Slide

  118. SHARING INFORMATION
    THE PROBLEM:
    You don’t want to write yet another blog post!

    View Slide

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

  120. SEVEN RULES OF
    (UX) COMIC MAKING

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  126. CUT OUT
    UNNECESSARy
    WORDS
    RULE 6:

    View Slide

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

    View Slide

  128. HAVE FUN
    BONUS RULE!:

    View Slide

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

    View Slide

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

  131. COMIC LIFE

    View Slide

  132. THANK yOU!
    @ALMOSTEXACT
    #UXPA2014
    Hire
    me!

    View Slide