사용자의 마음을 사로잡는 UX 디자인 원칙
힉의 법칙, 피크엔드 법칙, 테슬러의 법칙에 대하여
오늘은 사용자의 마음을 사로잡는 다양한 UX 디자인 원칙 중 힉의 법칙, 피그엔드 법칙, 테슬러의 법칙에 대해 소개하려고 한다. 각 법칙을 간단한 이론 설명과 함께 실제 앱의 사례를 통해 살펴보자.
힉의 법칙
정리 : 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
1. 선택지 증가에 따른 결정 시간 증가 : 힉의 법칙은 선택할 수 있는 옵션이 많아질수록 결정에 필요한 시간이 증가한다는 원리를 강조한다.
2. 정보 처리 부담 : 많은 선택지는 사용자가 관련 정보를 이해하고 비교해야 하므로, 이로 인해 결정에 소요되는 시간이 늘어나게 된다.
3. 단순화 및 핵심 요소 집중 : 주요 기능이나 핵심 옵션에 중점을 두고 불필요한 선택지를 최소화하여 사용자가 보다 빠르게 결정을 내릴 수 있도록 돕는 것이 좋다.
힉의 법칙 사례 1 : 29cm
온갖 선택지를 마구잡이로 보여주기보다 필요한 선택지를 적시에 제공해야 사용성이 좋아진다
1. 유저의 성격에 따른 홈화면 선택지 제공 : 나와 관련 없는 모든 정보가 표출되어 나에게 필요한 정보를 선별하는 수고를 거칠 필요가 없다. 나에게 필요한 선택지를 선택 후 선별된 정보를 탐색할 수 있다.
2. 선택지를 그룹화하고 카테고리를 탭으로 분리 : 카테고리 내 탭을 내용 및 시각적으로 명확하게 분리하여 복잡성을 줄였다.
3. '상의' 화면 진입 후 '다양한 상의 카테고리' 제시 : 중분류 화면에 진입한 후, 소분류 카테고리를 제시한다. 즉, 화면의 플로우를 적절히 나누어 모든 선택을 한 번에 하도록 하지 않고 각 단계별로 분리하여 선택할 수 있도록 돕는다.
힉의 법칙 사례 2 : 올림프트레이드
이미지 몇 장을 제시한 후 유저에게 실제 사용 화면으로 갑자기 떨어뜨리는 온보딩이 아닌, 기능을 한 가지씩 하이라이트 하여 사용 방법을 점진적으로 제시한다.
➡️ 유저가 트레이딩을 실제로 경험해 볼 수 있는 직접 참여 방식의 온보딩을 제공한다.
4. 총 단계 정보 제공 : 온보딩의 총단계수를 알려주고 지금 몇 단계인지 함께 표출하여 사용자의 부담을 덜어준다.
최종 정리
모든 사용자에게는 저마다의 목표가 존재하며, 불필요하거나 목표 달성에 도움 되지 않는 요소를 제거하는 과정이 디자인 프로세스에 꼭 필요하다.
사용자가 목표 달성을 향해 달려가는 과정에서 고민을 덜 하면, 사용자의 목표 성취는 더 높아질 것이다.
피크엔드 법칙
정리 : 인간은 절정의 순간과 마지막 순간에 느낀 감정으로 경험을 판단하곤 한다.
1. 경험의 절정 순간이 중요 : 어떤 활동이나 경험이 사용자에게 절정의 순간에 긍정적 경험을 제공할 경우, 전반적인 평가에 긍정적인 영향을 미칠 가능성이 높다.
2. 경험의 마지막 순간의 영향 : 사용자가 어떤 경험을 어떻게 마무리하는지가 기억에 강하게 남는다. 마지막이 긍정적으로 마무리되면 전반적인 평가가 좋아지는 경향이 있다.
3. 부정적일 경우에도 동일 : 경험의 절정의 순간이나 마지막 순간이 부정적일 경우, 전체 경험을 부정적으로 평가하게 된다.
피크엔드 법칙 사례 1 : 토스
결정적 순간에 사용자의 성취감을 고취하고 경험을 개선하여 서비스에 긍정적 인상을 남긴다.
출처 : https://uibowl.io/✅ 송금 마지막 단계에서 깜짝 이벤트 제공하여 긍정적 경험을 선사
1. 송금이 목적인 유저들은 대부분 이체를 완료하면 앱을 종료할 것이기에, 송금 후의 화면은 경험의 마지막 단계에 해당할 것이다.
2. 토스는 송금 마지막 단계에서 깜짝 이벤트 제공하여 사용자의 흥미 유발과 동시에 소액의 포인트를 제공하여 긍정적 경험을 선사한다.
(*해당 이벤트는 현재 진행하지 않을 수 있습니다.)
피크엔드 법칙 사례 2 : 배달의 민족, 쿠팡잇츠
부정적인 경험을 하기 쉬운 대기 시간은 제품이나 서비스에 큰 영향을 미칠 수 있다. 다양한 서비스들이 대기시간에 관한 인식을 개선하여, 서비스 이용 중의 부정적 감정이 절정에 이르지 않도록 했다.
출처 : https://uibowl.io/✅ 불가피한 대기시간의 경험 개선
1. 유휴시간에 대한 거부감 개선 (*유휴시간 : 컴퓨터가 작동 가능한데도 작업을 하지 않는 시간)
현재 배달 기사님이 어디로 움직이고 있는지 실시간으로 애니메이션을 보여주어 정보와 즐거움을 모두 제공한다.
2. 점진적 목표 달성 효과
배달을 받는 프로세스를 단계별로 나누어, 현재 내 주문이 어느 단계에 도달했는지 알 수 있다. 이를 통해 내가 주문한 음식을 받기 위한 목표에 점진적으로 다가가고 있다는 느낌을 받게 한다.
최종 정리
사용자는 서비스에 대해 좋은 기억을 갖고 있을 때, 서비스를 재사용하거나 다른 사람에게 추천한다.
이때 사용자는 감정적 절정의 순간과 마지막 순간에 느낀 감정의 평균을 가지고 경험에의 기억에 대해 판단한다.
전체 경험을 긍정적으로 기억하게 하기 위해서, 서비스의 절정과 마지막 순간에 각별한 주의를 기울여야 한다.
테슬러의 법칙
정리 : 모든 애플리케이션과 프로세스는 완전 없애거나 감출 수 없는 일정량의 복잡성이 존재한다.
1. 복잡성의 보존 : 어떤 부분에서라도 복잡성을 제거하면, 다른 부분에서는 반드시 그만큼의 복잡성이 증가한다는 것을 의미한다. 따라서 디자이너는 사용자 경험을 향상시키기 위해 복잡성을 최소화하면서도 전체적인 복잡성을 고려해야 합니다.
2. 사용자 부담 줄이기 : 복잡성을 완전히 없앨 수는 없지만 간단한 표현을 통해 사용자가 해야 하는 수고를 줄일 수 있으며, 이때 디자이너와 개발자가 복잡성이라는 짐을 사용자 대신 부담할 수 있다.
테슬러의 법칙 사례 1 : 토스 송금 프로세스
토스는 송금과정에서 필수적인 계좌번호 입력과 은행 선택 과정을 사용자가 직접 입력할 필요가 없게끔 간소화하여 서비스를 제공한다.
1. 타 서비스에서 계좌번호 복사 후 앱 진입
1-1. 송금 화면에 진입할 필요조차 없음 : 복사한 정보가 있을 경우, 유저가 직접 붙여 넣어 내용을 채우지 않아도 바로 송금 가능한 버튼을 띄운다.
1-2. 잔액 정보 함께 제공 : 화면을 이탈해서 잔액을 확인해야 하는 수고를 덜어준다.
2. 송금 화면에서 계좌번호를 직접 입력
2-1. 연관 은행 목록 노출 : 계좌번호만 입력해도 연관된 은행을 바로 띄워주어 수많은 은행을 탐색해야 하는 부담을 덜어준다.
➡️ 절차상 필수적인 내용을 입력하는 과정을 간소화
*은행 이름 목록 노출 기능은 토스 아티클에서 더 상세한 내용이 확인 가능하다.
토스 아티클 보러가기 : 송금할 때 은행 이름을 꼭 입력해야 할까요?
테슬러의 법칙 사례 2 : 쿠팡 결제 프로세스
물건을 주문하고 결제하는 프로세스에서 필수적인 요소들을 재입력하는 수고를 덜어주어 사용자가 보다 쉽게 결제할 수 있도록 돕는다.
✅ 상품 화면에서 바로 결제 가능
장바구니나 결제 화면으로 연결되지 않고, 바텀시트 내의 '밀어서 결제하기' 버튼을 통해 바로 결제가 가능하다.
3. 배송지 정보 저장 : 배송지 정보 입력 단계를 생략한다.
4. 결제 정보 저장 : 카드앱을 호출하는 단계를 생략하고 어떠한 절차 없이 바로 결제가 이루어진다.
최종 정리
모든 디자인 프로세스에는 아무리 노력해도 제거되지 않는 복잡성이 존재한다는 사실을 인정해야 한다.
디자이너와 개발자가 사용자를 대신해 최대한 복잡성을 잘 처리해야 한다.
이때 지나친 단순화는 경계해야 한다.
법칙들을 공부하다 보면, 각각의 법칙은 절대적이고 독립적이기보다 연쇄적으로 이어져 있음을 알 수 있다.
때문에 법칙들의 이름을 정확하게 아는 것보다, 해당 법칙이 왜 필요하며 어떤 상황에서 사용해야 하는지를 판단하는 능력이 더 중요하다고 생각한다.
무엇이든 아는 만큼 보이며 아는 만큼 확장할 수 있다.
법칙에 대한 이해를 통해, 서비스를 디자인할 때 창의성을 발휘하고 이해관계자들을 보다 용의 하게 설득할 때 사용할 수 있기를 바란다.
