UX 심리학 ‘힉의 법칙'으로 바라본 서비스 디테일
선택의 가이드가 되어 주는 범위 필터 UX
쇼핑은 선택의 연속입니다. 품목을 고르고, 비슷한 상품을 비교하고, 결정하기까지 매 순간 정보를 소화하고 의사결정을 내려야 합니다.
너무 많은 상품들 사이에서 결정을 내리지 못해 갈팡질팡 하다가 구매를 포기하고 돌아섰던 경험이 다들 한 번쯤은 있을 거예요. 오히려 열 개 이하의 한정적인 선택지만 주어졌을 때 선택하기가 더 수월하게 느껴지기도 합니다.
이런 현상은 바로 UX 심리학 법칙 중 하나인 힉의 법칙(Hick's Law)으로 설명할 수 있습니다.
힉의 법칙 (Hick's Law)
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
중요한 정보를 찾기가 어렵거나, 선택지가 너무 많은 경우, 사용자는 선택지를 파악하고 자신의 목표와 가장 관련 있는 것을 가려내는 작업부터 해야 하므로 의사결정이 늦어집니다. 이것을 인지 부하(cognitive load)가 늘어난다고 합니다. 이때 인터페이스나 프로세스를 단순하게 만들어 사용자의 인지 부하를 줄여 줘야 합니다.
힉의 법칙을 커머스 UX에 적용한 사례 중 하나로 필터를 들 수 있겠습니다.
상품만 나열되어 있는 목록은 목적성이 있는 사용자에게 불편한 경험을 줄 수 있어요. 안 그래도 사용자가 직접 해야 할 태스크가 많은 인터넷 세상인데 서비스 곳곳에서 인지 부하를 늘리는 요소가 자꾸 등장한다면 이탈이 발생할 수도 있겠죠.
필터 기능을 활용하면 원하는 조건의 상품만 보거나 원하지 않는 조건의 상품은 걸러내는 방식으로 소화해야 할 정보량을 줄이고 원하는 상품에 더 쉽고 빠르게 도달할 수 있습니다.
이 글에서는 사용자의 인지 부하를 줄여주는 도구 중 하나인 범위 필터에 집중해, 여러 서비스들이 어떻게 힉의 법칙을 활용해 사용자의 인지 부하를 줄이고 선택에 도움을 주는지 확인해 보았습니다.
1. 네이버 쇼핑 가격 필터
가격 필터는 사용자가 가격을 고민하고 직접 숫자를 입력해야 하기 때문에 사용이 불편한 편입니다. 네이버쇼핑은 검색 결과에서 가격 분포와 구간별 선택지를 제공함으로써 사용자의 의사결정에 단서를 제공합니다.
네이버(iOS 11.22.2)(1) 검색결과에서 가격 필터를 선택하면 해당 검색 결과의 가격대별 상품 분포를 막대그래프로 확인할 수 있고, 숫자를 직접 입력하거나 슬라이더를 활용해 가격 범위를 지정할 수 있습니다.
(2) 그 위에 가격대 범위를 단건 선택 가능한 선택지로 구성해 선택할 수 있게 하고, HIT 아이콘으로 추천 선택지를 강조하고 있습니다.
(3) 특히나 네이버 쇼핑의 가격 필터가 유용한 가이드가 되는 이유는, 검색 결과의 가격대에 따라 가격 범위가 다르게 제시되는 점입니다.
1만 원 내외의 저가 상품이 많은 ‘노트’ 검색어에 대해선 1천 원~2천 원, 3천 원~7천 원 과 같이 낮은 가격대에 좁은 범위의 선택지를, ‘노트북’ 검색어에 대해서는 24만 원~36만 원, 36만 원~58만 원 과 같이 높은 가격대에 넓은 범위의 선택지를 보여주고 있습니다.
검색 결과 상품의 가격 분포에 따라 자동으로 계산되어 노출되고 있을 것으로 보입니다.
품목별로 적절한 가격대의 상품을 탐색하고자 하는 사용자의 목표를 빨리 달성할 수 있도록 가격과 관련된 여러 정보를 제공하고 선택지를 단순화해 인지 부하를 줄여주고 있습니다.
2. 에어비앤비 숙소 필터
에어비앤비 (iOS 23.17.2)에어비앤비는 숙소 예약의 특수성을 잘 반영해 숙소 유형별 가격 평균과 선택한 숙소 유형의 가격 분포를 막대그래프로 보여주고 있습니다.
도시별로 숙소 평균 가격대가 다르다 보니 막 숙소 탐색을 시작하면 어떤 가격을 기준으로 잡고 비교해봐야 하는지 바로 파악이 어려워 헤매기 쉬운데요. 에어비앤비 숙소 필터에는 숙소 유형별 가격 평균과 분포가 직관적으로 제공되고 있어 사용자의 인지 부하를 줄여 주는 좋은 가이드가 됩니다.
3. 당근마켓 내 동네 설정
당근마켓 (iOS 23.19.0)일반적으로 지도 기반의 서비스에서는 줌인, 줌아웃으로 화면을 조정해 보고 있는 화면 내에서 장소 검색을 하는 등 사용자가 원하는 대로 지도 내 탐색의 범위를 설정할 수 있죠.
하지만 당근마켓은 거래 범위인 ‘내 동네’를 사용자가 직접 조정하도록 하지 않고 4개의 선택지만을 제시하고 있습니다. 내가 인증한 동네를 기준으로 가까운 동네에서부터 먼 동네까지의 총 4개의 범주를 보여주고, 각각의 범위에 해당하는 동네는 시스템에서 자동으로 설정해 주는 방식입니다.
사용자는 원하는 거래 행태에 따라 가깝거나 멀게 동네를 설정하면 될 뿐입니다. 집 근처에서 직거래를 하는 게 편하다면 가까운 동네만 보고 싶을 것이고, 다양한 물건을 탐색하고 싶다면 먼 동네의 게시글까지 확인하는 식으로요.
사실상 구체적인 거리나 행정 구역을 선택하도록 하는 것은 복잡성만 높일 뿐 사용자의 편의 측면에서는 제한된 범위로만 선택할 수 있도록 하는 것이 더 나은 방식으로 보입니다.
4. 트립닷컴 항공권 출도착시간 필터
범위 필터를 많이 사용하게 되는 조건 중 하나는 바로 시간이죠. 항공권 예약할 때 출도착시간 설정은 여행 계획에 많은 영향을 미치기 때문에 굉장히 중요한 필터라고 할 수 있겠습니다.
여러 항공권 판매 중개 서비스에서는 시간 범위 지정 필터에 대해 서로 다른 UI를 제공하고 있습니다.
스카이스캐너(iOS 7.88), 네이버(iOS 11.22.2)스카이스캐너는 항공편 출발 및 도착 시각을 각각 슬라이더로 설정할 수 있도록 합니다. 1시간 단위로 티커가 있고요. 같이 보여드리는 서비스들 중에서는 가장 단순한 형태의 범위 설정 방식을 제공하고 있습니다.
네이버 여행상품은 항공편 시간을 종일(전체)과 새벽, 오전, 오후, 밤에서 7개의 시간대로 범주화 한 뒤 중복 선택 가능한 버튼으로 만들어 사용자가 원하는 출도착 시각을 선택할 수 있도록 합니다.
트립닷컴 (iOS 7.76.3)트립닷컴 역시 출도착 시간을 지정하는데 일반적인 슬라이더 UI를 제공합니다.
트립닷컴의 세심한 설계가 눈에 띄었던 포인트는,
(1) 슬라이더 바에 00시부터 24시까지 시간대를 4개 구간으로 분절해 표시해 두고, 핸들을 옮기면 시간대에 맞춰 핸들의 디자인이 바뀐다는 점입니다.
시간 범위를 8개의 선택지로 줄인 네이버 여행상품 서비스에 비해 사용자의 자유도가 높지만, 시간대의 분절을 명확히 표현해 사용자의 인지를 범주화하면서도 필요에 따라 세심하게 조정할 수 있도록 오픈해 두었다는 점이 인상적이었습니다.
(2) 이리저리 검색하다 보면 헷갈릴 수도 있는 출발 도시, 도착 도시와 설정된 출발 시간을 슬라이더 상단에 다시 보여줘 인지 부하를 줄이고,
(3) 누군가에겐 필요할 수 있으나 필수적이진 않은 현지 도착 시간은 출발시간 바로 아래에 아코디언으로 접어 둠으로써 혼동이 없도록 구성했습니다.
가격이나 시간, 공간 등 연속성이 있는 대상에 대한 범위 설정은 사용자가 직접 모든 것을 입력하게 할 수도 있겠지만 오히려 선택권의 자유도가 너무 높아 혼동을 불러일으킬 수 있습니다.
검색 결과의 가격 분포도나 평균을 제시함으로써 선택에 가이드를 줄 수 있고, 판매 상품의 특성에 따라 범위를 몇 개의 선택지로 제한해 준다면 사용자의 선택에 도움을 줄 수 있을 거에요.
범위 필터 하나만 해도 각자가 주는 사용자 경험이 다 다르죠. 하지만 모든 것이 무작정 단순한 방향으로 바뀌어야 하는 것만은 아닙니다. 선택지를 줄여야 한다고 해서 사용자가 필요로 하는 정보까지 생략하고 무작정 심플하게만 만들면 오히려 더 혼란스러울 수 있으니까요.
결국 어떤 UX 법칙, 심리학 법칙 같은 것이 유효하려면 내가 기획하는 서비스 사용자의 목표를 정확히 이해하는 일이 가장 중요합니다.
나의 서비스에서 무엇을 제공할 수 있는지 (비즈니스) 그리고 사용자는 무엇을 원하는지 (사용성)을 사이에서 균형을 잘 잡아야 진짜 의미 있는 '단순함'을 만들 수 있을 것입니다.
참고자료
Hick's Law
https://lawsofux.com/hicks-law/
<UX/UI의 10가지 심리학 법칙> 존 야블론스키
