SlideShare une entreprise Scribd logo
1  sur  41
Information Design for Web and Print  Bernice Glenn [email_address]
Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Can You Make Sense of This? ,[object Object]
Information Design Can Help ,[object Object],[object Object],[object Object],[object Object],[object Object]
Information Design Elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Information Design & Style:   Content, Visuals, Sound  ,[object Object]
An Information Design Model 3. Present 2. Organize 1. Analyze Analyze Research. Gather data:  Text, sound, and visuals Organize & Present Determine style, Create a  taxonomy and and the Information Architecture, and Present to viewer Knowledge Viewer interprets the information for easy use and understanding
Information Design and the  Presentation   Interface ,[object Object],[object Object],[object Object],Information design attempts to replicate in the physical interface the mental ideas that a user has about information.
Information works with visual, semantic,  and sound  elements  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Information is Multimodal
Visualizing   Semantic Structures ,[object Object],[object Object],[object Object]
Grids and Information ,[object Object]
Grids-Structure and Space ,[object Object],[object Object],[object Object]
We Classify the World by   How Things Look ,[object Object],[object Object],[object Object],[object Object],Information is easier and faster to understand  when shown in meaningful components.
Cognition &   Information Design ,[object Object],[object Object],Gestalt is a branch of cognition asserting that  some visual formats work better than others.  Two Gestalt “rules” are:
Law of Proximity ,[object Object],[object Object],A. B. C.
Law of Proximity and Text The rule or proximity implies that objects placed close together appear to belong together. Headlines and Togetherness One logical guideline states that captions should be placed close to the graphic they describe and headings should be placed closer to the text they relate to. Allow more space to the paragraph above the heading, and less space between the heading and the paragraph below to which it refers. The rule or proximity implies that objects placed close together appear to belong together. Headlines and Togetherness One logical guideline states that captions should be placed close to the graphic they describe and headings should be placed closer to the text they relate to. Allow more space to the paragraph above the heading, and less space between the heading and the paragraph below to which it refers. Logical placement of the heading Ambiguous placement of the heading
[object Object],Law of Similarity The rows of colored and bolded type form separate rows from those that   are not bolded. The rows of colored and bolded type form separate rows from  those that are not bolded. The  rows of  colored and bolded type from  separate rows form those that are not   bolded. The rows of colored and bolded  type form separate rows from those that are not bolded. The rows of colored and   bolded type form separate rows form those that are not bolded. The rows
Chunks & the Magic Number 7 ,[object Object],[object Object],Viewers  understand and remember information in sequential clusters of no more than 5 to 7 elements at a time
Viewing Styles Vary ,[object Object],[object Object],[object Object],[object Object]
A Communication Model
Information Design  and Visual Cues ,[object Object],[object Object],[object Object],The written word also communicates through its typography and visual format
Compare Verbal & Visual  Communication Formats   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],MEDIA FORMAT ELEMENTS VERBAL FORMAT ELEMENTS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Headings are Landmarks ,[object Object],[object Object],[object Object],[object Object]
Visual Design Summary ,[object Object],[object Object],[object Object],[object Object],[object Object]
Pathways to Information ,[object Object],[object Object],[object Object],[object Object]
Analyzing User Needs ,[object Object],[object Object],[object Object],[object Object],[object Object]
Orienting the Online User ,[object Object],[object Object],[object Object],[object Object],[object Object]
Information Hierarchy and Wireframes ,[object Object]
Naming Information Links ,[object Object],[object Object],[object Object]
Web Content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Achieving Success with  Text ,[object Object],[object Object],[object Object],[object Object],[object Object]
Inverted Pyramid Writing   Gets to the Point! ,[object Object],[object Object],a a
Measuring the Effects of  Written Content on the WEB ,[object Object],[object Object],[object Object],[object Object],[object Object]
Sample Paragraph: the format  for base comparison  ,[object Object],Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 0 %
Bulleted Text Layout  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],47 %   usability improvement
Concise Text Sample   ,[object Object],In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.. 58 %  usability improvement
Neutral Language Sample   ,[object Object],Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446). 27 %   usability improvement
Concise, Scannable, & Objective  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],124 %   improvement  in  usability
Neilson’s Recommendations ,[object Object],[object Object],[object Object],[object Object],Recommendations are based on time, errors, memory, and site structure:
Caution ,[object Object],[object Object]
Information Designers Communicate Better ,[object Object]

