Isometric overview diagrams can be used to synthesize and present complex information in a form similar to a geographic atlas. Given the pattern and shape of a geographic boundary, the reader can understand a variety of information – natural resources, population, historical events – superimposed on the underlying pattern. In the same way, information about complex data networks can be represented in a series of isometric diagrams superimposed on a similar pattern.

1. Patterns that Connect:
Creating Overview Maps of Complex Data Networks
EuroIA 09, Copenhagen Sept 2009

2. EuroIA | septembre 2009 | 2
Kahn+Associates
— Located in Paris
— Founded in 2002
— By Paul Kahn
— Specializing in information architecture and user interface design

3. EuroIA | septembre 2009 | 3
The K+A services
— Creating & Improving Internet and Intranet Websites
— Designing User Interfaces for Applications
— Mapping Websites for Large Organizations
— Project Management Assistance

4. EuroIA | septembre 2009 | 4
Some of our references
— Institutions — Entreprises
• Institut National de Recherche • Editions P.O.L
et de Sécurité • Berger-Levrault
• Bibliothèque nationale de France • Schlumberger
• French Regional & American • Alcatel-Lucent
Museum Exchange
• L’Oréal
• Institut national de recherches
archéologiques préventives — Research
• Institut de Radioprotection et de • TGE ADONIS
Sûreté Nucléaire
• Agence de l’Eau Seine-
Normandie

5. EuroIA | septembre 2009 | 5
What we are asked to do
— Our assignment may be to
• add new features
• improve the quality or efficiency of existing features
• completely rethink the relationship between information and
audience

6. EuroIA | septembre 2009 | 6
What needs to be communicated
— Websites are agglomerations of sub-structures
• static and dynamic pages
• document databases
• web-based applications
— Combining quantitative and qualitative analysis
• document quantities & types
• classification hierarchy
• navigation options
• content ownership

7. EuroIA | septembre 2009 | 7
Who we communicate with
— Communications
• Concerns: image management, reaching the right audience
— Information Technology
• Concerns: data management, compatibility
— Content Publishers
• Concerns: content quality and production
— Researchers
• Concerns: scientific communication

8. EuroIA | septembre 2009 | 8
Communicating analysis
— Communicating the analysis of complex data networks requires the
capture of both quantitative and qualitative information.
— The structure of the information is a subtle relationship between the
classification hierarchies used by the client, often thought of as tree
structures, and navigational options presented to the user.
— Analysis often reveals other important layer: the impact of the client’s
organization structure on the data.

9. EuroIA | septembre 2009 | 9
Overview diagrams
— The overview diagram communicates a visual synthesis to the entire
team
— It is intended to provide a common mental model
— To produce overview diagrams, we used a variety of visual techniques:
• isometric grid that support X, Y and Z axis
• two-dimensional table synthesizing X and Y axis
• flow diagrams
• a range of color and symbol systems

10. EuroIA | septembre 2009 | 10
Applications of isometric projection for visualizing web sites
— Card
• skewed at 30° to surface
of XY grid
— Box or Carpet
• color fill of surface plane
• metaphor of “slide tray”
see “Applications of isometric
projection for visualizing web
sites” Paul Kahn, Krzysztof
Lenk, and Piotr Kaczmarek,
Information Design Journal,
Vol. 1 No. 3 2002.

11. EuroIA | septembre 2009 | 11
— Text/Image on Card
• Skew of surface makes it
difficult to read
• Overlap of cards
compresses space
required

12. EuroIA | septembre 2009 | 12
— Carpets
• Color of carpet groups
cards
• Height of carpet
distinguishes groups

13. EuroIA | septembre 2009 | 13
— Lines
• Lines represent
navigational links
• Lines can connect from
card to carpet, carpet to
carpet, card to card

14. EuroIA | septembre 2009 | 14
— Combination of elements
• Color for pages involved
in process
• Different lines for link
types
• Numbers for sequence
of process

15. EuroIA | septembre 2009 | 15
The client and the task
— Client: Institut national de recherche et de sécurité (INRS)
• French national agency responsible for improving the health and
safety of workers
• publisher of health and safety literature designed for libraries and
the workplace
• audiences include professionals in occupational medicine, worker
safety, labor law, and business owners and workers
— Task: Improve the organization and navigation of the website
• make the content easier to locate, navigate and use
• make the site useful for safety professionals and for workers and
managers

16. EuroIA | septembre 2009 | 16
Task: Improve the organization and
navigation of the INRS website
— Primary goals
• Organize the site to reach a wider and more diverse audience
• Improve information “findability” for this diverse audience
— Secondary goals
• Capitalize on a rich document content already produced by the
client
• Improve the legibility and accessibility of publications on the
website
• Make the site useful and interesting to the professional medical
community and at the same time address the concerns of the small
business director

