Unit 1 · Interface design: usability and accessibility¶
Before writing a line of code, you decide what the screen looks like and how people move through it. Here you learn the rules that make an interface easy for everyone to use, and you design your project's prototype in Figma.
| Learning outcome | Hours | Term |
|---|---|---|
| RA4 — Designs graphical interfaces, identifying and applying usability and accessibility criteria. | 14 | 1st |
What you will learn
- Identify the main usability and accessibility standards
- Explain why standards matter when creating interfaces
- Build different kinds of menus that follow those standards
- Place actions coherently in menus, toolbars and buttons
- Lay out the controls of an interface properly
- Choose the most suitable control for each case
- Design the look of the interface (colours, fonts...) so it is easy to read
- Check that the app's messages are clear and the right length
- Test the usability and accessibility of an application
Lessons¶
- Design principles — visual hierarchy, consistency, proximity and contrast
- Usability heuristics — Nielsen's 10 heuristics and ISO 9241
- Apple HIG — platform interface guidelines, from the 1987 book to today
- Accessibility — WCAG 2.2, UNE-EN 301549, contrast, keyboard and screen readers
- Figma — frames, auto layout, styles, variables and components
- Design systems — tokens, components and rules: type scale, colour roles, spacing scale and icon sets, built in Figma
- Controls and messages — the menu bar, toolbars and context menus, the two questions that choose a control, and the four voices of an app
- Wireframes and tests — flows, wireframes and clickable prototypes, think-aloud usability tests and accessibility audits with Lighthouse and axe