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

UX Comics: Make your first UX Comic

almostexact
September 11, 2014

UX Comics: Make your first UX Comic

Slides from my workshop at UX Cambridge 2014

almostexact

September 11, 2014
Tweet

More Decks by almostexact

Other Decks in Design

Transcript

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

    View Slide

  2. COMMUNICATING HUMAN
    EXPERIENCES IN
    DOCUMENTATION IS HARD.

    View Slide

  3. View Slide

  4. View Slide

  5. BORING

    View Slide

  6. View Slide

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

    View Slide

  8. View Slide

  9. MOTIVATION & PROJECT ENERGy

    View Slide

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

    View Slide

  11. View Slide

  12. THE SECRET TO PROJECT
    SUCCESS:
    EMPATHy

    View Slide

  13. Empathy

    View Slide

  14. View Slide

  15. View Slide

  16. WHAT ABOUT BRAND EXPERIENCES?

    View Slide

  17. View Slide

  18. View Slide

  19. BUT WHy COMICS?

    View Slide

  20. COMICS ARE PART OF OUR
    VISUAL CULTURE

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. COMIC HISTORy

    View Slide

  25. 4000 BC!

    View Slide

  26. 1950!
    17,879

    View Slide

  27. 2005!

    View Slide

  28. USER EXPERIENCE.
    USERS.
    USER RESEARCH…

    View Slide

  29. View Slide

  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…

    View Slide

  31. THE SECRET TO COMIC
    SUCCESS:
    NON-VERBAL COMMUNICATION

    View Slide

  32. VERBAL
    NON-VERBAL

    View Slide

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

    View Slide

  34. NON-VERBALS & COMICS

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

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

    View Slide

  42. THE POWER OF SUGGESTION

    View Slide

  43. View Slide

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

    View Slide

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

    View Slide

  46. Charles Schulz

    View Slide

  47. ANyONE CAN MAKE A
    MEANINGFUL COMIC

    View Slide

  48. …yOU DO NOT NEED EXTENSIVE
    ARTISTIC SKILLS

    View Slide

  49. SKILL:
    DRAWING FACES

    View Slide

  50. View Slide

  51. LOOKING AT THINGS

    View Slide

  52. LOOKING AT THINGS

    View Slide

  53. STOP
    JUDGING yOUR
    DRAWING!

    View Slide

  54. SKILL:
    DRAWING EXPRESSIONS

    View Slide

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

    View Slide

  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!

    View Slide

  57. View Slide

  58. SKILL:
    DRAWING FIGURES

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

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

    View Slide

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

    View Slide

  64. MAKING CHARACTERS IDENTIFIABLE

    View Slide

  65. GET TO KNOW yOUR CHARACTERS

    View Slide

  66. GET TO KNOW yOUR CHARACTERS

    View Slide

  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

    View Slide

  68. THE LANGUAGE OF COMICS

    View Slide

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

    View Slide

  70. SINGLE PANELS

    View Slide

  71. STRIPS

    View Slide

  72. PAGES

    View Slide

  73. GUTTERS

    View Slide

  74. GUTTERS

    View Slide

  75. FRAMING

    View Slide

  76. SPEAKING

    View Slide

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

    View Slide

  78. SKILL:
    STORyTELLING

    View Slide

  79. STORyTELLING: THE BASIC ARC

    View Slide

  80. View Slide

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

    View Slide

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

    View Slide

  83. View Slide

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

    View Slide

  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

    View Slide

  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?

    View Slide

  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

    View Slide

  88. BEFORE AFTER

    View Slide

  89. UX COMICS IN THE WILD

    View Slide

  90. View Slide

  91. View Slide

  92. View Slide

  93. View Slide

  94. PRACTICAL USES FOR
    COMICS:
    CASE STUDIES

    View Slide

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

    View Slide

  96. Camera Shop
    The
    EXAMPLE CLIENT:

    View Slide

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

    View Slide

  98. FINDING AN IDEA
    Via the Money Saving Expert forum

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  102. View Slide

  103. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  111. MEET ‘DENISE’:

    View Slide

  112. View Slide

  113. View Slide

  114. View Slide

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

    View Slide

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

    View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

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

    View Slide

  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!

    View Slide

  123. View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

  127. SEVEN RULES OF
    (UX) COMIC MAKING

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  133. CUT OUT
    UNNECESSARy
    WORDS
    RULE 6:

    View Slide

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

    View Slide

  135. HAVE FUN
    BONUS RULE!:

    View Slide

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

    View Slide

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

    View Slide

  138. COMIC LIFE

    View Slide

  139. THANK yOU!
    @ALMOSTEXACT
    #UXCAM

    View Slide