김영감의 영감노트
[PMB 8기] 디알못의 눈으로 본 현대카드 앱의 UX 심리학 법칙 본문
UX 법칙과 인지심리학???
UX와 인지심리학은 매우 밀접하게 연결되어 있다. UX는 '제품이나 서비스를 이용하면 느끼고 생각하게 되는 총체적 경험'이라고 정의할 수 있다. 이 총체적 경험을 제공하는 서비스, 제품 기획자라면 인간이 어떻게 외부 정보를 처리하는지 이해하고 있어야 전달하고 싶은 정보를 효과적으로 전달할 수 있다. 여기서 인간의 외부에서 들어온 정보를 처리하는 방법을 연구한 학문이 인지심리학이다.
※ 인지심리학에 대해 자세히 쓰는 것은 너무 방대하니 다른 문서나 서적을 추천한다.
필자는 교육학을 전공하면서 교육과정을 설계하고 실행해본 경험이 있다. 그때 가장 크게 느꼈던 것이 인지심리학의 필요성이다. 멋진 교재를 만들고 화려한 언변으로 이야기를 하고 최첨단 도구로 수업을 한다한들 학습자의 연령, 특성, 주변 환경 등을 고려하여 이들이 정보를 어떻게 해석하고 기억하는지에 대한 이해가 없다면 언제나 수업은 망했었다. UX도 마찬가지로 볼 수 있다. 멋지고 화려한 인터랙션, 앱 디자인을 잔뜩 사용한들 이용자의 인지과정을 고려하지 않은 서비스는 불편함을 초래할 수밖에 없다.
그렇기 때문에 몇 가지 인지심리학 법칙을 알아볼 필요가 있다. 오늘은 UX에서 자주 사용되는 심리학 법칙을 소개하고 각 법칙들이 구현된 모습을 현대카드 앱에서 찾아볼 예정이다. 이 법칙들은 'Law of UX' 책에서 소개된 내용이며 해당 내용은 여기에서 확인할 수 있다.
1. 제이콥의 법칙 (Jakob's Law)
사용자는 여러 사이트에서 대부분의 시간을 보낸다.
그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
제이콥의 법칙은 UX/UI의 관습적인 면에 대해서 설명한다. 사용자는 자신이 사용하던 서비스에서 겪은 UX/UI를 새로운 서비스를 이용하면서도 기대한다는 뜻이다. 예를 들어 '회원가입 과정이 진행되는 순서', '돋보기 아이콘 = 검색' 등의 기능은 대부분의 서비스가 동일하게 보여준다.
위 사진을 보면 여러 정보들이 카드 모양의 프레임에 들어가 있는 것을 볼 수 있다. 은행, 증권 서비스에서 자주 볼 수 있는 것으로 카드 모양을 구현한 것이다. 또한 앱 내 필요 정보를 무한 스크롤을 통해 훑어볼 수 있다. 인스타그램, 유튜브 등 많은 콘텐츠를 스크롤링하며 보는 소비자들의 익숙한 부분을 재현한 것으로 볼 수 있다. 즉 제이콥의 법칙을 적용한 것이다. 이를 통해 현대카드는 앱 사용에 대한 적응 혹은 학습을 하느라 사용자가 느끼는 피로함을 최소화할 수 있었다.
2. 힉의 법칙(Hick's Law)
결정을 내리는 데 걸리는 시간은 선택의 수와 복잡성에 따라 늘어난다.
힉의 법칙은 복잡성에 관련한 법칙이다. 선택할 수 있는 조건이나 옵션이 많아질수록 유저가 결정이나 반응을 내리는 시간이 늘어난다는 말이다. 여기서 주의해야 할 점이 있다. 옵션의 수와 결정의 시간이 비례하여 증가하는 것이 아니다. 아래 그래프처럼 시간이 늘어난다. 즉 한 개의 선택지가 주어졌을 때 결정시간이 1초가 되었다면 두 개의 선택지일 경우 결정시간이 1.8초로 늘어난다고 예시를 들어 설명할 수 있다.
일정 수준 이상의 조건이 제공되면 인간은 본능적으로 정보들을 큰 덩어리로 범주화(청킹:Chinking)한다. 그렇기 때문에 힉의 법칙에서는 과도한 옵션을 제공하는 것보다 범주화된 카테고리를 단계별로 제공하는 것이 좋다고 디자인적 접근을 제시한다. 또한 매우 중요한 결정을 할 경우에는 이러한 법칙이 통하지 않는 경우가 있다. 복잡한 의사결정이 필요한 연구, 학습 등에서는 조금 다르게 적용될 수 있다는 점을 고려해야 한다. 밀러의 법칙과 비슷한 느낌을 받을 수 있는데 힉의 법칙은 의사결정이 필요한 곳에 작용되는 경우가 많다.
위의 현대카드 앱을 보면 앱 내에서 제공하는 다양한 혜택들을 카테고리 별로 나누어 보여준다. 선택할 혜택의 가짓수가 많다 보니 이를 범주화하고 단계별로 나누어 보여줌으로써 혜택을 고르는 결정을 쉽게 만들어 준다. 이를 통해 소비자는 혜택을 고르는데 생기는 결정장애를 줄이고 쉽고 간편하게 원하는 혜택을 고를 수 있다.
3. 밀러의 법칙 (Miller's Law)
평균적인 사람은 작업 기억에 7개(± 2개) 항목만 저장할 수 있다.
밀러의 법칙은 인간의 기억 단계에 의거한 내용이다. 일반적인 인간의 기억 단계는 아래 그림처럼 단계를 거친다. 그중 우리가 서비스를 사용하면서 가장 많이 사용하는 작업기억 단계인데 여기서 평균적으로 7 ± 2 항목만 인지가 가능하다고 한다.
그렇기 때문에 일련의 유의미한 덩어리(Chunk)로 정보를 나누어 전달해야 한다. 힉의 법칙이 결정 순간에 초점을 두는 반면 밀러의 법칙은 정보를 제공하는 순간에 초점을 맞춘다. 즉 많은 양의 정보를 어떤 식으로 보여줘야 하는지가 중요한 것이다. 예를 들어 넷플릭스처럼 몇 가지 주제로 많은 콘텐츠를 분류해서 보여주는 것이 밀러의 법칙의 적용사례라고 할 수 있다.
현대카드에서는 결제내역 확인 시 위와 같은 화면을 볼 수 있다. 스크롤을 이동해도 4개 정도의 결제 내역만을 보여주며 각 결제 내역은 공백과 타이포그래피로 구분된다. 이를 통해 고객은 좀 더 적은 피로감으로 나의 결제내역을 확인할 수 있다.
4. 피츠의 법칙(Fitts's Law)
목표 달성에 도달하는 시간은 해당 목표까지의 거리가 가까울수록 목표의 크기가 클수록 빨라진다.
피츠의 법칙은 우리가 앱 서비스를 사용할 때를 생각하면 이해가 쉽다. 클릭해야 할 버튼이 엄지손가락에 가까운 곳에 있으면 버튼을 누른다는 목표를 더 빠르게 달성하게 할 수 있다. 혹은 버튼(CTA)이 충분히 크고 각 버튼 사이에는 잘못 누르지 않도록 충분한 거리를 확보해야 한다. 피츠의 법칙을 잘 적용하기 위해선, 애플의 인터페이스 가이드라인, 구글의 머터리얼 디자인 가이드라인 등을 참고하면 좋다.
고객이 현대카드를 쓰는 이유 중 가장 우선되는 것은 자신의 월간 결제액을 확인하는 것이다. 그렇기 때문에 해당 기능을 하단 Thumb zone(엄지손가락이 닿는 부분)에 위치시켜 가장 간편하게 쓸 수 있게 하였다. 카카오 페이에 경우 오른쪽 사진과 같이 잔액을 상단에 배치하였다. 필자는 손이 작은 편이라 카카오페이의 잔액을 확인하기 위해 손 위치를 살짝 변경해야 하는 불편함이 있다. 다만 카카오페이 앱을 결제, 멤버십 등의 주요 목적이 있고 이는 현대카드와 다르기 때문에 이러한 차이가 발생한다. 소비자는 이러한 UX를 통해 원하는 기능을 선택하려고 손을 번갈아가며 사용하거나 손의 위치를 바꾸던 불편함을 최소화할 수 있다.
5. 폰 레스토프 효과 (Von Restorff Effect)
Isolation Effect라고도 알려진 이 효과는 유사한 개체가 여러 개 있을 때 나머지 개체와 다른 특징을 가진 개체가 가장 잘 기억될 가능성이 있다고 예측한다.
CTA(Call to action)를 실현하는 데에 가장 많이 적용되는 이론이다. 일관성 있는 페이지의 디자인 중 특이한 디자인을 삽입하여 행동을 유도한다. 다른 색을 쓰거나, 색 대비를 주는 식으로 해당 효과를 만들어낼 수 있다.
왼쪽 사진에서 현대카드는 코로나 상생 지원금이라는 콘텐츠를 강조하고 있으며 해당 부분으로 유입을 유도하고 있다. 또한 오른쪽 사진의 대출을 유도하는 버튼의 색상을 차이 나게 설정하여 대출 행동을 유도하고 있다. 폰 레스토프 효과는 정보 전달자가 강조하고 싶은 정보에 시선을 집중시키는 방법이다. 그렇기 때문에 소비자의 문제를 해결한다고 보기 힘든 경우가 많다.
6. 도허티 임계(Doherty Threshold)
컴퓨터와 사용자가 서로를 기다릴 필요가 없도록 하는 속도로(0.4초) 상호 작용할 때 생산성이 높아집니다.
0.4초 안에 컴퓨터와 사용자가 인터랙션을 완료할 수 있다면 생산성이 급격히 높아질 수 있다는 것을 의미한다. 생산성을 높이기 위해 만약 0.4초가 넘어가더라도 마치 0.4초처럼 느낄 수 있게 체감 성능을 높여야 한다. 이를 위해선 대기 시간 동안 진행사항 등을 보여주는 방법을 활용할 수 있다. 또한 페이지의 프레임을 먼저 보여주고 이미지 영상 등(불러오는데 시간이 오래 걸리는 요소)을 마지막에 보여주는 방법도 있다. 사용자와 컴퓨터는 어색한 침묵이 없고 대답은 최대한 빠르게 진행되는 대화를 해야 한다.
현대카드에서 로딩이 필요한 경우 위와 같은 인터랙션을 보여주고 있다. 고객은 앱 반응이 늦어지면 불쾌함을 느끼고 이탈한다. 위와 같은 인터랙션을 통해 해당 상황을 방지하고 고객이 느끼는 불쾌함을 최소화할 수 있다.
7. 심미적 사용성 효과(Aesthetic-Usability Effect)
사용자는 종종 심미적으로 만족스러운 디자인을 더 사용하기 쉬운 디자인으로 인식합니다.
보기 좋은 떡이 먹기도 좋다. 는 말이 이 효과를 쉽게 설명한다. 같은 사용성을 제공하는 두 가지 서비스 중 고객은 더 이쁜 서비스를 선택할 것이다. 심리학자 앨리스 아이젠은 실험을 통해 시각적으로 행복한 상태에 놓이면 사고의 폭이 넓어지고, 창조적 사고가 촉진된다는 것을 밝혀냈다. 즉 심미적 제품을 보고 문제 해결 능력이 활성화된 고객은 사용성이 좋다고 생각하게 되는 것이다. (출처)
현대카드의 홈 화면에서 스크롤을 내리면 뒤의 배경색이 변화함을 볼 수 있다. 소비자로 하여금 심미적으로 이쁘다는 생각을 할 수 있게 한다. 이를 통해 사용성이 낮은 앱에서 고객이 느끼는 피로감을 최소화할 수 있다.
'[PMB] 에세이' 카테고리의 다른 글
| [PMB 8기] Wireframe 그리기 연습 (With T Map) (0) | 2021.10.27 |
|---|---|
| [PMB 8기] H&M 앱 UX/UI에 도전해보자! (0) | 2021.10.23 |
| [PMB 8기] H&M 앱을 써본 후기와 감상 (0) | 2021.10.20 |
| [PMB 8기] 마켓플레이스 서비스의 KPI와 하이버 (0) | 2021.10.15 |
| [PMB 8기] 토스뱅크의 PMF (0) | 2021.10.15 |
