UI/UX Design Cheat Sheet – Laws, Contrast & Sizes

UX and UI basics Lesson

`UX (user experience)`	How the whole product works and feels to use
`UI (user interface)`	The screens, controls and visuals people interact with
`Usability`	Can people reach their goal easily, quickly and without errors?
`Learnability, efficiency, memorability, errors, satisfaction`	NN/g's five parts of usability
`Accessibility`	Usable by people with disabilities; design it in from the start
`User-centred design`	Decisions based on evidence about users, not opinions

`Empathise → Define → Ideate → Prototype → Test`	The five stages; loop back whenever you learn something
`Problem statement`	Who has the problem, what it is, and why it matters
`"How might we…?"`	Turns a problem into an open question for ideas
`Diverge, then converge`	Generate many ideas first, then choose
`Double Diamond`	Discover, Define, Develop, Deliver
`Fail early`	Cheap prototypes reveal wrong ideas before costly builds

`Interviews`	Qualitative: learn why people do things
`Surveys`	Quantitative: learn how many; keep them short
`Analytics`	Shows what people do, not why
`Field study / contextual inquiry`	Watch people in their real setting
`Ask about past behaviour`	"Tell me about the last time…" beats "Would you…?"
`Open questions`	Ask "how" and "what"; avoid yes/no and leading questions
`Say vs do`	What people say and what they do often differ; observe

`Persona`	A realistic user profile built from research, not guesses
`Goals, frustrations, context`	The parts of a persona that guide design decisions
`Primary persona`	The main user each design must satisfy first
`Empathy map`	Says, Thinks, Does, Feels
`Journey map`	Steps, feelings and pain points across a whole task
`Scenario`	A short story of a persona using the product for a goal

`Sitemap`	The hierarchy of all pages or screens
`User flow`	The path a user takes to finish one task
`Open card sort`	Users group topics and name the groups
`Closed card sort`	Users sort topics into groups you provide
`15 participants`	NN/g's recommended number for a card sort
`Tree testing`	Tests if people can find items in a text-only menu
`Labels`	Use your users' words, not internal jargon
`Breadcrumbs`	Show where you are in a deep hierarchy

`Wireframe`	Low-fidelity layout: structure and content, no styling
`Mockup`	Static high-fidelity visual design
`Prototype`	Clickable version used to test a flow
`Greyscale first`	Keeps feedback on layout, not colours
`Real content`	Use real headings and labels, not lorem ipsum, where you can
`Mobile first`	Design the smallest screen first to set priorities
`Annotations`	Notes explaining behaviour, rules and edge cases

`Trigger → Action → Animation`	The three settings of every Figma interaction
`On click/tap, On drag, While hovering, After delay`	Common triggers: what the user does
`Navigate to, Back, Open overlay, Change to`	Common actions: what happens
`Smart animate`	Animates layers with the same name and place in the hierarchy
`Interactive components`	Add interactions to variants, e.g. On tap → Change to
`Set variable + Conditional`	Store values and add simple if/else logic
`Flow starting point`	Where a prototype begins; name it after the task
`Dev Mode`	Where developers inspect specs for hand-off

Wire only the screens and paths needed for the tasks you plan to test.

`Size`	Bigger elements are noticed first
`Contrast and colour`	Strong contrast pulls the eye; save it for key items
`White space`	Space around an element gives it importance
`Proximity`	Items close together are seen as a group
`Similarity`	Items that look alike are seen as related
`Alignment`	A shared edge makes a layout feel ordered
`One primary action`	Make the main button on a screen clearly stand out
`F-pattern`	How people scan text-heavy pages; front-load key words
`8-point grid`	Spacing in multiples of 8 (4 for tight gaps) keeps rhythm

Squint test: blur your eyes at the screen; the first thing you see should be the most important.

`Hick's law`	More choices mean slower decisions; reduce or group options
`Fitts's law`	Big, close targets are faster to hit
`Jakob's law`	Users expect your site to work like ones they know
`0.1 s`	Feels instant; no feedback needed
`1 s`	Flow is kept; beyond this, show that something is happening
`10 s`	Attention is lost; show progress and allow cancel

`4.5:1`	Minimum for normal text (AA)
`3:1`	Minimum for large text: about 24px, or 18.5px bold (AA)
`3:1`	Minimum for icons, input borders and control states (SC 1.4.11, AA)
`7:1`	Enhanced contrast for normal text (AAA)
`Not colour alone`	Pair colour with text, icons or patterns (SC 1.4.1)
`Colour roles`	Primary, neutral and status colours (success, warning, error)
`Test both themes`	Check contrast in light and dark mode

`16px`	A common minimum for body text on the web
`1.5 line height`	Comfortable spacing for paragraphs (WCAG 1.4.8, AAA)
`≤ 80 characters per line`	Keeps lines easy to follow (WCAG 1.4.8, AAA)
`1–2 typefaces`	Create variety with size and weight instead
`Type scale`	A fixed set of sizes for headings and body text
`Left-aligned text`	Easier to read than centred or justified paragraphs
`200% zoom`	Text must resize without loss of content (SC 1.4.4)
`Avoid long ALL CAPS`	Harder to read in blocks; fine for short labels

`24 × 24 CSS px`	WCAG 2.2 minimum target size, or enough spacing (AA)
`44 × 44 CSS px`	WCAG enhanced target size (AAA)
`44 × 44 pt`	Apple HIG minimum hit target on iOS
`48 × 48 dp`	Material Design / Android minimum touch target
`Visible focus`	Keyboard users must see where they are (SC 2.4.7, AA)
`Focus not obscured`	Sticky bars must not fully hide the focused item (SC 2.4.11, AA)
`Visible labels`	Placeholders disappear; they are not labels
`Alt text`	Describe the purpose of images; empty alt for decorative ones

`5 users`	Finds most problems in a qualitative test; then fix and retest
`Think-aloud`	Participants say what they think as they work
`Task scenario`	A realistic goal, not step-by-step instructions
`Don't lead`	Avoid hints and the exact words used on buttons
`Moderated vs unmoderated`	With a facilitator present, or done alone online
`Severity rating`	Rank issues so the worst are fixed first
`Test early`	Paper sketches and wireframes can be tested too

For numbers you plan to compare (quantitative studies), NN/g suggests about 20 users.

`Visibility of system status`	Always show what is happening
`Match between the system and the real world`	Use familiar words and concepts
`User control and freedom`	Offer undo, back and cancel
`Consistency and standards`	Same words and actions mean the same thing
`Error prevention`	Stop mistakes before they happen
`Recognition rather than recall`	Show options instead of making people remember
`Flexibility and efficiency of use`	Shortcuts for experts that don't confuse beginners
`Aesthetic and minimalist design`	Remove anything that competes with what matters
`Help users recognise, diagnose and recover from errors`	Plain error messages that suggest a fix
`Help and documentation`	Easy-to-search help focused on tasks