UI & UX Design: Why Some Screens Just Work

You are in a hurry at a ticket machine. One button is huge and green at the edge of the screen; you hit it without looking. Another screen asks you to choose from thirty-two fare types, and you stand there. A third has grey text on a slightly lighter grey that you can only read by tilting the screen. A fourth asks whether you want insurance and shows two buttons, one bright, one that says "No thanks, I'd rather risk it". You did not study any of this, and you still felt every one of those decisions.

Designers study them. UI (user interface) is what is on the screen. UX (user experience) is everything about how it feels to get something done, from the first search to the support email. The field draws on psychology, vision science and engineering: Paul Fitts published his law of movement time in 1954, William Hick his law of choice in 1952, and the Gestalt psychologists were describing how we see groups in the early twentieth century. Software teams took these laws and built them into practice.

Test with a few people, fix, and test again

The first move in design is not drawing. It is watching someone try to do the thing. User research covers interviews (what people say), observation (what they do, which differs), and surveys. Its output is often a short description of a typical user, a persona, or a statement of the job a person is trying to get done, called jobs-to-be-done and popularised by Clayton Christensen and colleagues ("people hire a product to do a job"). Personas have critics: invented details can smuggle in stereotypes. Defenders answer that, built from real research, they keep a team talking about real people instead of "the user". Both agree on the test that matters: put a prototype in front of someone.

How many people? Jakob Nielsen and Thomas Landauer modelled it in 1993. If each tester independently notices a given problem with probability p, then n testers find a share 1 − (1 − p)ⁿ of the problems. Across the projects they studied, p averaged 31%. Plug in n = 5 and you get about 85%, which became the famous advice: test with five, fix, and test again, rather than spend everything on one big study.

Without JavaScript: with p = 31%, five testers find about 84% of the problems (Nielsen rounds to 85%), ten find 98%. With p = 10%, five find only 41% and it takes 22 to reach 90%.

Now the debate, because it is real. The slider shows why: the rule depends entirely on p. Nielsen's 31% was an average over projects he studied. Critics, including Jared Spool and Will Schroeder (CHI 2001, who had 49 users do the same task on four commercial sites and concluded that far more than five were needed) and Laura Faulkner (2003, whose sampling study reported that groups of five varied widely, with about ten needed to reach at least 82% of problems), argue that complex products, varied users and many tasks give a much lower p for any given problem. Nielsen's own advice was always about many small rounds rather than one study of five, with a few extra testers for each distinct group of users. Both sides agree on the practical rule: test early, test often, and with each distinct kind of user.

Fitts's law: big and near is fast

Pointing at something takes longer when it is far and when it is small. Fitts (1954) put this into a formula, and in the form most used in computing, the Shannon formulation by Scott MacKenzie, the movement time is a straight line in an "index of difficulty":

Double a button's width and you remove one "bit" of difficulty. Put it twice as far and you add roughly one. Because it is logarithmic, the first doubling of size helps a lot and later doubling helps less. Two consequences are used everywhere. Screen edges act like infinitely deep targets in one direction, since the cursor stops there, which is why the menu bar of some desktop systems is easy to hit. And on a phone, a target needs to fit a fingertip: the W3C's WCAG 2.2 sets a minimum of 24 by 24 CSS pixels for touch targets (success criterion 2.5.8, level AA), and platform guidelines from Apple and Google ask for about 44 and 48 units.

Without JavaScript: a 24 px circle 200 px away has ID = log2(200 ÷ 24 + 1) = 3.22 bits; an 80 px circle 60 px away has ID = 0.81 bits, about four times easier in this measure.

Hick's law: every choice costs time, but not equally

Before you can point, you must decide. Hick (1952) and Hyman (1953) found that with n equally likely, unfamiliar choices, decision time grows with the logarithm of n + 1, not with n. Thirty-two options are not sixteen times worse than two; they are about three times worse.

A natural idea is to split a long menu into two levels of about √n items each. The law says that on its own this is worse: two decisions cost more than one. Studies of menu design in the 1980s, including Landauer and Nachbar (1985), who combined Fitts's and Hick's laws, found broad, shallow menus often beat deep ones. The catch is that the law only holds for choices people have not learned and cannot group. Menus sorted into labelled categories, or ones you use daily, let you skip most options, and an unordered list of thirty-two is searched item by item, which is slower than the law suggests.

Without JavaScript: for 16 options, one menu costs log2(17) = 4.09 units and two levels of 4 cost 2 × log2(5) = 4.64 units.

Gestalt: the eye groups before it reads

Look at six rows of dots with a little more space between rows than between dots in a row. You see rows. Move the rows closer than the dots, and you see columns. Nobody told you to group them: it happened before you thought. The Gestalt psychologists (Max Wertheimer, Kurt Koffka and Wolfgang Köhler, founders of the school in the early twentieth century) described the rules, and designers use them every day. Proximity: near things belong together. Similarity: things that look alike belong together. Others include enclosure, alignment and continuity.

Without JavaScript: with a 14 px gap inside rows and 40 px between rows, the dots read as rows; swap the numbers and they read as columns; when the two are equal the grid has no preferred direction.

The practical lesson is that spacing is meaning. A label sits closer to its own field than to the next one. A group of related buttons is held together by space and a faint box. Where everything is the same distance apart, the eye has nothing to start with. Visual hierarchy adds size, weight and colour so that the eye lands first on what matters. A common way to set sizes is a type scale: multiply a base size by a fixed ratio. A ratio of 1.25 from 16 px gives 16, 20, 25, 31 and 39 px, each step clearly bigger than the last, and you never pick sizes by eye.

