Product design / Practical notes

Why a Beautiful Interface Can Still Have Poor UX

A polished screen can still leave someone unsure what to do. Review the task and the states around it before deciding that the answer is more visual emphasis.

Ask what the person can explain

I ask what the person can explain after looking at the screen. What is happening, which action makes sense and what do they expect next?

If the answer is unclear, stronger color or another animation may only make the same confusion more noticeable. The missing explanation could be in the state, the content or the way the task is divided.

Look at the state the polished view leaves out

Yarsha’s populated contacts and no-contact result show why the neighboring state matters. The normal list explains the objects; the empty search needs to explain how to continue.

Both views need to feel like part of the same task. A good-looking populated screen cannot answer what happens when the person’s search finds nobody.

Yarsha contact search preserves the entered query, Contacts and Invite tabs, empty result and keyboard.
Yarsha contact search preserves the entered query, Contacts and Invite tabs, empty result and keyboard. Full original Figma frame; design content is sample data.

Inspect the original Figma frame (access may be required)

Yarsha contact directory pairs names and wallet identifiers with search and an add-contact action.
Yarsha contact directory pairs names and wallet identifiers with search and an add-contact action. Full original Figma frame; design content is sample data.

Inspect the original Figma frame (access may be required)

Use four small diagnostic tasks

  • Explain the main action before selecting it.
  • Find the state and next action without relying on a color cue.
  • Trigger one error and recover without re-entering valid work.
  • Reach the same result using a keyboard and a narrow viewport.

Distinguish motion from feedback

A movement or color change can signal activity without explaining the result. For a consequential action, feedback should establish whether the operation is still pending, completed, rejected or unresolved. Animation can support that explanation; it should not replace it.

Also review reduced-motion behavior. If the only way to understand a result is to follow an animated sequence, the product needs an equivalent explanation that remains usable without that sequence.

Repair the model before adding emphasis

A larger primary button will not resolve an action whose meaning is unclear. First decide the task, state and consequence. Then use the visual system to make that decision easier to read.

For portfolio review, I prefer to connect a specific screen to the decision it supports and the questions still open. An attractive interface is evidence of craft. A task-based review supplies the additional evidence needed to judge the experience.

Continue reading

RELATED EXPLORATION

Inspect the source example

RELATED EXPLORATION

Review task behavior

RELATED EXPLORATION

Write a useful zero-result explanation

NEXT FILE / YOUR PRODUCT

Got a product in mind?

Let’s talk