Usability of a web application
Making a web application easy to use: navigation, forms, screen states (loading, empty, error, success) and mobile-first design with 44 px touch targets.
- 26 cards
- 5 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- Scenarios
- Understand
A few cards from the deck
Web usability: what is it?
Show the answer
How easily a person reaches their goal in the interface, without mistakes or needless effort.
It is judged in use: a screen can look good and still be painful if people get lost or are afraid to submit.
This field has only its placeholder. What usability problem does it cause?
```html
<input type="email" placeholder="Adresse e-mail">`- It vanishes once typing starts: people forget what they fill in
- The
emailtype forbids capital letters in the entry of the address - The phone keyboard does not show the
@sign for this type - The field cannot take keyboard focus as long as it has no
tabindex
Show the answer
It vanishes once typing starts: people forget what they fill in
A placeholder is not a label: it disappears as you type and its contrast is often weak. You need a visible
<label>tied to the field. Theemailtype actually brings up the@on the keyboard and the field is focusable by default.A screen that shows a list has at least four states to design: …, empty, … and success.
Show the answer
A screen that shows a list has at least four states to design: loading, empty, error and success.
Designing all of them avoids the blank screen, the raw technical message or the silence after a submit: each moment tells the person where things stand.
Mobile first: what is it?
Show the answer
An approach that designs the interface for the smallest screen (around 360 px wide), then enriches it for larger screens.
The small screen forces you to keep what matters; in CSS, the base rules target the phone and
@media (min-width: …)adds what comes with extra room.In a catalogue with four levels of categories, users say they no longer know where they are and keep going back to the home page. Which fix applies?
- Add a breadcrumb and mark the active menu entry
- Hide the menu behind a button to lighten the pages
- Open every category in a new tab
- Remove the intermediate levels of the catalogue
Show the answer
Add a breadcrumb and mark the active menu entry
The problem is the lack of a position cue. The breadcrumb shows the path, and the active entry (
aria-current="page") tells where you are in the menu.