First Principles of SaaS UX · CHAPTER 5 OF 7
Information hierarchy and disclosure
Set Information Hierarchy
Set Information Hierarchy
Set Information Hierarchy
Set Information Hierarchy
What Information Does the User Need?
What Information Does the User Need?
Actions Depend on the Right Information
For a doctor to write a prescription, they may need:
Patient Details, Medical History, Symptoms, Temperature, Blood Pressure
This information helps them understand the patient, make a diagnosis, and prescribe treatment.
Name:
Age
Gender
Actions Depend on the Right Information
For a doctor to write a prescription, they may need:
Patient Details, Medical History, Symptoms, Temperature, Blood Pressure
This information helps them understand the patient, make a diagnosis, and prescribe treatment.
Name:
Age
Gender
Missing Information Makes Tasks Harder
When required information is missing, scattered, or difficult to access, users spend more time searching and moving between screens.
This can increase: Time on Task, Cognitive Load, Human Error, Unnecessary Clicks, Rework
Missing Information Makes Tasks Harder
When required information is missing, scattered, or difficult to access, users spend more time searching and moving between screens.
This can increase: Time on Task, Cognitive Load, Human Error, Unnecessary Clicks, Rework
Look at a Real Example
Radiologists Had Information Across Multiple Screens
In RISPACS, radiologists review DICOM scans and write diagnostic reports.
But the information they needed to complete the report was spread across different screens.
Look at a Real Example
Radiologists Had Information Across Multiple Screens
In RISPACS, radiologists review DICOM scans and write diagnostic reports.
But the information they needed to complete the report was spread across different screens.
Users Shouldn’t Have to Memorize Data
Scattered Data Creates Cognitive Load
The radiologist had to remember information from one screen while working on another.
This meant more: Searching, Remembering, Switching, Rechecking. Instead of focusing on the actual reporting task.
Users Shouldn’t Have to Memorize Data
Scattered Data Creates Cognitive Load
The radiologist had to remember information from one screen while working on another.
This meant more: Searching, Remembering, Switching, Rechecking. Instead of focusing on the actual reporting task.
Start With One Question
What Does the Radiologist Need While Reporting?
Using our research and persona understanding, we identified the information required to complete the task: Patient details,DICOM images, patient history, referring doctor details, report-writing canvas
Start With One Question
What Does the Radiologist Need While Reporting?
Using our research and persona understanding, we identified the information required to complete the task: Patient details,DICOM images, patient history, referring doctor details, report-writing canvas
Don’t Show Everything at Once
Show Information When It Becomes Relevant
Once we know what information users need, the next question is:
When should they see it?
Progressive disclosure helps reveal information based on the user’s current task and stage in the workflow.
Don’t Show Everything at Once
Show Information When It Becomes Relevant
Once we know what information users need, the next question is:
When should they see it?
Progressive disclosure helps reveal information based on the user’s current task and stage in the workflow.
Apply Progressive Disclosure
Showing the Right Information at the Right Time
In the old radiology software, multiple information sources were available together, regardless of where the radiologist was in the workflow.
Using information hierarchy, we asked:
What information does the radiologist need at this stage?
Apply Progressive Disclosure
Showing the Right Information at the Right Time
In the old radiology software, multiple information sources were available together, regardless of where the radiologist was in the workflow.
Using information hierarchy, we asked:
What information does the radiologist need at this stage?
Information Appears When Needed
Once the radiologist starts reporting, we reveal:
- Patient details
- DICOM images
- Patient history
- Referring doctor details
- Report-writing canvas
Now, all the information required to complete the task is available without user constantly moving between screens.
Information Appears When Needed
Once the radiologist starts reporting, we reveal:
- Patient details
- DICOM images
- Patient history
- Referring doctor details
- Report-writing canvas
Now, all the information required to complete the task is available without user constantly moving between screens.
Progressive Disclosure Reduces Cognitive Load
Instead of showing: All information at all times
We show: The right information at the right stage of the workflow
This reduces:
- Clutter
- Unnecessary navigation
- Cognitive load
Reduce Clutter
Unneeded navigation
Cognitive load
Progressive Disclosure Reduces Cognitive Load
Instead of showing: All information at all times
We show: The right information at the right stage of the workflow
This reduces:
- Clutter
- Unnecessary navigation
- Cognitive load
Reduce Clutter
Unneeded navigation
Cognitive load
Everyday Example: WhatsApp
Information Appears Based on User Intent
On the WhatsApp Chats screen, users see only what they need to choose a conversation: Profile image, Contact name, Message preview, Time, Unread count
The complete conversation appears only after opening the chat.
Everyday Example: WhatsApp
Information Appears Based on User Intent
On the WhatsApp Chats screen, users see only what they need to choose a conversation: Profile image, Contact name, Message preview, Time, Unread count
The complete conversation appears only after opening the chat.
Actions Appear When They Become Relevant
WhatsApp reveals additional actions only when needed:
Attachment icon → Photos, documents, location
Long press message → Reply, forward, delete, react
Contact name → Profile, media, settings
Users get access to everything they need, but not everything at once.
Actions Appear When They Become Relevant
WhatsApp reveals additional actions only when needed:
Attachment icon → Photos, documents, location
Long press message → Reply, forward, delete, react
Contact name → Profile, media, settings
Users get access to everything they need, but not everything at once.
Information Hierarchy Also Requires Control
Information Hierarchy Also Requires Control