Printable

UX cheat sheet

Every law in the course and the numbers worth memorising. Print it or save it as a PDF.

Cheat sheet

UX laws on one page

Bad Design Academy by Bad Design
baddesign.io/academy/

4.5 : 1Minimum contrast for normal text (AA)

3 : 1Large text and UI components

24 pxMinimum target size (AA)

44 pxComfortable touch target

16 pxMinimum mobile body and input text

45 to 75Characters per line

1.4 to 1.7Body line height

8 ptSpacing grid base

60 / 30 / 10Neutral / secondary / accent

~1 secondShow feedback within

Visual hierarchy: Arrange size, weight, color and position so people see the most important thing first.
Law of Proximity: Items placed close together are seen as related.
Alignment: Elements that share edges create order and are easier to scan.
Consistency & standards: The same thing should look and behave the same way everywhere.
Whitespace: Empty space groups content, sets focus and makes pages feel calm and premium.

WCAG 2.2 AA contrast: Normal text needs at least 4.5:1 contrast with its background. Large text and UI parts need 3:1.
Von Restorff effect: When similar items are shown together, the one that differs gets noticed and remembered.
60-30-10 rule: A balanced palette is roughly 60% neutral, 30% secondary and 10% accent.
Don't rely on color alone: Color should never be the only way to show meaning.

Fitts's Law: The time to hit a target depends on its size and its distance from the pointer or thumb.
Hick's Law: The more options people see, the longer they take to decide.
Miller's Law: Working memory holds only a few items, so chunk information into groups.
Jakob's Law: Users spend most of their time on other sites and expect yours to work the same way.
Serial position effect: People remember the first and last items in a series best.

User control & freedom: Give people a clear way to undo, cancel or go back when they make a mistake.
Visibility of system status: Always show people what is happening, ideally within a second.
Help users recover from errors: Error messages should be plain, specific and tell people how to fix the problem.
Match the real world: Use words, concepts and order that your users already know.
Recognition over recall: Show options instead of making people remember them.

Helpful error messages: A good error explains the problem and the fix, right next to the field.
CTA copy: Button labels should describe what the user gets, not what the system does.
Visible labels: Keep form labels visible above fields. Placeholders are not labels.
Ask only what you need: Every extra field lowers completion, so ask only what this step needs.
Empty states: An empty screen should explain what goes there and how to fill it.

WCAG 2.2 target size: Clickable targets should be at least 24 by 24 CSS px (AA), and ideally 44 by 44.
Visible focus: Keyboard users need a clear indicator of where they are on the page.
Alt text: Describe meaningful images in alt text, and give decorative images an empty alt.
Peak-end rule: People judge an experience mostly by its best moment and its ending.
Trust signals: Lower perceived risk with proof and reassurance at the moment of decision.

Line length: Keep lines around 45 to 75 characters for comfortable reading.
8-point spacing grid: Space things in multiples of 8 (and 4 for fine tuning) to keep layouts consistent.
Type scale: Use a small, consistent set of font sizes and weights.
Mobile body text size: Use at least 16px for body text and form inputs on mobile.
Line height: Body text reads best with line height around 1.4 to 1.7.