Top 30 UI Interview Questions and Answers
30 multiple-choice questions on UI, drawn from 30 bites out of the 189 tagged UI on Tezvyn. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
When standard design system components fail in a specific real-world context like warehouse hardware, what does the article argue is the best system-level response?
Show the answer
Answer: a · They should adapt their execution for specific contexts while preserving foundational principles
The article argues that systems need contextual adaptations, like Shopify's warehouse dialect, that keep core principles while changing execution for the context. Granting one-off exceptions describes the old exception-request model that the Atlassian Flexibility Framework was explicitly built to replace.
Read the full bite: Shopify's 0% to 100% Fix: Design Dialects Over Rigidity
Question 2 of 30
For displaying long, scrolling lists of data in React Native, which component is recommended for optimal performance?
Show the answer
Answer: d · FlatList, because it efficiently renders only the items currently visible on screen.
FlatList is the recommended component for long lists because it optimizes performance by only rendering items currently visible on screen. ScrollView, while providing scrolling, renders all its children at once, which can lead to performance issues with extensive content.
Read the full bite: React Native Core Components: Your UI Building Blocks
Question 3 of 30
What is the fundamental nature of a React Component?
Show the answer
Answer: d · A JavaScript function that returns a description of UI using JSX.
The card explicitly states, "A React component is a JavaScript function that returns a piece of UI" and that it returns "JSX" to describe the UI. While components are analogous to custom HTML tags, their core implementation is a JavaScript function.
Read the full bite: React Components: Your UI Building Blocks
Question 4 of 30
What is the fundamental nature of JSX in a React application?
Show the answer
Answer: d · It is a syntax extension that a build tool converts into standard JavaScript function calls.
The card explains that JSX is a "syntax extension" that "gets compiled into plain JavaScript objects" by a "compiler (like Babel)" into "React.createElement() function calls." Option C is incorrect because the card explicitly states JSX is "not a string, nor is it HTML."
Read the full bite: JSX: Putting HTML Inside Your JavaScript Components
Question 5 of 30
Which scenario best highlights the core value proposition of a design system?
Show the answer
Answer: c · A large enterprise with multiple product teams maintaining various digital applications across different platforms.
The card states that a design system is essential when "multiple teams are working across different products or channels" to manage complexity at scale, ensuring consistency and speeding up production. Option C directly aligns with this, while option D describes only a part of a design system (a style guide) and options A and D describe scenarios where a design system's full investment might be overkill or not its primary benefit.
Read the full bite: A Design System is a Shared Toolbox, Not Just a Sticker Sheet
Question 6 of 30
Which statement best captures the fundamental nature of Nielsen's 10 Heuristics?
Show the answer
Answer: a · They are flexible guidelines for identifying common usability problems.
The card explicitly states that the heuristics are "flexible rules of thumb" and a "diagnostic checklist" for identifying usability issues. They are not strict laws, nor are they meant to generate new designs or replace user testing, making option A the correct choice and options A, B, and D common misconceptions.
Read the full bite: Nielsen's 10 Heuristics: Rules of Thumb for UI Design
Question 7 of 30
According to the card, what is the main problem a design system aims to solve in large organizations?
Show the answer
Answer: b · Inconsistent user interface elements and redundant work across various product teams.
The card explicitly states that a design system was created to solve the problem of "multiple teams often design and code multiple versions of the same UI element," leading to "internal inconsistency, wasted time, and messy, duplicated code." Option B accurately summarizes this. Option A describes a benefit of a design system, not the primary problem it was created to address.
Question 8 of 30
Which combination of practices is most crucial for optimizing the readability of body text in a user interface?
Show the answer
Answer: b · Left-aligning text and maintaining line lengths between 45 and 90 characters.
The card emphasizes left-alignment for a consistent starting point and line lengths between 45 and 90 characters to prevent eye strain. Justified text (Option D) is explicitly discouraged on the web due to poor browser rendering.
Question 9 of 30
For which scenario would a full design system typically be considered an unnecessary investment?
Show the answer
Answer: c · A small team developing an early-stage, rapidly iterating prototype
The card states that for a single, small-scale project or a rapidly iterating early-stage prototype, building a full design system is often overkill due to the initial investment. The other options describe situations where a design system provides significant benefits, such as consistency, efficiency, and shared understanding, making them scenarios where it is recommended.
Read the full bite: Design Systems: Your UI's Single Source of Truth
Question 10 of 30
What is the primary issue with using `onClick={myFunction()}` instead of `onClick={myFunction}` in a React component?
Show the answer
Answer: c · It executes `myFunction` immediately during the component's render phase, not when the user clicks.
The card explicitly states that `onClick={handleClick()}` is incorrect because "The parentheses () execute the function immediately during the component's render phase." This means the function runs when the component is drawn, not when the user interacts with it. Option D is incorrect because it's a logical error, not a syntax error.
Question 11 of 30
When using the logical AND operator (condition && <Component />) for conditional rendering in React, what is a crucial behavior to be aware of?
Show the answer
Answer: d · If 'condition' evaluates to 0, the number 0 might be displayed in the UI.
The card explicitly mentions this as a 'footgun': if 'condition' is the number 0, the expression '0 && <Component />' evaluates to 0, which React will render. Option C is incorrect because JavaScript's logical AND operator works with any truthy or falsy value, not just strict booleans.
Read the full bite: Conditional Rendering: Show UI Based on State
Question 12 of 30
Which scenario best illustrates the critical trade-off when applying Fitts's Law in UI design?
Show the answer
Answer: a · Designing an interface where every element is maximized for click speed.
The card explicitly states that making every element massive leads to cluttered, low-density interfaces, highlighting the trade-off between target acquisition speed and information discovery. The other options are direct, positive applications of Fitts's Law, not illustrations of its inherent trade-off.
Read the full bite: Fitts's Law: Bigger, Closer Targets Are Faster to Hit
Question 13 of 30
When using a typographic scale, what is the primary negative impact of creating a one-off font size not included in the predefined system?
Show the answer
Answer: a · It undermines the visual consistency and rhythmic flow that the scale is designed to achieve.
The card explicitly states that creating one-off font sizes is a 'footgun' that 'undermines the entire purpose of having a consistent, rhythmic system.' While other options might be indirect consequences, breaking visual consistency and rhythm is the primary negative impact highlighted.
Read the full bite: Typographic Scale: A System for Consistent Text
Question 14 of 30
What is the primary reason for adopting a spacing scale in UI design?
Show the answer
Answer: c · To establish a consistent visual rhythm and prevent arbitrary spacing choices in layouts.
The card states that a spacing scale exists "To prevent chaotic, inconsistent layouts" and provides "a shared language and constraints to create predictable, scannable UIs." Option C directly reflects this goal. Option B is incorrect because a spacing scale limits choices, rather than enabling unique adjustments for every element. Options B and D contradict the card's explicit statements about what spacing scales are not used for (font sizes/borders) and how they are implemented (using tokens, not raw pixel values).
Read the full bite: Spacing Scales: Using Multiples for Consistent UI
Question 15 of 30
Which action would cause an error or unexpected behavior when using React Native's View component?
Show the answer
Answer: a · Directly placing plain text content, like "Hello World", as a child of a View.
The card explicitly states that 'All text content must be placed inside a <Text> component, or your app will throw an error.' The other options describe valid and common uses of the View component for layout and styling.
Read the full bite: The View Component: React Native's UI Building Block
Question 16 of 30
Which of the following text elements is generally exempt from the WCAG 4.5:1 contrast requirement?
Show the answer
Answer: d · A button label that is currently disabled
The card states that "incidental text, such as text on a disabled button," is exempt from the contrast requirement. Navigation links, body text, and normal-sized headlines (like 16px bold, which is not considered 'large text') are all intended to convey information and thus require a 4.5:1 contrast ratio.
Read the full bite: WCAG Color Contrast: The 4.5:1 Rule for Readability
Question 17 of 30
In the context of Vertical Rhythm, what is the foundational element used to derive the consistent spacing unit for a page layout?
Show the answer
Answer: b · The line height of the body text
The card explicitly states that the vertical rhythm system "is built from the body text's line height," which then forms the basis for calculating all other vertical spacing units. While other options relate to layout, they are not the foundational element for this specific system.
Read the full bite: Vertical Rhythm: A Formula for Consistent Spacing
Question 18 of 30
Which scenario best highlights HSL's primary advantage over RGB in UI design?
Show the answer
Answer: b · Programmatically generating a consistent color palette with varying lightness for UI states.
HSL's intuitive structure (Hue, Saturation, Lightness) makes it ideal for creating systematic color variations, such as lighter shades for hover states, by simply adjusting the lightness. RGB is better suited for precise color matching from exact specifications like hex codes, rather than generating variations.
Read the full bite: RGB vs. HSL: Two Ways to Tell a Computer 'Color'
Question 19 of 30
When displaying an image from a network URL using React Native's Image component, which of the following is a critical requirement for the image to be visible?
Show the answer
Answer: a · You must specify explicit width and height in the style prop.
The card explicitly states that for network images, 'you must provide an explicit width and height in the style prop' because React Native cannot know remote image dimensions, and 'Without these styles, the image will have zero dimensions and be invisible'. While wrapping in a View (C) is common for layout, the Image component itself needs the dimensions to render a network image.
Question 20 of 30
For which scenario is React Native's Pressable component most beneficial compared to a simple Button or View with an onPress handler?
Show the answer
Answer: c · When you want to detect specific touch stages like a finger pressing down, holding, or releasing.
Pressable's core purpose is to provide granular control over touch interactions, allowing detection of events like onPressIn, onLongPress, and onPressOut. The card explicitly states that for standard, platform-styled buttons with minimal logic, the basic Button component is simpler, making option D incorrect.
Read the full bite: Pressable: A More Powerful Way to Handle Touches
Question 21 of 30
Which characteristic primarily makes SVG ideal for logos and icons on responsive websites, unlike raster formats?
Show the answer
Answer: c · They maintain perfect sharpness and clarity regardless of display resolution or scaling.
The card states SVG is "resolution-independent" and "infinitely scalable," ensuring graphics are "always perfectly sharp, no matter the display size." This consistent visual quality across varying resolutions is the primary benefit for responsive design. While SVG can be manipulated and often has smaller file sizes, these are secondary to its core scalability advantage for logos and icons.
Read the full bite: SVG: Code-Based, Infinitely Scalable Graphics
Question 22 of 30
What is the main advantage of using component variants in a design system?
Show the answer
Answer: b · They allow a single base component to represent many different forms by adjusting its properties.
The card states that variants allow "one core component to serve multiple, predictable purposes" by defining "properties and their possible values." This directly aligns with option B. Option A is incorrect because variants are for managing variations of existing components for repeatable patterns, not for creating new or unique, non-repeatable elements.
Read the full bite: Component Variants: One Component, Many Forms
Question 23 of 30
A developer is building a UI with nested elements like forms containing buttons. Which problem does Component Composition primarily solve for them?
Show the answer
Answer: d · It allows client code to interact with individual components and component groups using the same interface.
Component Composition's core purpose is to provide a uniform way to handle both individual objects (leaves) and groups of objects (composites) through a shared interface, simplifying client code. While good component design encourages reusability, composition itself does not inherently force it or prevent monolithic designs; the card even warns against the 'footgun' of creating monolithic components.
Read the full bite: Component Composition: Treat a Group Like an Individual
Question 24 of 30
A designer needs to fix an awkward gap between 'T' and 'o' in a large headline and also make the letters in a paragraph of body text appear more tightly packed. Which typographic adjustments are most appropriate?
Show the answer
Answer: a · Apply negative kerning to the 'To' pair and apply negative tracking to the body text.
Negative kerning is used to reduce space between specific letter pairs, perfect for fixing awkward gaps in headlines. Negative tracking uniformly reduces space between all letters in a block, making them appear more tightly packed. Option B incorrectly applies tracking to a pair and misuses leading for horizontal density.
Read the full bite: Kerning, Tracking, and Leading: Spacing in Typography
Question 25 of 30
What is the main benefit of using semantic naming for design tokens (e.g., color.background.action.primary) compared to value-based naming (e.g., blue-500)?
Show the answer
Answer: a · It ensures the token's function remains clear and consistent even if its visual appearance changes.
Semantic naming ensures a token's purpose (e.g., primary action color) remains valid even if its value changes (e.g., from blue to green), preventing 'lie' variables and making the system resilient to updates. While descriptive names can aid learning, the primary benefit is this decoupling of purpose from value for scalability.
Question 26 of 30
What is the primary consequence of omitting or incorrectly handling the onRequestClose prop for a React Native Modal on Android?
Show the answer
Answer: b · Android users will be unable to dismiss the modal using the hardware back button.
The card explicitly states that forgetting onRequestClose "disables the Android back button, trapping your user." This prop is crucial for allowing users to dismiss the modal via the hardware back button on Android. The modal will still render its content even if this prop is omitted.
Read the full bite: React Native Modal: Presenting Content Above Other Views
Question 27 of 30
What happens if the color value is omitted when defining a CSS box-shadow?
Show the answer
Answer: c · The shadow inherits the parent element's computed text color.
The card explicitly states that omitting the color causes the shadow to inherit the parent element's text color, which is a common 'footgun' or pitfall. It does not default to black, become ignored, or inherit the background color.
Read the full bite: CSS box-shadow: Creating Depth and Elevation
Question 28 of 30
What is the primary advantage of using Interface Builder for UI development?
Show the answer
Answer: d · It enables visual design and arrangement of UI components, accelerating layout.
Interface Builder's main benefit is its visual approach to UI design, allowing developers to quickly lay out screens without writing extensive layout code. While it connects to code, it does not remove the need for code files or automatically generate all UI logic, and programmatic UI is an alternative method.
Read the full bite: Interface Builder: Visual UI Design for iOS/macOS
Question 29 of 30
Which method is the most efficient and recommended for providing a distinct layout for an Android activity when the device is rotated to landscape mode?
Show the answer
Answer: b · Create res/layout/my_activity.xml for portrait and res/layout-land/my_activity.xml for landscape, both with the same root filename.
Android's resource qualifier system automatically selects the appropriate layout based on the device's configuration, such as orientation, by using suffixes like -land. Manually checking orientation in lifecycle callbacks (Option A) is inefficient and bypasses this intended automatic mechanism.
Read the full bite: Explain the res/ directory and resource qualifiers for layouts
Question 30 of 30
What is the standard practice for providing a different layout file for landscape orientation on Android?
Show the answer
Answer: c · Create a `res/layout-land/` directory and place a layout file inside it with the same name as the default.
Android's resource system automatically selects the correct layout by using directory name qualifiers. Creating a `layout-land` directory is the standard way to provide an alternative layout, which the system will use without requiring any conditional logic in your code.
Read the full bite: What is the `res/` directory and how do you use resource qualifiers?
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.