Intuitive images creating and evaluating usable graphics for international audiences Patrick Hofmann  UX Designer • Sydney...
<ul><li>Welcome!  </li></ul><ul><li>   My name is  Patrick Hofmann </li></ul><ul><li>   For the past 18+ years, I’ve bee...
<ul><li>Let’s have fun!  </li></ul><ul><li>   We have a lot of material to cover in the next 3 hours </li></ul><ul><li> ...
<ul><li>Let’s have fun!  </li></ul><ul><li>   We have a lot of material to cover in the next 3 hours </li></ul><ul><li> ...
<ul><li>Icebreaker exercise </li></ul><ul><li>   Let’s visualize an instruction </li></ul><ul><li>   The client:  a reso...
<ul><li>Icebreaker exercise </li></ul><ul><li>   What usability considerations or issues did we discover? </li></ul>
<ul><li>Agenda </li></ul><ul><li>1  Problems with pictures </li></ul><ul><li>2  Templating pictures </li></ul><ul><li>3  S...
<ul><li>Agenda </li></ul><ul><li>4  Dealing with </li></ul><ul><li>flowcharts </li></ul><ul><li>5  Dealing with  screensho...
<ul><li>Problems with pictures </li></ul><ul><li>   demonstrating the doo-doo </li></ul><ul><li>in doodled information </...
<ul><li>Problems with pictures </li></ul><ul><li>   Over the past 19+ years, I created and tested a variety of visuals, d...
<ul><li>5  Pictures  provide too much unnecessary detail </li></ul><ul><li>   The most significant obstacle in usability ...
<ul><li>5   Pictures  provide too much unnecessary detail </li></ul><ul><li>   Eliminate visual traffic. Express  and hig...
<ul><li>4  Pictures need more standards </li></ul><ul><li>   We include pictures in our information “because we  have to”...
<ul><li>3  Pictures are recycled inappropriately </li></ul><ul><li>   We deal with too many media -- and too many file fo...
<ul><li>3  Pictures are recycled inappropriately </li></ul><ul><li>   Engineering schematics or exploded-view diagrams sh...
<ul><li>2  Pictures don’t express their intended meaning </li></ul><ul><li>   Say what you mean </li></ul><ul><li>   Sho...
<ul><li>2  Pictures don’t express their intended meaning </li></ul>To reduce the pressure, turn the relief bolt clockwise.
<ul><li>1  Symbols are the biggest challenge </li></ul><ul><li>   In our usability tests of visual user guides and digita...
<ul><li>1  Symbols are the biggest challenge </li></ul><ul><li>   In our usability tests of visual user guides and digita...
<ul><li>How do we solve these problems? </li></ul><ul><li>   Learn to build picture templates </li></ul><ul><li>   Learn...
2 Templating your pictures <ul><li>Templating your pictures </li></ul><ul><li>   making your visuals consistent </li></ul>2
<ul><li>The problem </li></ul><ul><li>   Pictures are drawn at different sizes, then squeezed into various spaces  </li><...
 
 
<ul><li>The solution: build standard sizes </li></ul><ul><li>   When creating pictures, consider the final destination si...
 
 
<ul><li>Build standard attributes </li></ul><ul><li>   Lines (line weight and colour) </li></ul><ul><li>   Fills (shadin...
<ul><li>Build standard attributes </li></ul><ul><li>   Lines (line weight and colour) </li></ul><ul><li>   Fills (shadin...
<ul><li>The benefits </li></ul><ul><li>   Like your textual information conventions,  customers will become acquainted wi...
<ul><li>Showing what you mean </li></ul><ul><li>   getting your  shift together </li></ul>3
The problem    We build meaningful words, but not meaningful pictures    Pictures often seem to have no purpose    They...
The solution    Plan the picture before “putting pen to paper”    Provide a focus of attention     Ask yourself: What i...
<ul><li>An exercise </li></ul><ul><li>   These instructions describe the assembly of a magazine rack </li></ul><ul><li> ...
<ul><li>Another example </li></ul><ul><li>   What is this visual saying? </li></ul><ul><li>   How would  you suggest imp...
The benefits    If all pictures are meaningful, customers will rely on them to learn    If even one picture is meaningle...
<ul><li>Dealing with flowcharts </li></ul><ul><li>   going with  the flow </li></ul>4
The problem    Often created in applications where “destination size” is not considered    Impossible to fit on a page, ...
The solution    Apply simple template and type attributes to our flow charts    Make it as symmetrical as possible: begi...
The solution    Apply simple template and type attributes to our flow charts    Make it as symmetrical as possible: begi...
The solution    Apply simple template and type attributes to our flow charts    Make it as symmetrical as possible: begi...
The solution    Apply simple template and type attributes to our flow charts    Make it as symmetrical as possible: begi...
<ul><li>Dealing with screenshots </li></ul><ul><li>   making  screens mean </li></ul>5
The problem    Screenshots are usually not very “action-oriented”    For readers, it is difficult to find exactly what i...
The solution    Provide a focus  of attention    Effectively  annotate or label  the screenshot To preview the slide ani...
The solution    Highlight the relevant area To preview the slide animation, click Play.
The solution    Crop the screenshot    To show where you are on the screen, indicate the border or edge To preview the s...
The solution    Crop the screenshot    To show where you are on the screen, indicate the border or edge To preview the s...
<ul><li>Dealing with symbols </li></ul><ul><li>   considering the ka-ka </li></ul><ul><li>of cultural oversights </li></u...
<ul><li>Symbolize the following </li></ul><ul><li>   This is right  + this is wrong </li></ul><ul><li>   Use force (to i...
<ul><li>This is right + this is wrong?  </li></ul>
<ul><li>Use force? </li></ul>
<ul><li>Warning: hot surface?  </li></ul>
<ul><li>In a nutshell </li></ul><ul><li>   In North America, we’ve generally  done a poor job of addressing “cultural reg...
<ul><li>Hand symbols </li></ul>
<ul><li>Hand symbols </li></ul>
<ul><li>Planet Earth </li></ul>
<ul><li>Listings for delis and restaurants </li></ul>
<ul><li>Power switch/ on or off? </li></ul>
<ul><li>Why are  age groups important to consider? </li></ul><ul><li>   The digital information age has expanded our  ran...
<ul><li>Studying younger users </li></ul><ul><li>   Conducted a series of tests with 5- to 15-year olds in the US, Canada...
<ul><li>Television </li></ul>
<ul><li>Telephone </li></ul>
<ul><li>Movie listings or video files </li></ul>
<ul><li>Music files/ audio streams </li></ul>
<ul><li>Write   </li></ul>
<ul><li>Saving a file </li></ul>
<ul><li>The impact of age groups on our work </li></ul><ul><li>   As technology expands, our audiences expand </li></ul><...
? So...    Who’s learned something about intuitive images?
So...    Who’s learned something about intuitive images?
So...    Who’s learned something about intuitive images?    Who thinks I’m a nutter?
So...    Who’s learned something about intuitive images?    Who thinks I’m a nutter?
So...    Who’s learned something about intuitive images?    Who thinks I’m a nutter?    Who thinks I’m charming?
So...    Who’s learned something about intuitive images?    Who thinks I’m a nutter?    Who thinks I’m charming?
Thanks!  #phofmann gplus.to/phof facebook.com/phofmann [email_address]
Upcoming SlideShare
Loading in …5
×

Intuitive images: tips and techniques for creating and evaluating graphics in your products

958 views

Published on

Slides from a workshop delivered by Patrick Hofmann at Technical Communication UK 2011 (20 September).

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
958
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intuitive images: tips and techniques for creating and evaluating graphics in your products

  1. 1. Intuitive images creating and evaluating usable graphics for international audiences Patrick Hofmann UX Designer • Sydney #phofmann gplus.to/phof facebook.com/phofmann [email_address]
  2. 2. <ul><li>Welcome! </li></ul><ul><li> My name is Patrick Hofmann </li></ul><ul><li> For the past 18+ years, I’ve been working as a technical illustrator, visual interaction designer, and usability consultant </li></ul><ul><li> My speciality is visualizing information -- to make products easier to use, and to satisfy global audiences </li></ul>Patrick Hofmann ?
  3. 3. <ul><li>Let’s have fun! </li></ul><ul><li> We have a lot of material to cover in the next 3 hours </li></ul><ul><li> Please try not to talk while I’m talking, or… </li></ul>
  4. 4. <ul><li>Let’s have fun! </li></ul><ul><li> We have a lot of material to cover in the next 3 hours </li></ul><ul><li> Please try not to talk while I’m talking, or… </li></ul> I’m joking! Ask questions, heckle me, whatever...
  5. 5. <ul><li>Icebreaker exercise </li></ul><ul><li> Let’s visualize an instruction </li></ul><ul><li> The client: a resort management company who has built a resort on a remote Polynesian island </li></ul><ul><li> The primary audience: the employees--local residents who have never used a flushing toilet before </li></ul>
  6. 6. <ul><li>Icebreaker exercise </li></ul><ul><li> What usability considerations or issues did we discover? </li></ul>
  7. 7. <ul><li>Agenda </li></ul><ul><li>1 Problems with pictures </li></ul><ul><li>2 Templating pictures </li></ul><ul><li>3 Showing what you mean </li></ul>? !
  8. 8. <ul><li>Agenda </li></ul><ul><li>4 Dealing with </li></ul><ul><li>flowcharts </li></ul><ul><li>5 Dealing with screenshots </li></ul><ul><li>6 Dealing with </li></ul><ul><li>symbols </li></ul>? !
  9. 9. <ul><li>Problems with pictures </li></ul><ul><li> demonstrating the doo-doo </li></ul><ul><li>in doodled information </li></ul>1
  10. 10. <ul><li>Problems with pictures </li></ul><ul><li> Over the past 19+ years, I created and tested a variety of visuals, docs, and products </li></ul><ul><li> Here are my top 5 observations on the execution of pictures </li></ul>
  11. 11. <ul><li>5 Pictures provide too much unnecessary detail </li></ul><ul><li> The most significant obstacle in usability and readability: too much detail too process </li></ul><ul><li> What is this instruction trying to say? </li></ul><ul><li> How would you suggest simplifying it? </li></ul>
  12. 12. <ul><li>5 Pictures provide too much unnecessary detail </li></ul><ul><li> Eliminate visual traffic. Express and highlight the message. </li></ul>
  13. 13. <ul><li>4 Pictures need more standards </li></ul><ul><li> We include pictures in our information “because we have to” </li></ul><ul><li> We build our documents, sites, and interfaces with templates and standards, but not our pictures </li></ul><ul><li> We don’t apply the rules of usable information design into our pictures </li></ul>
  14. 14. <ul><li>3 Pictures are recycled inappropriately </li></ul><ul><li> We deal with too many media -- and too many file formats </li></ul><ul><li> We are encouraged to recycle or re-use the same picture files across many media </li></ul><ul><li> We think about our efficiency, but not the user’s </li></ul><ul><li> e.g. low-res web graphics should not be enlarged and pasted in publications </li></ul>
  15. 15. <ul><li>3 Pictures are recycled inappropriately </li></ul><ul><li> Engineering schematics or exploded-view diagrams should not be re-used to instruct users how to assemble something </li></ul>
  16. 16. <ul><li>2 Pictures don’t express their intended meaning </li></ul><ul><li> Say what you mean </li></ul><ul><li> Show what you mean </li></ul><ul><li> Plan the picture before putting pen to paper </li></ul><ul><li> Provide a focus of attention </li></ul><ul><li> First ask, “What is the message of the picture?” Then, “What do I include/ exclude?” </li></ul>
  17. 17. <ul><li>2 Pictures don’t express their intended meaning </li></ul>To reduce the pressure, turn the relief bolt clockwise.
  18. 18. <ul><li>1 Symbols are the biggest challenge </li></ul><ul><li> In our usability tests of visual user guides and digital interfaces, the key challenge was solving the ambiguity of symbols and icons </li></ul><ul><li> Whatever the nationality of the user, certain icons were consistently misunderstood </li></ul>
  19. 19. <ul><li>1 Symbols are the biggest challenge </li></ul><ul><li> In our usability tests of visual user guides and digital interfaces, the key challenge was solving the ambiguity of symbols and icons </li></ul><ul><li> Whatever the nationality of the user, certain icons were consistently misunderstood </li></ul><ul><li> For example, the symbol for “Audio Card” (as a navigational heading) </li></ul>
  20. 20. <ul><li>How do we solve these problems? </li></ul><ul><li> Learn to build picture templates </li></ul><ul><li> Learn to show what you mean </li></ul><ul><li> Learn to apply these rules to all visuals, including screenshots and flowcharts </li></ul><ul><li> Test, test, test </li></ul><ul><li> Live by these rules as often as you can </li></ul>
  21. 21. 2 Templating your pictures <ul><li>Templating your pictures </li></ul><ul><li> making your visuals consistent </li></ul>2
  22. 22. <ul><li>The problem </li></ul><ul><li> Pictures are drawn at different sizes, then squeezed into various spaces </li></ul><ul><li> When reduced dramatically, the pictures and text are often unreadable </li></ul><ul><li> As the destination sizes change, the text size and line weights change </li></ul>
  23. 25. <ul><li>The solution: build standard sizes </li></ul><ul><li> When creating pictures, consider the final destination size </li></ul><ul><li> If possible, draw at actual size </li></ul><ul><li> For both print and online </li></ul>
  24. 28. <ul><li>Build standard attributes </li></ul><ul><li> Lines (line weight and colour) </li></ul><ul><li> Fills (shading and colour values) </li></ul><ul><li> Text (font, size, style, colour) </li></ul><ul><li> Annotations (line, text, alignment) </li></ul>
  25. 29. <ul><li>Build standard attributes </li></ul><ul><li> Lines (line weight and colour) </li></ul><ul><li> Fills (shading and colour values) </li></ul><ul><li> Text (font, size, style, colour) </li></ul><ul><li> Annotations (line, text, alignment) </li></ul><ul><li>Use these attributes across all types of pictures </li></ul>
  26. 30. <ul><li>The benefits </li></ul><ul><li> Like your textual information conventions, customers will become acquainted with your visual conventions </li></ul><ul><li> They will scan, read, and find meaning in your pictures much more quickly </li></ul>
  27. 31. <ul><li>Showing what you mean </li></ul><ul><li> getting your shift together </li></ul>3
  28. 32. The problem  We build meaningful words, but not meaningful pictures  Pictures often seem to have no purpose  They are too often used to show physical proof — with little meaning
  29. 33. The solution  Plan the picture before “putting pen to paper”  Provide a focus of attention  Ask yourself: What is the message of the picture? What do I include/exclude?  Test the picture by verbalizing what you see
  30. 34. <ul><li>An exercise </li></ul><ul><li> These instructions describe the assembly of a magazine rack </li></ul><ul><li> What is it saying? </li></ul><ul><li> How would you suggest simplifying it? </li></ul><ul><li> Eliminate visual traffic. Express and highlight the message. </li></ul>
  31. 35. <ul><li>Another example </li></ul><ul><li> What is this visual saying? </li></ul><ul><li> How would you suggest improving it? </li></ul>
  32. 36. The benefits  If all pictures are meaningful, customers will rely on them to learn  If even one picture is meaningless, customers will disregard all of them  Focusing on meaning actually saves time in creating the visual; saves customers time in reading
  33. 37. <ul><li>Dealing with flowcharts </li></ul><ul><li> going with the flow </li></ul>4
  34. 38. The problem  Often created in applications where “destination size” is not considered  Impossible to fit on a page, impossible to print or read  Information accuracy overrides readability and usability
  35. 39. The solution  Apply simple template and type attributes to our flow charts  Make it as symmetrical as possible: begin with the main or most positive action as the “stem”  Let everything else branch from that  How would you improve this flowchart?
  36. 40. The solution  Apply simple template and type attributes to our flow charts  Make it as symmetrical as possible: begin with the main or most positive action as the “stem”  Let everything else branch from that  How would you improve this flowchart?
  37. 41. The solution  Apply simple template and type attributes to our flow charts  Make it as symmetrical as possible: begin with the main or most positive action as the “stem”  Let everything else branch from that  How would you improve this flowchart?
  38. 42. The solution  Apply simple template and type attributes to our flow charts  Make it as symmetrical as possible: begin with the main or most positive action as the “stem”  Let everything else branch from that  How would you improve this flowchart?
  39. 43. <ul><li>Dealing with screenshots </li></ul><ul><li> making screens mean </li></ul>5
  40. 44. The problem  Screenshots are usually not very “action-oriented”  For readers, it is difficult to find exactly what is relevant to the instruction  How can we correct this?
  41. 45. The solution  Provide a focus of attention  Effectively annotate or label the screenshot To preview the slide animation, click Play.
  42. 46. The solution  Highlight the relevant area To preview the slide animation, click Play.
  43. 47. The solution  Crop the screenshot  To show where you are on the screen, indicate the border or edge To preview the slide animation, click Play.
  44. 48. The solution  Crop the screenshot  To show where you are on the screen, indicate the border or edge To preview the slide animation, click Play.
  45. 49. <ul><li>Dealing with symbols </li></ul><ul><li> considering the ka-ka </li></ul><ul><li>of cultural oversights </li></ul>6
  46. 50. <ul><li>Symbolize the following </li></ul><ul><li> This is right + this is wrong </li></ul><ul><li> Use force (to install something into place) </li></ul><ul><li> Warning: hot surface </li></ul>
  47. 51. <ul><li>This is right + this is wrong? </li></ul>
  48. 52. <ul><li>Use force? </li></ul>
  49. 53. <ul><li>Warning: hot surface? </li></ul>
  50. 54. <ul><li>In a nutshell </li></ul><ul><li> In North America, we’ve generally done a poor job of addressing “cultural regions” other than our own </li></ul><ul><li> We must consider the meaning of our images (not just words) when localizing into other regions or internationalizing to anyone </li></ul>? !
  51. 55. <ul><li>Hand symbols </li></ul>
  52. 56. <ul><li>Hand symbols </li></ul>
  53. 57. <ul><li>Planet Earth </li></ul>
  54. 58. <ul><li>Listings for delis and restaurants </li></ul>
  55. 59. <ul><li>Power switch/ on or off? </li></ul>
  56. 60. <ul><li>Why are age groups important to consider? </li></ul><ul><li> The digital information age has expanded our range of users </li></ul><ul><li> A 6-year-old and a 96-year-old both use the same product </li></ul><ul><li> We use visuals that do not satisfy all age groups -- especially younger </li></ul>
  57. 61. <ul><li>Studying younger users </li></ul><ul><li> Conducted a series of tests with 5- to 15-year olds in the US, Canada, Switzerland, Australia and New Zealand </li></ul><ul><li> Asked children to sketch specific items or concepts </li></ul><ul><li> Presented a series of “flash cards” to determine their interpretation and overall preferences </li></ul><ul><li> Here are the outcomes </li></ul>
  58. 62. <ul><li>Television </li></ul>
  59. 63. <ul><li>Telephone </li></ul>
  60. 64. <ul><li>Movie listings or video files </li></ul>
  61. 65. <ul><li>Music files/ audio streams </li></ul>
  62. 66. <ul><li>Write </li></ul>
  63. 67. <ul><li>Saving a file </li></ul>
  64. 68. <ul><li>The impact of age groups on our work </li></ul><ul><li> As technology expands, our audiences expand </li></ul><ul><li> As we localise or internationalise our icons, we must look at age </li></ul><ul><li> Like our users, our icons grow old as well </li></ul><ul><li> Test, test, test -- any way you can </li></ul>
  65. 69. ? So...  Who’s learned something about intuitive images?
  66. 70. So...  Who’s learned something about intuitive images?
  67. 71. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?
  68. 72. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?
  69. 73. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?  Who thinks I’m charming?
  70. 74. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?  Who thinks I’m charming?
  71. 75. Thanks! #phofmann gplus.to/phof facebook.com/phofmann [email_address]

×