Specifying an interface
The specification file: screen inventory, zoning, navigation graph, component states (empty, loading, error, disabled), event-action-feedback table, style guide.
- 26 cards
- 4 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- Scenarios
A few cards from the deck
Screen inventory: what is it?
Show the answer
The list of all the application's screens, each named and described by its role in one sentence, which opens the specification file.
The other parts of the file (zoning, navigation graph, states) refer to screens by name: without an inventory, a forgotten screen is specified nowhere.
A specification describes a form's Send button in one state only: active. Which state is most clearly missing?
- Disabled until the required fields are filled in
- Empty, with a “no results to show” message
- Filled, with the values already entered in the form
- Hidden, until the user has scrolled to the bottom of the page
Show the answer
Disabled until the required fields are filled in
A send button has a disabled state (invalid fields) and often a sending state. Empty and filled are states of a list or a field, not of a button; hiding the button hides the action instead of showing it is unavailable.
An interface specification links each … to the … it triggers and to the … shown to the user.
Show the answer
An interface specification links each event to the action it triggers and to the feedback shown to the user.
The event, action, feedback table removes ambiguity: the developer knows what to do, and the tester what to check.
Zoning: what is it?
Show the answer
The division of a screen into large zones (header, navigation, content, footer), made before any detail.
It fixes the role of each region before placing components in it, and lets screens be compared with one another.
The mock-up of an orders page shows only a filled list. In production, a new customer sees a blank page. What is the cause and the fix?
- Loading is too slow; add a progress indicator over the whole page
- The empty state was unspecified; show “No orders” and a way to order
- The list is broken; fill it with sample orders for new customers
- The customer misconfigured their account; tell them to contact support
Show the answer
The empty state was unspecified; show “No orders” and a way to order
The mock-up had only the filled state. When the list is empty, nobody decided what to display: the page stays blank. The empty state must be specified.