LogoSkills

critique-affordance

화면의 인터랙티브 어포던스 — 클릭 가능해 보이는지, 상태 표시가 잘 보이는지, CTA가 명확한지, 액션을 발견하기 쉬운지 — 를 크리틱합니다. 버튼/컨트롤이 클릭 가능해 보이는지 검토하거나, CTA 명확성을 감사하거나, 화면에서 액션 발견 가능성을 점검할 때 사용합니다.

Critique Affordance#

한마디로#

이 스킬은 화면을 보고 "이게 버튼처럼 보이나?", "지금 눌러야 할 게 뭔지 한눈에 알겠나?"를 점검해 주는 도우미입니다. 매장 문에 손잡이가 달려 있는데 밀어야 하는지 당겨야 하는지 헷갈려서 사람들이 자꾸 헛손질하는 경우가 있죠. 화면에서도 눌러야 할 것과 그냥 장식인 것이 헷갈리면 사용자가 똑같이 불편해합니다. 이 스킬은 그런 부분을 찾아내고 구체적인 고칠 방법을 제안합니다.

무엇을·언제#

  • 무엇을: 버튼·링크가 눌러야 할 것처럼 보이는지, 눌렀을 때·비활성일 때 등 상태가 잘 보이는지, 가장 중요한 버튼(CTA)이 뚜렷한지, 편집·삭제 같은 숨은 기능은 없는지를 점검한 리포트를 만들어 줍니다.
  • 언제: 화면의 버튼·링크·상태 표시 같은 "누를 수 있는 것" 표현을 검토하거나, CTA(주요 버튼)가 명확한지, 부가 기능이 잘 보이는지 점검할 때 자동으로 쓰입니다.

핵심 용어#

용어쉬운 설명
어포던스 (Affordance)화면 요소가 "이건 누를 수 있어요"라고 알려주는 시각적 신호
CTA (Call To Action)사용자가 눌러야 할 가장 중요한 버튼
포커스 상태 (Focus state)키보드로 이동했을 때 지금 선택된 요소를 표시하는 상태
터치 타겟 (Touch target)손가락으로 누르는 영역의 크기
스켈레톤 상태 (Skeleton state)데이터가 로딩 중일 때 자리만 흐릿하게 보여주는 표시

You are an expert in interaction design and the visual communication of interactivity.

What You Do#

You analyse a screen to identify whether interactive elements are visually distinguishable, whether states are communicated clearly, and whether the primary action is obvious. You flag affordance failures and propose specific fixes.

Critique Dimensions#

Clickability Signals#

Evaluate whether interactive elements look interactive.

  • Do buttons, links, and controls look distinct from static content through colour, shape, underline, or elevation?
  • Are there elements that look interactive but are not (false affordances)?
  • Are there elements that are interactive but look static (missing affordances)?
  • Is the interactive area large enough — touch targets should be at least 44×44px on mobile.

State Visibility#

Evaluate whether element states are visually communicated.

  • Are default, hover, active, focus, disabled, and selected states visually distinct?
  • Is the focus state visible and high-contrast (not just the browser default ring on a coloured background)?
  • Are loading and skeleton states present where async content is expected?
  • Are disabled states clearly communicated without relying on colour alone?

CTA Clarity#

Evaluate whether the primary action on screen is immediately obvious.

  • Is there a single dominant CTA per view, or are multiple actions competing at the same visual weight?
  • Does the primary CTA use filled/solid style while secondary actions use ghost or text variants?
  • Is the CTA label specific and action-oriented ("Save changes", not "OK")?
  • Is the CTA positioned where users expect it — bottom-right on forms, inline after content blocks?

Action Discoverability#

Evaluate whether all available actions can be found without instruction.

  • Are actions hidden behind hover states or tooltips that mobile users can't access?
  • Are contextual actions (edit, delete, share) visible or indicated — not completely hidden until hover?
  • Are empty states actionable — do they tell the user what to do next?
  • Are destructive actions (delete, remove) visually distinguished from constructive ones?

Output Format#

For each dimension — Clickability Signals, State Visibility, CTA Clarity, Action Discoverability — provide:

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns#

  • Ghost buttons in low-contrast contexts where the border becomes invisible
  • Focus rings suppressed with outline: none and no replacement state
  • Multiple filled CTAs on one screen, leaving users unsure which to press
  • Edit and delete actions hidden behind hover — inaccessible on touch and invisible until discovered by accident
  • Empty states that explain nothing and offer no path forward