힉스의 법칙: UX도 다이어트가 필요합니다

힉스의 법칙이란?

사용자가 고려해야 할 선택지가 많아질수록, 결정을 내리는 데 걸리는 시간도 길어진다는 법칙입니다. 즉, 인터페이스가 너무 복잡하거나 선택지가 많으면 사용자는 의사결정을 내리는 데 더 오랜 시간이 걸리게 되죠.

일상 속 힉스의 법칙: 할아버지 리모컨

이 사진이 많은 사람들에게 공감을 불러일으키는 이유는 간단합니다. 우리가 실제로 리모컨에서 자주 사용하는 버튼은 몇 개 되지 않기 때문입니다. '할아버지 리모컨'은 힉스의 법칙이 잘 반영된 대표적인 사례라고 볼 수 있습니다.

UX 디자인 개선 사례 살펴보기

[사례 1] 선택사항이 많아서 이탈률이 높았던 페이지 개선하기

[1] 문제점

소비자에게 다양한 선택권을 제공하는 것이 친절한 서비스라고 생각할 수도 있지만, 사실 너무 많은 선택지는 오히려 소비자의 고민을 증가시킵니다.

특히, 필수 옵션과 선택 옵션이 동일한 중요도로 노출되어 있다면 사용자들은 무엇을 선택해야 할지 더욱 혼란스러워질 수밖에 없습니다.

[2] 개선 방법

페이지 체류시간은 길지만 구매로 이어지지 않는다면, 방문자들이 고민하는 시간이 길기 때문일 가능성이 높습니다. 이 문제를 해결하기 위해 필수 선택지는 모두 노출하되, 선택 옵션은 숨겨서 사용자의 부담을 줄이는 방식을 적용했습니다.

[3] 결과

2주간의 테스트 결과, 전자상거래 전환율이 약 0.3% 상승했습니다.

필요한 정보만을 제공함으로써 사용자 경험을 더욱 긍정적으로 만들었으며, 불필요한 고민을 줄여 더 원활한 결정을 내릴 수 있도록 도왔습니다.

[사례 2] 불가피하게 많은 선택지를 제공해야 하는 페이지 개선하기

[1] 문제점

때로는 방문자가 여러 가지 선택지를 반드시 골라야 하는 경우가 있습니다.

예를 들어, 숙소 예약 과정에서 여행지, 날짜, 인원, 방 종류 등 다양한 요소를 선택해야 합니다. 하지만 선택지가 많아질수록 사용자는 '다른 사이트는 이 정도까지 선택하게 하지 않는데?'라는 생각과 함께 이탈할 가능성이 높아집니다.

[2] 개선 방법

불가피하게 많은 선택지를 제공해야 할 경우, 단계를 나눠 한 번에 하나씩 보여주는 것이 효과적입니다.

에어비앤비의 UX 디자인이 대표적인 사례로, 모바일 환경에서는 사용자가 한 번에 하나의 선택만 할 수 있도록 설계되었습니다.

최근에는 최상단이나 하단에 현재 단계를 표시하는 방식을 많이 활용합니다. 예를 들어, 총 4단계 중 1단계를 수행하고 있다는 식으로 '1/4'과 같이 표기하면 사용자가 현재 어느 단계에 있는지 쉽게 이해할 수 있어 결정 속도를 높이는 데 도움이 됩니다.

[3] 결과

페이지 수가 늘어나면 사용자가 지루해할 것 같지만, 실제로는 각 페이지별 고민하는 시간이 줄어들면서 오히려 전환율이 상승했습니다.

선택지를 한 번에 보여주면 오히려 복잡해 보이지만, 하나씩 나누어 제공하면 사용자는 더 직관적으로 선택할 수 있습니다. 또한, 공간이 여유로워져 감성적인 UX Writing과 추천 메시지 등 다양한 사용자 경험을 설계할 수 있는 장점도 있습니다.

UX 개선 포인트: 핵심만 남기세요

서비스의 핵심이 무엇인지 고민해보세요. 사용자가 목표를 빠르게 달성할 수 있도록 불필요한 요소를 제거하거나 단계별로 나눠서 제공하는 것이 중요합니다.