Contrast: the number behind readable text

Readable text is not a feeling. The W3C's accessibility standard, WCAG 2.2, defines a contrast ratio between two colours from their relative luminance. Each sRGB channel is first converted to linear light, then weighted by how sensitive the eye is to red, green and blue:

Black on white is 21 to 1, the maximum. The thresholds at level AA are 4.5 to 1 for normal text and 3 to 1 for large text (18 point, or 14 point bold) and for the visible edges of controls. Level AAA asks for 7 to 1. Try it: a mid-grey that looks fine to you on a bright office monitor may fail, and the check is a calculation, not an opinion.

Without JavaScript: #777777 on white has a ratio of 4.48 to 1 and just fails AA for normal text; #767676 on white is 4.54 to 1 and passes. Black on white is 21 to 1.

Drafts of WCAG 3 propose a different model of perceived contrast (called APCA) which some designers prefer, because the current formula treats dark-on-light and light-on-dark text the same way. As of now WCAG 2.2 is the standard that laws and procurement cite. Also remember that colour alone must not carry meaning: roughly one man in twelve of northern European ancestry has a colour-vision difference, so use shape, text or position as well.

Heuristics: ten rules for spotting trouble, and the dark patterns that break them

You cannot always test with people. A cheaper first pass is a heuristic evaluation: a few experts walk through the interface with a checklist. Nielsen and Rolf Molich developed the method around 1990, and Nielsen's ten heuristics (1994) are still the most taught. The Nielsen Norman Group has since updated their wording. They are: visibility of system status; match between the system and the real world; user control and freedom; consistency and standards; error prevention; recognition rather than recall; flexibility and efficiency of use; aesthetic and minimalist design; help users recognize, diagnose and recover from errors; and help and documentation.

The same list helps you see where a design works against the user. Harry Brignull coined the term dark pattern on 28 July 2010 for an interface designed to trick people: a hidden cancel button, a box already ticked to share your data, a refusal button worded to shame you. Regulators now name them. The EU's Digital Services Act, which applied to online platforms from 17 February 2024, prohibits interface design that deceives or manipulates users (Article 25), and a number of consumer-protection cases around the world have been brought over cancellation flows and misleading defaults.

Without JavaScript: the screen has five flaws: a jargon error message (heuristic 9), a destructive "Delete account" button right beside "Save" (heuristic 5), a pre-ticked offer box with a shaming refusal (a dark pattern), a Submit that shows nothing afterwards (heuristic 1) and a final step with no way back (heuristic 3). The heading, the labelled name field and the "Step 3 of 3" line are fine.

Structure and systems: where things live and how they stay consistent

Behind the screens sits information architecture: how content is grouped and named. A common tool is card sorting, where people sort labelled cards into groups they would expect, and its mirror tree testing, where people try to find an item in a bare menu hierarchy. If five people put "returns" under "orders" and none put it under "help", your menu should follow them. Then there are design systems: a shared library of components plus named values (colours, spacing, type sizes), so that two hundred screens built by forty people look and behave as one. Well-known public examples include Google's Material Design, Apple's Human Interface Guidelines and the UK government's GOV.UK Design System. They tie back to the heuristics: consistency and standards is cheaper when the standard is written down, and contrast and target size can be enforced once in the system instead of checked on every screen.

What a graduate just sees

• Watching five people use a prototype beats a week of opinions, and the next round is better than one large study.
• The number of testers needed depends on how likely each problem is to be hit; the 85% for five is a model, not a law.
• Time to hit a target grows with the log of distance over size, so make important targets big and near, and use screen edges.
• Decision time grows slowly with the number of choices, but only when choices are unfamiliar and can't be grouped; sorted and labelled menus beat long raw lists.
• Spacing is meaning: things close together are read as related before a word is read.
• Contrast is a calculation: 4.5 to 1 for normal text, 3 to 1 for large text and control edges.
• Ask of any screen: does it tell me what is happening, let me go back, and speak my language?
• If a design makes the user's best choice hard to find, that is a choice by the designer.

Where it shows up next

• Web Development (36/74): every layout rule there is how you build the spacing, hierarchy and responsive behaviour described here; semantic HTML is accessibility for free.
• Shipping Software: Testing, DevOps & the Cloud (36/76): usability tests and accessibility checks become part of what "tested" means before release, and A/B tests are the live version of the same question.
• Software Engineering (34/31): requirements are really descriptions of users' jobs, and designers and developers share a backlog.
• In the world: a banking app's login, a government form, a cockpit or car dashboard, a medical device's alarms, a checkout that tries not to lose you.

If you want to go deeper

• 📘 Textbooks. Helen Sharp, Jennifer Preece and Yvonne Rogers, Interaction Design: Beyond Human-Computer Interaction (Wiley, 5th edition, 2019), the standard university text; and Jeff Johnson, Designing with the Mind in Mind (Morgan Kaufmann, 3rd edition, 2020), which connects perception and memory to design rules.
• 📘 Gentler. Don Norman, The Design of Everyday Things (revised and expanded edition, 2013), on doors, stoves and why people blame themselves; and Steve Krug, Don't Make Me Think, Revisited (3rd edition, 2014), a short book on web usability and cheap testing.
• 🌐 Free course. MIT OpenCourseWare 6.831, User Interface Design and Implementation (Spring 2011), with lecture notes and assignments.
• 🌐 Reference. The Nielsen Norman Group's free articles, including 10 Usability Heuristics for User Interface Design, and the W3C's WCAG 2.2.