🪡 "좋은 디자인은 보이지 않는다"
행동의 7단계 분석
1단계: 목표 형성 (Forming the Goal)
∙ 가장 추상적인 수준의 욕구 / 아직 구체적인 방법은 정해지지 않음
∙ 특징: 여러 방법으로 달성 가능
∙ 예: "방을 밝게 하고 싶다"
∙ 디자인 시사점: 사용자의 진짜 목표가 무엇인지 이해해야 함
2단계: 의도 형성 (Forming the Intention)
∙ 목표를 달성하기 위한 의도 형성 / 여러 대안 중 하나를 선택
∙ 특징: 목표를 구체적 행동 의도로 변환
∙ 예: "전등 스위치를 켜야겠다" (커튼을 열거나 촛불을 켤 수도 있었지만)
∙ 디자인 시사점: 사용자가 우리 제품을 해결책으로 떠올리게 만들어야 함
3단계: 행동 순서 명세화 (Specifying an Action Sequence)
∙ 의도를 실행 가능한 행동 순서로 구체화
∙ 특징: 정신적 모델에 기반한 행동 계획
∙ 예: "벽에 있는 스위치를 위로 올려야지"
∙ 디자인 시사점: 행동 순서가 명확하고 논리적이어야 함
4단계: 행동 실행 (Executing the Action)
∙ 계획한 행동을 물리적으로 실행
∙ 특징: 실제 조작이 일어나는 유일한 단계
∙ 예: 손을 뻗어 스위치를 위로 올림
∙ 디자인 시사점: 물리적/디지털 조작이 쉽고 정확해야 함
5단계: 외부 세계 상태 지각 (Perceiving the State)
∙ 시스템의 새로운 상태를 감각으로 인지
∙ 특징: 감각 정보의 수집 (시각, 청각, 촉각 등)
∙ 예: 불이 켜진 것을 봄, 스위치의 위치 변화를 봄
∙ 디자인 시사점: 상태 변화가 명확히 지각 가능해야 함
6단계: 상태 해석 (Interpreting the Perception)
∙ 지각한 정보에 의미를 부여
∙ 특징: 감각 정보를 의미 있는 정보로 변환
∙ 예: "아, 전등이 켜졌구나"
∙ 디자인 시사점: 피드백이 이해하기 쉬워야 함
7. 비교 (Compare)
∙ 결과를 원래 목표와 비교하여 성공 여부를 판단
∙ 특징: 목표 달성 여부의 최종 평가
∙ 예: "방이 충분히 밝아졌다" 또는 "아직도 어둡네"
∙ 디자인 시사점: 목표 달성이 명확히 확인 가능해야 함
멘탈 모델 (사용자의 머릿속 지도)
: 사용자가 제품이 어떻게 작동할 것이라고 믿는 내적 모델
세 가지 모델의 차이
∙ 구현 모델: 실제로 시스템이 작동하는 방식
∙ 멘탈 모델: 사용자가 생각하는 작동 방식
∙ 표현 모델: 디자이너가 사용자에게 전달하는 방식
멘탈 모델의 형성
∙ 과거 경험에서 학습
∙ 유사한 제품에서 전이
∙ 문화적 관습의 영향
∙ 시행착오를 통한 학습
👉🏻 좋은 디자인의 목표
: 표현 모델을 통해 사용자의 멘탈 모델과 구현 모델의 간극을 좁히는 것
1. 구현 모델 (Implementation Model)
"실제로 어떻게 작동하는가"
📌 Ex: 이메일 시스템
∙ 실제: SMTP 프로토콜, 서버 간 패킷 전송, DNS 조회...
∙ 너무 복잡해서 사용자가 알 필요 없음
2. 멘탈 모델 (Mental Model)
"사용자가 생각하는 작동 방식"
📌 Ex: 이메일에 대한 사용자의 생각
∙ 편지를 디지털 우체통에 넣으면 상대방 우체통에 도착한다
∙ 단순하지만 사용하기에 충분한 모델
3. 표현 모델 (Represented Model)
"디자이너가 사용자에게 보여주는 방식"
📌 Ex: Gmail 인터페이스
∙ 받은편지함, 보낸편지함, 휴지통
∙ 실제 우편 시스템의 메타포 사용
강제 기능이란?
∙ 특정 행동을 하지 않으면 다음 단계로 진행할 수 없게 만드는 물리적 또는 논리적 제약
∙ 실수를 방지하는 가장 확실한 방법
- 인터록 (Interlock)
- 락인 (Lock-in)
- 락아웃 (Lock-out)
1. 인터록 (Interlock)
정의: 올바른 순서로만 작동하도록 강제하는 메커니즘
물리적 예시:
∙ 전자레인지: 문이 열려 있으면 작동 불가
∙ 자동차: 기어가 P에 있지 않으면 시동키를 뺄 수 없음
∙ 세탁기: 작동 중에는 문이 잠김
디지털 예시 - 설치 마법사:
∙ 1단계 완료 → 2단계 버튼 활성화
∙ 2단계 완료 → 3단계 버튼 활성화
∙ 이전 단계 미완료 시 진행 불가
PM 적용:
∙ 결제 프로세스: 필수 정보 입력 전 결제 버튼 비활성화
∙ 계정 생성: 이메일 인증 전 서비스 이용 제한
∙ 파일 업로드: 업로드 완료 전 다음 단계 차단
2. 락인 (Lock-in)
정의: 작업을 시작하면 완료할 때까지 멈출 수 없게 하는 메커니즘
물리적 예시:
∙ 고속도로 진입로: 한번 진입하면 다음 출구까지 나갈 수 없음
∙ 회전문: 들어가면 완전히 통과해야 함
디지털 예시 - 중요 업데이트:
∙ "업데이트가 진행 중입니다...
∙ 완료될 때까지 기기를 끄지 마세요" → 중단 시 시스템 손상 방지
PM 적용 시 주의점:
∙ 사용자를 가두는 것은 매우 조심스럽게 사용
∙ 반드시 진행 상황 표시
∙ 예상 소요 시간 안내
∙ 정말 필요한 경우에만 사용
3. 락아웃 (Lock-out)
정의: 위험한 상황에 들어가지 못하게 차단하는 메커니즘
물리적 예시:
∙ 약병 안전캡: 아이들이 열지 못하게 설계
∙ 산업 장비: 안전 장치 없이는 작동 불가
∙ 금고: 여러 번 틀리면 일정 시간 잠김
디지털 예시 - 보안 락아웃:
∙ 5회 로그인 실패 → 계정 일시 잠금
∙ 의심스러운 활동 감지 → 추가 인증 요구
∙ 관리자 권한 필요 작업 → 일반 사용자 접근 차단
PM 적용:
∙ 중요 데이터 삭제: 여러 단계 확인
∙ 대량 작업: 권한 확인 필수
∙ 비정상 패턴: 자동 차단 후 검증
📌 성공 사례: Gmail의 실수 방지
∙ 상황: "첨부파일"이라는 단어가 있는데 파일 없이 전송
∙ 강제 기능: "파일을 첨부하지 않으셨습니다. 그래도 보내시겠습니까?"
∙ 효과: 실수 방지하면서도 의도적 전송 가능
👎🏻 실패 사례: 과도한 비밀번호 규칙
∙ 상황: 특수문자, 대소문자, 숫자 모두 필수
∙ 문제: 너무 복잡해서 사용자가 기억 못함
∙ 결과: 오히려 보안 약화 (종이에 적어둠)
좋은 디자인의 근본 원리
1️⃣ 가시성(Visibility) - "보이는 것이 사용할 수 있는 것이다"
원리: 중요한 기능은 눈에 잘 띄어야 하고, 작동 방식이 명확해야
나쁜 예:
∙ 버튼처럼 생기지 않은 버튼
∙ 숨겨진 메뉴나 제스처 기반 기능
∙ 피드백이 없는 터치 인터페이스
좋은 예:
∙ 엘리베이터의 층수 버튼 - 누를 수 있음이 명확하고, 현재 층이 표시됨
∙ 구글 검색창 - 텍스트를 입력할 수 있음이 즉시 이해됨
2️⃣ 피드백(Feedback) - "모든 행동에는 즉각적이고 명확한 반응이 있어야 한다"
원리: 사용자의 행동에 대해 시스템이 어떻게 반응하는지 즉시 알려줘야
피드백의 종류:
∙ 시각적: 버튼 색상 변화, 로딩 애니메이션
∙ 청각적: 클릭음, 알림음
∙ 촉각적: 진동, 버튼의 물리적 움직임
나쁜 예:
∙ 클릭해도 아무 반응이 없는 버튼 (작동하는지 안 하는지 모름)
∙ 진행 상황을 보여주지 않는 긴 프로세스
좋은 예:
∙ 좋아요 버튼 - 즉시 색이 바뀌고 애니메이션이 작동
∙ 파일 업로드 진행률 표시
3️⃣ 제약(Constraints) - "실수를 원천적으로 방지하는 디자인"
원리: 잘못된 사용을 물리적, 논리적으로 불가능하게 만듦
좋은 예:
∙ 신용카드 리더기 - 카드를 잘못된 방향으로 넣을 수 없음
∙ 폼 유효성 검사 - 잘못된 이메일 형식은 제출 불가
a. 물리적 제약
∙ USB-C의 양방향 설계 (이전 USB의 50% 실패율 해결)
∙ 신용카드 칩의 방향 (한쪽만 칩이 있음)
b. 의미적 제약
∙ 🔴 빨간색 = 정지, 위험, 삭제
∙ 🟢 초록색 = 진행, 안전, 확인
∙ 💾 플로피 디스크 = 저장 (젊은 세대도 이해)
c. 논리적 제약
∙ 비밀번호 없이 계정 삭제 불가
∙ 결제 정보 없이 구매 불가
∙ 이메일 형식이 맞지 않으면 제출 불가
d. 문화적 제약
∙ 읽기 방향: 좌→우 (서양), 우→좌 (아랍)
∙ 체크표시: ✓ (서양), ○ (일본)
4️⃣ 매핑(Mapping) - "조작부와 결과 사이의 자연스러운 관계"
원리: 컨트롤과 그 효과 사이에 직관적인 관계가 있어야
나쁜 예:
∙ 4개의 버너와 무작위로 배치된 4개의 조절 손잡이
∙ 좌우가 반대로 작동하는 수도꼭지
좋은 예:
∙ 자동차 창문 스위치 - 배치가 실제 창문 위치와 일치
∙ 캐러셀 UI - 좌우 스와이프가 콘텐츠 이동 방향과 일치
📌 디지털 제품에서의 매핑
∙ 좌우 스와이프 → 좌우 콘텐츠 이동
∙ 핀치 줌 → 확대/축소
∙ 아래로 당기기 → 새로고침
5️⃣ 일관성(Consistency) - "비슷한 것은 비슷하게 작동해야 한다"
원리: 사용자의 기존 지식과 경험을 활용할 수 있도록 일관된 패턴을 유지
좋은 예:
∙ 모든 앱에서 X 버튼은 닫기를 의미
∙ 저장 아이콘은 플로피 디스크 모양 (아무도 플로피를 안 써도)
∙ 휴지통 아이콘은 삭제를 의미
일관성이 깨질 때의 혼란:
∙ 안드로이드에서 아이폰으로 (뒤로가기 버튼은 어디에?)
∙ 윈도우에서 맥으로 (Command vs Control)
6️⃣ 행동유도성(Affordance) - "사물의 특성이 사용 방법을 암시한다"
원리: 제품의 물리적 특성이나 시각적 단서가 어떻게 사용해야 하는지 직접적으로 알려줌
실제 행동유도성 vs 지각된 행동유도성:
∙ 실제: 버튼은 누를 수 있다 (물리적 특성)
∙ 지각된: 그림자와 입체감으로 버튼처럼 보인다 (시각적 단서)
물리적 세계의 행동유도성:
∙ 문 손잡이 → 잡고 돌린다
∙ 버튼 → 누른다
∙ 슬롯 → 무언가를 넣는다
🛗 엘리베이터 버튼의 비밀 (6가지 원리 모두 사용)
1. 가시성: 눈높이에 위치, 조명으로 강조
2. 피드백:
∙ 누르면 불이 켜짐 (시각)
∙ "딩" 소리 (청각)
∙ 때로는 진동 (촉각)
3. 제약:
∙ 이미 선택된 층은 다시 누를 수 없음
∙ 존재하지 않는 층 번호는 없음
4. 매핑:
∙ 높은 층 = 위쪽 버튼
∙ 낮은 층 = 아래쪽 버튼
5. 일관성:
∙ 전 세계 어디서나 비슷한 방식
∙ 숫자 체계 동일
6. 행동유도성:
∙ 튀어나온 버튼 = 누를 수 있음
∙ 오목한 모양 = 손가락이 들어갈 곳
PM이 알아야 할 디자인 사고
1. 사용자는 매뉴얼을 읽지 않는다
∙ 제품은 스스로 설명할 수 있어야 합니다
∙ 복잡한 온보딩보다 직관적인 디자인이 중요합니다
∙ 필요한 순간에 필요한 정보만 제공해야 합니다
2. 사용자는 탐험가가 아니다
∙ 대부분의 사용자는 새로운 방식을 시도하기보다 익숙한 패턴을 선호합니다
∙ 혁신적인 인터페이스보다 예측 가능한 경험이 중요합니다
∙ 창의성은 문제 해결에, 인터페이스는 익숙함에
3. 복잡성은 피할 수 없다
∙ 기능이 많아질수록 복잡성은 증가합니다
∙ 중요한 것은 복잡성을 어떻게 관리하고 숨기는가입니다
∙ 점진적 공개와 맥락적 기능 제공이 핵심입니다
복잡성 ≠ 복잡함
복잡성 (Complexity)
∙ 정의: 많은 부분이나 기능으로 구성된 상태
∙ 특징: 현실 세계의 필연적 속성
∙ 평가: 중립적 (좋지도 나쁘지도 않음)
복잡함 (Complicated)
∙ 정의: 이해하고 사용하기 어려운 상태
∙ 특징: 나쁜 디자인의 결과
∙ 평가: 부정적 (항상 피해야 함)
그룹 연구
-
좋은 디자인을 가졌다고 생각하는 프로덕트를 하나 선정합니다. 👉🏻 Google 검색엔진
-
해당 프로덕트의 주요 기능을 하나 선택해 해당 기능을 사용하는 절차에 대해 행동의 7단계에 기반하여 분석을 합니다.
-
이 행동을 유도하기 위한 디자인 요소를 검토하고 이를 6가지 좋은 디자인의 원리에 맞게 잘 설계되었는지 검토합니다.
-
이 과정에서 어떤 인사이트를 발견했는지 논의하고 이를 정리해 봅니다.
