Part Three: The details · Screens

63 Loud, Quiet, Silent

Everything on the screen was put there because it matters to someone. When it all speaks at the same volume, nothing stands out.

Look at a screen where every label is bold, every button is the brand color, and every number is the same size. Each choice had a defender. The date matters. The status matters. The delete button has to be findable. So each was made prominent, and the screen now reads as a flat field of equally important things.

People do not read a screen top to bottom. The eye jumps to whatever is biggest, darkest or most colorful, then to the next. If the design does not set that order, the eye sets its own, and it will not be the order that helps.

The usual fix makes it worse. When the main button does not stand out, someone makes it bigger. The better move is the reverse: leave the main thing alone and turn the rest down. A secondary button loses its fill and becomes an outline. A rare or dangerous action becomes a plain underlined link. Supporting text goes a shade lighter and a size smaller.

Sort everything into three levels. A few things are loud, the ones a person looks for first. Most things are quiet. Some are nearly silent. If more than one or two things are loud, none of them are.

Silent means faint and never invisible. An action that appears only when the pointer happens to pass over it has been hidden, and a link in pale grey that looks like a caption has been disguised.

Before

Maria Santos

Plan: Team

Joined: March 3, 2021

Edit Message Delete

After

Maria Santos

Team plan ยท since March 2021

Message  Edit  Delete

Before, a customer record where the name, plan, date and three buttons are all bold and the same weight. After, the name is large and bold, the plan and date are small and muted, "Message" is a filled button, "Edit" an outline button and "Delete" an underlined link.

Therefore:

Rank what is on each screen: a few things loud, most quiet, some nearly silent. Make the important things stand out by turning the others down, never by turning everything up.

In practice. Take one screen and make every button but one into an outline or a text link. Lighten every label. See what the screen says now, and add emphasis back only where you miss it.

Goes with. You can only rank a screen that has ONE SCREEN, ONE PURPOSE (61). Distance does the other half of the ranking: SPACE SHOWS WHAT BELONGS TOGETHER (64). Quiet must still be legible: WORKS FOR EVERY BODY (60).