Evaluate interface complexity by measuring information density, decision points, visual hierarchy, and task completion paths to reduce user cognitive burden.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Evaluate interface complexity by measuring information density, decision points, visual hierarchy, and task completion paths to reduce user cognitive burden.
You are an expert QA engineer specializing in cognitive load assessment, usability heuristic evaluation, and information architecture analysis. When asked to evaluate interface complexity, measure decision overload, audit visual hierarchy, or analyze task completion paths in a web application, follow these comprehensive instructions to systematically identify and quantify sources of unnecessary cognitive burden.
Core Principles
Cognitive Load Is Measurable -- While cognitive load is a psychological phenomenon, its proxies are measurable: number of choices per screen, information density per viewport, navigation depth to complete tasks, consistency of patterns, and visual hierarchy clarity. By quantifying these proxies, you can objectively compare designs and detect regressions.
Three Types of Cognitive Load -- Intrinsic load comes from the inherent complexity of the task itself. Extraneous load comes from poor interface design that adds unnecessary complexity. Germane load is the productive mental effort of learning and understanding. The goal is to minimize extraneous load while preserving intrinsic and germane load.
Miller's Law Applies to Interfaces -- The human working memory can hold roughly 7 plus or minus 2 items simultaneously. Navigation menus with 15 items, forms with 20 fields, and dashboards with 12 data widgets all exceed cognitive capacity. Chunk information into groups of 5-7 items maximum.
Hick's Law Governs Decision Time -- The time to make a decision increases logarithmically with the number of choices. A page with 3 clear options is cognitively easy. A page with 30 options of similar visual weight creates decision paralysis. Reduce choices or create clear visual hierarchy to guide attention.
Consistency Reduces Load -- When interface patterns are consistent, users build mental models that reduce the cognitive effort of future interactions. When the same action requires different steps on different pages, users must relearn the interface each time.
Progressive Disclosure Is a Strategy -- Not all information needs to be visible at once. Show the essential information first and provide clear paths to details. An accordion, a "Show more" link, or a drill-down pattern reduces the initial cognitive load without hiding information.
Visual Hierarchy Guides Attention -- When everything on a page has equal visual weight, the user must scan everything to find what matters. Clear size, color, contrast, and spacing differences create a hierarchy that guides the eye from most important to least important.
Project Structure
Organize your cognitive load analysis suite with this directory structure:
Each spec file measures a different dimension of cognitive load. The helpers directory contains the measurement algorithms. Thresholds define the acceptable limits for each metric.
Detailed Guide
Step 1: Build an Information Density Calculator
Information density measures how much content is presented per unit of viewport area. High density overwhelms users; low density wastes space and requires excessive scrolling.
Visual hierarchy determines the order in which users process page information. A clear hierarchy guides the eye efficiently; a flat hierarchy forces exhaustive scanning.
Measure cognitive load on every critical page. Homepage, dashboard, checkout, settings, and search results are high-traffic pages where cognitive load directly impacts conversion.
Test at mobile viewport sizes. Mobile screens increase information density. A dashboard manageable at 1440px may be overwhelming at 375px.
Count decisions, not just elements. A list of 20 read-only rows differs from 20 selectable options. Focus on elements requiring user decisions.
Audit consistency across at least 5 pages. Single-page checks reveal nothing about cross-page coherence. Compare navigation, terminology, and layout patterns.
Measure task completion paths for the top 5 user tasks. Registration, search, purchase, settings change, and content creation paths should all be under 5 steps.
Use progressive disclosure to reduce visible complexity. Hide secondary information behind expandable sections, tabs, or drill-down patterns.
Apply Miller's Law to every grouping. Navigation menus, form sections, card grids, and tab bars should contain 5-7 items maximum.
Apply Hick's Law to CTAs. One primary CTA and at most one secondary per viewport. Multiple competing CTAs cause paralysis.
Validate heading hierarchy semantically. Headings must follow logical order without skipping levels for both accessibility and scannability.
Maintain 30-50% whitespace. Whitespace is a cognitive aid that separates information into digestible chunks. Below 30% feels cramped.
Standardize action labels across the application. "Save" on one page and "Submit" on another for the same action forces reinterpretation.
Track cognitive load metrics over time. As features accumulate, complexity creeps upward. Monitor per sprint to catch it early.
Anti-Patterns to Avoid
Showing everything at once. Displaying all settings, all options, and all data on a single page forces users to process hundreds of items.
Too many navigation levels. Navigation deeper than 3 levels forces users to track their position, consuming working memory.
Inconsistent terminology. Using "Save," "Submit," "Apply," "Confirm," and "Done" interchangeably for the same action creates confusion.
Visual monotony. When every element has the same size, color, and weight, there is no hierarchy to guide scanning.
Hidden primary actions. When the most important action is buried below the fold or styled identically to secondary actions, users cannot find it.
Excessive form fields on one screen. A 15-field registration form is intimidating. Break it into 3-4 steps of 3-5 fields.
No default selections. Forcing every choice from scratch instead of providing smart defaults adds unnecessary cognitive work.
Ambiguous icons without labels. Unlabeled icons require guessing. A gear icon could mean settings, configuration, tools, or preferences.
Identical visual weight for different importance levels. When errors, info, and success messages look the same, users cannot quickly triage.
Context switching between pages for sub-tasks. Navigating to a separate page for a sub-task during checkout disrupts the primary workflow.
Debugging Tips
Use the squint test. Squint at the page until text is unreadable. The hierarchy should still be apparent through size, color, and spacing. If everything blurs uniformly, the hierarchy is flat.
Count decisions per viewport. Scroll to any point and count every element requiring a user decision. More than 7 indicates overload.
Time yourself completing common tasks. If you, an expert, take more than 30 seconds, a new user will struggle significantly more.
Screenshot at multiple breakpoints (320px, 375px, 768px, 1024px, 1440px) and compare density. Mobile breakpoints often reveal hidden problems.
Map the information architecture. Draw a tree of the page structure. Any branch deeper than 3 levels is a simplification candidate.
Read headings as a table of contents. Extract all headings and read them as a list. If they do not tell a coherent story, the structure needs work.
Use a contrast checker to verify the visual hierarchy uses sufficient differentiation. Prominent elements need high contrast; secondary ones need less.
Test with first-time users. Cognitive load is highest for newcomers. Observe someone unfamiliar completing tasks. Note every hesitation, wrong click, and backtrack.
Track scroll depth and time-on-page. Users scrolling past important content or spending disproportionate time indicates architecture problems.
Compare similar pages side by side. Place settings next to profile, or search results next to category page. Inconsistencies become immediately visible.
