Mobile App Design Prototyping & Wireframing Techniques 2 — Questions and Answers
Question 1: What is the purpose of an 'annotation' on a wireframe?
- To add decorative labels for presentation aesthetics
- To explain the behavior, content rules, or interaction logic of UI elements for developers and stakeholders (Correct answer)
- To mark elements that need imagery
- To record version control notes
Correct answer: To explain the behavior, content rules, or interaction logic of UI elements for developers and stakeholders
Annotations add context to wireframes by explaining interactions, conditional logic, and content requirements that visuals alone cannot convey.
Question 2: Which prototyping fidelity level is most appropriate for early-stage stakeholder alignment meetings?
- High-fidelity interactive prototype
- Low-fidelity sketches or wireframes (Correct answer)
- Coded MVP
- Animated motion prototype
Correct answer: Low-fidelity sketches or wireframes
Low-fidelity prototypes communicate structure and ideas quickly without implying visual decisions are final, making stakeholder feedback more open.
Question 3: What is 'micro-interaction' design in mobile apps?
- Designing interactions for smartwatch mini-screens
- Small, contained interaction animations that provide feedback for a single user action (Correct answer)
- The process of designing interactions between microservices
- Reducing interaction steps to the minimum
Correct answer: Small, contained interaction animations that provide feedback for a single user action
Micro-interactions are subtle animations or feedback responses (like a button press ripple or a toggle switch) that confirm user actions.
Question 4: In Figma, what is an 'auto layout' component most useful for?
- Automatically generating navigation flows
- Creating frames that resize and reflow their contents dynamically when content changes (Correct answer)
- Syncing designs to a live web app
- Generating accessibility reports
Correct answer: Creating frames that resize and reflow their contents dynamically when content changes
Auto layout frames automatically adjust their size and the spacing of child elements when content is added, removed, or resized.
Question 5: What does 'design handoff' refer to in the mobile design process?
- Transferring a project between two design agencies
- Delivering finalized designs and specifications to developers for implementation (Correct answer)
- Handing a prototype to the QA team for bug testing
- Submitting the app to the App Store
Correct answer: Delivering finalized designs and specifications to developers for implementation
Design handoff is the process of providing developers with all assets, spacing specs, and interaction notes needed to build the UI accurately.
Question 6: Which prototyping method involves creating an interactive simulation directly on a target mobile device to test real-world ergonomics?
- Paper prototyping
- Wizard of Oz testing
- Device-native prototyping (Correct answer)
- Remote usability testing
Correct answer: Device-native prototyping
Device-native prototyping installs the prototype on an actual phone so designers can evaluate real thumb reach, screen brightness, and haptic feedback.
Mobile App Design Prototyping & Wireframing Techniques 2
What is the purpose of an 'annotation' on a wireframe?