Make article indexes easier to scan with visual hierarchy
Give readers a clear path through an article index by making the topic and title prominent, then placing summaries and metadata in supporting roles.
An article index is easier to scan when the title is the first useful stop, the summary explains what the article delivers, and the topic confirms context. Give the title the strongest visual weight; keep dates and labels readable but quieter, and use spacing to separate one article from the next.
Imagine browsing a shelf where every book has a title, a one-sentence description and a publication date. If all three are printed equally boldly, finding the right book takes work. The title should catch your eye first; the other details should help you choose once you stop.
An index can contain exactly the right articles and still feel impossible to browse. In the first version below, three real Persistence topics are present, but the repeated category banners and boxed metadata win attention before any title. The second version changes only the hierarchy.
DESIGN STUDY / 01
One index. Two reading orders.
Same three articles. Same words. Only the emphasis and spacing change.
BEFORE / EVERYTHING COMPETES
The topic wins every card.
-
Persistence
B-Tree vs LSM-Tree
Compare where each design spends work on writes and reads.
-
Persistence
The write-ahead log
See what survives a crash before a data page is saved.
-
Persistence
Why PostgreSQL is not using your index
Check the predicate and plan before changing statistics.
AFTER / A CLEAR FIRST STOP
The article question leads.
-
Persistence Comparison
B-Tree vs LSM-Tree
Compare where each design spends work on writes and reads.
-
Persistence Deep dive
The write-ahead log
See what survives a crash before a data page is saved.
-
Persistence Deep dive
Why PostgreSQL is not using your index
Check the predicate and plan before changing statistics.
WHAT CHANGED
- Title first. In the first version, three identical topic banners interrupt the scan. In the second, titles carry the largest type.
- Summary next. Each description stays close to its title, so the promise of the article is easy to check.
- Metadata last. Kind and date remain readable but stop competing with the decision to read.
Start with the reading decision#
An index has a different job from an article. The reader compares possibilities before opening one. In the example, “B-Tree vs LSM-Tree” should be the first useful stop: it names the decision. The summary then promises the comparison of read and write costs. “Persistence” confirms the area, while the date offers context once the reader has found a candidate.
That order is specific to an evergreen learning library. In a fast-changing news feed, the date might deserve more weight. Decide what the reader needs to compare before assigning type sizes, colours or borders.
Build three levels of emphasis#
Look at the first version’s three green “Persistence” banners. They are the largest saturated areas, but they tell the reader the same thing three times. The bordered kind and date sit above every title, so scanning requires a detour through details that do not distinguish the articles.
In the revised version, the title has the largest type. A small topic line still makes the category explicit; colour is not its only signal. The summary is large enough to read without zooming, and the date remains legible at the end. The important change is the relationship among these parts, not a magic font size.
This is the same idea behind a well-designed explanation with one job for each visual: the reader should be able to tell what to look at first, then what to inspect next. On an article index, that first look needs to reveal the subject of each article quickly.
Spacing shows what belongs together#
Keep a card’s title closer to its summary than to the next card. Leave a clearer gap between cards than between the pieces inside one card. That lets a reader perceive each article as a unit without drawing a heavy box around everything.
For a repeatable way to make those relationships visible across pages, continue with a spacing system for interfaces.
The same test applies inside a section. A heading that sits equally far from the last card above and the first card below has an unclear owner. Place it with the content it introduces. If the index contains several topics, section spacing should tell readers when they have moved to a new group.
Test the index in context#
Put six cards on a page rather than judging one perfect card in isolation. Look at the page for three seconds, then ask which titles you remember and whether you can locate a specific topic. Repeat on a phone-sized viewport. Long titles, wrapped summaries and repeated chips often change the hierarchy that looked balanced in a single desktop mockup.
Then open one of the articles. The next problem is a different one: the reading column needs a width and rhythm suited to paragraphs, not the dense comparison layout of the index. Carry a shared visual voice between the two screens, but let each serve its own task.
Where hierarchy goes wrong#
Making metadata tiny or very faint can make the card look quieter while making it harder to use. Hiding category names behind colour alone causes another problem: a reader who cannot distinguish the colours loses the orientation cue. Keep the words and semantic headings; style can change their visual weight without changing what they mean in the document.
The useful review question is simple: Which item is winning attention, and is that the item the reader came to compare? When the answer is “no,” first reduce the competing decoration or metadata weight. Enlarging every title to compensate can leave the index just as noisy.
Next, see how progressive disclosure can make a large article library easier to browse while keeping every article within reach.