Web design

Principles of user interface design

A good user interface is one where the user understands the next step without thinking about it, and four things build that: hierarchy, contrast, spacing and consistency. The first three can be measured, and the fourth is the one that does more work than creativity on a page meant to sell.

  • Lesson 6 of 12
  • Beginner
  • Free, no signup

The four pillars that hold an interface up

The first three pillars have numbers and can be measured. The fourth has none and is the easiest to check.

A usable interfacethe user understands the next step without thinking about it

  • Hierarchy

    Where the eye lands first. Size, weight, position and colour. One primary action per screen.

  • Contrast

    What gets seen at all. At least 4.5 to 1 for normal text, per WCAG.

  • Spacing

    What belongs with what. A label sits closer to its own field than to the next one.

  • Consistency

    One thing looks the same on every screen, so the user does not learn it twice.

Satisfying all four does not guarantee the page works. The words on the button have to be right too, and these four principles say nothing about words.

Last checked: Facts and tool names in this lesson are re-checked against their sources on this date.

What is a user interface actually for?

One job: make the next step obvious. The user interface is the layer a person sees and touches, which is the buttons, the forms, the menu, the colours and the spacing. If someone pauses on your screen and asks what to do now, the interface has failed, however beautiful it is.

Four things do that job and the rest are details. Hierarchy says where the eye lands first. Contrast says what gets seen at all. Spacing says what belongs with what. And consistency says one thing should look the same across every screen, so the user does not learn it twice.

The first three can be measured, and that is what separates them from taste. Contrast is a number. Spacing is a number. The size of anything meant to be touched is a number too. Consistency has no number but it is the easiest to check: put two screens side by side and see whether the primary button is the same in both.

Jakob Nielsen wrote ten general principles for interaction design in 1994 and they are still the reference; the fourth is exactly this, consistency and standards. Read that list once. Most of the arguments repeated in design meetings today were written down there thirty years ago.

Creativity and consistency, and which page wants which

Neither is bad. The mistake is putting one on the page that wanted the other.

Where creativity belongs

  • Bespoke photography and illustration
  • The tone of the writing and the names of sections
  • The about page and the portfolio
  • Details nobody needs in order to get something done

Where consistency belongs

  • The primary button, the same on every screen
  • Forms, the cart and the payment path
  • The menu and the usual place of search
  • Error messages and loading states

This split is for sites with something to be done on them. For an exhibition piece or a visual portfolio the equation differs and consistency loses first place.

Where does the eye land first?

Wherever you decided, if you decided at all. That is what hierarchy is: with size, weight, position and colour you choose what gets seen first and what comes after. You have four tools and you do not need all four at once; two are usually enough, and using all four on one element makes it shout rather than stand out.

The rule with the most effect and the least practice: one primary action per screen. One button that is the strongest, with the rest flatter and quieter. When three buttons of equal weight sit side by side, none of them is primary and the user has to decide alone; that pause of a few seconds is what costs money on a sales page.

Type size is hierarchy too. If the page title, the section title and the body sit at three sizes close to each other, the eye cannot find the boundaries. Leave a noticeable gap between them and keep to that same scale across the site. That single decision does half of what a design system does.

The last tool is emptiness. Empty space around an element makes it more important without adding anything to it. This is where beginners usually go wrong: they fill the page because empty space looks wasted to them. It is not wasted; it is what tells the eye where to pause.

Contrast and spacing: the two that generate the most complaints

Contrast has a number, and that ends the argument. The WCAG standard says the contrast ratio between text and its background must be at least 4.5 to 1, and 3 to 1 is enough for large text. The light grey on white that looks elegant in a design portfolio usually does not clear that number, and on a cheap screen or in sunlight it is not readable at all.

Size has a number too. Another criterion in the same standard says pointer targets should be at least 24 by 24 CSS pixels unless there is enough spacing around them. Social icons in a footer and the close button on a popup are the two places this always fails.

Spacing has no standard number; it has a rule. The eye groups whatever sits closest together, so the gap from a label to its field must be smaller than the gap from that field to the next one. Get it the wrong way round and your form looks like each label belongs to the field below it, and the user fills one in wrong before working it out.

One practical rule that saves a lot of time: instead of choosing a gap for each case, choose a small scale and use only that. Four or five numbers is enough. When every gap comes from one scale the page looks tidy without anyone being able to say why; and when they do not, it looks untidy without anyone being able to say why.

