SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
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 | 20
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 | 28
EuroIA | septembre 2009 | 29
EuroIA | septembre 2009 | 30
EuroIA | septembre 2009 | 31
EuroIA | septembre 2009 | 32
EuroIA | septembre 2009 | 33
EuroIA | septembre 2009 | 34
EuroIA | septembre 2009 | 35
EuroIA | septembre 2009 | 36
EuroIA | septembre 2009 | 37
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 | 39
EuroIA | septembre 2009 | 40
EuroIA | septembre 2009 | 41
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 | 44
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 | 48
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
Patterns That  Connect

Contenu connexe

Similaire à Patterns That Connect

GAMA - Europeana en de digitale ontsluiting van cultureel erfgoed
GAMA - Europeana en de digitale ontsluiting van cultureel erfgoedGAMA - Europeana en de digitale ontsluiting van cultureel erfgoed
GAMA - Europeana en de digitale ontsluiting van cultureel erfgoedEuropeanaLocal Project
 
Europeana Creative. EDM Endpoint. Custom Views
Europeana Creative. EDM Endpoint. Custom ViewsEuropeana Creative. EDM Endpoint. Custom Views
Europeana Creative. EDM Endpoint. Custom ViewsVladimir Alexiev, PhD, PMP
 
Shaping the EOSC Portal - future vision for EOSC Hub
Shaping the EOSC Portal - future vision for EOSC Hub Shaping the EOSC Portal - future vision for EOSC Hub
Shaping the EOSC Portal - future vision for EOSC Hub EOSC-hub project
 
OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...
OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...
OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...Stefan Buddenbohm
 
in Europeana and the projects
in Europeana and the projectsin Europeana and the projects
in Europeana and the projectsEuropeanaConnect
 
Knowledge Technologies group at Cefriel
Knowledge Technologies group at CefrielKnowledge Technologies group at Cefriel
Knowledge Technologies group at CefrielIrene Celino
 
MyScienceWork's presentation with Ined at the 14th International Open Reposit...
MyScienceWork's presentation with Ined at the 14th International Open Reposit...MyScienceWork's presentation with Ined at the 14th International Open Reposit...
MyScienceWork's presentation with Ined at the 14th International Open Reposit...PhuongNGUYENMinh13
 
INSPIRE data scope
INSPIRE data scopeINSPIRE data scope
INSPIRE data scopeinspireeu
 
ODALA_FIWARE_Summit_23.pptx
ODALA_FIWARE_Summit_23.pptxODALA_FIWARE_Summit_23.pptx
ODALA_FIWARE_Summit_23.pptxFIWARE
 
IX-F Database and Tool
IX-F Database and ToolIX-F Database and Tool
IX-F Database and ToolAPNIC
 
Europeana Cloud factsheet
Europeana Cloud factsheetEuropeana Cloud factsheet
Europeana Cloud factsheetEuropeana
 
Summary of Day 1
Summary of Day 1Summary of Day 1
Summary of Day 1Europeana
 
Promoting Austrian Cultural and Scientific Heritage via EUROPEANA
Promoting Austrian Cultural and Scientific Heritage via EUROPEANAPromoting Austrian Cultural and Scientific Heritage via EUROPEANA
Promoting Austrian Cultural and Scientific Heritage via EUROPEANAEuropeanaConnect
 
LoCloud: Local Content in a Europeana Cloud
LoCloud: Local Content in a Europeana CloudLoCloud: Local Content in a Europeana Cloud
LoCloud: Local Content in a Europeana Cloudlocloud
 
ALIADA Project. AtCult
ALIADA Project. AtCultALIADA Project. AtCult
ALIADA Project. AtCultaliada project
 
3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...
3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...
3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...CARARE
 

Similaire à Patterns That Connect (20)

GAMA - Europeana en de digitale ontsluiting van cultureel erfgoed
GAMA - Europeana en de digitale ontsluiting van cultureel erfgoedGAMA - Europeana en de digitale ontsluiting van cultureel erfgoed
GAMA - Europeana en de digitale ontsluiting van cultureel erfgoed
 
