Download Web Design Wireframes and Prototypes Practice Exam and more Exams Technology in PDF only on Docsity!
Practice Exam
Question 1. Which of the following best distinguishes User Experience (UX) design from User Interface (UI) design? A) UX focuses on visual aesthetics while UI concentrates on user research. B) UX deals with the overall feel of the product; UI handles the look and layout of screens. C) UX is only about coding; UI is about graphic design. D) UX and UI are interchangeable terms. Answer: B Explanation: UX encompasses the entire experience a user has with a product, including usability and satisfaction, whereas UI is concerned with the visual elements, layout, and interactive components of the interface. Question 2. In the double‑diamond design process, where does wireframing typically occur? A) Discover phase B) Define phase C) Develop phase D) Deliver phase Answer: C Explanation: Wireframing is a low‑to‑mid‑fidelity activity that translates defined requirements into visual structure, fitting within the Develop (ideate and prototype) stage. Question 3. Which principle of User‑Centered Design (UCD) emphasizes involving real users throughout the design lifecycle? A) Aesthetic‑Usability Effect B) Early and continuous user involvement C) Minimalist design D) Consistency
Practice Exam
Answer: B Explanation: UCD stresses that designers must engage target users from the beginning and iteratively throughout the project to ensure the solution meets real needs. Question 4. When analyzing a design brief, the most critical first step is to: A) Sketch high‑fidelity mockups. B) Identify business goals and constraints. C) Choose a color palette. D) Write code for the backend. Answer: B Explanation: Understanding business objectives, constraints, and success criteria sets the direction for all subsequent design work. Question 5. A user persona should NOT include which of the following elements? A) Demographic information B) Detailed technical architecture of the system C) Goals and motivations D) Pain points related to the product Answer: B Explanation: Personas represent users, not system architecture; technical details belong in design specifications, not user research artifacts. Question 6. Which research method is most suitable for uncovering users’ emotional reactions to a product concept? A) Card sorting B) Competitive analysis
Practice Exam
B. Participants group content items into categories that make sense to them. C) Designers create low‑fidelity sketches. D. Developers test API endpoints. Answer: B Explanation: Card sorting helps uncover natural information groupings from users, informing IA and navigation structures. Question 10. A site map differs from a user flow in that a site map: A) Shows the sequence of user actions. B) Depicts the hierarchical organization of pages. C) Includes micro‑interaction details. D) Is only used for mobile apps. Answer: B Explanation: Site maps illustrate the overall structure and relationships between pages, whereas user flows map the steps a user takes to accomplish tasks. Question 11. When creating a user flow for “adding a product to a cart,” which element should be highlighted to identify a pain point? A) The color of the “Add to Cart” button. B) The number of clicks required to complete the action. C) The brand logo placement. D) The font size of the product title. Answer: B Explanation: Excessive clicks or unclear steps increase friction; counting interactions helps spot usability issues.
Practice Exam
Question 12. Low‑fidelity wireframes are most useful for: A) Testing visual design details. B) Communicating layout and content hierarchy quickly. C. Demonstrating final animations. D. Exporting production‑ready assets. Answer: B Explanation: Low‑fidelity wireframes focus on structure and flow without visual polish, facilitating rapid feedback. Question 13. Which characteristic distinguishes a mid‑fidelity wireframe from a low‑fidelity one? A) Inclusion of exact pixel dimensions. B) Use of grayscale UI components and placeholder text. C) Interactive hotspots for navigation. D. Detailed color schemes and typography. Answer: B Explanation: Mid‑fidelity wireframes often incorporate refined UI elements and realistic placeholder text while still lacking full visual styling. Question 14. High‑fidelity wireframes are closest to which of the following deliverables? A) Sitemap B) Functional prototype C) Sketch on paper D) Content inventory Answer: B
Practice Exam
D) Is required by all design tools. Answer: B Explanation: A 12‑column grid can be divided into 1‑12, 2‑6, 3‑4, 4‑3, 6‑2, etc., enabling designers to build diverse, responsive layouts. Question 18. When designing for multiple breakpoints, the term “mobile‑first” means: A) Designing the desktop layout first and then shrinking it. B) Starting design with the smallest screen and progressively enhancing for larger screens. C) Ignoring tablet designs. D) Using only one column on all devices. Answer: B Explanation: Mobile‑first encourages designing for the most constrained viewport first, then adding complexity for larger screens. Question 19. A prototype differs from a mockup primarily in that a prototype: A) Is static and non‑interactive. B) Includes interactive elements to simulate user flow. C) Uses only grayscale colors. D. Is always high‑fidelity. Answer: B Explanation: Prototypes allow users to interact with the design (click, swipe, input), whereas mockups are static visual representations. Question 20. Which fidelity level is most appropriate for testing a new navigation concept with a small group of users? A) Low‑fidelity (paper sketches)
Practice Exam
B) Mid‑fidelity (digital wireframes with clickable hotspots) C) High‑fidelity (pixel‑perfect with animations) D) Final coded product Answer: B Explanation: Mid‑fidelity prototypes provide enough interactivity to evaluate navigation without the overhead of high‑fidelity details. Question 21. Micro‑interactions are best described as: A) Full‑screen page transitions. B) Small, contained feedback loops (e.g., button hover, form validation). C) The overall visual theme of a site. D) The process of writing CSS. Answer: B Explanation: Micro‑interactions focus on subtle, task‑specific animations or responses that enhance usability. Question 22. In a prototype, a “hotspot” is used to: A) Define a region where users can click or tap to trigger navigation or an action. B) Apply a heat‑map overlay. C) Increase the file size for better quality. D. Store user passwords. Answer: A Explanation: Hotspots are invisible interactive areas that simulate real user interactions within a prototype. Question 23. Which of the following is an affordance?
Practice Exam
Question 26. Which document is essential for developers to understand interaction details such as hover states and animation timing? A) Style guide B) Specification (spec) document C) Branding brief D) Project charter Answer: B Explanation: A spec document outlines exact interaction parameters, measurements, and behavior, providing developers with actionable information. Question 27. Which of the following tools can automatically generate design specs such as color codes and spacing measurements? A) Microsoft Word B) Zeplin (or similar hand‑off platforms) C) Adobe Photoshop only D) Notepad Answer: B Explanation: Hand‑off tools like Zeplin, Avocode, or Figma’s Inspect mode extract design attributes for developers. Question 28. Proper layer naming in design files primarily improves: A) The file’s download speed. B) Collaboration efficiency and developer understanding. C) The aesthetic appeal of the prototype. D. The SEO ranking of a website.
Practice Exam
Answer: B Explanation: Clear, consistent naming helps team members locate and modify elements quickly, reducing miscommunication. Question 29. Which accessibility consideration is most critical when designing interactive components? A) Using only sans‑serif fonts. B) Providing sufficient color contrast and keyboard operability. C. Adding decorative gradients. D. Limiting the number of pages. Answer: B Explanation: Contrast ensures readability for low‑vision users, while keyboard support enables navigation for users who cannot use a mouse. Question 30. During a moderated remote usability test, the facilitator should: A) Record only screen activity, no verbal cues. B) Observe silently without interacting. C. Guide participants through tasks, ask follow‑up questions, and note behaviors. D. Provide the solution if the participant gets stuck. Answer: C Explanation: Moderated tests allow the facilitator to probe deeper, clarify actions, and capture rich qualitative data. Question 31. Which metric best indicates how efficiently users can complete a task in a prototype test? A) Net Promoter Score (NPS) B) Time on task
Practice Exam
A) Focuses on a single, specific action rather than the overall journey. B) Includes branding guidelines. C. Is only used for mobile applications. D. Does not consider user goals. Answer: A Explanation: Task flows break down the steps for a particular task (e.g., password reset) whereas user flows map broader journeys. Question 35. Which of the following techniques is most appropriate for validating the information hierarchy of a new website? A) Heat‑map analysis of a live site. B) Card sorting with target users. C. Color contrast testing. D. Code linting. Answer: B Explanation: Card sorting directly reveals how users group and prioritize content, informing hierarchy decisions. Question 36. When creating a responsive grid, the term “gutter” refers to: A) The margin between the browser edge and the layout. B) The space between columns within the grid. C. The background color of the page. D. The header height. Answer: B Explanation: Gutters are the vertical spacing between columns, essential for visual separation and readability.
Practice Exam
Question 37. In prototyping, a “component variant” is used to: A) Store multiple versions of a component with different states (e.g., default, hover, disabled). B. Generate random colors. C. Export code directly. D. Create PDF documentation. Answer: A Explanation: Variants allow designers to define and switch between component states efficiently within the same component set. Question 38. Which of the following best describes a “low‑fidelity” prototype? A) Pixel‑perfect, fully styled screens. B) Simple, often hand‑drawn or wireframe‑level mockups with limited interactivity. C. A functional coded website. D. A video walkthrough. Answer: B Explanation: Low‑fidelity prototypes prioritize speed and concept validation over visual detail. Question 39. During design hand‑off, the term “design system” most accurately refers to: A) The collection of all project screenshots. B) A set of reusable components, guidelines, and assets that ensure consistency across the product. C. The final HTML/CSS code. D. The user research report. Answer: B
Practice Exam
D. Writing CSS. Answer: B Explanation: Tree testing validates the hierarchical structure defined in a site map by testing findability without visual design. Question 43. Which of the following best describes “progressive disclosure” in UI design? A. Showing all options at once to avoid hidden menus. B. Revealing additional information or controls only when needed. C. Using only one color throughout the interface. D. Loading all assets at page load. Answer: B Explanation: Progressive disclosure reduces cognitive load by presenting details step‑by‑step. Question 44. In a usability test, a “think‑aloud” protocol requires participants to: A. Remain silent while completing tasks. B. Verbalize their thoughts, decisions, and confusions as they interact. C. Write a report after the test. D. Only answer multiple‑choice questions. Answer: B Explanation: Think‑aloud provides insight into the user’s mental model and uncovers hidden usability issues. Question 45. When using Figma’s “Prototype” mode, the “After Delay” interaction is typically used for: A. Immediate navigation on click. B. Simulating auto‑advancing slides or onboarding screens.
Practice Exam
C. Exporting assets. D. Changing the color palette. Answer: B Explanation: “After Delay” triggers a transition after a set time, useful for timed animations or auto‑play flows. Question 46. Which of the following statements about “responsive breakpoints” is true? A. They are fixed to only three device sizes: mobile, tablet, desktop. B. They should be defined based on content needs, not just device dimensions. C. They are automatically generated by all browsers. D. They eliminate the need for flexible grids. Answer: B Explanation: Breakpoints are best chosen when the layout needs to adapt, ensuring optimal presentation across various screen widths. Question 47. A “design spec” that includes CSS variable names, font sizes, and spacing values helps developers by: A. Reducing the amount of code they need to write. B. Providing a single source of truth for visual consistency. C. Eliminating the need for version control. D. Automatically generating unit tests. Answer: B Explanation: Detailed specs act as a reference, ensuring developers implement the intended visual design accurately. Question 48. Which of the following is an example of a “micro‑interaction” that improves form usability?
Practice Exam
Question 51. Which testing methodology is best suited for gathering quantitative data on task completion rates? A. Diary studies. B. Remote unmoderated usability testing with predefined tasks. C. Focus groups. D. Contextual inquiry. Answer: B Explanation: Structured remote tests can automatically capture metrics like success rates and time on task. Question 52. A “heat map” generated from a prototype test primarily shows: A. Server response times. B. Areas where users click, tap, or hover most frequently. C. The color palette used. D. The code execution path. Answer: B Explanation: Heat maps visualize user interaction density, highlighting popular or ignored UI regions. Question 53. Which of the following is a key reason to conduct competitive analysis early in a project? A. To copy competitors’ exact designs. B. To identify opportunities, gaps, and best practices that inform IA and UI decisions. C. To determine the exact price point of the product. D. To write the final code.
Practice Exam
Answer: B Explanation: Competitive analysis reveals market standards and unmet user needs, guiding strategic design choices. Question 54. In the context of UI patterns, a “hamburger menu” is most appropriate when: A. The site has only three navigation items. B. Space is limited and secondary navigation can be hidden. C. You want to display all options at once. D. The design is for a desktop‑only experience. Answer: B Explanation: The hamburger icon conserves space by collapsing navigation into a hidden drawer, suitable for mobile or constrained layouts. Question 55. When documenting a design decision, the “rationale” section should include: A. The designer’s favorite color. B. The user research or business reason that led to the choice. C. The exact pixel dimensions of every element. D. The version control commit hash. Answer: B Explanation: Rationale explains why a decision was made, linking it to data, goals, or constraints, which aids future revisions. Question 56. Which of the following best describes “progressive enhancement” in web design? A. Building the most complex version first and stripping features for older browsers. B. Starting with a basic functional experience and adding advanced features for capable browsers.
