19 · The heart of the product
Agenda and calendar
The screen people look at most. It must answer in one second: who is coming now, who is next, where there is a gap and whether anything overlaps.
This schedule is an illustration with fictional data. Pick a gap, press “Add appointment” and see what happens if two appointments coincide.
Tuesday, November 3Sample data
Choose a time from the list.
Anatomy of an appointment in the list
9:00 a.m.Example Patient ACheck-up · 30 minConfirmed
- Time
- On the left, tabular, in semibold. It is the first thing people look for.
- Patient and reason
- Name in regular weight, reason below in Warm Gray (15 px). No diagnoses.
- Status
- On the right, with an icon and a word.
- Free gaps
- Shown as empty rows with “Free” in gray: they are as useful as the appointments.
- Current appointment
- Marked with a Solar bar on the left and the text “Now”. Yellow shows where you are, not a problem.
Month calendar
MTWTFSS
124 appts36 appts, today45 appts53 appts65 appts7894 appts106 appts112 appts125 appts133 appts1415161718192021222324252627282930
November 2026, sample appointments. Days with appointments show the number, not just a colored dot. Today has a Solar border and the word “today” for screen readers.
Charts
Charts are simple, with the value written above each bar and no distant legends.
Do
- Values written above the bars
- A single accent color and grays for the rest
- A title that states the conclusion: “Thursdays are the busiest day”
- An equivalent accessible table available
Don't
- Pie charts with more than three slices
- Red and green as the only contrast
- Truncated axes that exaggerate differences
- Long entrance animations