3초 이해 원칙
모든 화면은 3초 안에 목적과 주요 행동을 이해할 수 있어야 한다.
Why it matters
초기 이해 비용이 제품 사용 가능성을 결정한다.
PriceGo가 금액 말하기를 첫 행동으로 제시한다.
설명 없는 아이콘과 동일 강조 버튼을 나열한다.
Review questions
- 화면 제목이 명확한가?
- Primary Action이 첫 화면에 있는가?
하나의 화면, 하나의 목적
서로 경쟁하는 여러 핵심 목적을 한 화면에 배치하지 않는다.
Why it matters
사용자의 판단 부담과 실수를 줄인다.
BidMe 요청 작성과 제안 비교를 별도 단계로 둔다.
작성·비교·계약을 한 화면에 동시에 강조한다.
Review questions
- 이 화면의 한 문장 목적은 무엇인가?
중요한 정보 우선
중요한 숫자, 결과, 상태는 장식과 설명보다 먼저 보인다.
Why it matters
판단에 필요한 데이터의 발견 시간을 줄인다.
AI Measure가 측정값을 설명보다 먼저 보여준다.
핵심 결과를 작은 보조 텍스트로 표시한다.
Review questions
- 가장 중요한 결과가 가장 강하게 보이는가?
상태는 숨기지 않는다
Loading, Empty, Error, Success, Disabled 상태를 명확히 표현한다.
Why it matters
시스템이 멈췄다는 오해와 반복 행동을 막는다.
OCR 분석 중 상태와 실패 후 재촬영을 제공한다.
빈 영역으로 처리 상태를 대신한다.
Review questions
- 시작·진행·완료·실패가 모두 정의됐는가?
AI 결과는 검토 가능해야 한다
AI 결과는 수정, 재시도, 출처 확인과 승인 흐름을 제공한다.
Why it matters
자동화의 효율과 인간의 책임을 함께 유지한다.
BidMe 제안을 수정한 뒤 승인한다.
AI 초안을 자동 확정한다.
Review questions
- 결과를 고치고 거부할 수 있는가?
사용자가 길을 잃지 않게 한다
현재 위치, 이전 화면과 다음 행동을 알 수 있어야 한다.
Why it matters
탐색 실패와 데이터 유실 불안을 줄인다.
Settings에서 About으로 이동하고 명확히 복귀한다.
뒤로가기 결과를 예측할 수 없다.
Review questions
- 현재 위치와 안전한 복귀 경로가 보이는가?
클릭보다 사고를 줄인다
클릭 수보다 판단 부담을 줄이는 것을 우선한다.
Why it matters
적은 클릭도 어려운 선택을 요구하면 좋은 UX가 아니다.
SoolMap 필터가 자주 쓰는 기준을 먼저 제공한다.
옵션을 한 메뉴에 모두 노출한다.
Review questions
- 사용자가 기억하거나 비교해야 할 항목을 줄였는가?
같은 의미는 같은 UI
동일한 기능과 상태는 서비스가 달라도 같은 방식으로 표현한다.
Why it matters
학습 이전과 유지보수 비용을 줄인다.
모든 Needs Review 상태가 텍스트와 동일 구조를 쓴다.
프로젝트마다 상태 명칭과 색상이 다르다.
Review questions
- 기존 Component나 Pattern과 의미가 같은가?
기존 항목을 먼저 확장한다
새 Token, Component, Pattern 전에 기존 항목으로 해결 가능한지 확인한다.
Why it matters
시스템의 중복과 분기를 억제한다.
PriceGo Adapter가 기존 색과 간격을 의미별로 연결한다.
한 화면을 위해 유사 Token을 추가한다.
Review questions
- Variant나 조합으로 해결 가능한가?
접근성은 선택 사항이 아니다
큰 글씨, 키보드, 보조 기술, 대비와 터치 영역을 기본으로 한다.
Why it matters
사용 조건과 능력에 관계없이 핵심 목적을 보장한다.
320px과 키보드 Focus를 Release Gate에서 검토한다.
마우스와 색상만으로 상태를 전달한다.
Review questions
- 키보드와 큰 글씨에서 완료 가능한가?
디자인은 유지보수를 쉽게 해야 한다
시각적 완성도를 위해 구조와 책임 경계를 희생하지 않는다.
Why it matters
빠른 변경과 안전한 회귀 검증을 가능하게 한다.
표시 컴포넌트와 서비스 로직을 분리한다.
UI 컴포넌트가 API와 저장을 직접 처리한다.
Review questions
- 변경 범위와 Rollback 경계가 명확한가?
실제 기능을 숨기지 않는다
구현되지 않은 기능을 작동하는 것처럼 표현하지 않는다.
Why it matters
사용자의 기대와 제품 신뢰를 보호한다.
Sample Data를 명확히 표시한다.
가짜 진행률과 작동하지 않는 버튼을 노출한다.
Review questions
- 표현한 기능과 상태가 실제로 연결됐는가?
위험 Action은 명확해야 한다
삭제, 취소, 발송, 승인에는 구분과 확인 절차를 제공한다.
Why it matters
복구하기 어려운 실수를 예방한다.
계약 발송 전 대상과 내용을 확인한다.
일반 버튼과 같은 모습으로 즉시 삭제한다.
Review questions
- 영향과 복구 가능성을 승인 전에 알 수 있는가?
모바일에서 먼저 검증한다
모든 Component, Pattern, Template는 320px에서 먼저 검증한다.
Why it matters
가장 제한된 조건에서 핵심 목적을 보호한다.
긴 OCR 결과와 Action을 세로로 배치한다.
Desktop 표를 가로 스크롤로 축소한다.
Review questions
- 320px에서 가로 넘침 없이 완료 가능한가?
복구 경로를 제공한다
실패 상태에는 재시도, 수정, 이전 단계나 대체 경로를 제공한다.
Why it matters
오류를 막다른 길이 아닌 작업 흐름으로 만든다.
OCR 실패 시 재촬영과 직접입력을 제공한다.
오류 코드만 표시하고 종료한다.
Review questions
- 실패 후 사용자가 취할 수 있는 다음 행동이 있는가?