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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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

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.

EuroIA | septembre 2009 | 18

EuroIA | septembre 2009 | 19 Content inventory

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

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

EuroIA | septembre 2009 | 23 Mind map constructed during interview

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.

EuroIA | septembre 2009 | 25 Series of isometric maps

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

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

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

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)

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)

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

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

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.

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

http://marcelzimmermann.wordpress.com	12
http://www.slideshare.net	12
http://paper.li	1

Patterns That Connect

by Paul Kahn

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 25

Statistics

Patterns That Connect Presentation Transcript