💡 힉스의 법칙 체크리스트

• 선택지가 많아 이탈했던 사이트가 있나요? 그 이유를 분석해 보세요.

• 각 페이지에서 사용자의 선택을 요구하는 항목이 몇 개인지 확인해 보세요.

• 꼭 필요한 것이 아닌데 결정을 요구하는 항목이 있나요?

• 사용자 입장에서 우리 사이트의 선택지를 수행하는 데 얼마나 시간이 걸리는지 테스트해 보세요.

제이콥의 법칙: 익숙함의 마법을 활용하세요

사용자는 여러 사이트에서 대부분의 시간을 보냅니다. 따라서 우리 사이트도 다른 사이트처럼 익숙한 경험을 제공해야 합니다.

제이콥의 법칙은 사용자가 기존에 경험한 디자인 패턴을 기대하며 웹사이트를 이용한다는 개념입니다. 즉, 사용자는 다른 사이트에서 사용했던 방식과 비슷한 경험을 원합니다.

일상 속 제이콥의 법칙: 처음 봤지만 익숙한 느낌

배달 앱을 두 개 이상 사용해 본 적이 있나요? 배달의민족과 쿠팡이츠를 처음 이용하더라도 주문 방식이 크게 다르지 않아 쉽게 적응할 수 있습니다.

이 법칙은 컴퓨터에도 적용됩니다. 대표적인 예가 폴더(Folder) 시스템입니다.

파일을 정리하는 방식을 현실 세계의 서류철과 비슷한 방식으로 디자인해 사용자들이 직관적으로 이해할 수 있도록 만들었습니다. 이 외에도 메모장, 내 컴퓨터, 바탕화면 등 현실 속 익숙한 개념이 디지털 환경에 적용된 사례가 많습니다.

UX 디자인 개선 사례 살펴보기

[사례] 요즘 시대에 익숙한 디자인 문법 적용하기

[1] 문제점

요즘은 다양한 웹/앱 서비스가 많이 제공되면서, 대부분 제이콥의 법칙을 따르는 UX 설계를 하고 있습니다. 하지만 기존 디자인 틀을 조금만 변경해도 사용성이 달라질 수 있습니다.

[2] 개선 방법

사용자가 상세 페이지에서 가장 먼저 체크하는 정보는 다음과 같습니다.

• 리뷰: 바로가기 버튼을 만들어 앱 하단에 배치

• 할인율: 눈에 띄도록 크기와 색상 강조

• 구매 버튼: 찾기 쉽게 배치

• 전체 정렬: 여백과 텍스트 크기를 고려하여 구성

[3] 결과

이러한 개선을 통해 테스트 기간 동안 결제 전환율이 약 0.7% 상승하는 결과를 얻었습니다.

💡 특별한 UX 설계를 위한 실무자의 팁

아이폰에는 특정 앱을 모아서 한 번에 옮길 수 있는 '프레스&탭' 기능이 있습니다. 이처럼 사용자가 직관적으로 이해할 수 있는 기능을 제공하는 것이 UX 설계에서 매우 중요합니다.

이처럼 특별한 UX를 설계하고 싶다면 우리에게 이미 익숙한 행동 패턴을 찾고, 그걸 디지털로 녹일 수 있는 방법을 고민해보세요.

개선 포인트: 익숙함에서 벗어날 땐 사용자를 꼭 배려하세요.

유튜브도 머터리얼 디자인에 걸맞은 리디자인을 계획했어요.

하지만 아무리 요즘 시대의 디자인에 익숙한 사용자라고 할지라도, 크고 작은 변화를 마주하면 일단은 낯설다고 느낄 수밖에 없습니다. 네이버의 디자인이 리뉴얼 됐을 때, 항상 사용하던 메뉴가 그 위치에 없어서 당황하는 것과 비슷한 맥락입니다.

이를 개선하기 위해서는 사용자가 익숙해질 수 있는 시간을 반드시 마련해야하고, 유튜브는 '이전 디자인으로 돌아가기'라는 버튼을 만들었습니다.

사용자를 배려한 버튼 덕분에 사용자는 해당 사이트는 물론이고, 직접적인 변화까지 보다 긍정적으로 경험하게 됩니다.

