Define the primary action
A UI organizes decisions. Before choosing colors, write what the person needs to do on that page. In an order list, it can be finding the pending item and understanding the next step. The primary action should stand out more than occasional actions.
A page with five visually identical buttons forces the user to decide where to look. Differentiate primary action, alternative action, and information. This doesn’t mean hiding options: it means making the reading order match the task.
Why learn
Action clarity lets you judge the design by its usage. You can ask whether the person found and completed the task, rather than debating personal taste.
✓ Do
Use text alongside color to indicate pending status.
✗ Avoid
Approve only the screen with perfect data.
Key concepts
Observe before redesigning
Record the current page and identify concrete problems: cut-off text, ambiguous labels, low contrast, or difficulty finding information. Audit tools and design skills, like Impeccable, can help you investigate, but the decision should point to an effect on usage.
Choose three problems for the first cycle. Preserving behavior that already works reduces the risk of turning a visual improvement into a functional regression. If the problem is a button label, you don’t need to rebuild the entire navigation.
Why learn
A specific observation produces a smaller intervention that’s easier to verify. The previous record allows you to compare the result without relying on memory.
A way to apply
- Record the task and the current page.
- Apply three changes using criteria.
- Check states, keyboard, and small screen.
Key concepts
Ask for variations with criteria
When requesting layout options, keep the content and goal constant. Vary one aspect at a time, such as the position of the action or the grouping of fields. This way you can attribute the difference in results to the visual decision.
A useful request specifies the audience, the task, the constraints, and what needs improvement. “Make it prettier” doesn’t define how to compare proposals. Ask, for example, for two ways to highlight orders without a deadline, keeping the other items and not relying only on color.
Why learn
Comparing proposals with the same data prevents an option from looking better just because it uses less content or hides a difficult state.
Task: find orders that need information.
Data: five orders, one without a deadline and one with a long name.
Changes: hierarchy, labels, and grouping.
Preserve: existing fields, navigation, and actions.
Check: keyboard, narrow screen, and enlarged text.
Key concepts
Design states, not just screens
A UI must handle an empty list, loading, error, success, and long data. The empty state should explain the next step. The error needs to say what happened and how to recover. Success should confirm the result without hiding important information.
Also test keyboard usage. The focus order should follow the reading flow, and the active element must be visible. A button that only appears on hover can make an action inaccessible for other navigation methods.
Why learn
Difficult states are part of the real product. Considering them prevents the page from working only with the short, complete data used in the demo.
✓ Do
Compare proposals with the same data.
✗ Avoid
Swap the entire interface to fix a label.
Key concepts
Check contrast and size
Small text and low contrast require more effort to read. For common content, use a reference contrast ratio of at least 4.5:1 between text and background. Don’t evaluate only the main color: captions, fields, and disabled states also deserve attention.
On narrow screens, check for unintended horizontal scrolling and whether actions remain reachable. Increase the text size to simulate a reading preference. The layout should fit the content, not force the reader to reduce the font to make it fit.
Why learn
Checking makes the visual improvement inclusive and measurable. You avoid approving a nice-looking design that makes reading harder or loses functions on mobile.
| Criterion | Expected evidence |
|---|---|
| Task | Pending status is localized without guessing. |
| Access | All actions work with the keyboard. |
| Layout | Long text doesn’t invade other fields. |
Key concepts
Practice: improve an order list
Use a fictional table with five orders, including a long name and a missing deadline. Define the primary action and propose three improvements. Record one screenshot before and another after, using the same data and the same width.
Write a usage justification for each change. Then go through the page with Tab, increase the text, and reduce the window. Your submission is a clearer page and a verification record, not just a nice-looking image.
Why learn
The exercise combines diagnosis, intervention, and testing. The habit of justifying each change helps you maintain consistency when other people join the project.
Your exercise
An order with no deadline appears only with a red background. The primary button is called “OK”. Propose changes that make the next step explicit.
Download practice sheetCheck the commented answer
Add the label “Pending deadline”, keep the color as support, and rename the action to “Inform deadline”. Group the action with the corresponding order. Check focus, reading the long name, and that it works without relying on color.
Check your understanding
Which comparison between two proposals is more useful?
Key concepts
What stays from this module
A before/after comparison with three verified improvements.
- ✓ Pending status is localized without guessing.
- ✓ All actions work with the keyboard.
- ✓ Long text doesn’t invade other fields.
Progress records your reading. The practice is completed when you check the submission.