User-Centered Information Design

0 %
100 %
Information about User-Centered Information Design

Published on October 15, 2008

Author: iliinsky



User-Centered Information & Diagram Design: How to Make Lasagna Instead of Spaghetti
From Infocamp 2008, day 2, Seattle WA

User-Centered Information & Diagram Design How to Make Lasagna Instead of Spaghetti Noah P. N. Iliinsky InfoCamp Seattle September 27th and 28th, 2008

= = ? Spaghetti and Lasagna Diagrams (Linkbat, n. d.; UNL, n. d.; Vittlesvamp, n. d.)

A Simple Diagram (USNS Niagra Falls, n.d.)

• Why is more complexity difficult? • there are a finite number of visual properties to use to encode knowledge • encoding more knowledge makes selecting properties more difficult • Why are qualitative relationships difficult to represent? • fewer conventions than with quantitative relationships • the author must convey metaphor as well as message

Intentional choices are superior to arbitrary choices. How do you make good, intentional choices? • Your Goals [Different Goals Require Different Methods] • Their Needs [Audience Brings Context With Them] • What to Include [Principle of Information Availability] • Where to Put It [Principle of Semantic Distance] • How Does it Look [Principle of Informative Changes]

The Diagram Design Process • Definition of goals and needs • Selection of content • Encoding and placement of content • axes • nodes • links

Your Goals [Different Goals Require Different Methods] •Inform / Educate •Broad overview? • Focused detail? • Persuade • Get a raise? • Protest war?

Different goals require different methods (Votemaster, 2008) (Werschkul, 2004)

Their Needs [Audience Brings Context With Them] = You Them

• Their Needs [Audience Brings Context With Them] • accounts for the needs of the diagram user • the design of the diagram must address its use • Understanding context is critical • facilitates learning and acceptance • applies to every phase of the diagram design process • includes inherent and learned contexts

What to Include [Principle of Information Availability] • only present necessary information • redundant encoding is good • more detail can be good or bad • extraneous decoration is usually bad

Redundant Encoding (Community Mesh, 2003)

No Redundant Encoding

Where to Put It [Principle of Semantic Distance] • people ascribe meaning to location • relative placement matters • absolute placement matters • lines & boxes join or divide groups A B

Axes give you information for free! (and it contributes in two different ways)

Lack of axes gives you spaghetti!

Abstracted spatial relationships (Moscow Metro Map, n. d.)

How Does it Look [Principle of Informative Changes] • people will detect patterns, and ascribe meaning to patterns and pattern violations • Implications: Consistency! • establish patterns and stick with them • things that are the same should look the same • things that are different should look different • preserve order in placement and lists

Consistent, differentiable encodings

A diagram with arbitrary design choices

A diagram with intentional design choices

• too much information • no clear goal • arbitrary placement • doesn’t consider my needs • semi-consistent encoding (Poyser, n. d.)

Thank you! Full thesis available at Please send thoughts, questions, or interesting data sets to gmail: iliinsky •Community Mesh. (2003). Community Mesh diagram. Retrieved February 7, 2005, from •Horton, W. (1991). Illustrating Computer Documentation: the Art of Presenting Information Graphically on Paper and Online. New York: John Wiley & Sons, Inc. •Kosslyn, S. M. (1994). Elements of Graph Design. New York: W. H. Freeman and Co. •Leiper, Q. (2003). ICEngineering Knowledge. Retrieved September 16, 2004, from Strategy.pdf •Linkbat. (n. d.). Entity Relationship Diagram. Retrieved November 18, 2004, from /Linkbat/Development/ERD.png •McNamara, T. P. (1986). Mental representations of spatial relations. Cognitive Psychology, 18, 87-121. •Minard, C. J. (1861). Figurative chart of the successive losses of men of the French Army in the countryside of Russia. Retrieved February 8, 2005, from http:// •Poyser, M. (n. d.). Wall Street Follies diagram. Retrieved February 22, 2005, from •UNL Lancaster. (n. d.). spaghetti.jpg. Retrieved March 16, 2006, from •USNS Niagra Falls. (n. d.) ORG CHART.JPG. Retrieved January 13, 2006, from •Vittlesvamp. (n. d.). lasagna.jpg. Retrieved March 16, 2006, from •Votemaster. (2008). Electoral Votes Cartogram. Retrieved September 27, 2008, from •Votemaster. (2008). Electoral Votes Map. Retrieved September 27, 2008, from •Werschkul, B. (2004). Election Results Graphic. Retrieved September 27, 2008, from index.html •Williams, T. R. (2000, August). Guidelines for Designing and Evaluating the Display of Information on the Web [Electronic Version]. Technical Communication, 47, 383-396. •Winn, W. D. & Holliday, W. G. (1982). Design Principles for Diagrams and Charts. In D. Jonassen (Ed.), The Technology of Text (pp. 277-299). Englewood Cliffs: Educational Technology Publications.

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

User-centered design - Wikipedia, the free encyclopedia

User-centered design ... The ISO standard describes 6 key principles that will ensure a design is user centered: ... Information design; Instructional design;
Read more

Notes on User Centered Design Process (UCD)

NOTE: This page is a collection of notes on user-centered design process (UCD). It is not intended to be comprehensive, and listing of any information here ...
Read more

User Centered

Ein Blog über Usability, User Centered Design, User Experience und verwandte Anglizismen
Read more

Nutzerorientierte Gestaltung – Wikipedia

Im Englischen wird dieses Vorgehen als User Centered Design ... Während der Analyse des Nutzungskontextes werden Informationen über die zukünftigen ...
Read more

User Centered Design - Für bessere Webseiten!

User Centered Design ... Allgemeine Informationen. Das User Centered Design ist heutzutage eines der wichtigsten Paradigmen in der Softwareentwicklung.
Read more

User Centered Information Design for Improved Software ...

Pradeep Henry - User Centered Information Design for Improved Software Usability (Artech House Computer jetzt kaufen. ISBN: 9780890069462, Fremdsprachige ...
Read more

User-centered Information Design for Improved Software ...

Pradeep Henry - [(User-centered Information Design for Improved Software Usability )] jetzt kaufen. Kundrezensionen und 0.0 Sterne. …
Read more

Usability First - Introduction to User-Centered Design ...

User-centered design or ucd is the process of designing a tool such as a website or application user interface from the perspective of how it will be ...
Read more

User-centred design — Government Service Design Manual

User-centred design in alpha and beta Combining design and research to create user-focused services; ... Services and information. Benefits; Births, deaths
Read more

Ergosign - Prozessübersicht ‹ Leistungen ‹ Service

Sobald die Projektdefinition vorliegt, erarbeiten wir einen individuellen Ablaufplan innerhalb der Leitplanken des User Centered Design Life Cycle.
Read more