💡 제이콥의 법칙 체크 리스트

• 사용 방식이 익숙하지 않아서 이탈했거나 이탈하고 싶은 사이트가 있나요? 있다면 그 이유를 자세히 분석해 보세요.

• 여러분이 담당하는 사이트가 올드하다고 느껴진다면, 그 이유를 분석해 보세요.

• 같은 목적을 가진 사이트 가운데, 자사와 다른 방식으로 디자인된 페이지가 있다면 수집해 보세요.

• 사이트를 살펴보면서 일상생활의 메타포가 녹아있는 부분을 체크해 보세요.

• 앱이나 PC 아이콘을 보고, 사용법이 쉽게 유추되는 것과 그렇지 않은 것들을 분류해 보세요.

피크엔드의 법칙: 끝이 좋아야 기억에 오래 남습니다.

• 첫 번째 실험: 14도의 물에 손을 60초 동안 담근다.

• 두 번째 실험: 14도의 물에 손을 60초 동안 담근 다음, 전보다 1도 높은 15도의 물에 30초를 더 담근다.

총 소요 시간만 따지면 첫 번째 실험(60초)보다 두 번째 실험(90초)이 30초 가량 더 깁니다.
아이러니하게 실험 대상자들은 전보다 '딱 1도' 높았던 마지막 30초의 기억이 좋았기 때문에 두 번째 실험을 선호했습니다.

마지막 순간의 경험이 좋아야 상대적으로 더 큰 고통을 받더라도 전체 경험을 긍정적으로 받아들인다는 뜻입니다.

UX 디자인 개선 사례 살펴보기

[사례] 사용자 경험을 긍정적으로 마무리하기

[1] 문제점

피크엔드의 법칙을 잘 활용한 대표적인 사례는 Mailchimp의 메일 전송 UX입니다.
사용자는 누군지도 모르는 불특정 다수에게 메일을 보내는 것이 마냥 달갑지 않기 때문에
메일 보내기 경험을 좀 더 유쾌하기 바꾸기 위해 피크엔드 법칙을 활용했습니다.

[2] 개선 방법

• 사용자에게 보다 친근하게 다가가기 위해 자사 마스코트 '프레디'를 활용

• 사용자가 발송 버튼을 누르기 전 프레디의 손이 누를지 말지 고민하는 애니메이션

• 시간이 지나면 프레디의 손이 떨리면서 땀을 흘리는 애니메이션

• 전송을 완료하면 하이파이브 메세지를 노출

[3] 결과

이러한 개선을 통해 테스트 기간 동안 결제 전환율이 약 0.7% 상승하는 결과를 얻었습니다.

[사례] 사용자의 부정적인 감정 줄이기

피크엔드의 법칙은 마지막 단계를 긍정적으로 각인시키는 것뿐만 아니라 사용자의 부정적인 감정을 막는 데에도 유용합니다.

[1] 문제점

즐겨 읽던 만화책의 다음화를 기다리다가 포기한 적 있으신가요?
기다림은 사용자를 부정적인 감정으로 몰아갑니다.

[2] 개선 방법

시간 지연으로 인한 사용자의 부정적인 감정을 막는 대표적인 장치는 현재 상태를 표기하는 UX 디자인입니다.

[3] 결과

시간을 다루는 대부분의 서비스들에는 사용자가 얼마나 기다려야 할지 미리 알려주고, 지속적으로 피드백을 제공합니다. 사용자를 진정시키는 사용자 친화적인 UX는 고객이 알아서 서비스를 다시 찾아오게끔 만들어줍니다.

💡 피크엔드의 법칙 체크 리스트

• 마지막의 강렬한 경험 때문에 좋아하게 된 브랜드가 있나요? 있다면 어떤 점이 좋았는지 분석해 보세요.

• 부정적인 감정이 차곡차곡 쌓여서 특정 제품이나 서비스를 사용하지 않게 된 적이 있나요? 있다면 어떤 불편함 때문이었는지 분석해 보세요.

• 다른 제품이나 서비스를 사용할 때, 부정적인 감정의 피크엔드를 막기 위한 장치를 발견한 적 있나요?