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

UX Comics: Communicating Experiences with Pictures at FOWD2014

609b3b03baf8375ab06dea373f9a9a84?s=47 almostexact
April 08, 2014

UX Comics: Communicating Experiences with Pictures at FOWD2014

Slides from my talk at the Future of Web Design 2014.

609b3b03baf8375ab06dea373f9a9a84?s=128

almostexact

April 08, 2014
Tweet

Transcript

  1. UX COMICS: COMMUNICATING EXPERIENCES WITH PICTURES BONNY COLVILLE-HYDE @ALMOSTEXACT #FOWD

  2. None
  3. COMICS ARE PART OF OUR VISUAL CULTURE

  4. None
  5. None
  6. None
  7. COMIC HISTORY

  8. 4000 BC!

  9. 1070’S!

  10. 1740’S!

  11. 1825!

  12. 1895!

  13. 1899!

  14. 1913!

  15. 1938!

  16. 1949!

  17. 1950!

  18. 1961!

  19. 1976!

  20. 1985!

  21. 2005!

  22. 2009!

  23. 4000 BC! 20TH CENTURY! TODAY! 19TH CENTURY!

  24. WHAT NOW?

  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. BORING

  32. None
  33. None
  34. NON-VERBAL COMMUNICATION

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

    substitute for the experience of drinking a glass of water”! Ivan BRUNETTI!
  36. VERBAL NON-VERBAL

  37. 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 ! !
  38. NON-VERBALS & COMICS

  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. MEET ‘DENISE’:

  48. None
  49. None
  50. None
  51. “…COMICS ARE FOR KIDS, CLIENTS WOULDN’T GET IT…”

  52. Charles Schulz

  53. “Words and pictures can combine to create effects that neither

    could create separately”! Scott McCLOUD!
  54. “I COULDN’T MAKE COMICS BECAUSE…”

  55. “…I CAN’T DRAW”

  56. None
  57. FACIAL EXPRESSIONS … EYEBROWS AND MOUTHS ARE VERY IMPORTANT!

  58. None
  59. CREATING CHARACTERS

  60. MAKE THEM IDENTIFIABLE

  61. GET TO KNOW YOUR CHARACTER

  62. GET TO KNOW YOUR CHARACTER

  63. THE LANGUAGE OF COMICS

  64. “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’!
  65. THE FIVE C’S OF COMICS Calligraphy! ! Composition! ! Clarity!

    ! Consistency! ! Communication!
  66. SINGLE PANELS

  67. STRIPS

  68. PAGES

  69. GUTTERS

  70. GUTTERS

  71. FRAMING

  72. SPEAKING

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

  74. THE POWER OF SUGGESTION

  75. None
  76. None
  77. None
  78. SCENE SETTING Use simple props to set the scene! A

    few, key items are better than loads of detail (it just creates noise)! !
  79. None
  80. MAKING A STORY: AN EXAMPLE

  81. THE SCENARIO We’re working for an ecommerce photography site called

    ‘The Camera Shop’.! They sell lots of different cameras and photography gear to a variety of customers, though most of them are passionate photographers.! They want to know how they can appeal to more customers who don’t consider themselves photographers and who spend less on cameras (but there are more of them).! Before they commission a large piece of research, they want to see what insight we can give about this audience.! We need to quickly create a comic that shares some of the problems and potential solutions The Camera Shop could provide to laymen photographers.!
  82. FINDING AN IDEA Via the Money Saving Expert forum

  83. 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.!
  84. 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).!
  85. STORYTELLING: THE BASIC ARC

  86. 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
  87. None
  88. None
  89. GENERATING & EXPLORING IDEAS

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

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

  92. COMMUNICATING RESEARCH FINDINGS

  93. None
  94. None
  95. None
  96. None
  97. None
  98. SHARE INFORMATION

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

  101. PLAN YOUR STORY RULE1:

  102. KEEP IT SIMPLE RULE 2:

  103. CHARACTER DEVELOPMENT RULE 3:

  104. None
  105. CREATE EMPATHY RULE 4:

  106. SKETCH RULE 5:

  107. CUT WORDS RULE 6:

  108. GET FEEDBACK RULE 7:

  109. 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! !
  110. COMIC LIFE

  111. THANK YOU! @ALMOSTEXACT #FOWD