brunch

You can make anything
by writing

C.S.Lewis

by 개복치 Oct 07. 2022

심리학으로 살펴보는 온더룩의 UX

UX에 적용된 심리학 요소를 살펴봅시다.


패션 검색은 온더룩



오늘 분석할 법칙은 패션 콘텐츠 플랫폼이자, 커머스가 결합된 온더룩(onthelook)이라는 프로덕트다. 광고가 뜨기에 설치해보았는데, '패션 검색은 온더룩'이라는 슬로건과 딱 맞게도 취향에 맞는 일반인 패션피플(?)들의 스타일과 제품 정보들을 탐색할 수 있어 신기했다. 평소 29CM, 무신사, W컨셉, 지그재그, 등등.. 패션과 관련된 서비스를 이용하며 옷을 구경하는 것을 좋아하는 편인데, 그래서 온더룩의 광고 타깃이 되었나보다.




온더룩의 사업구조를 간단하게 정리하면, 


일반인, 패션 인플루언서들의 착장을 공유하는 콘텐츠/커뮤니티로 트래픽을 형성해

해당 트래픽이 커머스로 이어지게 하는 구조이다.



현재는 무신사, W컨셉 등 다른 플랫폼의 구매링크를 연결해 둔 제품이 많은데 사용자가 증가할수록 온더룩에서 자체 소싱하는 브랜드 제품들이 많아질 듯하다. 핵심은 트래픽을 커머스 수익으로 전환하는 것인데, 지금은 콘텐츠 내 제품 정보를 태그하는 기능이 핵심 연결고리인 것으로 보인다. 


온더룩은 어떻게 사용자들을 홀리고(?) 있는지 심리학 법칙을 통해 하나씩 살펴보자.





1. 제이콥의 법칙

사용자는 다른 웹사이트를 통해 축적된 경험을 바탕으로 기대치를 형성한다. 즉, 친숙한 방식으로 작동하길 원한다.








위는 29CM의 메인 배너이다. 앱에 접속하자 마자 주력/신규 브랜드를 큐레이션하는 배너인데, 온더룩의 스토어 메인 화면에서도 비슷한 구조를 찾아볼 수 있었다. 브랜드를 강조하는 29CM와는 달리 제품을 강조해 브랜드를 노출시킨다는 점에서는 차이가 있지만 이미지 배너와 카피 구성, 좌우 스와이프 시 진행 정도를 알려주는 하단의 막대가 유사함을 볼 수 있다. 


주요 수익원인 스토어의 메인 배너이기 때문에 익숙하지 않은 조작법으로 인한 사용자 이탈을 방지하고자, 효율적으로 인기 상품을 노출시키고자 비슷한 방법을 채택한 것이 아닐까 추측해보았다.








2. 피츠의 법칙

인터페이스로 인해 사용자의 주의가 분산되거나, 사용 의지가 꺾여서는 안 된다. 




위의 화면은 스토어에서 상의 카테고리를 검색했을 때의 화면이다. 스크롤을 내려 여러가지 상의 스타일들을 확인할 수 있고 붉은색 박스 처리된 필터를 사용해서 원하는 이미지만 검색할 수도 있다. 상의를 구매할 때 고려하는 요소(체형, 색상, 카테고리)등을 가깝게 배치해 사용자가 찾아 헤맬 필요 없이 원하는 옵션의 상품들을 검색할 수 있도록 유도하고 있다. 






3. 밀러의 법칙

사람은 보통 한 번에 7(±2)가지의 항목을 기억한다. 



정확하게 한 화면에서 최대 9가지의 콘텐츠를 확인할 수 있는 것을 보고 법칙이 법칙인데는 이유가 있구나.. 라고 생각했다. 위 화면은 온더룩을 처음 설치했을 때 사용자의 정보를 입력하고, 이후 큐레이션을 위해 취향에 맞는 스타일을 선택하는 화면이다. 한 화면에 포스팅을 적게 노출했으면 스크롤을 많이 내려야 해서 불편했을 것 같은데, 다양한 취향 중 스스로의 취향을 탐색하고 발견하는 것이 목적이어서 한 화면에서 인지할 수 있는 최대 개수인 9개를 배치해 둔 것 같다. 총 5가지의 스타일을 선택해야 하는데, 하단 버튼에서 몇가지를 더 선택해야 하는지 깨알같이 보여줘서 귀여웠고, 얼마나 선택했는지 파악할 수 있어서 편했다. 5가지의 스타일을 선택하는 과정이 조금 덜 귀찮아 지는 느낌을 받았다.








