9
Topic 9 of 9 · Lab: UI/UX
UI/UX Foundations & Figma Wireframing
Usability, user-centred design, Nielsen’s heuristics, visual design and the laws of UX, accessibility with WCAG, fidelity levels, and designing and prototyping wireframes in Figma from your use cases.
← → move between slides · F full screen · M slide list
Before we start
Why this matters
An ATM that works perfectly but hides the Cancel button, uses grey text on grey buttons and says “ERR 0x1F” will still fail — users will walk away or call the bank.
Your DFD, use case and class diagrams describe what the system does. UI/UX design decides whether real people can actually do it: quickly, without mistakes, and without frustration.
In this topic you learn the principles behind good interfaces, then turn your use cases into wireframes and a clickable prototype in Figma.
Outline · Lab: UI/UX
Topics in this chapter
Select a topic to jump to the slide that explains it.
Concept 1 of 15
UX and UI
User experience (UX)
Everything a person experiences while using a product: can they reach their goal, how quickly, with how many mistakes, and how do they feel about it? UX covers research, flows, structure and testing.
User interface (UI)
The part the user sees and touches: screens, layout, buttons, text, colour, icons and feedback. UI is where UX decisions become visible.
Usability (ISO 9241-11): the extent to which a system can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. Each of the three can be measured — task success rate, time on task, a questionnaire score.
Foundations
User-centred design
Foundations
User-centred design (cont.)
- Research: interview and observe users (reuse your SRS elicitation).
- Personas: one-page profiles of typical users — “Rahima, 62, retired teacher, uses the ATM once a week, has weak eyesight”.
- User flow: the steps a user takes through screens to finish one task — one flow per use case.
- Sketch and wireframe many ideas cheaply.
- Prototype the best one so it can be clicked.
- Test with users and change the design. Each loop is cheaper than changing code later.
Concept 3 of 15
Nielsen’s ten usability heuristics
| # | Heuristic | On an ATM |
|---|---|---|
| 1 | Visibility of system status | “Processing… please wait” with a progress bar |
| 2 | Match between system and the real world | “Withdraw cash”, not “Initiate debit” |
| 3 | User control and freedom | a Cancel button on every screen |
| 4 | Consistency and standards | OK is always bottom-right, same words everywhere |
| 5 | Error prevention | amount keypad accepts digits only; buttons for common amounts |
| 6 | Recognition rather than recall | show the account list instead of asking for a number |
| 7 | Flexibility and efficiency of use | “Fast cash 2,000” for regular users |
| 8 | Aesthetic and minimalist design | one main task per screen, no clutter |
| 9 | Help users recognise, diagnose and recover from errors | “Insufficient funds. Available: 1,500 Tk. Try a smaller amount.” |
| 10 | Help and documentation | a short help line on complex screens |
Jakob Nielsen, 1994. A heuristic evaluation is 3–5 reviewers checking every screen against this list.
Interactive
Spot the broken heuristic
Concept 5 of 15
Visual design foundations
Visual hierarchy
The most important thing is the biggest, boldest or highest-contrast. The eye should know where to start.Gestalt: proximity
Things close together look related. Put a label near its field, and space between groups.Gestalt: similarity & common region
Things that look alike, or sit in the same box, seem to belong together.Alignment & grid
Line elements up on a grid; use spacing in steps of 8 px (8, 16, 24, 32).Concept 5 of 15
Visual design foundations (cont.)
Typography
One or two typefaces; a clear size scale (e.g. 14 / 16 / 20 / 28 px); body text at least 16 px; lines of 45–75 characters.Colour
Mostly neutral with one accent for actions (a 60-30-10 split works); never use colour alone to carry meaning — add text or an icon.Visual design
Laws of UX worth knowing
| Law | What it says | Design consequence |
|---|---|---|
| Fitts’s law | the time to hit a target depends on its distance and size | make frequent buttons big and close to where the thumb or cursor already is |
| Hick’s law | decision time grows with the number of choices | show fewer options; group or stage the rest |
| Jakob’s law | users spend most of their time on other products | follow familiar patterns (a hamburger menu, a cart icon) |
| Miller’s law | working memory holds about 7 ± 2 items | chunk long numbers: 0171-234-5678; do not make users remember across screens |
| Aesthetic–usability effect | people perceive attractive designs as easier to use | polish matters — but test, because looks can hide real problems |
Concept 7 of 15
Accessibility
Design for everyone: people with low vision, colour blindness, tremors, or simply bright sunlight on an ATM screen. The WCAG 2.2 guidelines (W3C) are organised under four principles — POUR:
- Perceivable: text alternatives for images, sufficient contrast, content not dependent on colour.
- Operable: usable by keyboard, large enough targets, no time traps.
- Understandable: plain language, predictable navigation, helpful errors.
- Robust: works with assistive technologies such as screen readers.
| Rule of thumb | Value |
|---|---|
| Text contrast (AA) | at least 4.5 : 1 (3 : 1 for large text) |
| Buttons, icons, borders | at least 3 : 1 |
| Touch target (WCAG 2.2 minimum) | 24 × 24 CSS px; guidelines recommend 44 pt (Apple) or 48 dp (Material) |
| Body text | 16 px or more |
| Errors | say what went wrong and how to fix it |
Interactive
Check colour contrast
Concept 9 of 15
Levels of fidelity
Concept 9 of 15
Levels of fidelity (cont.)
| Stage | Answers | Time |
|---|---|---|
| Sketch | what could the screen contain? | minutes, on paper |
| Wireframe (low-fi) | what goes where, in what order? | an hour |
| Mockup (high-fi) | what does it look like? | hours |
| Prototype | how does it behave when clicked? | hours to days |
Start low. A grey-box wireframe invites honest feedback about structure; a polished mockup makes people comment on colours instead.
Interactive
One screen, three fidelities
Wireframing
From use cases to screens
- List the use cases from topic 6; each primary use case needs at least one user flow.
- Write the flow as screens and actions: Insert card → Enter PIN → Menu → Enter amount → Confirm → Take cash → Receipt.
- Make an inventory of screens with IDs (S-01 Welcome, S-02 PIN, S-03 Menu…).
- For each screen list the content it needs: data from the class diagram, actions from the sequence diagram.
- Wireframe the screens, then link them into a clickable flow.
- Trace each screen back to its requirement IDs in your SRS.
| Screen | Use case | Requirements |
|---|---|---|
| S-02 Enter PIN | UC-01 Authenticate | NFR-SEC-1 |
| S-04 Enter amount | UC-02 Withdraw cash | FR-3.1.1, FR-3.1.3 |
| S-05 Error: insufficient funds | UC-02 alt. flow | FR-3.1.2 |
| S-07 Mini statement | UC-04 | FR-5.1 |
Concept 12 of 15
Figma: the essentials
Files, pages, frames
A file holds pages; each screen is a frame (press F and pick a device size such as Android Compact or iPhone 16).Shapes and text
R rectangle, O ellipse, T text. Layers appear in the left panel; properties in the right panel.Components
Make a reusable element (a button) with Ctrl/⌘ + Alt/⌥ + K. Copies are instances: edit the main component and every instance updates. Variants hold states (default, pressed, disabled).Auto layout
Shift + A stacks items with fixed spacing and padding, so a button grows with its label and lists reflow.Concept 12 of 15
Figma: the essentials (cont.)
Constraints and grids
Pin elements to edges so frames resize well; add a layout grid (e.g. 4 columns, 16 px margins).Styles and variables
Save colours and text styles once and reuse them — the design stays consistent.Prototype tab
Drag a connection from a button to another frame; choose a trigger (On click) and an animation. Press Play to test.Share and hand off
Comment for feedback, share a view link, and use Dev Mode so developers can inspect sizes and export assets.Figma
Wireframing the ATM withdrawal in Figma
- Create a Figma design file named after your project; add pages “Wireframes” and “Prototype”.
- Add a frame for each screen in your inventory (same device size for all).
- Add a 4-column layout grid and use 8-px spacing steps.
- Build a Button component with auto layout, and variants: primary, secondary, disabled.
- Lay out each screen in greys only: title, instruction, main buttons, Cancel.
- Write real, short labels (“Withdraw cash”, not “Button 1”).
- Switch to the Prototype tab and connect the flow: Menu → Amount → Confirm → Take cash; add the error path.
Figma
Wireframing the ATM withdrawal in Figma (cont.)
- Press Play and walk through it as a customer; fix anything confusing.
- Export frames as PNG or PDF for your LaTeX report and share a view-only link.
FigJam, Figma’s whiteboard, is handy for the user flows and personas before you start the wireframes.
Figma is free for students with an education plan; the free Starter plan is also enough for this lab.
Concept 14 of 15
Testing your design with users
- Give 3–5 real users a task (“withdraw 2,000 Tk”) and your prototype; ask them to think aloud.
- Do not help. Note where they hesitate, click the wrong thing or ask questions.
- Nielsen’s research suggests about 5 users reveal most usability problems in one round; fix them and test again.
- Measure: task success, time on task, number of errors.
- Finish with the System Usability Scale (SUS): 10 standard statements rated 1–5, giving a score from 0 to 100; about 68 is average.
Report it
For each problem: the screen, what happened, how many users hit it, the heuristic it breaks, its severity (cosmetic → catastrophic) and your fix. Include before-and-after wireframes.
Concept 15 of 15
Common mistakes
| Mistake | Fix |
|---|---|
| Starting in high fidelity | sketch and wireframe first |
| Lorem ipsum everywhere | use real labels and realistic data |
| Every screen designed differently | components, styles and a grid |
| Tiny buttons and grey-on-grey text | targets ≥ 44 px, contrast ≥ 4.5 : 1 |
| No error, empty or loading states | design them — they are part of every flow |
| Screens that do not match the use cases | build the screen inventory from your use cases and trace it |
| “It looks good” as the only test | test tasks with real users |
Worked example 1 of 3
Worked example 1
An ATM asks the customer to type the 13-digit account number of the transfer recipient twice, on two screens, with no way to go back. Which heuristics does this break, and how would you fix it?
Show the solution
#6 recognition rather than recall (typing a long number from memory) and #3 user control and freedom (no way back), and it invites errors (#5). Fix: let the customer pick a saved beneficiary from a list, show the recipient’s name for confirmation, and add Back and Cancel on every screen.
Worked example 2 of 3
Worked example 2
Text colour #767676 on a white background has a contrast ratio of about 4.5 : 1. Can it be used for body text? For placeholder text inside a field?
Show the solution
It just meets WCAG AA (4.5 : 1) for normal text, so it is acceptable for body text — though darker is safer outdoors. Placeholder text must meet the same 4.5 : 1 if it carries information; do not rely on a lighter placeholder as the only label.
Worked example 3 of 3
Worked example 3
Your library app’s home screen has 14 buttons. Using Hick’s law and hierarchy, redesign it in words.
Show the solution
Show the 3–4 most frequent tasks as large buttons (Search books, My loans, Renew, Pay fine); move the rest into a “More” menu or the profile page; make Search the most prominent element at the top.
Practice
Practice (1 of 2)
Try each one on paper first, then check your answer.
1. What is the difference between UX and UI?
Show the answer
UX is the whole experience of reaching a goal with the product (research, flows, structure, testing); UI is the visible, interactive surface (screens, controls, visual design).
2. Name the three components of usability in ISO 9241-11.
Show the answer
Effectiveness, efficiency and satisfaction (in a specified context of use).
3. Why start with low-fidelity wireframes?
Show the answer
They are fast and cheap to change, and they focus feedback on structure and flow rather than colours and fonts.
Practice
Practice (2 of 2)
Try each one on paper first, then check your answer.
4. Lab task hint: list the screens you would need for the “Borrow book” flow of a library system.
Show the answer
For example: sign in, search, search results, book details, confirm borrowing, success (due date), and error states (book unavailable, fine outstanding). Your list should come from your own use cases.
5. What does auto layout do in Figma?
Show the answer
It arranges child layers in a row or column with fixed spacing and padding, so frames grow or shrink with their content.
6. What contrast ratio does WCAG AA require for normal text?
Show the answer
4.5 : 1 (3 : 1 for large text and for non-text elements such as icons and borders).
Check yourself
Quiz
Resources
Further learning
Hand-picked material to go deeper. Links open in a new tab.
Article10 Usability Heuristics for User Interface Design (NN/g) ↗Jakob Nielsen’s heuristics with explanations and examples.ArticleWhy You Only Need to Test with 5 Users (NN/g) ↗The reasoning behind small, repeated usability tests.GuideLaws of UX ↗Short illustrated explanations of Fitts’s, Hick’s, Jakob’s law and more.StandardWCAG overview (W3C) ↗The Web Content Accessibility Guidelines and what is new in 2.2.ToolWebAIM Contrast Checker ↗Check any colour pair against WCAG AA and AAA.DocsFigma Help Center ↗Official guides to frames, components, auto layout, prototyping and Dev Mode.ToolFigma ↗Design and prototyping in the browser; free Starter plan and education plans for students.GuideMaterial Design 3 ↗Google’s design system: components, layout, colour and accessibility guidance.
Resources
Further learning (cont.)
GuideApple Human Interface Guidelines ↗Apple’s platform design guidance, including touch targets and typography.ArticleSystem usability scale ↗The 10 SUS statements and how to calculate the score.
BookDon’t Make Me Think, Revisited — Steve KrugNew Riders, 2014. A short, funny classic on usability and simple testing.
BookThe Design of Everyday Things (revised ed.) — Don NormanBasic Books, 2013. Affordances, signifiers, feedback and human error.
Summary
Summary
- UX is the whole experience of reaching a goal; UI is the visible surface. Usability = effectiveness, efficiency, satisfaction.
- Design user-centred: research, personas, flows, wireframes, prototypes, testing — and iterate.
- Check every screen against Nielsen’s ten heuristics.
- Use hierarchy, proximity, alignment, a clear type scale and restrained colour; remember Fitts’s and Hick’s laws.
- Accessibility (WCAG 2.2, POUR): contrast ≥ 4.5 : 1, large targets, plain-language errors.
- In Figma: frames per screen, components with variants, auto layout, grids, then prototype connections; test with about five users.