Daily UX tips
One practical design tip a day, with a quick check question. Answer it to earn XP and grow your streak. Below you'll find all 49 tips, grouped by topic.
Sign in with Google to keep your tip streak on every device.
Your daily dose of UX will appear here. Browse all tips.
Why it matters
Try it
Quick check
Normal text needs a contrast ratio of at least 4.5:1 against its background. Large text (about 24px, or 19px bold) needs 3:1.
Why it matters: Low contrast is the most common accessibility failure on the web, and it hurts everyone in bright sunlight, not just people with low vision.
Try it: Run your main text and button colours through a contrast checker today.
Do not rely on colour alone to show errors, status or required fields. Add an icon, text or a pattern too.
Why it matters: About 1 in 12 men has some form of colour vision deficiency, and colour also disappears in grayscale mode and bright light.
Try it: Convert one of your screens to grayscale. Can you still tell what is an error?
Never remove the keyboard focus outline without replacing it with something equally clear.
Why it matters: Keyboard and switch users rely on the focus ring to know where they are on the page.
Try it: Press Tab through your site. Can you always see where you are?
Alt text should describe the purpose of an image, not just its looks. Decorative images should have empty alt text.
Why it matters: Screen reader users hear alt text instead of the image. “Image123.png” helps nobody.
Try it: Rewrite one alt text so it says what the image is for.
Comfortable reading happens at roughly 50 to 75 characters per line. Longer lines make it hard to find the next line.
Why it matters: Eyes lose their place on very long lines and tire quickly on very short ones.
Try it: Set max-width: 65ch on your article text.
Body text under 16px is hard to read on many screens. Start at 16px or larger and scale up from there.
Why it matters: Small text excludes older users and anyone reading on a phone outdoors.
Try it: Bump your body text up by 1–2px and see how the page feels.
Use one typeface for headings and one for body, at most. Create hierarchy with size and weight instead of more fonts.
Why it matters: Too many fonts look chaotic and slow the page down.
Try it: Count the typefaces on your site. Can you cut one?
Body text reads best with a line height around 1.5, and headings with tighter spacing around 1.1–1.3.
Why it matters: Cramped lines are tiring to read, and loose headings look disconnected.
Try it: Set line-height: 1.5 on paragraphs and 1.2 on headings.
Pick a spacing scale (4, 8, 16, 24, 32…) and use only those values. Consistent gaps make layouts feel calm.
Why it matters: Random spacing makes interfaces look unfinished, and a scale makes decisions faster.
Try it: Replace three odd gaps in a design with scale values.
Make one action clearly primary. If everything is a bold button, nothing stands out.
Why it matters: People decide faster when the main path is obvious.
Try it: Squint at a screen. Is the primary action the first thing you notice?
Items that are close together are read as related. Use space to group content before reaching for borders and boxes.
Why it matters: The Gestalt law of proximity does the grouping for you, with less visual noise.
Try it: Remove one divider line and fix grouping with spacing instead.
On text-heavy pages people scan in an F-like pattern: across the top, then down the left. Put key words at the start of lines and headings.
Why it matters: Most visitors skim before deciding to read.
Try it: Rewrite one heading so the important word comes first.
Always use a visible label above the field. Placeholders vanish while typing and often fail contrast.
Why it matters: People forget what a field was for once the placeholder disappears.
Try it: Move one placeholder into a proper label.
Every extra form field lowers completion. Only ask for what you need right now.
Why it matters: Long forms feel like work and people abandon them.
Try it: Delete one optional field from your signup form.
Place error messages right beside the field and say how to fix it, in plain words.
Why it matters: A message at the top of a long form makes people hunt for the problem.
Try it: Rewrite one error as “what happened + how to fix it”.
Use the right input type so phones show the right keyboard: email, tel, number, url.
Why it matters: The correct keyboard makes typing faster and reduces mistakes.
Try it: Check that your phone number field opens the numeric keypad.
Tappable elements should be at least 44–48px with space between them.
Why it matters: Fingers are much less precise than cursors (Fitts’s Law).
Try it: Check the smallest button on your mobile design.
Show a visible reaction to every tap or click: pressed state, loading indicator, success message.
Why it matters: Silence feels like the app is broken.
Try it: Tap your own buttons and check each one reacts.
Let people undo an action instead of asking for confirmation every time. Confirm only for destructive, irreversible actions.
Why it matters: Constant confirmations get ignored, while undo restores control.
Try it: Replace one confirmation dialog with an undo toast.
Use skeleton screens or progress indicators while loading so people know something is happening.
Why it matters: Perceived wait time drops when the interface responds immediately.
Try it: Replace one spinner with a skeleton of the final layout.
Five users usually reveal most major usability problems in one round. Test early and often rather than once with many.
Why it matters: Small rounds are cheap, fast and find the issues that matter most.
Try it: Book five 20-minute sessions this month.
Ask “Tell me about the last time you…” instead of “Would you use…?”. People are bad at predicting their own behaviour.
Why it matters: Past behaviour is the most reliable evidence you can collect.
Try it: Rewrite one interview question to ask about a past event.
During testing ask participants to say what they are thinking. Stay quiet and observe instead of helping.
Why it matters: Their words reveal expectations and confusion you cannot see.
Try it: Run one think-aloud test and write down every hesitation.
Analytics show where users drop off. Interviews and tests explain the reason. Use both.
Why it matters: A drop-off number alone invites guessing.
Try it: Pick one drop-off in your funnel and talk to three users about it.
Use short words and sentences. If a 12-year-old would stumble, rewrite it.
Why it matters: Plain language helps everyone, including experts in a hurry.
Try it: Cut one jargon word from your homepage.
Put the most important words at the start of a heading so skimmers catch them.
Why it matters: Readers decide in seconds whether to keep reading.
Try it: Reorder one heading so the key word comes first.
Use specific verbs on buttons: “Download report”, not “Submit”. People should know the outcome before tapping.
Why it matters: Vague labels create hesitation and mistakes.
Try it: Rename one “Submit” button with a specific action.
Lorem ipsum hides layout problems. Use realistic text, long names and empty states when you design.
Why it matters: Real content breaks designs in ways placeholders never do.
Try it: Replace placeholder text in one mock-up with real copy.
On phones, the bottom of the screen is the easiest to reach. Put frequent actions there and avoid tiny controls in top corners.
Why it matters: Most people hold phones one-handed.
Try it: Move the most-used action to the bottom of one screen.
Do not hide essential information or actions behind hover. Phones and tablets cannot hover.
Why it matters: Anything only available on hover is invisible to touch users.
Try it: Find one hover-only feature on your site and give it a tap equivalent.
Start with the smallest screen. It forces you to prioritise, and it is easier to add to a simple layout than to squeeze a complex one.
Why it matters: Constraints produce focus.
Try it: Sketch your next screen at 375px wide first.
Do not disable pinch-to-zoom. Users with low vision rely on it.
Why it matters: Blocking zoom fails accessibility guidelines.
Try it: Check your viewport meta tag does not set maximum-scale=1.
Animate to explain: show where something came from, what changed, or what to do next. Avoid animation as decoration only.
Why it matters: Purposeful motion guides attention; random motion distracts.
Try it: Remove one animation that has no job.
Most interface transitions feel right between about 200 and 500 milliseconds. Faster feels abrupt, slower feels sluggish.
Why it matters: Timing shapes how responsive an interface feels.
Try it: Time one of your transitions and nudge it into range.
Honour the prefers-reduced-motion setting. Offer calmer or no animation for people who ask for it.
Why it matters: Large motion can trigger nausea and dizziness for some people.
Try it: Add a prefers-reduced-motion rule that tones down one animation.
Elements that enter the screen feel natural when they decelerate (ease-out). Elements that leave usually accelerate (ease-in).
Why it matters: Natural easing mimics real-world physics.
Try it: Switch one entering animation from linear to ease-out.
Use one brand colour, one or two neutrals and a few status colours. Add shades rather than new hues.
Why it matters: Fewer colours feel more deliberate and are easier to keep accessible.
Try it: List every colour in your UI. Which can merge?
Dark mode needs its own tuned palette: softer surfaces, slightly desaturated accents and checked contrast. Avoid pure black on pure white glare.
Why it matters: Simple inversion often breaks contrast and looks harsh.
Try it: Check one accent colour in both themes for contrast.
Use red for errors, green for success, amber for warnings, every time. Do not reuse them decoratively.
Why it matters: People learn colour meanings and get confused when they change.
Try it: Audit one screen for decorative red or green.
Bright brand colours often fail contrast on white or as text. Create a darker text-safe variant of your brand colour.
Why it matters: A beautiful colour that nobody can read is a bug.
Try it: Create a text-safe shade of your brand colour.
Explore several rough ideas on paper before committing to polished screens. Cheap ideas are easy to throw away.
Why it matters: Early polish makes ideas hard to criticise and change.
Try it: Sketch three layout options for your next screen in 10 minutes.
Build buttons, inputs and cards once as components and reuse them. Fix something once and it updates everywhere.
Why it matters: Consistency and speed both come from reuse.
Try it: Turn your most repeated element into a component.
Name layers and frames meaningfully. Future you, and your developer, will thank you.
Why it matters: Clear names make handoff and edits much faster.
Try it: Rename “Frame 1284” to something that means something.
Walk developers through key flows and edge cases rather than just sharing a file. Include empty, loading and error states.
Why it matters: Most bugs come from unspecified states, not pixels.
Try it: Add empty and error states to your next handoff.
The more options you show, the longer people take to decide. Group, highlight a recommendation and reveal advanced options later.
Why it matters: Choice overload stalls decisions and conversions.
Try it: Cut a menu from nine items to five.
People spend most of their time on other sites, so they expect yours to work the same way. Follow familiar patterns unless you have a strong reason.
Why it matters: Familiarity reduces learning effort.
Try it: Check your navigation against two popular sites.
People remember the most intense moment and the ending of an experience, not the average. Polish both.
Why it matters: A great finish can redeem a mediocre middle.
Try it: Improve the success screen of your main flow.
The item that differs from the rest is remembered. Give your single most important element a distinct treatment.
Why it matters: Distinctiveness draws attention, but only works when used sparingly.
Try it: Check that only one element on a screen is visually “loudest”.
Responses faster than about 400 milliseconds keep people in flow. Slower than that, show feedback.
Why it matters: Speed is a UX feature; perceived speed counts too.
Try it: Measure how long your main action takes to respond.