4. 피크엔드의 법칙

사람은 절정의 순간과 마지막에 느낀 감정을 바탕으로 경험을 판단한다.



위 사진은 온더룩 스토어에 노출되는 상품 중 직접 소싱하는 상품이 아닌, 다른 플랫폼으로 구매링크를 연결해주는 화면이다. 체감상 아직 온더룩이 직접 소싱하는 상품이 30%, 나머지 70%가 구매링크를 연결해주는 상품들인 것 같다.


1. 사용자가 괜찮은 스타일을 발견하고

2. 제품 태그를 클릭해 스토어로 이동해서

3. 해당 제품의 페이지에서 상세 정보를 확인하고

4. 구매를 결정해 외부 구매링크로 이동할 때 가장 배신감이 드는 요소가 무엇일까 생각해보았는데 답이 저 알림 박스 안에 있었다.



온더룩이 추천해주는 상품의 가격이나 세부 정보와, 실제 그것을 구매하기 위해 타 플랫폼으로 이동했을 때의 가격과 세부 정보가 다르다면 구매 직전에 느끼는 실망감이나 당혹감이 매우 클 것이다. 더군다나 여러 패션 플랫폼을 입점시키거나 직접 상품을 소싱해 판매하는 것이 주요 수익원이 될 텐데, 고객이 위와 같은 이유로 구매 과정에서 이탈하게 된다면 비즈니스적으로 손해를 보는 일이 되겠다는 생각이 들었다. 


온더룩은 고객이 '구매'라는 절정/마지막 경험에서 나쁜 기분을 느끼지 않도록, 미리 알림을 제공해 상품 정보가 다를 수 있음에 대해 양해를 구한 것이 아닐까 했다. 




5. 폰 레스포트 효과

비슷한 요소 중 차이나는 한 가지를 기억할 가능성이 높다. 




위의 화면은 스타일 콘텐츠 피드를 스크롤한 화면을 가로로 붙여놓은 것이다. 동일한 사이즈로 노출되는 스타일 포스트 사이에 화면 하나를 크게 장식하는 콘텐츠가 있는데, 바로 스토어로 이어지는 자켓 큐레이션 콘텐츠이다. 위에서 언급했듯 수익이 발생하는 것은 결국 스토어이기 때문에, 스타일 피드 사이에 다른 크기로 구매를 유도하는 콘텐츠를 강조한 것이 아닐까 추측해보았다. 





6.도허티 임계

사용자가 컴퓨터와 인터랙션하는 시간이 0.4초 이하일 때 생산성이 높아진다.






도허티 임계에 대해 어떻게 포스팅을 써야 하나.. 고민을 했다. 0.4초라는 시간을 시각적으로 표현할 수가 없기 때문이다. 그러다가, 시간을 보여줄 수 없으면 그냥 0.4초 사이에 인터랙션이 일어나야 하는 것이 중요하니까, 0.4초 이상으로 대기시간이 길어질 경우 이 서비스가 어떻게 고객 이탈을 방지하는지 보여주면 안될까 라는 생각이 들어서 로딩 화면을 캡쳐해 보았다. 기본적으로 콘텐츠 로딩 시 위와 같이 움직이는 요소를 활용해 사용자로 하여금 '로딩 지연'을 인식시키고 있다. 그리고 우측 화면의 경우 (저것이 스켈레톤인지 정확하게 판단하기는 어려웠지만) 골자를 미리 보여주어 사용자의 불안함을 덜어준게 아닐까 했다.


매거진의 이전글 메가박스 앱의 Good UX, Bad UX(1)
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari