UX teardown · 05
Nobody came for the scale.
Somebody typed "is the air safe today" and landed on Norvale's air quality page. The page has the answer. It is four screens down, in body text, under a heading that says "Forecast maximums", after the search bar, three rows of breadcrumbs, a list of links to the rest of the page, five related services, the news, a maintenance notice, four paragraphs about the index and a colour legend explaining what the numbers mean. That day the reading was 11 on a scale that stops at 10. The page said so in the same grey type it uses for Sunday.
Before
Search norvale.gov
Home › Environment and water › Weather and climate › Air quality › Air Quality Health Index › Ellery
Ellery - Air Quality Health Index
On this page
About the index
How the index is calculated
Observed conditions
Forecast maximums
Related links
Related services
Weather warnings
Pollen count
Observed conditions
Not available
Forecast maximums
Today11 - Very high risk
The answer. Four screens down.
After
Air Quality Health Index
Ellery, Norvale · right now
11
Very high risk
Air Quality Health Index
What to do today
Stay indoors where you can.
Skip outdoor exercise.
Wear a mask if you have to go out.
Learn more about how the index is calculated.
Read before the thumb moves.
Nobody buried it. The template did.
Government sites run on one template, and the template is built for every page at once. Header, search, breadcrumbs, "on this page", related services, news. All of it comes before the content, because on most pages that order is fine. A page about permit fees can afford four screens of chrome. Then the same template is handed a page whose entire job is one number, today, and the chrome does not know the difference.
It survives review because every element is correct on its own. The breadcrumbs are accurate. The legend is accurate. The reading is accurate. Nobody put a wrong thing on this page. They put the right things in the wrong order, and order is not something a component library can review.
Why it hurts
Every element passes. The page fails.
Same four steps as every interaction, run against the page as it ships:
1
Filter: passes, and lands in the wrong place. The eye goes to the colour legend, because it is the only colour on the page. A legend explains a reading. Here the explanation is more visible than the thing it explains.
2
Seek: fails. The user arrived with one question already formed. The page answers six others first. Where you are on the site, what else is nearby, what the minister announced, how the index is calculated. Every one of them is a page the user did not ask for.
3
Act: fails, and this one has a cost. When the answer turns up it is "11 - Very high risk" in body text, in the same row style as Saturday's 8 and Sunday's 5. Nothing about it says stay inside. On a day the air is dangerous, the page speaks in exactly the voice it uses on a day it is fine.
4
Store: fails. What sticks is not the reading. It is that the official site made you dig for it, and next time you will ask a weather app instead. The one source that owns the data has taught people to get it somewhere else.
Three of four fail on a page where every individual element is correct. The whole defect is the order they come in.
The fix
Put the answer where the page starts.
Not a redesign, and not less content. The same page with one card moved to the top: the reading, the word for it, the colour, and what to do about it. Everything else is still there, further down, for the people who want it.
01
Answer the question they typed.
People reach a page like this from a search, and the search is the brief. "Is the air safe today" has a yes-or-no shape, so the first thing on the page has to have that shape too: a number, a word for it and a colour. Everything that explains the number comes after the number.
02
Make a dangerous day look different from a safe one.
As shipped, 11 renders in the same grey row as 3. The digits change and nothing else does. Bind the colour of the card to the reading and a bad day is red before anyone has read a word. The legend already defines those colours. Put them on the thing that matters, not only on the key.
03
Say what to do, not only what it is.
An index is a measurement. Nobody wanted a measurement. They wanted to know whether to go for a run. Three lines of plain advice under the reading turn a number into a decision, and that is the one part of the page a health agency is uniquely qualified to write. It was the part missing.
04
This was never about air quality.
A bank balance under the promotions. A delivery status under the order history. A test result under the hospital's navigation. Any page a person opens with one question already in their head fails the same way the moment the template is allowed to speak first.
The rule worth stealing
Answer first, explain later.
The scale, the method, the related pages. All of it is worth having and none of it is what the person came for. Give them the answer in the first screen, in a shape they can read at a glance. Then explain, to whoever scrolls.
