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

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]

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

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

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

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

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?

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?

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?

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?

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?

45. The solution  Provide a focus of attention  Effectively annotate or label the screenshot To preview the slide animation, click Play.

46. The solution  Highlight the relevant area To preview the slide animation, click Play.

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.

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.

69. ? So...  Who’s learned something about intuitive images?

70. So...  Who’s learned something about intuitive images?

71. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?

72. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?

73. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?  Who thinks I’m charming?

74. So...  Who’s learned something about intuitive images?  Who thinks I’m a nutter?  Who thinks I’m charming?

75. Thanks! #phofmann gplus.to/phof facebook.com/phofmann [email_address]