Patterns That Connect

Patterns that Connect:

Creating Overview Maps of Complex Data Networks

EuroIA 09, Copenhagen Sept 2009

EuroIA | septembre 2009 | 2

Kahn+Associates

— Located in Paris

— Founded in 2002

— By Paul Kahn

— Specializing in information architecture and user interface design


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 — 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


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

Patterns That Connect

Recommandé

Recommandé

Contenu connexe

Similaire à Patterns That Connect

Similaire à Patterns That Connect (20)

Plus de Paul Kahn

Plus de Paul Kahn (20)

Dernier

Dernier (20)

Patterns That Connect