User Experience Design Technology & Digital Applications 4 — Questions and Answers
Question 1: Which layout model in CSS is best suited for building complex two-dimensional UI layouts like dashboards?
- CSS Grid (Correct answer)
- Flexbox
- Float
- Inline-block
Correct answer: CSS Grid
CSS Grid handles both rows and columns simultaneously, making it ideal for complex two-dimensional layouts that Flexbox (one-dimensional) handles less elegantly.
Question 2: What is the purpose of a 'headless' CMS in a UX-driven digital product?
- It decouples content management from the presentation layer, letting UX teams control the frontend independently (Correct answer)
- It removes the admin interface from the CMS for security
- It serves content without authentication
- It auto-generates UI from structured data
Correct answer: It decouples content management from the presentation layer, letting UX teams control the frontend independently
A headless CMS delivers content via API without dictating how it's displayed, giving UX and frontend teams full freedom over the user-facing experience.
Question 3: In usability testing on a digital prototype, what is the difference between a 'click-through prototype' and a 'coded prototype'?
- Click-through prototypes simulate navigation with linked static screens; coded prototypes use real or near-real functionality (Correct answer)
- Click-through prototypes require programming; coded ones are drag-and-drop
- Coded prototypes are lower fidelity than click-through ones
- Click-through prototypes can only be tested on desktop devices
Correct answer: Click-through prototypes simulate navigation with linked static screens; coded prototypes use real or near-real functionality
Click-through (or hotspot) prototypes link static screens to simulate flow, while coded prototypes implement actual logic, making interactions more realistic for testing.
Question 4: What does 'viewport' refer to in mobile web design?
- The visible area of the browser window on the user's device (Correct answer)
- The total page height including scrollable content
- The device's physical screen resolution in pixels
- The area excluded by the browser's UI chrome
Correct answer: The visible area of the browser window on the user's device
The viewport is the visible portion of the webpage; the `<meta name='viewport'>` tag controls how a mobile browser scales and sizes content within that area.
Question 5: Which UX pattern is most appropriate when a user needs to complete a multi-step process with dependencies between steps (e.g., account setup)?
- Wizard / stepper pattern (Correct answer)
- Tab navigation
- Accordion
- Modal dialog
Correct answer: Wizard / stepper pattern
Wizards guide users linearly through dependent steps, showing progress and preventing them from skipping required fields before prerequisites are complete.
Question 6: What is 'lazy loading' in web and app UX, and what is its primary benefit?
- Deferring the loading of non-critical resources (e.g., images) until they are needed, improving initial page load speed (Correct answer)
- Loading all assets in the background during idle time
- Caching resources aggressively to avoid future loads
- Loading the most important content last to prioritize server resources
Correct answer: Deferring the loading of non-critical resources (e.g., images) until they are needed, improving initial page load speed
Lazy loading delays fetching off-screen images or components until the user scrolls near them, reducing initial payload and improving perceived performance.
Question 7: In digital product design, what is the role of an API (Application Programming Interface) from a UX perspective?
- It defines how the frontend communicates with backend services to retrieve and display data to users (Correct answer)
- It describes the visual style guide for a product
- It manages user authentication credentials directly in the UI
- It generates automated UI components from data schemas
Correct answer: It defines how the frontend communicates with backend services to retrieve and display data to users
APIs are the contract between frontend and backend; UX designers must understand API constraints (response times, data formats) as they directly affect interaction design decisions.
User Experience Design Technology & Digital Applications 4
Which layout model in CSS is best suited for building complex two-dimensional UI layouts like dashboards?