Contenu connexe

En vedette

Taal Is Het Woord Niet
Taal Is Het Woord NietTaal Is Het Woord Niet
Taal Is Het Woord Niet
Soert
 
L'Art De M. Brunet
L'Art De M. BrunetL'Art De M. Brunet
L'Art De M. Brunet
PEDH
 
Elena vocabulary 2013
Elena vocabulary 2013Elena vocabulary 2013
Elena vocabulary 2013
PEDH
 
Q1 2009 Earning Report of Du Pont E I De Nemours
Q1 2009 Earning Report of Du Pont E I De NemoursQ1 2009 Earning Report of Du Pont E I De Nemours
Q1 2009 Earning Report of Du Pont E I De Nemours
guestc4fcf72
 
Theme 1 earthquake terror vocabulary flash cards
Theme 1   earthquake terror vocabulary flash cardsTheme 1   earthquake terror vocabulary flash cards
Theme 1 earthquake terror vocabulary flash cards
PEDH
 

En vedette (18)

Formulir anggota WMID
Formulir anggota WMIDFormulir anggota WMID
Formulir anggota WMID
 
Wikimedia presentation
Wikimedia presentationWikimedia presentation
Wikimedia presentation
 
Taal Is Het Woord Niet
Taal Is Het Woord NietTaal Is Het Woord Niet
Taal Is Het Woord Niet
 
Syukran brand positioning & Strategy 2010
Syukran brand positioning & Strategy 2010Syukran brand positioning & Strategy 2010
Syukran brand positioning & Strategy 2010
 
Proyek penciptaan dan digitalisasi konten
Proyek penciptaan dan digitalisasi kontenProyek penciptaan dan digitalisasi konten
Proyek penciptaan dan digitalisasi konten
 
DoInk2'
DoInk2'DoInk2'
DoInk2'
 
L'Art De M. Brunet
L'Art De M. BrunetL'Art De M. Brunet
L'Art De M. Brunet
 
Elena vocabulary 2013
Elena vocabulary 2013Elena vocabulary 2013
Elena vocabulary 2013
 
T3dallas typoscript
T3dallas typoscriptT3dallas typoscript
T3dallas typoscript
 
ABCs Conservation Programs
ABCs Conservation ProgramsABCs Conservation Programs
ABCs Conservation Programs
 
Navidad tingting
Navidad tingtingNavidad tingting
Navidad tingting
 
Q1 2009 Earning Report of Du Pont E I De Nemours
Q1 2009 Earning Report of Du Pont E I De NemoursQ1 2009 Earning Report of Du Pont E I De Nemours
Q1 2009 Earning Report of Du Pont E I De Nemours
 
Who Are The Muslims
Who Are The MuslimsWho Are The Muslims
Who Are The Muslims
 
Pelatihan Wiki Medika
Pelatihan Wiki MedikaPelatihan Wiki Medika
Pelatihan Wiki Medika
 
Tech Blogs - Pakistani Prospective
Tech Blogs -  Pakistani ProspectiveTech Blogs -  Pakistani Prospective
Tech Blogs - Pakistani Prospective
 
Netcasting – Training slides
Netcasting – Training slidesNetcasting – Training slides
Netcasting – Training slides
 
03 15 09 Opening The Door To Effective Communication Part I Keys To Effective...
03 15 09 Opening The Door To Effective Communication Part I Keys To Effective...03 15 09 Opening The Door To Effective Communication Part I Keys To Effective...
03 15 09 Opening The Door To Effective Communication Part I Keys To Effective...
 
Theme 1 earthquake terror vocabulary flash cards
Theme 1   earthquake terror vocabulary flash cardsTheme 1   earthquake terror vocabulary flash cards
Theme 1 earthquake terror vocabulary flash cards
 

Similaire à Information Design

Redesigning a Website Using Information Architecture Principals
Redesigning a Website Using Information Architecture PrincipalsRedesigning a Website Using Information Architecture Principals
Redesigning a Website Using Information Architecture Principals
Jenny Emanuel
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
Olivier Tripet
 
