멘탈모델(Mental Model)
멘탈모델이란 사용자가 세상을 이해하고 행동하는 방식을 시각화한 지도이다.
즉, 사용자가 제품을 “어떻게 인식하고, 어떤 기대를 갖는가”를 구조화하는 작업이다.
멘탈모델 = 사용자가 세상을 이해하고 행동을 예측하는 방식
사람은 자신의 경험을 기반으로 “이건 이렇게 동작하겠지”라는 예상(Expectation)을 만들어낸다.
이 예상이 제품의 실제 작동과 다를 때 혼란이 생길 수 있다.
ex) ‘휴지통’ 아이콘 = 삭제라고 인식함
그런데 실제로는 ‘보관함’ 기능이면? → 혼란 발생
또한 디자이너 / 사용자의 멘탈모델 간 간극이 존재하므로,
사용자의 멘탈모델을 고려하고 이 간극을 해소하는 것이 UX 리서치의 목표가 된다.
멘탈모델 도출 단계
멘탈모델을 구축하는 과정은 단순히 사용자의 말을 모으는 게 아니라,
행동과 사고의 구조를 체계화하는 과정이다.
0️⃣ 멘탈모델 구축 준비
- 인터뷰, 설문, 관찰 등을 통해 실제 사용자 행동 데이터 수집
- 사용자별 페르소나(persona)와 상황(context)을 명확히 설정
➡️ “유저가 어떤 상황에서 어떤 생각을 하며 행동하는가?”를 중심으로 분석
1️⃣ 유저 행동 나열
- 페르소나별 / 상황별 유저 행동 키워드 도출
- 각 페르소나가 수행하는 행동 키워드를 나열
ex)
여행 준비자 → “검색”, “비교”, “예약”, “공유”
즉흥 여행자 → “근처 찾기”, “즉시 예약”, “결제”
➡️ 멘탈모델의 재료(원데이터)를 만드는 과정
2️⃣ 멘탈기둥 수집
- 유사한 행동을 묶어 멘탈기둥을 구성
ex) “탐색하기”, “결정하기”, “확인하기”
3️⃣ 공통 카테고리 묶기
- 공통된 패턴을 정리하고 각 행동의 목적과 감정을 함께 분석
4️⃣ 유저 저니맵을 활용하여 흐름맞게 배치
- 시간 순서에 따라 사용자 여정을 시각화
- 각 단계에 사용자의 감정, 기대, 불편을 함께 표시
5️⃣ 멘탈모델 및 인사이트 도출
- 각 행동기둥을 바탕으로 “왜 이런 생각을 했을까?”, “무엇을 기대했을까?”를 분석
- 제품 개선에 활용 가능한 핵심 인사이트 도출
ex)
| 단계 | 사용자 행동 | 기대/생각 | UX 인사이트 |
|---|---|---|---|
| 검색 | ‘최저가’ 입력 | 가격 비교 중심 | 첫 화면에 가격 정보 노출 |
| 선택 | 후기 먼저 확인 | 신뢰 확보 | 리뷰 필터 강화 |
| 결제 | 쿠폰 확인 | 합리적 소비 | 결제 페이지에 쿠폰 안내 |
과제
오늘의 과제는 총 2가지~~
오늘의집 화면 구성 분석과 폼 디자인이었다.
1️⃣ 오늘의집 화면구성 분석
- 오늘의 집은 어떤 서비스일까?
: 인테리어 콘텐츠부터 커뮤니티, 쇼핑, 이사 및 전문가 시공까지 모든 것을 한 번에 해결하는 '라이프스타일' 어플이다.
--하단 네비게이션 메뉴들을 중심으로 분석하였다.--
-
오늘의 집의 화면구성은 어떻게 돼 있을까?
: 피그잼 내 파란색 메모지 -
개선점은 무엇이 있을까?
: 피그잼 내 노란색 메모지
- 오늘의 집 앱 분석을 마치며
: 요즘엔 한가지 기능으로 시작했더라도 사용자들이 필요로 하는 다양한 기능들을 추가하여 한가지 카테고리 내의 라이프스타일 전체를 아우르는 어플이 많은 것 같다. 토스, 당근도 이런 어플인데 오늘의 집은 비교적 더 복잡하다는 느낌이 들었다. 홈 화면 구성이나 레이블이 너무 많은 정보가 있어 복잡하게 느껴지는 것 같다. 또 “그래서 얘네 메인 기능이 뭔데?” “가장 중요하게 생각하는 기능이 뭔데?” 라는 의문이 생기게 하는 화면구성이었다. 어플이 시작된 “주요 니즈”를 홈에 배치하는게 좋을 것 같다고 생각한다.
2️⃣ Form UI 디자인
우선 얌쥐게 레퍼런스들을 수집했다.
폼 유아이 레이아웃 팁, 현재 진행 상태 알려주기, 폼 자체 디자인, 화면 전체 레이아웃 등
필요한 다양한 레퍼런스들을 수집해주었다.
그리고 필요한 컴포넌트들을 제작해주었다.
프로그레스바는 레이아웃 상 너무 복잡해 보여서 이후 사용하지 않게 되었다.
대쉬보드 UI 디자인의 회원가입 폼을 디자인해보았다.
뭔가 글래스모피즘 특성인지, 색 문제인지 약간 가독성이 떨어지는 것 같다.
팀 컬러마다 테마 변경하게 바꾼 버전~~
베리언트를 사용해서 한번에 뿅! 하고 바꾸어주었다.
그리고 또 문제발생.
하얀색 바탕이 있는 폼이 입력 완료해보이는지, 없는게 입력 완료해보이는지 헷갈린다는 점.
실제로 인스타 스토리를 통해서 투표도 해봣는데
거의 반반으로 결과가 나왔다 ㅜㅜ..
동생이랑 얘기하면서 체크 표시같은 걸 추가해볼까.. 하면서 수정방안을 찾아보았다 하하..😂
그래서 input 상태에 대한 레퍼런스를 추가 수집했다..
요로코롬 다 된것에는 체크 표시를 달아주었다..!!!
또 아이콘을 앞으로 옮기면서 ㅠ 패스워드 아이콘(보이게/안보이게 버튼)은 뒤에 있는게 예뻐보여서 베리언트를 추가해주었다..
생각해야 할게 더 많고..!!
사실 | < 도 추가해야하는데.. 안햇으므로..
실제 디자인은 더 정교하게 들어간다는게 만들수록 배울수록 느껴졌당
회고
“좋은 디자인은 사용자의 머릿속 모델과 제품의 작동 방식을 일치시키는 일이다.”
사용자의 멘탈 모델을 고려하면서, 내 입장에서 제품을 바라보는 오류에 빠지지 않기!
앞선 과제의 UI 를 수정하는 과정도 그렇게 이루어졌다!
사용자 입장에서 헷갈리지 않게~~~... 디자인은 예쁜 것보다!! 사용할 때의 불편함을 해결하는 과정이므로!!
#항상 사용자 입장에서 생각하기
