MCP HubMCP Hub
스킬 목록으로 돌아가기

ux-heuristics

wondelai
업데이트됨 2 days ago
4 조회
1,096
121
1,096
GitHub에서 보기
테스팅testingdesign

정보

이 스킬은 닐슨의 원칙에 기반한 발견적 사용성 평가를 수행하여 탐색 문제나 불완전한 폼 디자인과 같은 UX 문제를 식별하고 수정합니다. 사용성 감사, 리뷰 요청 또는 사용자가 혼란을 보고할 때 트리거됩니다. 분석은 심각도 등급과 정보 구조를 다루며, 시각적 개선이나 전환율 중심 수정은 다른 스킬로 안내합니다.

빠른 설치

Claude Code

추천
기본
npx skills add wondelai/skills -a claude-code
플러그인 명령대체
/plugin add https://github.com/wondelai/skills
Git 클론대체
git clone https://github.com/wondelai/skills.git ~/.claude/skills/ux-heuristics

Claude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요

문서

UX Heuristics Framework

Practical usability principles for evaluating and improving user interfaces. Based on a fundamental truth: users don't read, they scan. They don't make optimal choices, they satisfice. They don't figure out how things work, they muddle through.

Core Principle

"Don't Make Me Think" - Every page should be self-evident. If something requires thinking, it's a usability problem.

The foundation: Users have limited patience and cognitive bandwidth. The best interfaces are invisible -- they let users accomplish goals without ever stopping to wonder "What do I click?" or "Where am I?" Every question mark that pops into a user's head adds to cognitive load and increases the chance they'll leave. Design for scanning, satisficing, and muddling through -- because that's what users actually do.

Scoring

Goal: 10/10. When reviewing or creating user interfaces, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.

Krug's Three Laws of Usability

1. Don't Make Me Think

Core concept: Every question mark that pops into a user's head adds to their cognitive load and distracts from the task.

Why it works: Users are on a mission. They don't want to puzzle over labels, wonder what a link does, or decode clever marketing language. The less thinking required, the more likely they complete the task.

Key insights:

  • Clever names lose to clear names every time
  • Marketing-speak creates friction; plain language removes it
  • Unfamiliar categories and labels force users to stop and interpret
  • Links that could go anywhere create uncertainty
  • Buttons with ambiguous labels cause hesitation

Product applications:

ContextApplicationExample
Navigation labelsUse self-evident names"Get directions" not "Calculate route to destination"
CTAsUse action verbs users understand"Sign in" not "Access your account portal"
E-commerceMatch user mental models"Add to cart" not "Proceed to purchase selection"
Form labelsDescribe what's needed plainly"Email address" not "Electronic correspondence identifier"
Error statesTell users what to do next"Check your email format" not "Validation error"

Copy patterns:

  • Self-evident labels: "Sign in", "Search", "Add to cart"
  • Action-oriented buttons: verb + noun ("Create account", "Download report")
  • Avoid jargon: "Save" not "Persist", "Remove" not "Disassociate"
  • If a label needs explanation, simplify the label

Ethical boundary: Clarity should serve users, not obscure information. Never use plain language as a veneer to hide unfavorable terms.

See: references/krug-principles.md for full Krug methodology.

2. It Doesn't Matter How Many Clicks

Core concept: The myth says "users leave after 3 clicks." The reality is users don't mind clicks if each one is painless, obvious, and confidence-building.

Why it works: Cognitive effort per click matters more than click count. Three mindless, confident clicks are far better than one click that requires deliberation. Users abandon when they lose confidence, not when they run out of patience for clicking.