Riding The Semantic Wave
Riding The Semantic WaveRiding The Semantic Wave
Riding The Semantic Wave
Kaniska Mandal
 
Design And Documentation
Design And DocumentationDesign And Documentation
Design And Documentation
Miles Price
 

Similaire à Information Design (20)

Intranet content tactics - Interaction 2014
Intranet content tactics - Interaction 2014Intranet content tactics - Interaction 2014
Intranet content tactics - Interaction 2014
 
5 principles of visual design in ux
5 principles of visual design in ux5 principles of visual design in ux
5 principles of visual design in ux
 
2008 web-managers-hwilfert-final
2008 web-managers-hwilfert-final2008 web-managers-hwilfert-final
2008 web-managers-hwilfert-final
 
Digital Essay Intro & Brainstorming
Digital Essay Intro & BrainstormingDigital Essay Intro & Brainstorming
Digital Essay Intro & Brainstorming
 
Rhetorical Analysis iPad_sample
Rhetorical Analysis iPad_sampleRhetorical Analysis iPad_sample
Rhetorical Analysis iPad_sample
 
SmallWorlders Engagement Conference - Engaging Content by @Wedge
SmallWorlders Engagement Conference - Engaging Content by @WedgeSmallWorlders Engagement Conference - Engaging Content by @Wedge
SmallWorlders Engagement Conference - Engaging Content by @Wedge
 
Index nominum to ontology
Index nominum to ontologyIndex nominum to ontology
Index nominum to ontology
 
Mind Mapping
Mind MappingMind Mapping
Mind Mapping
 
Intranet content tactics
Intranet content tacticsIntranet content tactics
Intranet content tactics
 
Publication Design Chapter 05
Publication Design Chapter 05Publication Design Chapter 05
Publication Design Chapter 05
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
 
Redesigning a Website Using Information Architecture Principals
Redesigning a Website Using Information Architecture PrincipalsRedesigning a Website Using Information Architecture Principals
Redesigning a Website Using Information Architecture Principals
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
 
Riding The Semantic Wave
Riding The Semantic WaveRiding The Semantic Wave
Riding The Semantic Wave
 
Milazzo and Donato "Rewriting the Book: Long-Form Content for the Digital Age"
Milazzo and Donato "Rewriting the Book: Long-Form Content for the Digital Age"Milazzo and Donato "Rewriting the Book: Long-Form Content for the Digital Age"
Milazzo and Donato "Rewriting the Book: Long-Form Content for the Digital Age"
 
Online assignment
Online assignmentOnline assignment
Online assignment
 
7 wsg page-design
7 wsg page-design7 wsg page-design
7 wsg page-design
 
Intranet content tactics
Intranet content tacticsIntranet content tactics
Intranet content tactics
 
Donna Maurer - Information architecture: a "how to"
Donna Maurer - Information architecture: a "how to"Donna Maurer - Information architecture: a "how to"
Donna Maurer - Information architecture: a "how to"
 
Design And Documentation
Design And DocumentationDesign And Documentation
Design And Documentation
 

Dernier

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 

Dernier (20)

Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 

Information Design

  • 1. Information Design for Web and Print Bernice Glenn [email_address]
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7. An Information Design Model 3. Present 2. Organize 1. Analyze Analyze Research. Gather data: Text, sound, and visuals Organize & Present Determine style, Create a taxonomy and and the Information Architecture, and Present to viewer Knowledge Viewer interprets the information for easy use and understanding
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. Law of Proximity and Text The rule or proximity implies that objects placed close together appear to belong together. Headlines and Togetherness One logical guideline states that captions should be placed close to the graphic they describe and headings should be placed closer to the text they relate to. Allow more space to the paragraph above the heading, and less space between the heading and the paragraph below to which it refers. The rule or proximity implies that objects placed close together appear to belong together. Headlines and Togetherness One logical guideline states that captions should be placed close to the graphic they describe and headings should be placed closer to the text they relate to. Allow more space to the paragraph above the heading, and less space between the heading and the paragraph below to which it refers. Logical placement of the heading Ambiguous placement of the heading
  • 17.
  • 18.
  • 19.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.

Notes de l'éditeur

  1. Presented at ISPILA 2006