User Experience Design Technology & Digital Applications 5 — Questions and Answers
Question 1: What is 'dark mode' from a UX and technical standpoint, and which CSS feature enables it based on system preferences?
- A low-luminance color scheme; enabled via the `prefers-color-scheme: dark` media query (Correct answer)
- An accessibility mode that increases font size; toggled with JavaScript
- A battery-saving mode that disables animations; detected via the Battery API
- A high-contrast theme for visually impaired users; set through ARIA attributes
Correct answer: A low-luminance color scheme; enabled via the `prefers-color-scheme: dark` media query
Dark mode uses darker backgrounds to reduce eye strain; the `prefers-color-scheme` CSS media query detects the user's OS-level preference and applies appropriate styles.
Question 2: Which performance metric most directly reflects the UX impact of slow-loading page content according to Google's Core Web Vitals?
- Largest Contentful Paint (LCP) (Correct answer)
- Time to First Byte (TTFB)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
Correct answer: Largest Contentful Paint (LCP)
LCP measures when the largest visible content element renders, serving as a proxy for how quickly users perceive the page as loaded and usable.
Question 3: In digital UX, what problem does 'debouncing' solve in search input fields?
- It delays triggering a search query until the user stops typing, preventing excessive API calls on every keystroke (Correct answer)
- It prevents duplicate form submissions when users click a button multiple times
- It smooths out animation frame rates during scroll events
- It batches multiple UI state updates into a single render cycle
Correct answer: It delays triggering a search query until the user stops typing, preventing excessive API calls on every keystroke
Debouncing waits for a pause in user input before firing the search request, reducing server load and preventing a cluttered results experience while the user is still typing.
Question 4: What is 'content shifting' (measured by CLS) and why is it a poor UX experience?
- Unexpected movement of page elements as assets load, causing users to click the wrong thing (Correct answer)
- The reordering of search results after a filter is applied
- A transition animation between content sections
- The repositioning of the navigation bar on scroll
Correct answer: Unexpected movement of page elements as assets load, causing users to click the wrong thing
Cumulative Layout Shift occurs when images, ads, or fonts load and push existing content around, causing misclicks and disorienting the user's reading experience.
Question 5: When designing an onboarding flow for a mobile app, which approach best balances learnability with user patience?
- Contextual onboarding that introduces features at the moment of first use rather than in an upfront tutorial (Correct answer)
- A mandatory 10-screen tutorial before the user can access the app
- Showing all feature tooltips simultaneously on the first launch screen
- Requiring users to watch a full demo video before signing up
Correct answer: Contextual onboarding that introduces features at the moment of first use rather than in an upfront tutorial
Contextual onboarding teaches features in the moment of need, reducing upfront cognitive load and keeping users motivated by letting them experience value immediately.
Question 6: What is the primary UX concern with using auto-playing video on a webpage?
- It can startle users, consume unexpected data, and disrupt screen reader or assistive technology users (Correct answer)
- It increases page load speed by preloading resources
- It improves engagement metrics by forcing content consumption
- It is only problematic on desktop browsers, not mobile
Correct answer: It can startle users, consume unexpected data, and disrupt screen reader or assistive technology users
Auto-playing video (especially with audio) violates user control principles, can use mobile data without consent, and interferes with assistive technologies reading page content.
Question 7: Which approach to handling empty states in a digital product reflects best UX practice?
- Show a helpful illustration, explain why the space is empty, and provide a clear call-to-action to populate it (Correct answer)
- Display a blank white screen with no messaging
- Show an error code indicating no data was returned
- Automatically populate the space with sample data permanently
Correct answer: Show a helpful illustration, explain why the space is empty, and provide a clear call-to-action to populate it
Well-designed empty states reduce confusion, guide users toward their next action, and turn a potentially frustrating moment into an opportunity for engagement.
User Experience Design Technology & Digital Applications 5
What is 'dark mode' from a UX and technical standpoint, and which CSS feature enables it based on system preferences?