Key insights:

  • Each click should be painless (fast, easy)
  • Each click should be obvious (no thinking required)
  • Each click should build confidence (users know they're on the right path)
  • Three mindless clicks beat one confusing click every time
  • Users abandon when confused, not when they've clicked too many times

Product applications:

ContextApplicationExample
Information architecturePrioritize clarity over depthShallow nav with clear labels over deep nav with vague ones
Checkout flowsMake each step obviousClear step indicators with descriptive labels
SettingsOrganize into clear categories"Account > Security > Change password" (3 confident clicks)
Search resultsLet users drill down confidentlyCategory filters that narrow results progressively
OnboardingGuide with small, clear stepsWizard with one clear action per step

Copy patterns:

  • Progress indicators: "Step 2 of 4: Shipping details"
  • Breadcrumbs: "Home > Products > Shoes > Running"
  • Confirmations at each step: "Great, your email is verified. Now let's set up your profile."
  • Clear link text: "View all running shoes" not "Click here"

Ethical boundary: Don't use extra steps to bury cancellation flows or make opting out harder. Every click should move users toward their goal, not away from it.

See: references/krug-principles.md for Krug's click philosophy and scanning behavior.

3. Get Rid of Half the Words

Core concept: Get rid of half the words on each page, then get rid of half of what's left. Brevity reduces noise, makes useful content more prominent, and shows respect for the user's time.

Why it works: Users scan -- they don't read. Every unnecessary word competes with the words that matter. Removing fluff makes important content more discoverable and pages shorter.

Key insights:

  • Happy-talk ("Welcome to our website!") wastes space
  • Instructions nobody reads should be removed
  • "Please" and "Kindly" and polite fluff add noise
  • Redundant explanations dilute the message
  • Shorter pages mean less scrolling and faster scanning

Product applications:

ContextApplicationExample
Landing pagesCut welcome copy, lead with valueRemove "Welcome to..." paragraphs
Error messagesState problem and fix, nothing more"Password too short (min 8 chars)" not a paragraph
TooltipsOne sentence max"Last 4 digits of your card" not a full explanation
Empty statesAction-oriented, minimal"No results. Try a different search."
OnboardingOne instruction per screen"Choose your interests" not a wall of explanatory text

Copy patterns:

  • Before: "Please kindly note that you will need to enter your password in order to proceed to the next step."
  • After: "Enter your password to continue."
  • Before: "We've received your message and will get back to you as soon as possible."
  • After: "Message sent. We'll reply within 24 hours."

Ethical boundary: Brevity must not mean omitting critical information. Concise disclosures for pricing, terms, and data usage are a user right.

See: references/krug-principles.md for Krug's word-cutting methodology.

4. The Trunk Test

Core concept: A test for navigation clarity: if users were dropped on any random page (like being locked in a car trunk and released at a random spot), could they instantly answer six key questions?

Why it works: Good navigation gives users constant orientation. If users can't identify where they are and what their options are, they feel lost and leave.

Key insights:

  • Users must know what site they're on (brand/logo visible)
  • Users must know what page they're on (clear heading)
  • Major sections must be visible (navigation)
  • Options at this level must be clear (links/buttons)
  • Position in hierarchy must be apparent (breadcrumbs)
  • Search must be findable

Product applications:

ContextApplicationExample
Global navPersistent site ID and sectionsLogo top-left, main nav always visible
Page headersClear, descriptive page titles"Running Shoes - Men's" not just "Products"
BreadcrumbsShow hierarchy on all inner pages"Home > Products > Shoes > Running"
Mobile navMaintain orientation in hamburger menusHighlight current section, show breadcrumbs
SearchVisible search on every pageSearch box in header, not buried in footer

Copy patterns:

  • Page titles that match the link the user clicked
  • "You are here" indicators (highlighted nav items, bold breadcrumb)
  • Section headings that orient: "Your Account > Billing" not just "Settings"
  • Footer navigation for secondary discovery

Ethical boundary: Navigation should honestly represent site structure. Don't use misleading labels to funnel users into marketing pages.

See: references/krug-principles.md for the full Trunk Test methodology.

Nielsen's 10 Usability Heuristics

1. Visibility of System Status

Keep users informed about what's happening through timely feedback. Every action needs acknowledgment — progress bars for uploads, confirmations for submissions, skeleton screens for loading. Silent failures destroy trust. Copy pattern: "Saving..." → "Saved" (immediate state transitions).

2. Match Between System and Real World

Speak users' language, not system language. Use "Sign in" not "Authenticate", "Search" not "Query." Follow real-world metaphors (trash bin, shopping cart) and natural ordering (street → city → state → zip). One term per concept, everywhere.

3. User Control and Freedom

Provide clear "emergency exits." Undo beats "Are you sure?" dialogs every time — users click through confirmations without reading. Every flow needs cancel/exit, back buttons must never break, and soft delete with undo beats permanent deletion.

4. Consistency and Standards

Same words, styles, and behaviors should mean the same thing throughout. Internal consistency (your app) and external consistency (platform conventions: logo top-left, search top-right). Pick one term per concept — "Projects" everywhere, never mixing with "Workspaces."

5. Error Prevention

Prevent problems before they occur. Constrained inputs (date pickers over text fields), autocomplete, sensible defaults, and "unsaved changes" warnings. Two error types need different prevention: slips (accidental wrong action) and mistakes (wrong intention).

6. Recognition Rather Than Recall

Minimize memory load — show options, don't require memorization. Breadcrumbs, recent searches, pre-filled fields, dropdowns with decoded values (country names, not codes). Human working memory holds ~7 items; recognition is far easier than recall.

7. Flexibility and Efficiency of Use

Serve both novices and experts. Keyboard shortcuts, touch gestures, bulk actions, saved searches, and command palettes (Cmd+K) speed up power users. Progressive disclosure keeps it simple for beginners while experts access full power.

8. Aesthetic and Minimalist Design

Every element must earn its place. Signal-to-noise ratio determines usability — when everything screams for attention, nothing stands out. Show what matters now, hide what doesn't. One primary CTA per page, not five competing ones.

9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages need three parts: what happened, why, and how to fix it. Plain language always ("Connection failed" not "ECONNREFUSED"), specific ("Password must be 8+ characters" not "Invalid"), never blame the user, and preserve their input.

10. Help and Documentation

Help should be searchable, task-focused ("How to..." not technical reference), and contextual (tooltips, inline hints). Types: inline help, contextual "?" icons, searchable knowledge base, guided tours, live support.

See: references/nielsen-heuristics.md for detailed examples, product applications, copy patterns, and ethical boundaries for all 10 heuristics.

Severity Rating Scale

When auditing interfaces, rate each issue:

SeverityRatingDescriptionPriority
0Not a problemDisagreement, not usability issueIgnore
1CosmeticMinor annoyance, low impactFix if time
2MinorCauses delay or frustrationSchedule fix
3MajorSignificant task failureFix soon
4CatastrophicPrevents task completionFix immediately

Rating Factors

Consider all three:

  1. Frequency: How often does it occur?
  2. Impact: How severe when it occurs?
  3. Persistence: One-time or ongoing problem?

Common Mistakes

MistakeWhy It FailsFix
Mystery meat navigationIcons without labels force guessingAdd text labels alongside icons
Too many choicesDecision paralysis slows usersReduce to 7 plus/minus 2 items
No "you are here" indicatorUsers feel lost in the hierarchyHighlight current section in nav and breadcrumbs
No inline validationSubmit, error, scroll cycle frustratesValidate on blur with specific messages
Unclear required fieldsUsers confused about what's mandatoryMark optional fields, not required (most fields should be required)
Wall of textNobody reads dense paragraphsBreak up with headings, bullets, whitespace
Jargon in labelsUsers don't speak your internal languageUser-test all labels, use plain language
No loading indicatorsUsers think the system is brokenShow spinner, progress bar, or skeleton screen
Tiny tap targetsMobile users misclick constantlyMinimum 44x44 px touch targets
Hover-only informationMobile and keyboard users miss it entirelyDon't hide critical info behind hover states
No undoUsers afraid to take any actionProvide undo for all non-destructive actions
Poor error messages"Invalid input" tells users nothingExplain what's wrong and how to fix it
Low contrast textUnreadable for many usersWCAG AA minimum (4.5:1 contrast ratio)
Inconsistent nav locationUsers can't find navigationFixed position, same location on every page
Broken back buttonFundamental browser contract violatedNever hijack or break browser history

Quick Diagnostic

Audit any interface:

QuestionIf NoAction
Can I tell what site/page this is immediately?Users are lost and disorientedAdd clear logo, page title, and breadcrumbs
Is the main action obvious?Users don't know what to doCreate visual hierarchy, single primary CTA
Is the navigation clear?Users can't find their wayApply the Trunk Test, add "you are here" indicators
Can I find the search?Users with specific goals are blockedAdd visible search box in header
Does the system show me what's happening?Users lose trust and re-clickAdd loading states, confirmations, progress indicators
Are error messages helpful?Users get stuck on errorsRewrite in plain language with specific fix
Can users undo or go back?Users are afraid to actAdd undo, cancel, and back options everywhere
Does it work without hover?Mobile and keyboard users are excludedReplace hover-only interactions with visible alternatives
Are all interactive elements labeled?Users guess at icon meaningsAdd text labels or descriptive tooltips
Does anything make me stop and think "huh?"Cognitive load is too highSimplify -- if it needs explanation, redesign it

Heuristic Conflicts

Heuristics sometimes contradict each other. When they do:

  • Simplicity vs. Flexibility: Use progressive disclosure
  • Consistency vs. Context: Consistent patterns, contextual prominence
  • Efficiency vs. Error Prevention: Prefer undo over confirmation dialogs
  • Discoverability vs. Minimalism: Primary actions visible, secondary hidden

See: references/heuristic-conflicts.md for resolution frameworks.

Dark Patterns Recognition

Dark patterns violate heuristics deliberately to manipulate users:

  • Forced continuity (hard to cancel)
  • Roach motel (easy in, hard out)
  • Confirmshaming (guilt-based options)
  • Hidden costs (surprise fees at checkout)

See: references/dark-patterns.md for complete taxonomy and ethical alternatives.

When to Use Each Method

MethodWhenTimeFindings
Heuristic evaluationBefore user testing1-2 hoursMajor violations
User testingAfter heuristic fixes2-4 hoursReal behavior
A/B testingWhen optimizingDays-weeksStatistical validation
Analytics reviewOngoing30 minPatterns and problems

Reference Files

Further Reading

This skill is based on usability principles developed by Steve Krug and Jakob Nielsen:

About the Author

Steve Krug is a usability consultant who has been helping companies make their products more intuitive since the 1990s. His book "Don't Make Me Think" (first published in 2000, revised 2014) is the most widely read book on web usability and is considered essential reading for anyone involved in designing interfaces. Known for his accessible, humorous writing style and his advocacy for low-cost usability testing, Krug demonstrated that usability doesn't require a lab or a large budget -- just watching a few real users try to accomplish tasks.

Jakob Nielsen, PhD is co-founder of the Nielsen Norman Group (NN/g) and is widely regarded as the "king of usability." His 10 Usability Heuristics for User Interface Design, published in 1994, remain the most-used framework for heuristic evaluation worldwide. Nielsen has been called "the guru of Web page usability" by The New York Times and has authored numerous influential books on usability engineering. His research-driven approach to interface design helped establish usability as a recognized discipline in software development.

GitHub 저장소

wondelai/skills
경로: ux-heuristics
0
agent-skillsai-skillsclaude-codeclaude-code-marketplaceclaude-code-pluginclaude-code-skills

연관 스킬

evaluating-llms-harness

테스팅

이 Claude Skill은 MMLU, GSM8K를 포함한 60개 이상의 표준화된 학술 과제에서 LLM 성능을 벤치마크하기 위해 lm-evaluation-harness를 실행합니다. 개발자들이 모델 품질을 비교하고, 학습 진행 상황을 추적하거나 학술 결과를 보고할 수 있도록 설계되었습니다. 이 도구는 HuggingFace와 vLLM 모델을 포함한 다양한 백엔드를 지원합니다.

스킬 보기

cloudflare-cron-triggers

테스팅

이 스킬은 cron 표현식을 사용하여 Worker를 스케줄링하기 위한 Cloudflare Cron Triggers 구현에 관한 포괄적인 지식을 제공합니다. 주기적 작업, 유지보수 작업, 자동화된 워크플로우 설정 방법을 다루며, 잘못된 cron 표현식이나 시간대 문제 같은 일반적인 이슈들을 해결하는 방법을 포함합니다. 개발자들은 이를 통해 스케줄된 핸들러 구성, cron 트리거 테스트, Workflows 및 Green Compute와의 연동 작업을 수행할 수 있습니다.

스킬 보기

webapp-testing

테스팅

이 Claude Skill은 Python 스크립트를 통해 로컬 웹 애플리케이션을 테스트하기 위한 Playwright 기반 툴킷을 제공합니다. 프론트엔드 검증, UI 디버깅, 스크린샷 캡처, 로그 확인 기능을 지원하며 서버 라이프사이클을 관리합니다. 브라우저 자동화 작업에 사용하되 컨텍스트 오염을 방지하기 위해 소스 코드를 읽지 않고 스크립트를 직접 실행하세요.

스킬 보기

finishing-a-development-branch

테스팅

이 스킬은 테스트 통과를 확인한 후 체계적인 통합 옵션을 제시하여 개발자가 완성된 작업을 마무리하도록 돕습니다. 구현이 완료된 후 머지, PR 생성, 브랜치 정리와 같은 워크플로우를 안내합니다. 코드가 준비되고 테스트가 완료되었을 때 개발 프로세스를 체계적으로 마무리하기 위해 사용하세요.

스킬 보기