User Experience Design Technology & Digital Applications 2 — Questions and Answers
Question 1: Which CSS property is most commonly used to create smooth transitions between UI states without JavaScript?
- transition (Correct answer)
- animation
- transform
- keyframes
Correct answer: transition
The CSS `transition` property enables smooth state changes (e.g., hover effects) by interpolating between property values over a specified duration.
Question 2: In responsive web design, what does a 'breakpoint' refer to?
- A screen width at which the layout changes (Correct answer)
- A JavaScript error that stops rendering
- A point where images stop loading
- A CSS syntax error location
Correct answer: A screen width at which the layout changes
Breakpoints are specific viewport widths defined in media queries where the layout adapts to better fit the available screen space.
Question 3: What is the primary purpose of a design token in a digital product system?
- To store reusable design values like colors and spacing in a platform-agnostic format (Correct answer)
- To authenticate designers in a version control system
- To generate random placeholder content for mockups
- To measure page load performance
Correct answer: To store reusable design values like colors and spacing in a platform-agnostic format
Design tokens abstract style decisions (colors, typography, spacing) into named variables that can be shared across platforms and codebases.
Question 4: Which browser API allows web apps to work offline by caching assets and intercepting network requests?
- Service Worker API (Correct answer)
- Web Storage API
- IndexedDB API
- Fetch API
Correct answer: Service Worker API
Service Workers run in the background, intercept network requests, and serve cached responses, enabling offline-capable Progressive Web Apps.
Question 5: In UX, what does 'progressive disclosure' mean when applied to complex digital forms?
- Revealing additional fields only when they become relevant to the user's inputs (Correct answer)
- Loading form fields one at a time as the page scrolls
- Showing all fields upfront to prevent user confusion
- Hiding fields behind authentication gates
Correct answer: Revealing additional fields only when they become relevant to the user's inputs
Progressive disclosure reduces cognitive load by showing only the fields necessary at each step, revealing more complexity as the user's context demands it.
Question 6: What is the key difference between a native mobile app and a Progressive Web App (PWA) from a UX perspective?
- PWAs run in a browser context and don't require app store installation, while native apps are installed via app stores (Correct answer)
- PWAs have better performance than native apps in all scenarios
- Native apps cannot access device hardware
- PWAs require a constant internet connection to function
Correct answer: PWAs run in a browser context and don't require app store installation, while native apps are installed via app stores
PWAs are web-based experiences that can be added to the home screen without app store distribution, whereas native apps are platform-specific and installed through official stores.
Question 7: Which technique helps UX designers communicate interaction timing and motion to developers?
- Easing curves and duration specifications in a motion design document (Correct answer)
- Writing pseudocode for animations
- Providing static wireframes with annotation callouts only
- Recording screen videos of competing apps
Correct answer: Easing curves and duration specifications in a motion design document
Easing curves (e.g., ease-in-out) paired with precise duration values give developers the exact parameters needed to implement intended motion feel.
Which CSS property is most commonly used to create smooth transitions between UI states without JavaScript?