Persian: right to left, digits, and Latin text mid-sentence

Going right to left means mirroring the whole layout, not just aligning the text. The menu, the arrow icons, the progress bar, the order of the confirm and cancel buttons all have to flip. And the way to do it is not to write a second CSS file for right to left: use logical properties. margin-inline-start instead of margin-left, padding-inline-end instead of padding-right, and text-align: start instead of right. The browser reads the direction from the dir attribute on the html tag and the rest is automatic.

Digits are the second place Persian differs. The Persian digits are their own set of characters (U+06F0 to U+06F9) and in Persian text they are the correct ones, but two things need watching. First the font has to actually contain them, otherwise the browser borrows from another font and the digits suddenly differ in shape and height from the rest of the sentence. Second, and more importantly, no standard validator recognises them as digits at all.

That second one is a real trap and it shows up in forms. In JavaScript the pattern \d matches only the Latin digits 0 to 9, and in PHP [0-9] does the same. So if a user types their phone number with a Persian keyboard and you clean it with replace(/\D/g, ""), the string comes out completely empty and the form says the number is invalid, while the user entered a perfectly good number. The fix is one line: convert Persian and Arabic digits to Latin before validating. Anywhere a Persian interface takes a numeric input, that conversion should be the first thing that happens.

And third, Latin text inside a Persian sentence. A brand name, a file name or a URL sitting inside a right to left sentence can show its full stop or brackets on the wrong side. Wrap a Latin fragment in <span dir="ltr"> and the browser gets its boundaries right. For a single word it is usually unnecessary; for a full URL or a command, it is necessary.

The things that only break in a Persian interface

The Persian interface checklistright to left

Check these

  • Numeric inputs convert Persian digits before validating
  • The font genuinely contains the Persian digits
  • Arrow icons and the progress bar are mirrored too
  • Latin URLs and commands sit in a span with dir ltr
  • The order of confirm and cancel reads with the page direction

Do not do these

  • Writing a second CSS file just for right to left
  • Using margin-left and padding-right in the layout
  • Mixing Latin and Persian digits inside one table
  • Shrinking Persian type to the size of Latin type

No automated tool finds any of these. Hand the page to someone who reads Persian and ask them to fill in a form.

Why consistency beats creativity on a page meant to sell

Here we take a position, because it is not popular in design meetings: on a page where someone is meant to buy something or fill in a form, creativity costs and consistency earns. The user came to do a task, not to enjoy the interface. Every element with an unexpected shape asks for one extra moment of thought, and that moment comes out of your share.

In practice that means: the primary button is one colour and one shape on every screen. Links look like links. Forms share one layout. Icons come from one family. And most of all, do not redesign the elements the user already knows from other sites: a cart looks like a cart, a search field looks like a search field. Nielsen fourth heuristic is exactly this.

So where does creativity belong? In the things that build identity without interrupting the task: photography, the tone of the writing, illustration, the about page, small details nobody needs in order to get something done. The front page of an advertising agency can be strange; its payment form cannot.

One side effect of this decision that gets said less often: when the shapes are few and written down, the output of code generation tools becomes controllable too. Say button, radius fifteen, and anyone and any tool produces the same thing. Leave it unsaid and each produces its own, and six months later you have a site with five kinds of button and nobody remembers why.

The fast path, with AI

There is one job multimodal models are genuinely good at and most people have never tried: screenshot critique. Give it a picture of your screen and ask it not for an opinion but for the order in which its attention moved across the page. The answer usually differs from the order you intended, and that difference is your hierarchy report. This work needs judgement, so put a strong model on it rather than a cheap one; our current pick is in <a class="text-link" href="/en/ai/">the AI section</a>.

  1. Take a full length screenshot of the screen, not a crop. The model does not judge what it cannot see, and cropping steers the answer by itself.
  2. Before you ask anything, write down on paper the order in which you expect the eye to move. If you see the model answer first, you can no longer compare it honestly.
  3. Run the recipe below. Ask in a way that forces it to give an order, not adjectives.
  4. Check two of the things it says with a tool rather than by eye: contrast ratios with a contrast checker and button sizes in the browser inspector. If the model talks about a number, measure the number yourself.
  5. Change one thing only and screenshot again. Change five at once and you will not know which one worked.

Copy-ready recipe

This screenshot is a {page type: landing / product / form} page. The task the user should complete is: {goal}.