17. EuroIA | septembre 2009 | 17
Helping client change their way of
thinking
— Current site is organized like a library reading room
— Mediated by telephone-based reference specialists who translated a user’s
question into a list of documents.

18. EuroIA | septembre 2009 | 18

19. EuroIA | septembre 2009 | 19
Content inventory

20. EuroIA | septembre 2009 | 20

21. EuroIA | septembre 2009 | 21
An underlying pattern
— The “floor” of the map represented the underlying pattern of the website
organization.
— This shape evolved during the discussion.
— We could overlay additional variables on this pattern.
— This is similar to how different views of a country are presented in a
geographic atlas.
— Given the pattern and shape of a geographic boundary, the reader can
understand a variety of information – natural resources, population,
historical events – superimposed on the underlying pattern

22. EuroIA | septembre 2009 | 22
Five dimensions to highlight
Interviews revealed five important dimensions where change was needed
— internal divisions / ownership of the sections
— different database technologies used
— quantity of subsection headings and overall quantity of documents
— instances of content appearing in more than one section
— different search indexes and search interfaces

23. EuroIA | septembre 2009 | 23
Mind map constructed during interview

24. EuroIA | septembre 2009 | 24
Structure of the existing website
— The user was presented with the internal organization of INRS, not the
themes of the information they were seeking.
— The site was organized at three levels:
• first by department,
• second by types of documents (training, publications, posters,
magazines, databases),
• third by alphabet.

25. EuroIA | septembre 2009 | 25
Series of isometric maps

26. EuroIA | septembre 2009 | 26
Series of isometric maps
1. Color is used to illustrate how content organization follows internal
editorial divisions. Each editorial division presented the content by type of
media. Quantities of subtitles and total number of documents for each
section are used to illustrate the imbalance between subtitles to
documents.
2. Flags are used to illustrate the diversity of technologies used to manage
databases and editorial process
3. Color is used to illustrate the small portions of the Website translated in
English

27. EuroIA | septembre 2009 | 27
Series of isometric maps
4. Vectors are used to illustrate duplication of content
5. Color and symbols are used to illustrate how the content is partitioned
among numerous search systems
6. Color and shadows are used to identify the most commonly downloaded
documents and the technique

28. EuroIA | septembre 2009 | 28

29. EuroIA | septembre 2009 | 29

30. EuroIA | septembre 2009 | 30

31. EuroIA | septembre 2009 | 31

32. EuroIA | septembre 2009 | 32

33. EuroIA | septembre 2009 | 33

34. EuroIA | septembre 2009 | 34

35. EuroIA | septembre 2009 | 35

36. EuroIA | septembre 2009 | 36

37. EuroIA | septembre 2009 | 37

38. EuroIA | septembre 2009 | 38
Structure of the new website
— We developed six user profiles by synthesizing information from client
and user interviews
— We built a new editorial structure collectively with the client, playing
advocate for the user profiles
— We used a flat tree diagram as support for topic/sub-topic decision
discussions

39. EuroIA | septembre 2009 | 39

40. EuroIA | septembre 2009 | 40

41. EuroIA | septembre 2009 | 41

42. EuroIA | septembre 2009 | 42
Structure of the new website: docs
— The comparison between the existing system and the recommended
changes were easier to understand when presented in the same isometric
visual language:
1. One department (yellow) is responsible for the content on the website and
in charge of collecting the material from the other departments (other
colors)
2. The entrances to the website are by topics (gray)
3. All the documents are in a catalog section, stored in a single CMS (red
flag)

43. EuroIA | septembre 2009 | 43
Structure of the new website: docs
4. The different media (video, publications, posters, databases) are selected
to populate the topic pages and subpages (slide trays)
5. One simple search will find information everywhere in the website (blue
outline)
6. An advanced search interface can be used to located specific documents in
the databases (black flag and blue-gray carpet)

44. EuroIA | septembre 2009 | 44

45. EuroIA | septembre 2009 | 45
7.1 Les documents sont rangés dans la rubrique
« Produits et services », lieu de stockage du futur CMS

46. EuroIA | septembre 2009 | 46
7.1 Les documents sont associés à des sujets de l’arborescence et viennent
les illustrer

47. EuroIA | septembre 2009 | 47
Structure of the new website: staff
— Details of the topic and subtopics were removed in favor of symbols for
the staff from each department.
— The color system was re-used.
— Vectors were added to illustrate the staff roles in editing and publishing
the different collections, under the direction of new roles for the director
and editor of the website itself.

48. EuroIA | septembre 2009 | 48

49. EuroIA | septembre 2009 | 49
Conclusions
— Isometric diagrams can be very effective for presenting overviews of
websites
— The power of a series of isometric maps can be compared to a series of
geographic maps in an atlas: repeated ground patterns connect a variety of
details
— There are no automatic tools for creating isometric tree structures
because the appropriate algorithm varies a great deal depending on the
nature of the data and the goals of the visualization