Chapter 4 · Web and Media Design
4-2 Information Design and User Experience for Websites
A website that makes sense to its designer can still confuse its visitors. Good design therefore begins with the user, not the creator. Designers first picture a real user, sketch where information will go before choosing any colours, and follow four simple principles — contrast, repetition, alignment and proximity — so the page is clear at a glance.
Guiding question
How do designers plan a website around its users, and what principles make a page clear and easy to use?
Learning outcome. Explain how personas and wireframes are used to plan a website before designing its appearance, and apply the four principles of design (contrast, repetition, alignment, proximity) alongside the idea of user-centered design.
With a partner. Think of a website that confused you recently. Try to say exactly what was wrong — could you not tell what was important? Did things not line up? Was it unclear which label belonged to which thing? Keep your answer; by the end of this lesson you will have a name for it.
1 · Persona
Persona … a typical user image of those who will use the website, set up as a concrete person. Details such as age, occupation, purpose and challenges are selected.
e.g., person in their 30s, an office worker, wants to compare products on a smartphone during a commute, wants to obtain information in a short time.
By setting up a persona, designers can think specifically about “what this user needs”, and the direction of the design becomes less likely to drift.
2 · Wireframe
Wireframe … a rough blueprint of the layout of a web page. It does not include colour or design decoration; it is created to determine the placement and priority of information.
Grey boxes only — no colour, no fonts, no pictures. That is the point.
Why placement comes before colour.
Using a wireframe lets “what information to place where” be considered separately from visual design. If decorations such as colours and fonts are decided first, discussions tend to drift toward personal preferences in appearance — so finalising the placement and priority of information first makes it far easier for stakeholders to reach agreement.
The four principles of design (CRAP principles)
Designs that are easy to view and understand follow these four principles.
| Principle | Description (purpose) | Specific techniques and examples |
|---|---|---|
| (Contrast) | Make the priority of information clear and immediately highlight the most important elements | Make headings large and bold to differentiate them from body text · use accent colours for important buttons |
| (Repetition) | Repeat specific characteristics so that the whole design has consistency, allowing users to navigate without getting lost | Standardise the colour, size and font of headings on each page · match the design of bullet point icons |
| (Alignment) | Align the position of each element to a common baseline, giving order to the entire screen | Align the left edges of text and images precisely · make a consistent rule for centre or left alignment |
| (Proximity) | Place related information close together so that it can be perceived as a single group at a glance | Group product images, names and prices together · leave appropriate spacing (margins) between items |
Four questions, one each. Does the important thing stand out? (contrast) Is everything consistent? (repetition) Does it line up? (alignment) Is related information grouped? (proximity) Any design question in this lesson is one of those four.
Start with all four off. Every word is there and the page is still awful — which is exactly what the book’s “bad” column is showing. Then add one principle at a time.
Stationery Shop
Today’s prices
Reading glasses
250 EGP
Notebook, A5
40 EGP
Blue pen, pack of 3
25 EGP
All four off. Every word is present and nothing is missing — but nothing stands out, nothing matches, nothing lines up, and you cannot tell which price belongs to which item. Same content, unusable page.
Turn them on one at a time. Each principle does exactly one job — and only that job.
UI is what you touch: the buttons, the menu, the colours, the layout. It is the surface.
UX is how the whole thing felt: whether you found what you came for, whether it took longer than you expected, whether you finished feeling satisfied or annoyed. It includes things that are not on the screen at all — how long the page took to load, whether the confirmation email arrived, whether returning something was easy.
So a beautiful UI can produce a terrible UX. If a shop looks superb and the delivery never arrives, the experience was bad and no amount of design fixes it. Every UI is part of the UX; the UX is much bigger than the UI.
The book’s wording, which is what an exam wants: User interface (UI) is the point of contact between the user and the system; user experience (UX) is the whole experience the user has through using it. (p.82)
Where the comparison breaks down: You can walk out of a restaurant and tell a friend. A website measures you instead — which is what lesson 4-3’s bounce rate and conversion rate are for, and why quantitative and qualitative evaluation have to be combined: the numbers show you left, never why.
🧮 Judging a design that follows every rule and is still hostile
- 1
A subscription page has a large, friendly, well-contrasted green button reading “Keep my benefits”, and a small grey line of text below reading “continue to cancel”.
Why this step: Start by checking it against the book’s four principles honestly, rather than reacting to it. That is what an evaluation is.
- 2
Check consistency and visibility: the green button matches the rest of the site and is perfectly easy to see. Both principles satisfied.
Why this step: And this is the uncomfortable part — the design genuinely passes. A checklist applied without asking who benefits will approve this page.
- 3
Now ask the question from the next section: whose convenience does this serve?
Why this step: The user arrived wanting to cancel. The design makes the thing they came to do the hardest thing on the page, and the thing the company wants the easiest. That is the test the four principles cannot make on their own.
Most people slip here: Notice nothing here is a lie. The cancel link works and is clearly labelled. Every individual element would pass inspection — which is exactly why this is worth being able to name.
- 4
Name it: this is a design that serves the organisation at the user’s expense.
Why this step: The book’s answer is user-centred design — the user’s goals decide the design, not the organisation’s. A page whose visual weight is arranged against the visitor’s own purpose fails that however tidy it looks.
- 5
Fix it: give cancelling and staying equal visual weight, and let the user choose.
Why this step: Equal weight is the honest test, and it costs the company almost nothing if staying is genuinely worth it. If a business only keeps customers by making leaving hard, the problem was never the button.
They have been effective enough that regulators now ban several of them outright, and companies have been fined. Worth noticing for this lesson: every one of these is good UI in the service of bad UX — clear, consistent, visible, and aimed against the person using it. It is the sharpest possible illustration of why the book asks whose convenience a design serves.
Now regulated in several jurisdictions, including under EU consumer law.
User-Centered Design (UCD)
User-Centered Design (UCD) … a design approach that designs websites and services from the perspective of the user, rather than the convenience of the creator.
In UCD, design begins from “what the user needs” and “in what situation it will be used”. Setting up a persona is one specific way of practising UCD: by clarifying the user image, design decisions can be kept consistently aligned with the user’s perspective.
Usability — improving how easily users can use the site.
Accessibility — making it usable by a wide range of people.
Improving usability for users and accessibility for a wide range of people are important goals of UCD.
How the real paper is built
The ministry sets half multiple choice and half written answer in every subject. The two halves are not the same skill. In the multiple-choice half you have to spot the wrong options quickly — and the wrong options are built out of the mistakes students really make. In the written half nobody gives you the answer to recognise; you have to produce it, in your own words, with a reason.
Practise both. Being good at one half and weak at the other costs you exactly half the paper.
- persona
- — a typical user pictured as a concrete person.
- wireframe
- — a layout blueprint before any colour or decoration.
- CRAP
- — contrast, repetition, alignment, proximity.
- user-centered design
- — designing from the user’s perspective.
- usability
- — how easily users can use the site.
- accessibility
- — usable by a wide range of people.
Worked Example
(1) Mark each statement with ○ if it is true or × if it is false.
A A persona is a typical user image of those who will use the website, set up as a concrete person.
B A wireframe is a final-version design that includes colour and design decoration.
C “Proximity” in the four principles of design means grouping related information close together.
D User-centered design is a design approach that prioritises the convenience of the creator.
(2) Match each description (a–d) with the principle: A Contrast, B Repetition, C Alignment, D Proximity.
a Highlight important information and visually indicate priority
b Repeat the same style to give a unified appearance
c Align the positions of elements to give an organized look
d Group related information close together
1 · Answer the following questions.
2(1) · Which is NOT an appropriate piece of information to include in setting up a persona?
Mark ○ for each one that belongs in a persona, and × for the one that does not.
The user’s age and occupation
The user’s purpose for using the website
The performance of the website’s server
The challenges the user faces
2(2) · For each design improvement, which of the four principles is it?
Match each description with the choice that fits it.
Making headings large and bold to distinguish them from body text
Grouping product names, prices and photos close together
Aligning the left edges of text and images
Standardizing the font and colour of headings across all pages
Think as an Engineer — Investigate & Decide
A community clinic in your city wants a simple website so patients can find opening hours, services and directions. You lead the design.
1 · Collect data.
Ask about eight to ten classmates: “If you opened a community clinic’s website, what is the one thing you would look for first?” Record the answers in a tally table.2 · Analyze your users.
Group the answers into user types. Include at least one user who is not a typical smartphone visitor — for example an elderly patient with low vision, or someone with no home Internet using a library computer. Write what each type needs most.3 · Decide from your data.
Using your tally, decide the priority order of the four home-page blocks and justify each position from your data, not your taste. Then choose one CRAP principle and say exactly how you would apply it for the user type you added. In pairs, compare tables and agree on the top block.
“From your data, not your taste” is the whole instruction. This is exactly the drift the book warns about on p.82 — the moment a design argument becomes about what looks nice, the user has left the room. A tally table is how you keep them in it.
In a New Context
Lesson Question — Answered
Design begins from the user, not the creator. A persona pictures a typical user as a concrete person — age, occupation, purpose and challenges — so the team can focus on what that user needs. A wireframe then fixes the placement and priority of information before any colour or decoration, which keeps discussion on structure and helps stakeholders agree.
To make the page clear, four principles are applied: contrast to highlight priority, repetition for consistency, alignment for order, and proximity to group related items. All of this is guided by user-centered design, which starts from what the user needs and aims to improve usability and accessibility. Good design is therefore planned from the user inward — who they are, what goes where, and how to make it clear.
1 · Quiz yourself first.
Cover the Point! sections and say what a persona and a wireframe each are for, name the four CRAP principles with one technique each, and define user-centered design in one sentence.
2 · Read the passage and fill in the blanks.
When designing a website, it is important to view it from the user’s perspective. First, create a ( a ), in which a typical user image is set up as a concrete person, and clarify “what this user needs.” Next, create a ( b ), a blueprint for determining the placement and priority of information. In design, to improve viewability and clarity, the ( c ) — contrast, repetition, alignment and proximity — should be kept in mind.
3(1) · Which is NOT included in the four principles of design?
Mark ○ for each one that IS one of the four principles, and × for the one that is not.
Contrast
Encryption
Alignment
Proximity
3(2) · Which most appropriately describes the concept of user-centered design?
Mark each statement with ○ if it is true or × if it is false.
Prioritize the design that the developer finds easy to use.
Place the highest importance on visual design.
Begin the design from what the user needs.
Use as many of the latest technologies as possible.
Reflect: On a website you find confusing, which CRAP principle seems most broken, and why?
Challenge: Your clinic can fund only one accessibility improvement this year. For the low-vision or no-Internet user you identified, choose one CRAP principle to apply — and say what you would give up (a decoration or feature) to make room for it, and why that trade-off serves the user better.
Sign In to Keep Going
You've reached the end of the free preview. Sign in — and upgrade to Plus or Pro — to keep going with Programming and Artificial Intelligence.
Full Access
Unlock all 30 lessons