▸case-01 You are designing the alert system for the TaskManager web application. When a user creates a new task card, a success toast notification appears at the bottom of the screen. The product manager suggests keeping the toast on screen indefinitely until the user manually clicks an 'X' close button to ensure they see it. Specify the recommended automatic dismissal duration for standard success toasts in this design system. | fail→pass | 8,468 | 7,011 | -17% | 1 | 1 | 0% | 1,385 | 1,536 | +11% | 0 | 0 | — |
▸case-02 You are reviewing the user experience for batch archiving emails in the InboxPro web client. The current design displays a blocking 'Are you sure you want to archive 10 items?' modal dialog requiring a confirmation click before proceeding. Recommend an alternative feedback pattern that respects user momentum while allowing recovery from unintended actions. | pass→pass | 11,992 | 11,754 | -2% | 1 | 1 | 0% | 1,929 | 2,387 | +24% | 0 | 0 | — |
▸case-03 You are designing the form validation behavior for the CheckoutFast payment page. When a user inputs an invalid credit card number, an inline visual error message appears below the field. A team member proposes auto-dismissing the error message after 3 seconds so the interface remains clean. Specify the persistence rule for error feedback. | pass→pass | 12,820 | 7,272 | -43% | 1 | 1 | 0% | 2,049 | 1,573 | -23% | 0 | 0 | — |
▸case-04 You are designing field validation feedback for the Acme Portal user registration page. When a user enters an unavailable username, the engineering team wants to display a global system notification banner at the top of the browser window. Recommend the preferred feedback hierarchy placement for this action. | pass→pass | 10,017 | 8,214 | -18% | 1 | 1 | 0% | 1,764 | 1,823 | +3% | 0 | 0 | — |
▸case-05 You are designing status indicators for build pipeline statuses (success, failure, pending) in the CloudDeploy dashboard. The developer suggests using plain green, red, and yellow visual dots as the sole indicators. Specify the accessibility rule regarding color usage for status feedback. | pass→pass | 6,414 | 7,337 | +14% | 1 | 1 | 0% | 1,272 | 1,899 | +49% | 0 | 0 | — |
▸case-06 You are designing the feedback for favoriting an item in the ShopEase mobile app. The developer proposes showing an intrusive page-level alert banner on every favorite toggle to guarantee visibility. Recommend how to properly scale feedback intensity for minor repetitive actions. | pass→pass | 12,365 | 9,792 | -21% | 1 | 1 | 0% | 2,027 | 2,100 | +4% | 0 | 0 | — |
▸case-07 You are designing the interaction feedback for a contactless tap-to-pay feature in the QuickPay mobile application. The team currently relies strictly on visual text updates on screen, which users often miss while looking at the physical payment terminal. Recommend additional sensory feedback channels to improve confirmation clarity. | pass→pass | 13,511 | 11,310 | -16% | 1 | 1 | 0% | 2,293 | 2,212 | -4% | 0 | 0 | — |
▸case-08 You are designing the progress tracking interface for a cloud video rendering tool in StudioRender. The rendering job takes several minutes. The current prototype displays a brief progress bar that disappears 2 seconds after starting, leaving no visible status during execution. Specify the persistence behavior for ongoing process status feedback. | pass→pass | 13,968 | 15,162 | +9% | 1 | 1 | 0% | 2,363 | 2,941 | +24% | 0 | 0 | — |
▸case-09 You are designing feedback for deleting a comment in the ForumHub discussion application. The product team wants a prominent success banner that stays pinned to the top of the thread indefinitely. Specify the correct confirmation structure and display duration for reversible actions. | pass→pass | 10,589 | 10,126 | -4% | 1 | 1 | 0% | 1,738 | 1,986 | +14% | 0 | 0 | — |
▸case-10 You are designing the collaborative interface for DocuEdit, a real-time document editor. When another user is actively typing or syncing changes, the system currently shows no indicator, causing editing conflicts. Recommend the appropriate feedback pattern to communicate live background activity. | pass→pass | 13,299 | 9,909 | -25% | 1 | 1 | 0% | 2,082 | 2,047 | -2% | 0 | 0 | — |
▸case-11 You are designing the password creation field for the SecureAuth onboarding flow. The backend engineer suggests deferring all password strength and format feedback until the user fills out the entire form and clicks Submit. Recommend the optimal feedback timing pattern for text input fields. | pass→pass | 12,556 | 11,657 | -7% | 1 | 1 | 0% | 2,080 | 2,142 | +3% | 0 | 0 | — |
▸case-12 You are designing an urgent system notification for an upcoming 2-hour scheduled maintenance window across the SaaS Analytics Suite platform. The team suggests putting a small inline footnote in the account settings page. Recommend the correct feedback pattern and hierarchy level for critical system-wide events. | pass→pass | 11,476 | 11,120 | -3% | 1 | 1 | 0% | 2,069 | 2,333 | +13% | 0 | 0 | — |
▸case-13 You are designing the driver arrival alert system for the FoodDash delivery application. When the app is minimized or the phone is locked, the system needs to inform the user that their order has arrived at their door. Specify the appropriate feedback pattern for time-sensitive events occurring outside the active view. | pass→pass | 13,424 | 9,368 | -30% | 1 | 1 | 0% | 2,088 | 2,003 | -4% | 0 | 0 | — |
▸case-14 You are designing the inbox overview in the ChatSphere desktop client. The product team wants to display full text preview banners across the navigation sidebar for every incoming unread message. Recommend a compact visual indicator pattern for unread count tracking. | pass→pass | 13,518 | 12,566 | -7% | 1 | 1 | 0% | 2,222 | 2,418 | +9% | 0 | 0 | — |
▸case-15 You are designing the bulk contact import feature for the SalesPulse CRM tool. After processing a CSV file containing 500 records, the application displays a generic checkmark icon without any text. Recommend what critical information must be included in the post-action confirmation. | pass→pass | 12,329 | 10,867 | -12% | 1 | 1 | 0% | 2,074 | 2,315 | +12% | 0 | 0 | — |
▸case-16 You are designing the drag-and-drop card reordering interface for the ProjectGrid kanban board. The developer wants to hold the dragged card in its original place until an API response confirms the new database index 1.5 seconds later. Recommend the visual feedback pattern for drag interactions. | pass→pass | 15,502 | 12,069 | -22% | 1 | 1 | 0% | 2,539 | 2,332 | -8% | 0 | 0 | — |
▸case-17 You are designing the background auto-save mechanism for the BlogCraft content editor. Every 30 seconds when an auto-save succeeds, the current prototype displays a modal popup dialog saying 'Draft Saved', requiring the writer to click 'OK' to resume typing. State the core usability rule regarding minor confirmation feedback. | pass→pass | 4,231 | 3,949 | -7% | 1 | 1 | 0% | 688 | 1,067 | +55% | 0 | 0 | — |
▸case-18 You are designing the administrative dashboard for CloudOps Infrastructure Manager. The operations team needs to monitor the live connectivity state of remote Kubernetes clusters. Specify the appropriate continuous status feedback pattern for infrastructure state. | pass→pass | 15,912 | 13,021 | -18% | 1 | 1 | 0% | 2,430 | 2,336 | -4% | 0 | 0 | — |
▸case-19 You are designing the primary submission controls for the PayDirect checkout button. When the user taps 'Complete Purchase', the button appearance remains entirely static until the page reloads 3 seconds later. Recommend the immediate feedback requirement for button clicks. | pass→pass | 9,048 | 7,501 | -17% | 1 | 1 | 0% | 1,513 | 1,520 | +0% | 0 | 0 | — |
▸case-20 You are establishing typographic guidelines for the marketing homepage of TechBrand. Specify the exact numerical scale ratio used for a Major Third modular font scale. | pass→pass | 14,609 | 4,695 | -68% | 1 | 1 | 0% | 786 | 1,354 | +72% | 0 | 0 | — |
▸case-21 You are auditing the accessibility compliance of the dark mode color palette for the NewsFeed mobile app. Calculate the exact WCAG 2.1 AAA minimum contrast ratio threshold required for small body text against a dark gray background surface. | pass→pass | 3,820 | 4,141 | +8% | 1 | 1 | 0% | 770 | 1,215 | +58% | 0 | 0 | — |
▸case-22 You are setting up the responsive layout CSS framework for the WebStore e-commerce site using standard Bootstrap 5 breakpoint specifications. Specify the min-width pixel threshold defined for the medium (md) breakpoint. | pass→pass | 1,542 | 2,632 | +71% | 1 | 1 | 0% | 294 | 858 | +192% | 0 | 0 | — |