Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Â
User-Centered Information Design
1. User-Centered
Information & Diagram Design
How to Make Lasagna
Instead of Spaghetti
Noah P. N. Iliinsky
InfoCamp Seattle
September 27th and 28th, 2008
2. =
=
?
Spaghetti and Lasagna Diagrams (Linkbat, n. d.; UNL, n. d.; Vittlesvamp, n. d.)
4. ⢠Why is more complexity diďŹcult?
⢠there are a ďŹnite number of visual properties to
use to encode knowledge
⢠encoding more knowledge makes selecting
properties more diďŹcult
⢠Why are qualitative relationships diďŹcult to
represent?
⢠fewer conventions than with quantitative
relationships
⢠the author must convey metaphor as well as
message
5. Intentional choices are superior to arbitrary choices.
How do you make good, intentional choices?
⢠Your Goals
[DiďŹerent Goals Require DiďŹerent 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]
6. The Diagram Design Process
⢠DeďŹnition of goals and needs
⢠Selection of content
⢠Encoding and placement of content
⢠axes
⢠nodes
⢠links
7. Your Goals
[DiďŹerent Goals Require DiďŹerent Methods]
â˘Inform / Educate
â˘Broad overview?
⢠Focused detail?
⢠Persuade
⢠Get a raise?
⢠Protest war?
10. ⢠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
11. 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
14. 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
15. Axes give you information for free!
(and it contributes in two diďŹerent ways)
18. 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 diďŹerent should look diďŹerent
⢠preserve order in placement and lists
23. ⢠too much information
⢠no clear goal
⢠arbitrary placement
⢠doesnât consider my needs
⢠semi-consistent encoding
(Poyser, n. d.)
24. Thank you!
Full thesis available at ComplexDiagrams.com
Please send thoughts, questions, or interesting data sets to
gmail: iliinsky
â˘Community Mesh. (2003). Community Mesh diagram. Retrieved February 7, 2005, from http://www.communitymesh.com/images/diagram.jpg
â˘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 http://www.ice.org.uk/downloads/EK_contribution_to_ICE Strategy.pdf
â˘Linkbat. (n. d.). Entity Relationship Diagram. Retrieved November 18, 2004, from http://www.linux-tutorial.info /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://
www.edwardtufte.com/tufte/graphics/minard_lg.gif
â˘Poyser, M. (n. d.). Wall Street Follies diagram. Retrieved February 22, 2005, from http://www.wallstreetfollies.com/diagrams.htm
â˘UNL Lancaster. (n. d.). spaghetti.jpg. Retrieved March 16, 2006, from http://www.bartlett.ucl.ac.uk/planning/programmes/BSc%20diagram.jpg
â˘USNS Niagra Falls. (n. d.) ORG CHART.JPG. Retrieved January 13, 2006, from http://www.msc.navy.mil/niagarafalls/Life%20Onboard_ďŹles/ORG%20CHART.JPG
â˘Vittlesvamp. (n. d.). lasagna.jpg. Retrieved March 16, 2006, from http://www.vittlesvamp.com/images/lasagna.jpg
â˘Votemaster. (2008). Electoral Votes Cartogram. Retrieved September 27, 2008, from http://www.electoral-vote.com/evp2008/Pres/Carto/Sep27-c.html
â˘Votemaster. (2008). Electoral Votes Map. Retrieved September 27, 2008, from http://www.electoral-vote.com/evp2008/Pres/Maps/Sep27.html
â˘Werschkul, B. (2004). Election Results Graphic. Retrieved September 27, 2008, from http://www.nytimes.com/packages/html/politics/2004_ELECTIONRESULTS_GRAPHIC/
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.