Europeana Creative. EDM Endpoint. Custom Views
Europeana Creative. EDM Endpoint. Custom ViewsEuropeana Creative. EDM Endpoint. Custom Views
Europeana Creative. EDM Endpoint. Custom Views
 
Shaping the EOSC Portal - future vision for EOSC Hub
Shaping the EOSC Portal - future vision for EOSC Hub Shaping the EOSC Portal - future vision for EOSC Hub
Shaping the EOSC Portal - future vision for EOSC Hub
 
OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...
OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...
OA Network: Heading for Joint Standards and Enhancing Cooperation: Value‐Adde...
 
in Europeana and the projects
in Europeana and the projectsin Europeana and the projects
in Europeana and the projects
 
Knowledge Technologies group at Cefriel
Knowledge Technologies group at CefrielKnowledge Technologies group at Cefriel
Knowledge Technologies group at Cefriel
 
Sesa
SesaSesa
Sesa
 
Towards a Common Approach for Access to Digital Archival Records in Europe. A...
Towards a Common Approach for Access to Digital Archival Records in Europe. A...Towards a Common Approach for Access to Digital Archival Records in Europe. A...
Towards a Common Approach for Access to Digital Archival Records in Europe. A...
 
MyScienceWork's presentation with Ined at the 14th International Open Reposit...
MyScienceWork's presentation with Ined at the 14th International Open Reposit...MyScienceWork's presentation with Ined at the 14th International Open Reposit...
MyScienceWork's presentation with Ined at the 14th International Open Reposit...
 
Enisa internet mapping project-20130523
Enisa internet mapping project-20130523Enisa internet mapping project-20130523
Enisa internet mapping project-20130523
 
INSPIRE data scope
INSPIRE data scopeINSPIRE data scope
INSPIRE data scope
 
ODALA_FIWARE_Summit_23.pptx
ODALA_FIWARE_Summit_23.pptxODALA_FIWARE_Summit_23.pptx
ODALA_FIWARE_Summit_23.pptx
 
IX-F Database and Tool
IX-F Database and ToolIX-F Database and Tool
IX-F Database and Tool
 
Europeana Cloud factsheet
Europeana Cloud factsheetEuropeana Cloud factsheet
Europeana Cloud factsheet
 
Summary of Day 1
Summary of Day 1Summary of Day 1
Summary of Day 1
 
Promoting Austrian Cultural and Scientific Heritage via EUROPEANA
Promoting Austrian Cultural and Scientific Heritage via EUROPEANAPromoting Austrian Cultural and Scientific Heritage via EUROPEANA
Promoting Austrian Cultural and Scientific Heritage via EUROPEANA
 
LoCloud: Local Content in a Europeana Cloud
LoCloud: Local Content in a Europeana CloudLoCloud: Local Content in a Europeana Cloud
LoCloud: Local Content in a Europeana Cloud
 
Ircdl damico del-bimbo-meoni
Ircdl damico del-bimbo-meoniIrcdl damico del-bimbo-meoni
Ircdl damico del-bimbo-meoni
 
ALIADA Project. AtCult
ALIADA Project. AtCultALIADA Project. AtCult
ALIADA Project. AtCult
 
3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...
3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...
3D in the CARARE Project. Providing Europeana with 3D Content for the Archaeo...
 

Plus de Paul Kahn

Personal(ized) History of Hypertext
Personal(ized) History of HypertextPersonal(ized) History of Hypertext
Personal(ized) History of HypertextPaul Kahn
 
HID&V presentation class #1
HID&V presentation class #1HID&V presentation class #1
HID&V presentation class #1Paul Kahn
 
Structured Data
Structured Data Structured Data
Structured Data Paul Kahn
 
What is IA/UX
What is IA/UXWhat is IA/UX
What is IA/UXPaul Kahn
 
A personalized history of hypertext 2014
A personalized history of hypertext 2014A personalized history of hypertext 2014
A personalized history of hypertext 2014Paul Kahn
 
