Patterns That Connect

Patterns that Connect:

Creating Overview Maps of Complex Data Networks

EuroIA 09, Copenhagen Sept 2009

Kahn+Associates

— Located in Paris

— Founded in 2002

— By Paul Kahn

— Specializing in information architecture and user interface design

EuroIA | septembre 2009 | 2

The K+A services

— Creating & Improving Internet and Intranet Websites

— Designing User Interfaces for Applications

— Mapping Websites for Large Organizations

— Project Management Assistance


Some of our references

— Institutions

• Institut National de Recherche et de Sécurité

• Bibliothèque nationale de France

• French Regional & American Museum Exchange

• Institut national de recherches archéologiques préventives

• Institut de Radioprotection et de Sûreté Nucléaire

• Agence de l’Eau Seine-Normandie

— Entreprises

• Editions P.O.L

• Berger-Levrault

• Schlumberger

• Alcatel-Lucent

• L’Oréal

— Research

• TGE ADONIS


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


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


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


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.


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



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.


— Text/Image on Card

• Skew of surface makes it difficult to read

• Overlap of cards compresses space required


— Carpets

• Color of carpet groups cards

• Height of carpet distinguishes groups


— Lines

• Lines represent navigational links

• Lines can connect from card to carpet, carpet to carpet, card to card


— Combination of elements

• Color for pages involved in process

• Different lines for link types

• Numbers for sequence of process

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


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


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.




Content inventory


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


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



Mind map constructed during interview

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.


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



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












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





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)


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)




7.1 Les documents sont rangés dans la rubrique « Produits et services », lieu de stockage du futur CMS


7.1 Les documents sont associés à des sujets de l’arborescence et viennent les illustrer

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.



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
