UI/UX Design Information Architecture & Interaction Design Flashcards

24 sample cards from the Information Architecture & Interaction Design deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. If a flow contains $n$ independent binary decision points, how many distinct end-to-end paths can result, and what is the design implication?

   Up to $2^{n}$ distinct paths. The implication: branching complexity grows exponentially, so designers should minimize unnecessary decision points, consolidate branches, and ensure every path is accounted for with a designed screen or state.

2. What are the five UI states every screen should be designed for (Scott Hurff's model)?

   Ideal state (full, expected content), empty state (nothing yet — first use or cleared data), error state (something failed), partial state (some but sparse data), and loading state (content being fetched). Designing only the ideal state leaves the other four to chance.

3. Which usability heuristic covers feedback, and what does it require?

   Nielsen's heuristic #1, 'Visibility of system status': the system should always keep users informed about what is happening through appropriate feedback within a reasonable time — e.g., button press states, progress indicators, confirmations, and status messages.

4. What are the three classic response-time thresholds for system feedback, and what does each require?

   $0.1$ s: perceived as instantaneous — no extra feedback needed. $1$ s: flow of thought stays uninterrupted, though delay is noticed — no special indicator required. $10$ s: limit of attention — beyond about $1$ s show a spinner, and for waits near or above $10$ s show a percent-done progress indicator.

5. What is a microinteraction?

   A contained product moment built around a single small task — e.g., toggling a switch, liking a post, pull-to-refresh — that provides feedback, communicates status, and adds polish. The term and framework come from Dan Saffer.

6. What are the four parts of a microinteraction in Dan Saffer's model?

   Trigger: initiates it (manual, by the user, or system-initiated by a condition). Rules: define what happens and in what order. Feedback: what the user sees/hears/feels indicating what's happening. Loops & modes: the meta-rules — how it repeats, changes over time, or behaves in special modes.

7. List the core touch gestures and the action each conventionally performs.

   Tap: select/activate. Double tap: zoom in or like. Long press (touch and hold): reveal contextual options. Swipe/flick: scroll, dismiss, or move between views. Drag: move an element. Pinch: zoom out. Spread (pinch open): zoom in. Multi-finger swipes: system or app shortcuts.

8. What are the recommended minimum touch target sizes on major platforms?

   Apple Human Interface Guidelines: at least $44 \times 44$ pt. Google Material Design: at least $48 \times 48$ dp (with $\geq 8$ dp spacing between targets). WCAG 2.2 (AA) requires targets of at least $24 \times 24$ CSS pixels, with $44 \times 44$ as the AAA-level guidance.

9. State Fitts's law, its formula, and its main UI implications.

   The time to acquire a target is a function of the distance to and size of the target: $$T = a + b \log_{2}\!\left(\frac{D}{W} + 1\right)$$ where $D$ is distance to the target, $W$ its width, and $a, b$ empirical constants. Implications: make important/frequent targets large and close to the pointer, and exploit screen edges and corners, which act as infinitely deep targets.

10. State Hick's law and its design implication.

    Decision time grows logarithmically with the number of equally likely choices: $$T = b \log_{2}(n + 1)$$ where $n$ is the number of choices. Implication: reduce or chunk options, highlight recommended choices, and use progressive disclosure to keep decision time low.

11. What is progressive disclosure and what problem does it solve?

    An interaction technique that shows only the core, most frequently needed options up front and defers advanced or secondary information to a clearly labeled secondary step (e.g., 'Advanced settings'). It manages complexity and reduces cognitive load, error rates, and visual clutter while keeping full power available.

12. Give common UI patterns that implement progressive disclosure, and distinguish staged disclosure.

    Patterns: accordions, 'Show more' links, tooltips, expandable advanced-settings panels, menus/submenus, and 'Read more' truncation. Staged disclosure is the sequential variant — content revealed step by step in a fixed linear order, as in wizards and multi-step onboarding — whereas classic progressive disclosure lets users opt into more detail at will.

13. What is a low-fidelity wireframe and what is it best used for?

    A rough, grayscale, schematic layout of a screen — boxes, lines, and placeholder shapes with no real visual styling. It is fast and cheap to produce and change, so it is used early to explore layout, hierarchy, and flow, and to invite honest structural feedback before any effort is invested in visuals.

14. What placeholder conventions are standard in low-fidelity wireframes?

    A rectangle with a diagonal X (or crossed box) for images/media, horizontal lines or lorem ipsum for body text, simple labeled boxes for buttons and inputs, and grayscale-only styling — deliberately avoiding real colors, fonts, and imagery so feedback focuses on structure, not aesthetics.

15. Compare low-, mid-, and high-fidelity wireframes.

    Low-fi: hand-drawn or blocky grayscale sketches of layout only; fastest, for early exploration. Mid-fi: digital, accurate spacing and hierarchy, real headings and some real content, still grayscale/no branding; for validating structure and content priority. Hi-fi: pixel-accurate with final typography, color, imagery, and often interactivity; closely resembles the shipped product and supports realistic testing and developer handoff.

16. When is a high-fidelity wireframe or prototype the appropriate choice?

    Late in the process: for usability testing where realistic visuals and interactions affect behavior, for stakeholder sign-off on the final look, for testing visual hierarchy/branding/accessibility (e.g., contrast), and for precise developer handoff. Using hi-fi too early wastes effort and biases feedback toward surface details.

17. What is the Crazy 8s sketching exercise?

    A rapid ideation method (popularized by Google's Design Sprint): fold a sheet into 8 panels and sketch 8 distinct solution ideas in 8 minutes — about one minute per sketch — forcing quantity and variety over polish before converging on the strongest concepts.

18. How does paper prototyping work, and what is the Wizard of Oz technique?

    Hand-drawn screens on paper are shown to a user who 'taps' elements while a facilitator swaps sheets to simulate the interface responding — enabling usability testing before any code or pixels exist. Wizard of Oz testing generalizes this: a human secretly plays the role of the system's logic so users experience seemingly working functionality.

19. What information should wireframe annotations capture?

    Interaction behavior (what happens on tap/click/hover), component states (default, active, disabled, error, empty, loading), content rules and data sources, validation logic and error handling, conditional/edge-case behavior, navigation destinations, and accessibility notes — i.e., everything the static picture cannot show.

20. What is the standard convention for attaching annotations to a wireframe, and who are the annotations for?

    Numbered callout markers placed on specific elements, each keyed to a matching numbered note in a legend beside or below the frame. The primary audiences are developers (build specification), stakeholders (rationale), and other designers/QA (consistency and test criteria).

21. What are the main functional purposes of animation in UI design?

    Feedback: confirming that an action was registered (button states, ripples). Orientation/spatial continuity: showing where elements come from and go to during transitions so users keep their mental model. Status: indicating ongoing processes (loaders, skeletons). Attention: directing the eye to changes. Delight/branding: adding personality — always secondary to function.

22. Where do the '12 principles of animation' come from, and which map most directly to UI motion?

    From Disney animators Ollie Johnston and Frank Thomas (The Illusion of Life, 1981). Most relevant to UI: slow in and slow out (easing), anticipation (a small cue before an action), follow-through/overlapping action (elements settling after movement), squash and stretch (elastic feedback), staging (directing attention), and secondary action (supporting motion).

23. Define ease-in, ease-out, ease-in-out, and linear timing, and state when to use each.

    Ease-in: starts slow, ends fast — use for elements exiting the screen. Ease-out: starts fast, ends slow — use for elements entering the screen or responding to user input (feels immediately responsive). Ease-in-out: slow at both ends — use for elements moving from one on-screen position to another. Linear: constant speed — feels mechanical; reserve for continuous property changes like opacity or color fades and indefinite spinners.

24. What duration range is recommended for UI animations, and how are custom easing curves defined mathematically?

    Most UI transitions should last roughly $100\text{–}500$ ms — around $200\text{–}300$ ms for typical transitions (Material Design uses about $300$ ms on mobile), shorter (~$100$ ms) for small feedback, and longer for large or full-screen movements; too slow feels sluggish, too fast is missed. Custom easing is defined by a cubic Bézier curve, e.g., CSS cubic-bezier$(x_{1}, y_{1}, x_{2}, y_{2})$, whose control points shape velocity as $$B(t) = (1-t)^{3}P_{0} + 3(1-t)^{2}t\,P_{1} + 3(1-t)t^{2}P_{2} + t^{3}P_{3}, \quad t \in [0,1].$$

What this deck covers

Information Architecture & Interaction Design flashcards FAQ