Build Wireframes and Low-Fidelity Prototypes
This domain tests turning ideas into structure: information architecture, storyboards, wireframes at three fidelities, prototypes, the interaction principles used to judge them, and the deceptive patterns to avoid.
Information architecture
IA is the organization, labeling, navigation, and search of content. A sitemap shows page hierarchy; a user flow shows the steps a user takes to complete one task. Open card sorting lets participants group and name items themselves; closed card sorting gives them categories; tree testing checks whether a proposed hierarchy is findable.
Storyboards and wireframes
A big-picture storyboard shows the user’s context and journey; a close-up storyboard shows screen-level interaction. Wireframes come in low fidelity (paper, no color or imagery), mid fidelity (digital, structure with some detail), and high fidelity (close to final visuals). Fidelity is how closely an artifact resembles the finished product - not how good it is.
Prototypes and interaction principles
Low-fidelity prototypes (paper, clickable wireframes) are cheap and testable early. Gestalt principles explain grouping: proximity, similarity, common region, closure, continuity, focal point. Design principles to check: hierarchy, consistency, confirmation, user control, feedback, error prevention, and affordances with clear signifiers.
Deceptive patterns
Dark patterns to avoid: false urgency, forced action, sneaking, obstruction, confirmshaming. They raise short-term conversion and destroy trust - and they are a named trap on the exam.
Worked example
A recipe app team maps a sitemap: Home → Search, Saved, Profile. The user flow for “save a recipe” is search → results → detail → save. Paper wireframes put the save icon next to share. In a paper-prototype test, four of five participants reach for share first. Reasoning: proximity made the two icons read as one group, and the save icon had no label. Fix: separate the icons, label save, and add confirmation feedback (“Saved”) - applying proximity and confirmation together.
Traps
Treating wireframes as visual design and adding brand color early. Skipping IA and drawing screens first. Mixing up big-picture and close-up storyboards. Leaving destructive actions without confirmation or undo. Using unlabeled icons where meaning is ambiguous.