Design principles¶

Exercise design-principles-figma-annex.pdf · PDF

You open Instagram and, without thinking, your thumb goes straight to the heart to like a post. Nobody taught you where it was. Why did you know?

Because someone designed that screen so your eyes and your hands would find things on their own. Good interfaces feel obvious. That is not luck: it is four principles applied on purpose. Learn them and you will start seeing them everywhere, and noticing when an app breaks them.

A screen is a newspaper front page¶

A user interface (UI) is everything on a screen that lets a person use a machine: buttons, text, icons, menus, gestures.

Picture the front page of a newspaper. It has a few seconds to catch someone walking past a kiosk. So it follows rules: one huge headline, related stories boxed together, the same layout every day, and black ink on white paper so you can read it from a distance.

An app screen has exactly the same problem. You scroll fast, you glance, you decide in a second. We will keep this front-page analogy for the whole page:

Visual hierarchy: what do I read first?¶

Visual hierarchy is the order in which the eye moves through a screen, controlled by size, weight, colour and position.

On a front page, the headline is huge because it is the most important story. Your eye lands there first, then drops to the smaller text. Nobody reads the weather box before the headline.

On a screen you create that order with a few tools:

Look at WhatsApp's chat list: the contact name is bold and dark, the last message is smaller and grey, the time is tiny. Three levels, instantly readable.

Position matters because of how people scan. In 2006, the Nielsen Norman Group recorded the eyes of 232 users reading thousands of web pages. The most common pattern looked like the letter F: a horizontal sweep along the top, a shorter one a bit lower, then a vertical scan down the left side.

flowchart TB
    A["<b>1st sweep</b><br>across the top: the headline"] --> B["<b>2nd sweep</b><br>shorter, a bit lower"]
    B --> C["<b>Vertical scan</b><br>down the left edge:<br>first words of each line"]

That is why the most important things go top-left, and why the first words of a line matter more than the last ones.

Consistency: I already know how this works¶

Consistency means that elements that do the same thing look and behave the same way, inside your app and compared with other apps.

You buy the same newspaper every day and find the sports section without searching. The layout never surprises you. That is the gift of consistency: you learn once, you use forever.

There are two kinds:

External consistency has a famous name. In 2000, usability expert Jakob Nielsen wrote what is now called Jakob's Law: users spend most of their time on other sites, so they expect yours to work like the ones they already know. A magnifying glass means search. Swiping down refreshes. A heart means like. Change those and people get lost.

Proximity: close means together¶

Proximity is the principle that elements placed close to each other are seen as a group.

On the front page, a photo sits right next to its caption. You never wonder which caption belongs to which photo. There is no arrow and no box: distance alone tells you.

This idea comes from psychology. In 1923, the German psychologist Max Wertheimer published a study on how we group what we see. His first experiment was simple: a row of dots. Equally spaced dots look like one line. Move some dots closer together, and your brain instantly sees pairs. These rules became known as the Gestalt principles (Gestalt is German for "shape" or "whole").

●  ●  ●  ●  ●  ●     → one line of dots

●● ●● ●●             → three pairs: same dots, different spacing

In a form, a label must sit closer to its own field than to the next one. If the space is the same everywhere, users type their surname in the email box.

flowchart LR
    subgraph GOOD ["<b>Good</b>: label hugs its field"]
        direction TB
        L1["Name"] --- F1["[________]"]
        L2["Email"] --- F2["[________]"]
    end
    subgraph BAD ["<b>Bad</b>: equal spacing, who belongs to whom?"]
        direction TB
        L3["Name"] --- F3["[________]"] --- L4["Email"] --- F4["[________]"]
    end

Contrast: make it stand out¶

Contrast is the difference between two elements (in colour, size, shape or weight) that makes one of them stand out from the other.

A newspaper is black ink on white paper: maximum contrast, readable from across the street. When there is urgent news, a red banner shouts "BREAKING". Contrast is how the page says look here.

In an app, contrast has two jobs:

Readability has hard numbers. The international accessibility rules (WCAG, which you will study later in this unit) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The ratio goes from 1:1 (white on white, invisible) to 21:1 (black on white).

The four principles working together¶

Real screens use all four at once. Take the Buy button in a shop app:

flowchart LR
    H["<b>Hierarchy</b><br>it is the biggest button"] --> B(["<b>BUY</b>"])
    C["<b>Contrast</b><br>bright colour on a<br>neutral background"] --> B
    P["<b>Proximity</b><br>right next to<br>the price"] --> B
    K["<b>Consistency</b><br>same place and colour<br>on every product"] --> B

When one principle fails, the others cannot fully save it. A huge button with no contrast is invisible. A bright button far from the price is confusing.

Key takeaways¶

• A user interface is everything on screen that lets people use a machine. Good design helps people do things; looking good is a side effect.
• Visual hierarchy sets the reading order with size, weight, colour, position and space. People scan in an F-pattern, so important things go top-left.
• Consistency means the same thing always looks and works the same. Jakob's Law: users expect your app to work like the apps they already know.
• Proximity (a Gestalt principle, Wertheimer 1923): things close together are seen as a group. White space is a tool.
• Contrast makes text readable and the main action stand out. Never use colour alone to carry meaning.

Quick check¶

Now you know how to make a screen clear. But how do you know if it is actually usable? Next: Usability heuristics, the checklist professionals use to judge any interface.