Intuitive images: tips and techniques for creating and evaluating graphics in your products
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 946 views

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

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

Statistics

Views

Total Views
946
Views on SlideShare
945
Embed Views
1

Actions

Likes
0
Downloads
37
Comments
0

1 Embed 1

http://www.docshut.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Intuitive images creating and evaluating usable graphics for international audiences Patrick Hofmann UX Designer • Sydney #phofmann gplus.to/phof facebook.com/phofmann [email_address]
    • Welcome!
    •  My name is Patrick Hofmann
    •  For the past 18+ years, I’ve been working as a technical illustrator, visual interaction designer, and usability consultant
    •  My speciality is visualizing information -- to make products easier to use, and to satisfy global audiences
    Patrick Hofmann ?
    • Let’s have fun!
    •  We have a lot of material to cover in the next 3 hours
    •  Please try not to talk while I’m talking, or…
    • Let’s have fun!
    •  We have a lot of material to cover in the next 3 hours
    •  Please try not to talk while I’m talking, or…
     I’m joking! Ask questions, heckle me, whatever...
    • Icebreaker exercise
    •  Let’s visualize an instruction
    •  The client: a resort management company who has built a resort on a remote Polynesian island
    •  The primary audience: the employees--local residents who have never used a flushing toilet before
    • Icebreaker exercise
    •  What usability considerations or issues did we discover?
    • Agenda
    • 1 Problems with pictures
    • 2 Templating pictures
    • 3 Showing what you mean
    ? !
    • Agenda
    • 4 Dealing with
    • flowcharts
    • 5 Dealing with screenshots
    • 6 Dealing with
    • symbols
    ? !
    • Problems with pictures
    •  demonstrating the doo-doo
    • in doodled information
    1
    • Problems with pictures
    •  Over the past 19+ years, I created and tested a variety of visuals, docs, and products
    •  Here are my top 5 observations on the execution of pictures
    • 5 Pictures provide too much unnecessary detail
    •  The most significant obstacle in usability and readability: too much detail too process
    •  What is this instruction trying to say?
    •  How would you suggest simplifying it?
    • 5 Pictures provide too much unnecessary detail
    •  Eliminate visual traffic. Express and highlight the message.
    • 4 Pictures need more standards
    •  We include pictures in our information “because we have to”
    •  We build our documents, sites, and interfaces with templates and standards, but not our pictures
    •  We don’t apply the rules of usable information design into our pictures
    • 3 Pictures are recycled inappropriately
    •  We deal with too many media -- and too many file formats
    •  We are encouraged to recycle or re-use the same picture files across many media
    •  We think about our efficiency, but not the user’s
    •  e.g. low-res web graphics should not be enlarged and pasted in publications
    • 3 Pictures are recycled inappropriately
    •  Engineering schematics or exploded-view diagrams should not be re-used to instruct users how to assemble something
    • 2 Pictures don’t express their intended meaning
    •  Say what you mean
    •  Show what you mean
    •  Plan the picture before putting pen to paper
    •  Provide a focus of attention
    •  First ask, “What is the message of the picture?” Then, “What do I include/ exclude?”
    • 2 Pictures don’t express their intended meaning
    To reduce the pressure, turn the relief bolt clockwise.
    • 1 Symbols are the biggest challenge
    •  In our usability tests of visual user guides and digital interfaces, the key challenge was solving the ambiguity of symbols and icons
    •  Whatever the nationality of the user, certain icons were consistently misunderstood
    • 1 Symbols are the biggest challenge
    •  In our usability tests of visual user guides and digital interfaces, the key challenge was solving the ambiguity of symbols and icons
    •  Whatever the nationality of the user, certain icons were consistently misunderstood
    •  For example, the symbol for “Audio Card” (as a navigational heading)
    • How do we solve these problems?
    •  Learn to build picture templates
    •  Learn to show what you mean
    •  Learn to apply these rules to all visuals, including screenshots and flowcharts
    •  Test, test, test
    •  Live by these rules as often as you can
  • 2 Templating your pictures
    • Templating your pictures
    •  making your visuals consistent
    2
    • The problem
    •  Pictures are drawn at different sizes, then squeezed into various spaces
    •  When reduced dramatically, the pictures and text are often unreadable
    •  As the destination sizes change, the text size and line weights change
  •  
  •  
    • The solution: build standard sizes
    •  When creating pictures, consider the final destination size
    •  If possible, draw at actual size
    •  For both print and online
  •  
  •  
    • Build standard attributes
    •  Lines (line weight and colour)
    •  Fills (shading and colour values)
    •  Text (font, size, style, colour)
    •  Annotations (line, text, alignment)
    • Build standard attributes
    •  Lines (line weight and colour)
    •  Fills (shading and colour values)
    •  Text (font, size, style, colour)
    •  Annotations (line, text, alignment)
    • Use these attributes across all types of pictures
    • The benefits
    •  Like your textual information conventions, customers will become acquainted with your visual conventions
    •  They will scan, read, and find meaning in your pictures much more quickly
    • Showing what you mean
    •  getting your shift together
    3
  • 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
  • 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
    • An exercise
    •  These instructions describe the assembly of a magazine rack
    •  What is it saying?
    •  How would you suggest simplifying it?
    •  Eliminate visual traffic. Express and highlight the message.
    • Another example
    •  What is this visual saying?
    •  How would you suggest improving it?
  • 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
    • Dealing with flowcharts
    •  going with the flow
    4
  • 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
  • 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?
  • 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?
  • 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?
  • 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?
    • Dealing with screenshots
    •  making screens mean
    5
  • 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?
  • The solution  Provide a focus of attention  Effectively annotate or label the screenshot To preview the slide animation, click Play.
  • 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 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 slide animation, click Play.
    • Dealing with symbols
    •  considering the ka-ka
    • of cultural oversights
    6
    • Symbolize the following
    •  This is right + this is wrong
    •  Use force (to install something into place)
    •  Warning: hot surface
    • This is right + this is wrong?
    • Use force?
    • Warning: hot surface?
    • In a nutshell
    •  In North America, we’ve generally done a poor job of addressing “cultural regions” other than our own
    •  We must consider the meaning of our images (not just words) when localizing into other regions or internationalizing to anyone
    ? !
    • Hand symbols
    • Hand symbols
    • Planet Earth
    • Listings for delis and restaurants
    • Power switch/ on or off?
    • Why are age groups important to consider?
    •  The digital information age has expanded our range of users
    •  A 6-year-old and a 96-year-old both use the same product
    •  We use visuals that do not satisfy all age groups -- especially younger
    • Studying younger users
    •  Conducted a series of tests with 5- to 15-year olds in the US, Canada, Switzerland, Australia and New Zealand
    •  Asked children to sketch specific items or concepts
    •  Presented a series of “flash cards” to determine their interpretation and overall preferences
    •  Here are the outcomes
    • Television
    • Telephone
    • Movie listings or video files
    • Music files/ audio streams
    • Write
    • Saving a file
    • The impact of age groups on our work
    •  As technology expands, our audiences expand
    •  As we localise or internationalise our icons, we must look at age
    •  Like our users, our icons grow old as well
    •  Test, test, test -- any way you can
  • ? 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]