Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX Comics: Communicating Experiences & Sharing Ideas

UX Comics: Communicating Experiences & Sharing Ideas

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

Tweet me any questions!


July 22, 2014

More Decks by almostexact

Other Decks in Design


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

    substitute for the experience of drinking a glass of water”! Ivan BRUNETTI!
  2. 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 ! !
  3. “Words and pictures can combine to create effects that neither

    could create separately”! Scott McCLOUD!
  4. “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’!
  5. THE FIVE C’S OF COMICS Calligraphy! ! Composition! ! Clarity!

    ! Consistency! ! Communication! By Ivan Brunetti
  6. 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! !
  7. 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.! !
  8. 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.!
  9. 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.!
  10. 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).!
  11. 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
  12. 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! !
  13. 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.!
  14. User Registers for ‘My Training Buddy’ Dashboard Sets Goals Find

    Friends Track Performance Track Friend’s Performance Issue Performance Challenges
  15. 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! !
  16. 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. !
  17. 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! !

    of effort to read! Getting things done can mean leaving out the little details! ‘Seeing is believing’ !
  19. 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)!
  20. 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!
  21. 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?
  22. 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! !