커머스 목록 UX의 유용성과 혼란 사이 균형 잡기
기획을 고민하다 보면 무엇도 더하지 않고 단순함을 추구할지, 복잡함의 길로 갈 것인지 두 갈래 선택 앞에 서서 갈등하게 되는 순간이 반드시 있습니다.
커머스에서의 상품 목록은 그런 갈등을 안겨주는 대표적인 영역 중 하나입니다.
하나의 목록에 여러 상품이 한 번에 전시되어 있기 때문에 태생적으로 복잡함이 더해지기 쉬운 속성을 가지고 있습니다.
거기다 상품 수가 늘고 커머스 경쟁이 심화되면서 서비스가 사용자에게 '여기 좀 봐주세요' 하고 내세워야 할 것들이 많아졌습니다. 사용자가 쇼핑에 필요할 정보, 회사에서 전략적으로 밀고 있는 피쳐, 비즈니스 부서에서 시행 중인 프로모션 강조 같은 것들이요.
기획자는 편의를 위해 사용자가 목록에서 더 다양한 정보를 확인하면 좋겠다고 생각하다가도, 너무 많은 정보가 화면의 복잡도를 높여 사용자의 피로도를 높이는 것은 아닐까 걱정을 하게 되죠.
하지만 복잡함을 피해 단순하게 만드는 것만이 답은 아닙니다. UX 학자 도널드 노먼은 저서 <복잡한 세상의 디자인>에서 복잡함에 대해 이렇게 말합니다.
복잡함 자체는 좋은 것도, 나쁜 것도 아니다.
나쁜 것은 혼란스러움이다.
단순함(Simplicity)은 긍정적으로, 복잡함(Complexity)은 부정적으로 쉬이 분리되곤 하지만, UX 관점에서 본다면 단순과 복잡을 좋고 나쁨의 가치 판단 기준으로 삼을 수 없습니다.
다만 혼란스러움(Confusion)이 사용자들의 인지 부하를 높이거나 행동을 방해하는 부정적인 속성이기 때문에 디자이너가 이 혼란스러움을 인지하고 제거할 수 있어야 합니다.
사용성과 관련해 자주 인용되는 UX 심리학 법칙 중 테슬러의 법칙이 설명하듯, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재합니다.
이미 복잡한 상태인 시스템을 시각적으로 표현해야 하는 UX가 단순함만을 추구한다면 나머지의 복잡함은 사용자가 감당해야 합니다. 단순함에서도 사용자는 혼란스러움을 느낄 수 있다는 겁니다. 지나치게 많은 요소를 담고 있는 화면이 혼란스러움을 주는 건 말할 것도 없고요.
도널드 노먼과 심리학 법칙을 빌려 복잡함을 잘 다뤄야 한다는 결론을 얻었습니다. 그렇다면 이 결론을 가지고 커머스 상품 목록 UX로 다시 돌아가 복잡함을 어떻게 사용자가 혼란스럽지 않도록 잘 다룰 수 있을지 생각해 봅시다.
모바일로 쇼핑할 때를 떠올려 봅시다. 서비스를 이용하는 목적에 따라 목록에서의 사용자 행동이 달라집니다. (쇼핑 유형별 이커머스 전시영역 기획 전략 참고) 정확히 사고 싶은 제품을 검색하고 서서히 한 상품으로 좁혀갈 때의 목록 확인 방식(목적형 쇼핑)과 상품군 위주로 여러 상품을 탐색하고 훑어볼 때의 목록 확인 방식(발견형 쇼핑)은 확연히 다릅니다.
목적형 쇼핑 사용자는 검색과 필터, 정렬과 같은 기능을 활용하고 상품을 상세히 확인하고 싶을 때 상세 페이지로 접근합니다.
발견형 쇼핑 사용자의 경우 목록을 좀 더 빠르게 스크롤하며 정보를 '훑어보며' 확인합니다.
이때, 빠른 탐색과 판단에 필요한 정보를 목록에서 바로 확인할 수 없다면 목록-상세 간의 전환이 아주 빠르게 반복적으로 일어나겠죠. 상품을 클릭해 상세 페이지로 진입하고, 로딩을 기다리고, 긴 페이지 스크롤 속에서 필요한 정보를 찾아 확인하고, 그 정보를 기억해 다시 돌아 나오는 것은 사용자에게 인지 부하를 줄 수밖에 없습니다.
게다가 목록을 계속해서 확인하다 보면 전에, 전전에, 전전전에 본 상품은 내가 찾는 컬러가 품절이었나? 를 생각하며 다시 돌아가야 할 수도 있습니다.
모든 커머스는 어느 정도의 상품 상세 정보를 목록에서 제공해야 할 필요가 있지만, 그중에서도 발견형 쇼핑을 중심으로 설계되어 있는 서비스에서는 목록을 빠르게 훑어보는 사용자 행태를 고려해 여러 정보를 목록에서 바로 확인할 수 있도록 하는 것이 더 중요합니다.
너무 당연한 말이라고요? 하지만 우리는 무심코 공급자 중심으로 생각하고 그것을 서비스에 반영하고 있습니다.
예를 들어, 우리 서비스에 기본적으로 제공되는 회원 등급 할인율이 있고, 블랙 프라이데이에 맞춰 추가 할인이 제공된다고 가정해 봅시다. 상품 목록에서부터 배지, 태그 등의 강조 요소들로 회원할인 NN%, 블프 특별 추가할인! 같은 정보를 중복적으로 던진다면 사용자는 혼란스럽습니다. 그래서 내가 얼마나 할인받게 되는 건데? 최종 가격이 얼마냐가 중요하지 블프 할인이건 회원 할인이건 알 바 아니거든요.
정보는 사용자 입장에서의 상품 이점을 중심으로, 하나의 속성에 단일한 정보를 제공하는것이 좋습니다. 가격, 배송, 상품 옵션, 리뷰 등 정보를 제시할 때 사용자가 마주쳤을 때 머릿속에서 계산을 여러번 소화해야 하는 혼란스러움은 반드시 제거해야 합니다. 한 모듈에 정보가 많이 들어가더라도 명확한 정보 전달만 된다면 오히려 더 효율적인 탐색에 도움을 줄 수있을 것입니다.
사용자에게 필수적인 정보
사용자가 인식하는 정보끼리의 유사성
우리가 사용자에게 반드시 강조하고 싶은 항목
일반적으로 커머스 서비스를 이용하면서 익숙한 체계와 위계
등을 고려해 목록의 상품 모듈의 체계와 위계를 기획해야 합니다.
필수 정보는 강조해 보여주고, 덜 중요한 건 팝업이나 아코디언에 숨기고, 비슷한 요소들끼리는 같은 UI로 묶어서 사용자가 목록을 살피면서 피로가 아닌 흥미를 느낄 수 있도록 다양한 요소를 고민해 봅시다.
얼마나 더/덜 보여줄까에 집중해있다 보면 본질을 잊게 됩니다. 잠깐 기획서에서 눈을 떼고 질문해 봅시다.
이 복잡함이 필요한가?
우리는 어떤 서비스인가?
무엇을 보여줘야 할까?
어떻게 잘 보여줘야 할까?
묻고 충분히 고민하고 나서 다시 기획서로 돌아옵시다. 답이 좀 선명해지는 좋은 질문이었다면 좋겠습니다.
<도널드 노먼의 UX 디자인 특강> 도널드 노먼
https://www.yes24.com/Product/Goods/59673763
<생각에 관한 생각> 대니얼 카너먼
https://www.yes24.com/Product/Goods/59580017
Minimize Cognitive Load to Maximize Usability
https://www.nngroup.com/articles/minimize-cognitive-load/
No More Pogo Sticking: Protect Users from Wasted Clicks
https://www.nngroup.com/articles/pogo-sticking/
Do People Scroll? What Information Foraging Says
https://youtu.be/-0VkrTNSNgg?si=fSOCwuhsIy5LUf-O
The Road to Maximum Usability Leads through Minimal Cognitive Load
https://ergomania.eu/cognitive-overload-reduce-cognitive-clutter-and-load-in-ux/
User-centric vs. Maker-centric Language: 3 Essential Guidelines