Evaluate UI/UX Design Against Modern Standards

Analyze a given UI/UX design or concept description against contemporary design principles and user experience best practices, identifying strengths, weaknesses, and areas for improvement. Provide actionable recommendations based on the analysis.

תחום: עיצוב

מתי להשתמש

Invoke this skill when a user provides a UI/UX design (as text, description, or conceptual outline) and requests an evaluation, critique, or suggestions for enhancement. Use it to benchmark designs against current trends, accessibility guidelines, and usability heuristics.

מתי זה מופעל

when the user asks to evaluate or critique a UI/UX design

תגיות: ui-ux, design-critique, accessibility, usability, design-standards

SKILL.md

--- name: Evaluate UI/UX Design Against Modern Standards description: Analyze a given UI/UX design or concept description against contemporary design principles and user experience best practices, identifying strengths, weaknesses, and areas for improvement. Provide actionable recommendations based on the analysis. when_to_trigger: when the user asks to evaluate or critique a UI/UX design --- ## Overview Evaluate user interface (UI) and user experience (UX) designs or concepts against established design principles, usability heuristics, accessibility guidelines (e.g., WCAG 2.2), and current industry best practices. Provide a structured critique and actionable recommendations for improvement. ## When to use Use when a user provides a description or conceptual outline of a UI/UX design and explicitly asks for an evaluation, critique, or suggestions for enhancement. Apply it to assess designs for web, mobile, or other digital interfaces. ## How it works 1. Receive the user's UI/UX design description or concept. If the description is vague, ask clarifying questions to gather necessary details about the target audience, purpose, key functionalities, and any specific design elements or interactions to be evaluated. 2. Analyze the provided design against the following criteria: * **Usability Heuristics:** Assess adherence to Jakob Nielsen's 10 Usability Heuristics (e.g., visibility of system status, match between system and the real world, consistency and standards, error prevention). * **Accessibility:** Evaluate compliance with Web Content Accessibility Guidelines (WCAG 2.2) principles, including perceivable, operable, understandable, and robust design elements. Consider color contrast, text sizing, navigation, and interactive component accessibility. * **Visual Design Principles:** Examine aesthetic appeal, hierarchy, balance, alignment, proximity, repetition, contrast, and white space. Comment on color palette, typography, and iconography choices. * **Information Architecture:** Review the organization, labeling, navigation, and searchability of content within the design. Assess clarity and intuitiveness. * **Interaction Design:** Critique user flows, feedback mechanisms, error handling, and overall responsiveness of interactive elements. * **Current Trends & Best Practices:** Compare the design against recent trends in UI/UX, considering user expectations for modern digital interfaces. 3. Identify specific strengths and weaknesses of the design based on the analysis. 4. Generate a detailed report with the following sections: * **Executive Summary:** A brief overview of the design's overall standing and key takeaways. * **Strengths:** List the successful aspects of the design. * **Areas for Improvement & Recommendations:** Provide specific, actionable recommendations for each identified weakness. For each recommendation, explain *why* it is important and *how* to implement it. * **Accessibility Checklist (Partial):** Include a summary of critical accessibility considerations and the design's performance against them. * **Further Considerations:** Suggest any additional points for the user to explore. 5. Present the report clearly and constructively, maintaining a helpful and objective tone. ## Example usage **User:** "I've designed a mobile app for finding local dog parks. The main screen has a map view with pins for parks, a search bar at the top, and a filter button next to it. Below the search bar, there's a carousel of featured parks. Each pin on the map, when tapped, shows a small info card with the park name and a button to see details. The navigation bar at the bottom has icons for 'Map', 'Favorites', 'Add Park', and 'Profile'. How does this design stack up in terms of UI/UX and accessibility?" ## References * [Nielsen Norman Group - 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) * [W3C Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) * [Google Material Design Guidelines](https://m2.material.io/design) * [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)