UIPatterns
Didactika theme v0.1A dashboard
Figures, what needs attention and progress, in a page that can be read at a glance.
A dashboard answers three questions in this order: how are things, what needs me and where are we going. It does not replace the lists: every figure leads to the list behind it.
When to use it
- A landing page for a course, a site area or a teacher, with a few things worth watching.
- If the page needs more than about eight pieces, it is two pages.
Anatomy
| Region | Answers | Built with |
|---|---|---|
| Header | Which one is this | Page header with the object and its context |
| Figures (2–4) | How are things | Cards with a tile, a value and a label; a trend only when it means something |
| What needs attention | What needs me | A list group with a tile, a line and a badge that says why (days left, overdue) |
| Progress | Where are we going | Progress bars with the value beside them, colour by meaning |
A course overview
Algebra I
Course overview · updated 5 minutes ago
128Students
74%Completion +6%
9To grade +2
Needs your attention
- Unit 3 quiz closes on Friday2 days
- 9 submissions to gradeOverdue
- 3 unanswered forum postsNew
Progress by unit
Unit 1 · Numbers96%
Unit 2 · Functions71%
Unit 3 · Equations34%
This Moodle version has no dark mode: examples stay light.
Layout and spacing
| Between | Distance |
|---|---|
| Header and figures | 1.25 rem |
| Figures | 1 rem; they share the row and each is at least 13 rem wide |
| Lower cards | 1 rem; two columns from 36 rem, one below |
Behaviour
- Every figure and every row is a link to the detail behind it; a figure that leads nowhere is decoration and is removed.
- “What needs me” is sorted by urgency, not alphabetically, and shows at most five rows plus “See all”.
- Colour has a meaning: success for what is on track, warning for what is near, danger for what is late; and every colour comes with a word or an icon.
- Figures update without moving the page; a figure that is loading shows a skeleton of its own size.
- The page remembers nothing the user did not choose: no hidden filters.
States
| State | What the user sees |
|---|---|
| Loading | Skeletons the size of each card |
| No data yet | An empty state in each card (“No activity yet”) instead of zeroes |
| Error in one card | The alert is inside that card; the others stay |
| Nothing needs attention | A positive empty state: “You are up to date” |
Narrow screens
Pieces stack in the same order: figures first, then attention, then progress. Figures may go two per row.
Accessibility
- Each card has a heading; the figures are read as “Students: 128”.
- A trend has text (“up 6 points”), not only an arrow or a colour.
- Progress bars have
role="progressbar"and a label that names what they measure.
Before shipping
- No more than four figures.
- Every figure and row leads somewhere.
- Urgency decides the order.
- An empty course does not show zeroes.