심리학과 앱 서비스

인간의 심리는 앱 서비스를 만들때도 중요하게 고려해야할 부분이다.

출처 : 아마존

UX/UI 디자이너나 프로덕트 매니저를 준비중이라면 꼭 한번쯤 읽어봐야할 필독서 중에서 'Laws of UX'라는 책이 있다.생각보다 디자인에 심리학이 끼치는 영향은 크다. 이 책에서는 10가지 심리학 법칙을 디자인과 연결시켜 이해하기 쉽게 풀어낸다. 오늘은 이 책에서 나온 10가지 심리학 법칙으로 제품을 분석해보고자 한다.

---

분석해볼 프로덕트는 바로 '무신사'다.

무신사는 2020년 기준 거래액 1조 2000억원을 달성하며 현재 국내 1위 패션 이커머스 플랫폼으로 자리잡고 있다. 앱과 웹 둘다 있지만 앱을 중심으로 심리학 법칙과 연관해 분석해보고자 한다.

제이콥의 법칙(Kakob's Law)

사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 현재 사용하려는 앱이 작동하기를 원한다. 자신의 앱에 변화를 주고 싶을 때는 기존의 틀에 새로운 형태를 추가하는 식으로 하는 게 위험부담이 적다.

왼쪽부터 무신사, 하이버, 지그재그, 브랜디, 에이블리의 홈 화면

다섯개의 패션 이커머스 플랫폼 모두 비슷한 형태의 홈 화면을 가지고 있다. 특히 가장 먼저 눈에 들어오게 되는 것은 현재 진행중인 이벤트나 단독 혜택 화면이다. 공통적으로 많이 보이는 것은 커머스 플랫폼에 꼭 필요한 검색 버튼과 랭킹, 이벤트, 단독 혜택, 장바구니 버튼 등이 있다.

무신사 앱 화면들

메뉴 카테고리, 검색, 좋아요(찜하기 카테고리)화면 또한 다른 패션 이커머스 플랫폼과 비슷한 형태로 보인다. 마이페이지에 들어가면 볼 수 있는 적립금, 포인트, 쿠폰, 후기작성, 주문/배송조회 등 세부사항도 타 플랫폼과 거의 동일한 형태이다. 유저는 무신사를 이용할 때 다른 패션 이커머스 플랫폼의 사용경험과 비슷한 구성으로 좀 더 익숙하게 사용이 가능하다.

피츠의 법칙(Fitts's Law)

대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다.

왼쪽부터 매거진 페이지, 상품 상세 페이지, 장바구니 페이지

무신사는 유저에게 다양한 룩을 추천해주는 매거진 페이지가 따로 있다. 매거진 페이지에서 관심이 가는 글을 클릭하면 여러 특집 상품에 스토리를 담아 설명해주는데 이때 설명의 바로 아랫부분에는 관련 상품의 상세페이지로 가는 링크가 존재한다. 이 기능은 유저들이 상품을 하나하나 검색해보지 않아도 바로 찾아 들어갈 수 있고 상품을 바로 장바구니에 넣을 수 있도록 유도한다. 그 다음 상품 상세 페이지에는 구매하기 버튼이 스크롤을 마지막까지 내리는 동안 계속 화면 하단에서 눈에 띄는 블루 컬러로 존재하도록 만들어놓았다. 이는 유저가 상품 상세 페이지를 보는 도중에 구매하고자 하는 마음이 들면 그 마음이 사라지기 전에 바로 구매를 할 수 있도록 해놓은 장치이다. 결제 페이지 또한 마찬가지로 스크롤을 내리든지 올리든지 상관없이 계속 화면에 눈에 띄는 컬러로 존재해 구매를 유도하고 있다.

힉의 법칙(Hick's Law)

의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다. 선택지의 갯수를 최소화하거나

추천 선택지를 강조해서 사용자의 부담을 줄여야한다.

매거진 페이지와 스타일 카테고리 안의 코디맵, 코디숍, 큐레이팅

무신사 안에는 총 몇 개인지 가늠하기도 힘들만큼 다양하고 수많은 상품이 존재한다. 무신사는 유저들이 제품 카테고리안에 하나하나 들어가보며 상품을 고르는 게 힘들다는 것에 대해 잘 알고 있고, 유저가 불편함을 느끼기 전에 구매를 유도하고자하는 방법 중 하나로 매거진이나 코디숍, 코디맵, 룩북, 큐레이팅 서비스를 제공하고 있다. 패션을 잘 모른다고 하더라고 트렌드에 맞게 추천해주는 서비스가 존재함으로써 유저들은 좀 더 편하게 쇼핑을 즐길 수 있게 된다.

밀러의 법칙(Miller's Law)

보통 사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다. 사용자가 쉽게 처리하고 이해하고 기억할 수 있게 콘텐츠 덩어리를 작게 나눠 정리해야한다.

왼쪽 - 상품 카테고리 페이지, 오른쪽 - 상품 랭킹 페이지

상품 카테고리 페이지와 상품 랭킹 페이지 모두 한 화면안에서 보이는 이미지의 갯수가 7개를 넘지 않는다.이는 사용자가 한꺼번에 많은 정보를 받아들여 혼란스러워짐을 방지하고자 하는 것으로 보인다.

피크엔드 법칙(Peak-End Rule)

인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다. 사용자의 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 써야한다.

왼쪽부터 장바구니 페이지, 결제 페이지 01, 결제 페이지 02

예전부터 사람들이 무신사를 선호하던 큰 이유 중 하나가 무료배송, 다양한 쿠폰 적용과 할인 혜택이었다.

장바구니 페이지에 배송비 0원, 등급할인, 적립금 선할인, 보유 적립금 사용이 세세하게 보여짐으로써 유저가 많은 혜택을 받았다고 생각하게 만들어 기분 좋은 구매를 유도한다. 또한 결제 페이지에서도 구매시 적립금과 할인 합계를 한번 더 보여줌으로써 유저가 많은 혜택을 받았다는 것을 인식시켜준다.

심미적 사용성 효과(Aesthetic Usavility Effect)

사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다. 보기 좋은 디자인은 인간의 뇌에 긍정적 반응을 일으켜서 사용자로 하여금 제품이나 서비스 사용성이 뛰어나다는 생각이 들게 한다.

무신사 카테고리 속 우신사 페이지, 따로 있는 우신사 전용 페이지

무신사 앱을 이용해보면서 우신사 카테고리만 유독 깔끔하고 심플한 UI를 가지고 있어서 의아해한적이 있었다.이 점을 심미적 사용성 효과로 대입해 생각해보니 비중이 적은 우신사를 여성 유저들이 관심을 더 가질 수 있도록 심플하면서도깔끔한 느낌으로 페이지를 만든게 아닌가하는 생각이 든다. 하지만 아쉬웠던 점은 깔끔한 페이지에 끌려 들어간 우신사는무신사와 완전하게 동일한 화면 구성을 가지고 있었다. 차라리 무신사 카테고리 속 우신사 페이지처럼 우신사 자체 페이지의 무드도 깔끔한 느낌으로 갔으면 좋았을 것같다는 느낌도 들었다.

본 레스토프 효과(Von Restorff Effect)

비슷한 사물이 여러 개 있으면 그 중에서 가장 차이나는 한 가지만 기억할 가능성이 크다. 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 해야한다.

무신사 메인 페이지, 현대카드 페이지

현무신사과 현대카드가 손잡고 만든 무신사 전용카드를 21년 4월 출시해 홍보중이며 이를 유저들이 많이 이용할 수 있도록 유도하고자 상단의 카테고리 중 현대카드 카테고리만 초록색으로 다른 컬러인 것을 볼 수 있다.

왼쪽부터 이벤트 페이지, 매거진 페이지, 상품 랭킹 페이지

이벤트 페이지 내의 이벤트 소식을 살펴보면 어떤 내용인지 보기도 전에 블루 컬러의 박스 안의 '결제 혜택'이라는 문구가 가장 눈에 먼저 보인다. 이는 유저에게 중요한 포인트 중 하나인 결제 금액부분에서 혜택을 주는 이벤트임을 한 눈에 볼 수 있게하여 유저들이 이벤트 소식을 지나치지 않고 클릭하도록 유도한다.

두번째 매거진 페이지에서 상품 설명 아래에 바로 있는 링크에는 다른 사람들이 이 상품을 얼마나 마음에 들어했는지 볼 수 있는 좋아요 갯수와 할인율을 빨간색으로 표기함으로써 유저들에게 이 상품이 얼마나 인기있는지, 할인되는지 보여줘서 좀 더 끌리도록 한다.마지막으로 상품 랭킹 페이지에서 한정판매 제품인 경우 레드컬러 박스안에 '한정 판매'라고 따로 표기해줌으로써 한정판에 혹하는 유저들의 심리를 꿰뚫고 눈에 더 띌수 있도록 한 부분이다.

테슬러의 법칙(Tesler's Law)

복잡성 보존의 법칙이라고 알려진 테슬러 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다. 내재된 복잡성을 디자인과 개발 과정에서 처리하면 사용자의 부담을 최소로 줄일 수 있다. 하지만 추상적으로 느껴질 정도로 인터페이스를 단순화해서는 안된다

왼쪽은 앱 화면 하단에 위치한 M 카테고리, 두번째와 세번째는 M 카테고리를 클릭하면 나오는 화면들

무신사 앱 화면 아래 중심에 있는 'M'버튼은 새롭게 추가된 버튼이다. 그전에 사용할 때는 없었는데 이번에 앱 분석을 하면서 처음 발견했고 무슨 버튼일까 눌러봤더니 무신사의 다양한 서비스(우신사, 무신사 스탠다드, 솔드아웃 등)으로 바로 갈 수 있는 버튼들과 인기 카테고리로 바로 갈 수 있는 버튼들이 있었다. 처음 봤을 때는 어떤 버튼인지 사전 지식이 없어 추상적으로 느껴지긴 했지만 한 번 클릭해본 후에는 다른 서비스로 바로 갈 수 있어 편하게 잘 이용할듯한 버튼이었다.

상품 랭킹 페이지

랭킹 카테고리에서 랭킹전체보기로 들어가면 가입시 입력해놓은 옵션( ex. 나이 등등 )을 미리 적용해줘서 매번 클릭하지 않아도 자동으로 설정되게 해놓아 유저가 좀 더 편한 쇼핑을 즐길 수 있도록 해준다. 

도허티 임계(Doherty Threshold)

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

•사용자의 주의가 분산되는 것을 막는 동시에 생산성도 향상시키려면 시스템 피드백을 0.4초 이내에 제공해야한다.

•애니메이션은 로딩이나 프로세싱이 진행되는 동안 사람들의 시선을 끄는 한 가지 방법이다.

•설사 정확하지 않아도 진행표시 상황을 보여주면 사용자는 대기 시간에 관대해진다.

•실제 작업이 훨씬 빨리 완료되더라도, 의도적으로 작업 완료를 늦게 알리면 체감 가치를 높이고 신뢰를 형성하는 데 도움이 되기도 한다.

무신사 앱 첫화면과 로딩 페이지

무신사 또한 이 법칙을 적용시켜 첫 화면에서 메인화면으로 갈 때 중간에 비는 시간을 로딩 페이지에 애니메이션을 추가해 넣음으로써 사용자의 주의가 분산되는 것을 막아준다.