Special Topic · Taste Engineering: Make the Output Worth Keeping
A Hundred Concrete Ways to Say "Looks Good"
Information density, visual noise, breathing room, contrast hierarchy… tap a taste word for its definition and do/don't cases. Name it, and you can direct the AI
THE QUESTION THIS PAGE ANSWERS
ANSWER FIRST
What is the key idea behind “A Hundred Concrete Ways to Say "Looks Good"”?
Information density, visual noise, breathing room, contrast hierarchy… tap a taste word for its definition and do/don't cases. Name it, and you can direct the AI
DECISION RULE
Turn taste into a behavior the product can repeat. The useful outcome is not a nice opinion. It is a visible rule, a small example, and a way to tell when the experience falls below the bar.
TRY NEXT
Capture one before-and-after example that shows the quality bar without extra explanation.
WATCH FOR
Polish that improves the surface while leaving the user's uncertainty untouched.
If you can't name it, you can't fix the right place
Hand over "make it look better" and AI can only guess: maybe add a gradient, swap the font, pile on motion. Hand over "raise information density one notch, cut visual noise" and AI knows what to move: add two more data rows, cut half the badges. Vocabulary is the container for judgment: once you can hold the word "visual noise," you can keep the gut feeling that "something on this page is off."
Your taste vocabulary sets the ceiling of what you can make AI do.
Try it · Eight words, flip them one by one
Taste vocabulary deck0 / 12
Tap a card for the definition and do/don't cases; tap again to close. Flip all twelve for the wrap-up.
Information density
How much useful information fits per unit area. Low density wastes the reader's screen; high density without hierarchy is what feels cramped.
✓ Do
This week's ops data
Oct 14 – Oct 20
New users1,284
Paid conversion4.6%
Avg. order value¥86
Refund rate0.8%
Four key metrics on one screen — every pixel earns its keep.
✗ Don't
✓
This week's ops data
All good. Nothing to worry about.
View details
One sentence fills the screen; you still have to click for the numbers.
Visual noise
Decoration that carries no information. Badges, corner tags, dividers, extra colors — all noise.
✓ Do
Spring new arrivals
First drop: 24 pieces. Free shipping storewide
Limited
Same message — one badge is enough.
✗ Don't
HOT
Spring new arrivals NEWLimited
First drop: 24 pieces Free ship
HotSlashMember
Tap for a ¥5 no-minimum coupon
Badges, corner tags, dashed lines everywhere — same info, twice the noise.
Breathing room
The gaps between content and edges, and between content blocks. Gaps are design too — squeeze them out and content fights.
✓ Do
Account security
Password last changed 90 days ago
Change password
Leave space between blocks so the eye has somewhere to rest.
✗ Don't
Account security
Password last changed 90 days ago. Please update soon to keep your account safe
Change password
Phone 138****0000
Email xiaoyu@mail.cn
Everything jammed to the edges — reading feels breathless.
Visual hierarchy
Who matters most, who stands out. Size, weight, and color are the three levers — lift only one hero at a time.
✓ Do
March statement is ready
Total spent ¥2,318, down 12% vs last month
View breakdown
One hero, one supporting line, one action — the eye has a path.
✗ Don't
March statement is ready!
Total spent ¥2,318!
Down 12% vs last month!!
View breakdown
Every line shouts — so nothing is the focus.
Visual weight
How hard an element grabs attention — size, value, and solidity. Save the heavy slots for the primary action.
✓ Do
Total
¥86.00
Place orderKeep shopping
Primary solid, secondary outline — weight ranks priority for you.
✗ Don't
Total
¥86.00
Place orderCancel order
Two buttons equally heavy — one slip and you tap the wrong one.
Proximity
Related things sit close; unrelated ones sit apart. Distance itself carries grouping.
✓ Do
Recipient
Wang Xiaoyu
Shipping address
502, Bldg 3, 12 Warehouse St, Xiangzhou, Zhuhai
Labels hug their own fields; groups sit apart — you know who belongs with whom without reading.
✗ Don't
Recipient
Wang Xiaoyu
Shipping address
502, Bldg 3, 12 Warehouse St, Xiangzhou, Zhuhai
Even spacing everywhere — labels float between fields, so ownership is a guess.
Contrast
How far text pulls away from the background. Elegant gray and unreadable gray sit on opposite sides of a readability line.
✓ Do
Refund policy
Request a refund within 7 days of delivery. Platform covers shipping.
Last updated: Aug 2026
Title darkest, body next — key copy readable at a glance.
✗ Don't
Refund policy
Request a refund within 7 days of delivery. Platform covers shipping.
Last updated: Aug 2026
Light gray on light gray — key terms are a slog to read.
Baseline alignment
Edges land on the same invisible lines. Alignment is free order.
✓ Do
Notification settings
Comment alerts
Like alerts
System messages
Left edges share one line — order for free.
✗ Don't
Notification settings
Comment alerts
Like alerts
System messages
Each row starts somewhere else — the eye keeps hunting for a starting point.
HSV
A color splits into three knobs: hue (H) for which color, saturation (S) for how vivid, value (V) for how dark. About Face 4 asks designers to think in knobs — same when you tune color with AI. Speak knob by knob; don't just complain "the color looks bad."
✓ Do
50200400600800
Turn only the value knob — depth builds hierarchy while hue stays one family.
✗ Don't
Twist all three knobs at once — five hues fight, and none wins.
Ordered variables
Visual attributes whose values naturally rank. Size, value, and position are ordered — good for hierarchy, quantity, sequence. Hue and shape are unordered — only for categories. From Bertin's Semiology of Graphics; About Face 4 keeps the same judgment.
✓ Do
LowLowerMidHigherHigh
Value light to dark — risk ranks without reading labels.
✗ Don't
LowLowerMidHigherHigh
Hue has no order — which tier is riskier means memorizing a key.
Affordance
The "how do you use me" signal in an element's look. Raised edges, shadows, texture say clickable or draggable; spam the signal and readers poke things that don't move. About Face 4 notes texture rarely serves contrast — its real job is affordance.
✓ Do
Save settings
Last saved 5 minutes ago
Clickable things look like buttons; pure info stays quiet — signals stay in their lanes.
✗ Don't
Auto-renewal notes
Membership perks
Current version 3.2.1
Every block has shadow and border — all look tappable, none respond.
Squint test
Squint at the screen: what still pops, what blurs into mush, what clumps into groups. About Face 4's hierarchy checkup — five seconds, do it before you ship.
✓ Do
August report is ready
42 projects on time; 2 exceptions pending
View report
Squinting, title and primary button still hold — hierarchy passes.
✗ Don't
August report ready to view
42 projects delivered on schedule
2 exceptions awaiting confirmation
Click here for the full report
A gray blur — nothing important stands out. Send it back.
You've walked all twelve words. What they share: each points at something you can count, measure, and verify — how many data rows, how many badges, how many spacing steps, how many colors. At that grain, AI can fix the right thing. Next time you critique a UI, swap "looks good / looks bad" for these twelve.
Try it · Eight variables, one fitting room
The words above cover how to critique; these variables cover how to change. Bertin's Semiology of Graphics breaks visual encoding into eight variables; About Face 4 keeps the list: shape, size, value, hue, saturation, orientation, texture, position. Every "looks different" on a UI bottoms out at these eight knobs. Same row of tiles — twist a different variable, tell a different story.
Eight-variable fitting room0 / 8
Pick a variable and watch how it separates a row of identical tiles. Try all eight for the wrap-up.
Five identical elements — you can't tell what's important, what's grouped, or what's clickable. Pick a variable and try it.
ShapeUnordered The round one is "another class," but you have to stare to find it. Shape carries "what it is" via outline; reading it costs more attention than color or size. Don't count on it to grab focus — that's how you tap the wrong Dock icon.
SizeOrdered · Quantifiable Nobody taught you — you already ranked them small to large. Size is naturally ordered, perfect for hierarchy and quantity. Bertin notes it is dissociative: when elements get too big or too small, shape and other variables get swallowed.
ValueOrdered Light–dark contrast is what the eye grabs first — deepen what you want to highlight. On maps, darker often means denser population; you guess without a legend. For strength, density, hierarchy — start here.
HueUnordered Five hues only say "five categories" — not who comes first. Before you use hue for sequence, clear two gates: can color-blind readers still read it; and cultural associations will betray you — red means sell on a stock chart, joy on a Chinese couplet.
SaturationQuantifiable The most vivid pops; the dull ones recede. Save the vivid slot for one: when the whole row is vivid, you get About Face 4's carnival effect — everyone shouts, so no one speaks.
OrientationSemi-ordered The downward one says "down." Orientation can carry up/down, advance/retreat, but tiny elements blur it — use it as a secondary signal. Here it pairs with value and hue as a double check.
TextureAffordance signal The striped one looks like a drag handle. Reading texture costs attention — rarely use it for contrast. Its job is operation signals: stripes say drag, raised says press. In the flat era, using a little of it actually teaches faster.
PositionOrdered The four clustered together are a crew; the loner on the right is an outsider. Position is naturally ordered: top-left is read first, near means related. It handles grouping and hierarchy — free of charge.
All eight variables tried — three takeaways. For hierarchy and quantity, twist ordered variables like size and value. For categories, then hue — and mind color blindness and cultural associations. Shape and texture cost attention: one says "what it is," the other "can I press it." Before you change a UI, ask: am I encoding order, or category?
Practice · Risk needs a queue
Scenario: how to draw five risk tiersSingle choice
A dashboard needs five risk tiers, readable low-to-high at a glance. Which variable do you twist?
AFive hues — green, yellow, orange, red, purple for each tier
BOne hue, value light-to-dark across five tiers
CFive shapes — circle, square, triangle, and so on
DAdd texture only to the high-risk tier
Vision handles category; text handles identity
About Face 4 has a ballast rule: use visual attributes to show what something is; use text to say which one it is. An icon can say "this is a document" and stops there — which one is the contract needs the filename. Each does its own job; neither replaces the other.
Where vision stopsTwo-way toggle
Flip it — see where vision stops and text takes over.
Q1 purchase contract.docx
Vendor quote comparison.docx
Meeting notes 0811.docx
Three icons say "all documents" and run out of words — finding the contract means opening each one.
Try it · Translate complaints into variables
Clients and bosses won't say the terms, but every complaint points somewhere. Hear the variable behind the complaint, and you know where to change. Start with four classics.
Complaint translator0 / 4
Tap a complaint on the left, then its matching term on the right. Correct pairs lock in.
Client complaints
"It's a mess"
"Looks cheap"
"Nothing stands out"
"Too cramped"
Translated terms
Missing hierarchy
Visual noise too high
Not enough whitespace
Color over budget
All four translated. "Messy" points to visual noise; "cheap" to color over budget; "nothing stands out" to hierarchy; "cramped" to whitespace. Every client complaint can become a variable — translate first, then change, so the fix has a direction.
Take this cheat sheet with you
Eight words reshaped into AI-ready lines — each pastes straight into a prompt. Copy one, keep it, pick from it next time you revise a UI.
Taste vocabulary cheat sheet for AICopyable
Taste vocabulary cheat sheet for AI (swap in for "make it look better")
Information density: Density on this screen is low — fit two more key data rows on the same screen.
Visual noise: Too many badges and dividers; visual noise is over the line — cut decoration in half.
Breathing room: Increase spacing between blocks for breathing room; keep content off the edges.
Visual hierarchy: Separate title and body by size and weight — one hero per screen.
Visual weight: Keep the primary button solid; drop the rest to outlines to lower visual weight.
Proximity: Hug each label to its own field; pull groups apart — use distance to show grouping.
Contrast: Body text vs background contrast is too low — deepen gray text to a readable level.
Baseline alignment: Align all left edges to one baseline; don't let each row start on its own.
HSV: Talk color by knobs — hue, saturation, value — change one at a time.
Ordered variables: To encode low-to-high, twist value or size — don't swap hue.
Affordance: Make clickable things look clickable; pure display shouldn't wear button energy.
Squint test: Squint once before shipping — if the hero doesn't pop, send it back.
One more question before you go
Scenario: no premium feelSingle choice
Your boss holds up the page: "It has no premium feel." Per this lesson, what do you check first?
ASwap in an expensive font
BCount how many colors and corner radii are on the page
CAdd motion
DDeepen the shadows
Key Takeaways
✓
"Looks good" is a wish; terms are commands: name information density and visual noise, and AI knows where to change.
✓
Every complaint can become a variable: "messy" is visual noise over the line; "looks cheap" is color over budget — translate first, then fix right.
✓
Eight variables, eight jobs: hierarchy and quantity use ordered variables (size, value); categories use hue; shape says "what it is," texture says "can I press it."
✓
Next time you ask AI to revise a UI, pick one word from the cheat sheet into the prompt, compare it with "make it look better," and feel the gap.
Source: Original to Xiaoshan Academy's Taste Engineering series; some principles adapted from About Face 4: The Essentials of Interaction Design, Chapter 17.
Turn the feeling in “If you can't name it, you can't fix the right place” into a judgment
“Hand over "make it look better" and AI can only guess: maybe add a gradient, swap the font, pile on motion.” points out that AI has lowered the bar for making something usable. The skill readers need is noticing what is wrong and turning that feeling into an actionable requirement.
Watch the user's next action, not just the surface
Turn “How much useful information fits per unit area.” into observable questions: does the user know what happened, what to do next, and how to recover from an empty or failed state? Does the hierarchy make the important information visible first?
Pretty is not the same as usable
Apply “Next time you ask AI to revise a UI, pick one word from the cheat sheet into the prompt, compare it with "make it look better," and feel the gap” to a second screen or flow. Record one moment of hesitation and the user action after the change; observable behavior is stronger evidence than polish alone.
From “If you can't name it, you can't fix the right place” to “Try it · Eight words, flip them one by one”
“If you can't name it, you can't fix the right place” grounds the problem in “Hand over "make it look better" and AI can only guess: maybe add a gradient, swap the font, pile on motion. Hand over "raise information density one notch, cut visual noise" and AI knows what to move: add two m…”. “Try it · Eight words, flip them one by one” then moves it toward “How much useful information fits per unit area. Low density wastes the reader's screen; high density without hierarchy is what feels cramped”. Together, they show that the lesson is not just a conclusion to remember, but a claim with conditions.
Carry the judgment into the next situation
For experience work, turn abstract impressions into user actions: did the person understand the state, find the next step, recover from an error, and want to continue?
“If you can't name it, you can't fix the right place”: Hand over "make it look better" and AI can only guess: maybe add a gradient, swap the font, pile on motion. Hand over "raise information density one notch, cut visual noise" and AI knows what to move: add two m…
“Try it · Eight words, flip them one by one”: How much useful information fits per unit area. Low density wastes the reader's screen; high density without hierarchy is what feels cramped
“The closing point”: How far text pulls away from the background. Elegant gray and unreadable gray sit on opposite sides of a readability line
The final “The closing point” brings the discussion to “How far text pulls away from the background. Elegant gray and unreadable gray sit on opposite sides of a readability line”. The useful thing to carry forward is knowing which judgments must be revisited when input, scale, or risk changes.
Mark as learned Your reading progress updates automatically
I turned one judgment from this article into a small experiment I could run today. Knowing what to observe next is more useful than simply remembering the conclusion.
ARTICLE DISCUSSION7 helpful
LH
Lin HarperIndie developer
INSIGHTInsight
After reading this, I first looked for the conditions behind the idea instead of copying the method into a project. That order made the later trade-offs much clearer.
ARTICLE DISCUSSION5 helpful
KM
Kiki MooreProduct operations
QUESTIONQuestion
When this judgment reaches real work, which constraint should be added first? I am curious which step matters most between reading and the first practical attempt.
I turned one judgment from this article into a small experiment I could run today. Knowing what to observe next is more useful than simply remembering the conclusion.
After reading this, I first looked for the conditions behind the idea instead of copying the method into a project. That order made the later trade-offs much clearer.
When this judgment reaches real work, which constraint should be added first? I am curious which step matters most between reading and the first practical attempt.
No discussion on this article yet.