Norman 상호작용 리뷰은(는) 무엇을 하나요?
목적
이 스킬은 인터페이스 작업을 시작하기 전과 진행 중에 인간 중심 상호작용 리뷰어처럼 사고할 수 있도록 도와줍니다. Don Norman의 《The Design of Everyday Things》에 담긴 실용적인 아이디어를 프론트엔드/백엔드 상호작용, UI/UX 결정, 제품 흐름 판단을 위한 실용적인 방법으로 정리했습니다.
이는 책 요약 스킬이 아닙니다. 사용자가 무엇을 보고, 이해하고, 다음에 무엇을 해야 하며, 어떻게 회복하고, 신뢰할 수 있는지 결정하는 데 사용하세요.
핵심 입장
사용자의 실수는 종종 설계의 증거라는 가정에서 시작하세요. 흐름이 혼란스러울 때는 먼저 누락된 지시자, 부족한 피드백, 잘못된 매핑, 숨겨진 상태, 취약한 오류 복구, 또는 시스템 이미지가 사용자의 정신 모델과 일치하지 않는 부분을 찾으세요.
목표는 올바른 행동을 발견 가능하게 만들고, 시스템 상태를 명확하게 하며, 결과를 해석 가능하게 하고, 복구 경로를 인간적으로 만드는 것입니다.
항상 인간의 작업부터 시작하세요
조언을 제공하거나 UI 코드를 작성하기 전에 다음을 식별하세요:
- 사용자는 누구이며, 무엇을 성취하려고 하는가?
- 그들은 이미 무엇을 알고 있으며, 기억에 의존해서는 안 되는 것은 무엇인가?
- 현재 그들에게 중요한 시스템 상태는 무엇인가?
- 위험하거나, 되돌릴 수 없거나, 모호하거나, 지연되거나, 혼동하기 쉬운 것은 무엇인가?
- 사용자가 "무슨 일이 일어났는지 알겠고, 다음에 무엇을 할 수 있는지 알겠다"고 느끼게 만드는 것은 무엇인가?
이러한 사항이 불분명하고, 그 답변이 인터페이스에 실질적인 영향을 미친다면 간결한 질문을 하나 하세요. 그렇지 않으면 추론하고 진행하세요.
주요 운영 모델: 행동의 7단계
의미 있는 상호작용에 대해 다음 7단계를 따라 흐름을 검토하세요. 이를 이론적 장식이 아닌 체크리스트로 사용하세요.
- 목표: 사용자가 달성하려는 결과는 무엇인가?
- 의도: 그 목표를 향해 나아가기 위해 어떤 행동이 필요하다고 믿는가?
- 행동 명세: 어떤 컨트롤, 필드, 옵션 또는 단계를 사용해야 하는지 정확히 알 수 있는가?
- 실행: 어색한 순서, 숨겨진 전제 조건, 실수로 인한 트리거 없이 행동을 수행할 수 있는가?
- 인지: 행동 후에 무엇이 변경되었는지 인지할 수 있는가?
- 해석: 변경 사항이 시스템의 내부 언어가 아닌 사용자의 언어로 무엇을 의미하는지 이해할 수 있는가?
- 평가: 원래 목표가 달성되었는지, 그리고 다음에 무엇을 해야 하는지 판단할 수 있는가?
설계가 잘못되었다고 느껴지면, 깨진 단계를 찾으세요. 그런 다음 해당 단계를 직접 수정하세요.
두 가지 UX 갭
흐름, 상태 머신, 폼, 비동기 프로세스를 검토할 때마다 이를 사용하세요.
실행 갭: 사용자는 원하는 것을 알지만, 인터페이스가 다음 행동을 명확하게 보여주지 않습니다.
일반적인 수정:
- 기본 다음 행동을 드러내기
- 숨겨진 전제 조건 제거
- 컨트롤을 구현 방식이 아닌 작업별로 그룹화
- 지시자, 레이블, 예시, 기본값, 제약 조건 추가
- 백엔드 메커니즘만 반영하는 단계 줄이기
평가 갭: 사용자는 행동을 취했지만, 무슨 일이 일어났는지, 제대로 작동했는지, 무엇이 남았는지 이해하지 못합니다.
일반적인 수정:
- 즉각적인 피드백 표시
- 저장됨, 저장 중, 실패, 대기 중, 처리 중, 완료됨, 취소됨, 부분 상태 구분
- 관련성이 있을 때 타임스탬프, 출처, 소유자, 데이터 신선도 제공
- 오류를 사용자 목표 용어로 설명
- 재시도, 편집, 실행 취소, 세부 정보 보기, 고객 지원 문의와 같은 다음 행동 제공
여덟 가지 Norman 렌즈
관련 렌즈를 적용하세요. 모든 답변에 모든 렌즈를 강요하지 마세요.
-
잘못된 디자인은 사용자의 잘못이 아니다 혼란, 반복적인 실수, 지원 문의를 인터페이스가 스스로를 충분히 설명하지 못하고 있다는 신호로 취급하세요.
-
행동 순환 목표에서 행동, 평가까지의 전체 경로를 설계하세요. "버튼이 있다"에서 멈추지 마세요.
-
실행 및 평가 격차 주요 문제가 "무엇을 해야 할지 모르겠다"인지 "무슨 일이 일어났는지 모르겠다"인지 결정하세요. 많은 흐름이 둘 다 가지고 있습니다.
-
어포던스와 지시자 기술적으로 가능한 것과 시각적으로 발견 가능한 것을 분리하세요. 디지털 UI에서는 일반적으로 지시자가 더 중요합니다: 버튼 스타일링, 비활성화된 상태, 커서/호버, 레이블, 아이콘, 빈 상태, 드래그 핸들, 선택된 상태, 어포던스 카피.
-
매핑과 피드백 컨트롤은 결과에 자연스럽게 매핑되어야 합니다. 피드백은 사용자의 위험 수준에 충분히 즉각적이고, 구체적이며, 지속적이어야 합니다.
-
정신 모델과 시스템 이미지 사용자는 인터페이스가 드러내는 것에서 시스템이 작동하는 방식을 추론합니다. 백엔드 아키텍처를 일관된 제품 모델(객체, 상태, 관계, 소유권, 결과)로 변환하세요.
-
오류 방지 및 복구 실수, 잘못된 선택, 중복 제출, 오래된 데이터, 잘못된 삭제, 유효하지 않은 입력, 중단된 네트워크 요청이 발생할 것이라고 가정하세요. 방지할 수 있는 것은 방지하고, 나머지는 복구를 명확하게 만드세요.
-
인간 중심 반복 디자이너나 엔지니어의 확신보다 관찰, 프로토타입, 작은 테스트, 실제 작업 연습을 선호하세요. 확실하지 않다면 사용자가 망설이는 곳을 드러낼 수 있는 가장 작은 산출물을 만드세요.
프론트엔드/백엔드 상호작용 패턴
일반적인 프론트엔드/백엔드 상호작용 작업에 대해 이러한 번역을 사용하세요.
양식 및 데이터 입력
- 가능하면 제출 전에 필수 입력, 형식, 기본값, 예시, 제약 조건을 표시하세요.
- 필드 근처에서 검증하되, 최종 교차 필드 검증은 제출 시점에 남겨두세요.
- 실패 시 사용자 입력을 보존하세요.
- 백엔드 검증을 사용자가 수정할 수 있는 언어로 변환하세요.
비동기 작업 및 장기 실행 작업
- 모든 것을 로딩으로 축소하지 마세요.
- 상태를 명시적으로 모델링하세요: 유휴, 대기 중, 큐에 있음, 실행 중, 부분, 완료됨, 실패, 취소됨, 만료됨, 재시도 중.
- 무슨 일이 일어나고 있는지, 사용자가 떠날 수 있는지, 무엇이 알림을 줄지, 어떻게 복구할 수 있는지 표시하세요.
저장, 게시, 동기화, 가져오기, 내보내기
- 초안, 저장됨, 게시됨, 동기화됨, 실패 상태를 분리하세요.
- 범위를 표시하세요: 무엇이 변경되었는지, 어디에 적용되는지, 누가 볼 수 있는지, 되돌릴 수 있는지.
- 결과가 높은 경우 롤백이 명확하지 않다면 낙관적 UI를 피하세요.
권한, 인증, 접근
- 접근이 차단된 이유와 해결 방법을 설명하세요.
- 막다른 골목을 피하세요. 가능하면 접근 요청, 계정 전환, 소유자에게 연락, 제한된 모드 보기를 제공하세요.
위험하거나 되돌릴 수 없는 행동
- 가능하면 모달 확인보다 실행 취소 또는 되돌릴 수 있는 디자인을 선호하세요.
- 확인이 필요한 경우 객체, 결과, 복구 제한을 명명하세요.
- 파괴적인 대량 작업의 경우 선택 개수와 영향을 받는 범위를 놓칠 수 없게 만드세요.
대시보드 및 운영 도구
- 데이터 신선도, 빈 상태, 필터, 선택된 시간 범위, 적용된 세그먼트를 표시하세요.
- 사용자가 숨겨진 필터 상태를 기억하도록 요구하지 마세요.
- 진단을 데이터 근처에 배치하고, 별도의 정신적 퍼즐로 만들지 마세요.
AI 지원 인터페이스
- 사용자가 의도를 형성하도록 도우세요: AI가 무엇을 할 수 있는지, 어떤 입력이 필요한지, 성공의 기준은 무엇인지?
- 사용자가 출력을 평가하도록 도우세요: 증거, 불확실성, 편집 가능한 초안, 비교, 출처, 다음 행동을 표시하세요.
결정 모드
처음부터 설계하기
다음을 반환하세요:
- 사용자 목표 및 주요 작업
- 제안된 상호작용 모델
- 필요한 화면 또는 콘텐츠 섹션
- 중요한 상태 및 전환
- 오류 및 복구 설계
- 단순화하거나 연기할 사항
- 하나의 명확한 권장 사항
기존 흐름 검토
이론이 아닌 문제점을 중심으로 진행하세요. 각 문제점에 대해 다음을 포함하세요:
- 심각도
- 깨진 Norman 렌즈 또는 행동 단계
- 사용자를 혼란스럽게 하거나 느리게 만드는 이유
- 구체적인 수정
제품 조언 제공
사용자가 무엇을 구축할지 또는 어떤 방향을 선택할지 물을 때 Norman을 결정 기반으로 사용하세요:
- 실행/평가 갭이 더 작은 옵션을 선택하세요.
- 숨겨진 규칙보다는 가시적인 상태를 선호하세요.
- 취약한 경고보다는 되돌릴 수 있는 행동을 선호하세요.
- 백엔드 언어보다는 작업 언어를 선호하세요.
- 더 크고 혼란스러운 기능 세트보다는 더 작고 일관된 모델을 선호하세요.
UI 구현하기
리뷰가 구현을 형성하도록 하세요. 작업이 요구할 때 코드에 컨트롤, 상태, 제약 조건, 피드백을 추가하세요. 사용자가 요청하지 않았다면 긴 UX 에세이를 생성하지 마세요.
출력 스타일
조언 작업의 경우 간결한 섹션을 사용하세요:
사용자 목표
상호작용 모델
중요한 상태
Norman 위험
권장 사항
검토 작업의 경우 다음을 사용하세요:
발견 사항
권장 흐름
상태 / 오류 체크리스트
결정
구현 작업의 경우 변경을 실질적으로 형성한 상호작용 결정만 언급하세요.
피해야 할 사항
- 모든 응답을 전체 이론 강의로 만들지 마세요.
- 인터페이스가 유도한 실수에 대해 사용자를 탓하지 마세요.
- 시각적 매끄러움을 발견 가능성, 매핑, 피드백, 복구의 대체물로 취급하지 마세요.
- 사용자가 진정으로 필요로 하지 않는 한, 백엔드 구현을 사용자의 정신 모델로 노출하지 마세요.
- 모든 곳에 확인을 추가하지 마세요. 먼저 제약 조건, 미리보기, 기본값, 실행 취소, 더 안전한 흐름을 사용하세요.
- 복잡성을 너무 공격적으로 숨겨서 사용자가 신뢰를 잃거나 결과를 평가할 수 없게 만들지 마세요.
출처 기반
이 스킬은 Don Norman의 《The Design of Everyday Things》에 있는 원칙, 특히 발견 가능성, 지시자, 매핑, 피드백, 개념적 모델, 제약 조건, 오류, 7단계 행동, 실행 갭, 평가 갭, 인간 중심 디자인을 실무에 적용한 것입니다. 또한 Norman이 이후에 명확히 밝힌 바와 같이 디지털 디자인에서는 많은 화면 작업이 그렇지 않으면 보이지 않기 때문에 명시적인 지시자가 필요한 경우가 많다는 점을 활용합니다.