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

My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 

Recently uploaded (20)

My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 

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