Doctor patient-insurance 040213
Doctor patient-insurance 040213Doctor patient-insurance 040213
Doctor patient-insurance 040213Paul Kahn
 
Fogg behavior model
Fogg behavior modelFogg behavior model
Fogg behavior modelPaul Kahn
 
Aalto media lab 20.3.2014
Aalto media lab   20.3.2014Aalto media lab   20.3.2014
Aalto media lab 20.3.2014Paul Kahn
 
03 map-profile+metadata
03 map-profile+metadata03 map-profile+metadata
03 map-profile+metadataPaul Kahn
 
02 organize an archive
02 organize an archive02 organize an archive
02 organize an archivePaul Kahn
 
03 b-maps&diagrams
03 b-maps&diagrams03 b-maps&diagrams
03 b-maps&diagramsPaul Kahn
 
03 a-structured data
03 a-structured data03 a-structured data
03 a-structured dataPaul Kahn
 
04 data viz concepts
04 data viz concepts04 data viz concepts
04 data viz conceptsPaul Kahn
 
Network Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn world
Network Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn worldNetwork Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn world
Network Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn worldPaul Kahn
 
Service Design in Experience Design
Service Design in Experience DesignService Design in Experience Design
Service Design in Experience DesignPaul Kahn
 
Structured data mp may 2012
Structured data mp may 2012Structured data mp may 2012
Structured data mp may 2012Paul Kahn
 
Instant information architecture ensad
Instant information architecture   ensadInstant information architecture   ensad
Instant information architecture ensadPaul Kahn
 
Ia lecture gobelins march 2011
Ia lecture gobelins march 2011Ia lecture gobelins march 2011
Ia lecture gobelins march 2011Paul Kahn
 
03 Map A Site
03 Map A Site03 Map A Site
03 Map A SitePaul Kahn
 

Plus de Paul Kahn (20)

Personal(ized) History of Hypertext
Personal(ized) History of HypertextPersonal(ized) History of Hypertext
Personal(ized) History of Hypertext
 
HID&V presentation class #1
HID&V presentation class #1HID&V presentation class #1
HID&V presentation class #1
 
Structured Data
Structured Data Structured Data
Structured Data
 
What is IA/UX
What is IA/UXWhat is IA/UX
What is IA/UX
 
A personalized history of hypertext 2014
A personalized history of hypertext 2014A personalized history of hypertext 2014
A personalized history of hypertext 2014
 
assignment
assignmentassignment
assignment
 
Doctor patient-insurance 040213
Doctor patient-insurance 040213Doctor patient-insurance 040213
Doctor patient-insurance 040213
 
Fogg behavior model
Fogg behavior modelFogg behavior model
Fogg behavior model
 
Aalto media lab 20.3.2014
Aalto media lab   20.3.2014Aalto media lab   20.3.2014
Aalto media lab 20.3.2014
 
03 map-profile+metadata
03 map-profile+metadata03 map-profile+metadata
03 map-profile+metadata
 
02 organize an archive
02 organize an archive02 organize an archive
02 organize an archive
 
03 b-maps&diagrams
03 b-maps&diagrams03 b-maps&diagrams
03 b-maps&diagrams
 
03 a-structured data
03 a-structured data03 a-structured data
03 a-structured data
 
04 data viz concepts
04 data viz concepts04 data viz concepts
04 data viz concepts
 
Network Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn world
Network Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn worldNetwork Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn world
Network Values and Valuable Networks: Do we need SDN in a Twitter-LinkedIn world
 
Service Design in Experience Design
Service Design in Experience DesignService Design in Experience Design
Service Design in Experience Design
 
Structured data mp may 2012
Structured data mp may 2012Structured data mp may 2012
Structured data mp may 2012
 
Instant information architecture ensad
Instant information architecture   ensadInstant information architecture   ensad
Instant information architecture ensad
 
Ia lecture gobelins march 2011
Ia lecture gobelins march 2011Ia lecture gobelins march 2011
Ia lecture gobelins march 2011
 
03 Map A Site
03 Map A Site03 Map A Site
03 Map A Site
 

Dernier

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 

Dernier (19)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 

Patterns That Connect

  • 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