SlideShare a Scribd company logo
1 of 11
Information Hierarchy
A guerrilla guide to organizing your content
Design = Communication
Visual information hierarchy is one of the most important
principles behind effective websites
We can’t just dump all the information on a page:

Most people are visual thinkers, and not data
processors
Visual Relationships

People see things based on relationships to each other
Basic Hierarchy Makes a Big Difference
Back To Our World: Getting Feedback
The typical process:
-

Take lots of notes
Sketch, dump all thoughts onto a page
No deliberate approach
Rely only on creativity

=
A Cheat Sheet to Content Hierarchy
a) Overarching guiding principles

We help consumers make better buying decisions
Don’t make me think*
or do work**

* Steve Krug
A Cheat Sheet to Content Hierarchy
b) Organizing Your Content
1
The information
you want to present

A list of the key pieces of
information you want
visitors to see

2
The priorities

Assign values (A, B, C)
according to their
importance to the visitor

3
The segments

Consider what different
groups of visitors may see
The squint test
Look at your design
– do the squint test
Does your information and
priorities match what the design
communicates?

If it does not, iterate on the design.
If it does, you are good to go.
Example: V-Day Home

visually
hard to
process
Here is everything you might find interesting – arranged in
some visually appealing way (creativity)
Vs.
I intend to communicate these pieces of information with
these priorities (purpose)
Appendix: Good book
Appendix: Tools in your toolbox

Size
Color
Contrast
Alignment
Repetition
Proximity
Density & Whitespace
Texture

More Related Content

Viewers also liked

Typography and Its Importance in Information Hierarchy
Typography and Its Importance in Information HierarchyTypography and Its Importance in Information Hierarchy
Typography and Its Importance in Information HierarchyUXPA Boston
 
Ptcl managment overview
Ptcl managment overviewPtcl managment overview
Ptcl managment overviewIsma Nizam
 
Company Hierarchy
Company HierarchyCompany Hierarchy
Company Hierarchyjsoftspl
 
Psychology explains the power of Storytelling
Psychology explains the power of StorytellingPsychology explains the power of Storytelling
Psychology explains the power of StorytellingSebastien Juras
 
Learning and Development Strategy
Learning and Development StrategyLearning and Development Strategy
Learning and Development StrategyNew To HR
 
Learning & Development
Learning & DevelopmentLearning & Development
Learning & Developmentm.dubucq
 
Organizational structure ppt
Organizational structure pptOrganizational structure ppt
Organizational structure pptvibhugorintla
 
training & development ppt
training & development ppttraining & development ppt
training & development pptMonishaangel
 
Organizational Structure
Organizational StructureOrganizational Structure
Organizational StructureMary Ann Adiong
 

Viewers also liked (11)

Typography and Its Importance in Information Hierarchy
Typography and Its Importance in Information HierarchyTypography and Its Importance in Information Hierarchy
Typography and Its Importance in Information Hierarchy
 
Ptcl managment overview
Ptcl managment overviewPtcl managment overview
Ptcl managment overview
 
Company Hierarchy
Company HierarchyCompany Hierarchy
Company Hierarchy
 
Psychology explains the power of Storytelling
Psychology explains the power of StorytellingPsychology explains the power of Storytelling
Psychology explains the power of Storytelling
 
Training Department Strategies and Structure
Training Department Strategies and Structure Training Department Strategies and Structure
Training Department Strategies and Structure
 
Learning and Development Strategy
Learning and Development StrategyLearning and Development Strategy
Learning and Development Strategy
 
Training Strategy ppt
Training Strategy pptTraining Strategy ppt
Training Strategy ppt
 
Learning & Development
Learning & DevelopmentLearning & Development
Learning & Development
 
Organizational structure ppt
Organizational structure pptOrganizational structure ppt
Organizational structure ppt
 
training & development ppt
training & development ppttraining & development ppt
training & development ppt
 
Organizational Structure
Organizational StructureOrganizational Structure
Organizational Structure
 

Recently uploaded

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

Guerrilla Training: Information Hierarchy

  • 1. Information Hierarchy A guerrilla guide to organizing your content
  • 2. Design = Communication Visual information hierarchy is one of the most important principles behind effective websites We can’t just dump all the information on a page: Most people are visual thinkers, and not data processors
  • 3. Visual Relationships People see things based on relationships to each other
  • 4. Basic Hierarchy Makes a Big Difference
  • 5. Back To Our World: Getting Feedback The typical process: - Take lots of notes Sketch, dump all thoughts onto a page No deliberate approach Rely only on creativity =
  • 6. A Cheat Sheet to Content Hierarchy a) Overarching guiding principles We help consumers make better buying decisions Don’t make me think* or do work** * Steve Krug
  • 7. A Cheat Sheet to Content Hierarchy b) Organizing Your Content 1 The information you want to present A list of the key pieces of information you want visitors to see 2 The priorities Assign values (A, B, C) according to their importance to the visitor 3 The segments Consider what different groups of visitors may see
  • 8. The squint test Look at your design – do the squint test Does your information and priorities match what the design communicates? If it does not, iterate on the design. If it does, you are good to go.
  • 9. Example: V-Day Home visually hard to process Here is everything you might find interesting – arranged in some visually appealing way (creativity) Vs. I intend to communicate these pieces of information with these priorities (purpose)
  • 11. Appendix: Tools in your toolbox Size Color Contrast Alignment Repetition Proximity Density & Whitespace Texture