Designing Visually Explicit Information

A checklist for better information design, tips on how to sell your design, numerous references to books and people for learning more, a few professional habits one should acquire, and intriguing insights from the field of psychology - all in a half-day, engaging workshop on Wednesday at the IA summit. What more can an information architect ask for?!

This workshop was given by Travis Isaacs and Stephen P. Anderson on March 18, 2009 at the IA Summit in Memphis, TN. Stephen is also giving a Sunday presentation around brunchtime, Art & Science of Seductive Interactions, that is likely to be as seductive as this workshop.

 

Checklist for better information design

These steps can be applied to ANY format of deliverable (spreadsheet, spinach preparation instructions, presentations, tattoo health inspection form, wireframes, etc.)

Frame

  • Define the scenario (who needs what, mine the details)
  • Identify the nodes of information (avoid falling into default thinking)

Prepare

These steps occur on paper

  • Organize to reduce complexity (sort, label, integrate, prioritize)
  • Remove or de-emphasize unnecessary (redundant, self-evident, unused, unhelpful) information
  • Emphasize the most important information and Minimize the least important (apply the squint test)
  • Hide non-critical/complex information

Add & Modify

  • Display information visually (would a child understand it?)
    • replace or reinforce text with visuals
    • make relationships visually explicit
    • suggest content/function with visual
    • display data visually
  • Use task-based, conversational language: writing for the web and technical writing skills
  • Tighten it all up: good graphic design principles (grid alignment; typography; whitespace; contrast)

Test

  • Ensure it's flexible (test dynamic data for different scenarios, lengths, content types). Check out Dan Brown's design rules for good ideas.
  • Create a consistent visual language

 

Professional skills

Skills and habits it would be helpful to have or develop:

  • Technical/business writing (writing for web)
  • Prototyping in Keynote or PowerPoint
  • CAPTURE/Collect Examples of good and bad information design
  • Learn storytelling skills for presentations and documentation

 

Insights from psychology, etc.

Gestalt Psychology "Laws"

  1. Proximity (if it's close, it's related)
  2. Closure (if it's in the same enclosure, it's related)
  3. Similarity (if it looks alike, it's alike)
  4. Figure-Ground (distinguish a figure from ground)
  5. Continuation (perceive a line as continuing in established direction)

Other, random tips

  • Usability DEcreases FRICTION, but Psychology teaches us we also need to INcrease MOTIVATION.
  • We need to translate academic research in social psychology, cognitive science, etc. into applicable design principles.
  • Cognitive science lesson = humans think in images/pictures/visually
  • Rhetorical/Persuasive/Seductive design (see Stephen's talk and the Rhetorical Navigation concept from the Navigation pyramid

 

Selling information design

Basically, this is telling a story during your presentations and about your documents/design decisions. Employ story components in presentations

  • protagonist (your client)
  • antagonist (their competitors)
  • analogy
  • plot (what led you to your design conclusions)
  • theme (main take away)

Other story-telling tips:

  • Start structurally, NOT visually
  • Use images to illustrate
  • Compare to similar industries (not just indiv. companies)
  • Offer supporting behaviors from your UX research
  • Walk client through your thought processes to conclusion
  • Share anecdotes from usability tests (fresh eyes to regular users)
  • Advocate for both the client's ROI and for user's ROI (motivation)
  • Focus on VALUE
  • Tailor to your audience's context/needs

 

References

Books & People

Websites

  • InfoPogo - browse detailed census, demographic, population, and crime information about cities, states, counties, zip codes.
  • 37signals - blog by web app team
  • Viewzi - Travis & Stephen's interesting work on making search more visual
  • Songzas - music search engine and internet jukebox