보민님의 블로그

[코드스테이츠 PMB 11기]교보문고에 적용된 UX 심리학 _W4D2 본문

PMB/데일리과제

[코드스테이츠 PMB 11기]교보문고에 적용된 UX 심리학 _W4D2

야옹씌 2022. 4. 5. 22:25

 

교보문고 심리학으로 분석하기

출처: 교보문고

 

 'Laws of UX'에는 아래의 10가지 심리학이 나온다.  그 중 6가지를 사용하여 모바일 서점 교보문고 어플을 분석해 보려한다.

1. 제이콥의 법칙 사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
2. 피츠의 법칙 대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다.
3. 힉의 법칙 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
4. 밀러의 법칙 보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못한다.
5. 포스텔의 법칙 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
6. 피크엔드의 법칙 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
7. 심미적 사용성 효과 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
8. 본 레스토프 효과 비슷한 사물이 여러 개 있으면 그중에서 가장 차이 나는 한 가지만 기억할 가능성이 크다.
9. 테슬러의 법칙 복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
10. 도허티 임계 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 높아진다.

 

제이콥의 법칙
사용자는 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.

교보문고와 YES24, 알라딘의 메인페이지를 비교해보자. 교보문고와 YES24의 경우는 메인페이지에 나온 광고 마저 똑같아서 깜짝 놀랐다. 전체적으로 상단에는 회사의 로고와 검색바 장바구니 아이콘이 표시되고 그 밑으로 홈과 함께 카테고리 광고를 배치했다. 하단 바 역시 비슷한 아이콘과 배열이 비슷하다. 사용자들은 비슷한 패턴에서 벗어나지 않아도 되고 이로 인한 학습 비용이 발생하지 않는다.

 

힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

베스트와 신상품 페이지에는 각각 3가지의 선택지만 존재한다.  베스트 페이지의 경우 '모바일 실시간', '베스트 셀러', '스테디셀러' 아이콘으로 선택 조건과 옵션을 줄여 최대한 단순하게 표현해 결정을 쉽게 만들어 준다. 신상품 페이지에선 '화제의 신상품', '출간예정 상품', '새로나운 상품' 3가지의 선택지를 상위 노출 한 후 밑에 보다 자세한 카테고리를 제시한다. 한번에 너무 많은 선택지를 제시하기 보단 나눠서 인지 부하를 줄일 수 있다.

 

밀러의 법칙
보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못한다.

오늘의 책 페이지는 교보문고의 MD들이 회의를 통해 선정하는 코너인데 이 화면에서는 총 8개의 책만 표시가 된다. 많은 책을 추천하기보단 사용자가 쉽게 처리하고 이해할 수 있도록 하나의 덩어리로 묶고 그 안에서 8개의 책을 정리해 사용자의 접근성을 높였다.

 

포스텔의 법칙
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.

교보문고에 일부러 틀린 검색어를 검색하면 검색어의 철자를 확인해주세요, 단어 수를 줄이거나 띄어쓰기 해주세요 등의 방법을 제시해준다. 이는 검색결과가 없다는 문구만 표시 할 수 있지만 아래의 추가적인 문구를 통해 막다른 길이 아닌 다른 액션을 할 수 있도록 제안한다고 생각한다. 한가지 아쉬운 점은 YES24의 경우는 '검샥'을 입력하였을 때 '검색'을 입력하려고 했는지 물어보며 어떤 입력을 하든 공감하고 유연한 태도를 보여주어 사용자의 부정적 경험을 줄여준다. YES24와 비교하였을 때 교보문고는 포스텔의 법칙이 적용은 되었지만 조금 부족한것으로 보여 아쉽다.

 

본 레스토프 효과
 비슷한 사물이 여러 개 있으면 그중에서 가장 차이 나는 한 가지만 기억할 가능성이 크다.

교보문고의 메인페이지에는 'Klover 평점 좋은 책' 항목이 존재한다. 슬라이드 형식으로 책이 나열되어 있고 선택한 책은 제목과 평점이 나오고 그 외의 책은 블러처리와 함께 정보를 표시하지 않는다. 이 화면은 선택지의 개수와 복잡성을 줄이는 힉의 법칙도 함께 적용되었다고 생각한다. 현재 선택한 책의 표지를 다른 책은 블러처리함으로써 강조하고 제목과 평점만 보여주며 복잡성을 줄였다. 

선택한 책을 누르면 상세페이지가 나오는데 선물하기, 장바구니 담기, 구매하기 중 구매하기만 배경색이 다르다. 색 대비를 통해 구매하기를 강조하고 행동을 유도한다.

 

도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 높아진다.

 

교보문구 앱을 실행하면 메인 화면이 나오기전까지 이벤트 화면을 애니메이션으로 보여준다. 사용자가 기다리는 동안 이벤트 정보를 전달 할 수 있고, 애니메이션 효과로 시선을 끌 수 있다.

메인화면에서 다른 페이지로 이동 시에 앱 상단에 프로그레스바를 보여주는데 이 또한 작업의 진행 상황을 시각적으로 확인 가능하여 불확실성과 체감 대기 시간을 줄여준다.