Answer in this order and avoid adjectives:
1) List, in order, the elements your attention went to and in what order. Six at most.
2) Say which element you take to be the primary action of the page, and from what signal you concluded that.
3) Name every place where two elements of equal weight sit side by side and compete with each other.
4) Name every place where the spacing implies the wrong grouping.
5) Wherever you suspect the contrast is insufficient, only tell me where to measure. Do not invent a number.

Give no opinion on beauty, taste or brand colour.

Before you trust the output: A model does not know what it has not measured. It does not compute a contrast ratio from a compressed image, it does not see the keyboard focus order, and it does not know whether a button can be hit with a thumb. So the output of this recipe is a list of where to look, not a report. Check its last three points with a tool and a person.

AI in this kind of work

In interface design AI is genuinely useful for two jobs and dangerous for one. Useful: screenshot critique, described above, and generating the forgotten states of a component, meaning the empty state, the loading state and the error state that nobody draws in the first pass. Dangerous: choosing colour and overall layout, because the output looks like everywhere else.

Tools that actually help

  • Claude Good at screenshot critique and at writing out the forgotten states of a component. Iran is on neither of Anthropic two supported-countries lists; we read that on Anthropic own page.
  • Gemini Reads images well and suits reviewing a Persian screen, since it understands Persian itself. Google own page says the Gemini web app runs in over 230 countries and territories, and Iran is not on that list.
  • ChatGPT The most common choice and acceptable for screenshot critique. We make no claim here about its access or pricing: OpenAI supported-countries page returns 403 to our server, and we do not write a claim with nothing behind it.

Where it backfires

Two risks, and the first is more serious than it looks. Models were trained on the same few years of much repeated designs, so when you ask one for a card or a landing page, the output is something a trained eye recognises instantly. That is our own opinion and not a scientific claim, but half of it is visible on this very site: in our own writing rules we have banned two patterns by name as the fingerprint of generated design, a coloured stripe down one edge of a card and the 99 pixel capsule, and for the first we keep a guard grep that gets run every time. The problem was real enough that we had to write a rule about it.
The second risk is more technical: a model judges what it has not measured, and says it with confidence. A contrast ratio cannot be computed from a picture, and W3C own Easy Checks guidance says automated review does not replace human review. Our position: ask the model to tell you where to look, not to judge on your behalf. For how each tool can be paid for from Iran, see the buying guide.

Sources: W3C: Understanding SC 1.4.3 Contrast (Minimum) W3C WAI: Easy Checks Anthropic: supported countries Google: where Gemini Apps are available

Where this advice stops

These four principles talk about form and say nothing about words. A page that satisfies all four still fails if its button says continue and the user does not know what happens next. Second, principles do not replace a real person; they produce a hypothesis and it is user experience that tests it. Third, for an art project or a visual portfolio the advice to put consistency over creativity is simply wrong; there is no task there to get in the way of.

From our own work

Consistency can be counted, and we have counted it on our own site. In the main.css of the rgb.ir theme there is a short block that collapses the corner radius of every shape on the site into four numbers: a normal button fifteen, a large button seventeen, a chip twelve and a status label nine. The whole site uses those four numbers. Alongside it, all thirty one page templates call one shared hero component and no page restyles its own hero; that is why the hosting page and the SEO page look like one family even though their content has nothing in common. And one decision you rarely see elsewhere: a coloured stripe down one edge of a card is banned in this site rules, because we treat it as the mark of generated design; so we keep a guard grep that counts the allowed cases, and any number above that means someone added a new stripe. Consistency here is not taste, it is written down and checked.

Real follow-up questions

What is the difference between UI and UX?

The user interface is the layer you see and touch. The user experience is the whole path a person travels, from hearing your name to finishing what they came for. A beautiful interface can be part of a bad experience, for instance when a step is unnecessary.

Which font should I choose for a Persian site?

There is no single best one, and anyone who says otherwise is selling their taste. What genuinely matters: the font should contain the Persian digits itself, have at least three weights so hierarchy is possible, carry a web licence, and be subset so the file is small. If those four hold, choosing between several good fonts is a matter of taste.

How many colours does a site need?

Fewer than you think. One for text, one or two for backgrounds and surfaces, one accent for the primary action, and two for success and error. The problem with colours is not how many there are; it is that when there are many, none of them means anything in particular any more and the accent stops being seen.

Keep learning