옵션 간의 차이점을 명확하게 설명하기
닐슨 노먼 UX 블로그 번역
닐슨노먼 그룹에서 발행한 아티클을 번역하였습니다. 우리나라 예시도 추가하였습니다.
원문: https://www.nngroup.com/articles/explicit-differences/
요약: 옵션 간 주요 차이점이 명확하게 보이지 않으면, 사용자는 잘못된 옵션을 선택하거나 기능을 오해합니다.
사용자는 선택의 폭이 매우 넓습니다. 좋은 서비스는 사용자가 스트레스 없이 옵션을 분석하고 정확한 정보에 의한 결정을 내리기 쉽게 만듭니다.
서비스에서 의사 결정을 도와주는 방법은 선택 옵션을 명확하게 구분하는 것입니다. 최소한의 구분으로 옵션에서 다른 속성을 강조하고, 많은 차이점이 있는 선택에서 주요 차이점을 지적하면 사용자가 선택을 하는 데 용이하게 할 수 있습니다.
Explicitness Guidelines
명시성 가이드라인
출처 : 닐슨 노먼 그룹유저가 옵션을 스스로 파악하고 우선순위를 잘 정한다고 가정하지 마세요. 명확한 차이점이 없으면 유저는 모든 선택이 같다고 생각하거나 가장 작은 차이에 대해 걱정할 가능성이 높습니다. 유저의 의사 결정 프로세스가 느려지고 불필요하게 복잡해지질 수 있습니다.
유저가 올바른 결정을 내리도록 도와주는 두 가지 방법이 있습니다.
1. 차이점 강조하기
옵션이 몇 가지 속성에서만 다른 경우 비교하는 표에서 해당 기능 강조를 표시하거나 목록 맨 위로 이동합니다. 때로는 모든 제품에 대해 같은 속성은 셀을 병합하여 추가 명확성을 얻을 수 있습니다.
Amazon✅ 좋은 예시 Amazon : Breville 에스프레소 머신 제품군 비교. 사용자가 6가지 간단한 차원에서 전체 제품군을 쉽게 비교할 수 있도록 시각적 요소를 제공합니다.
2. 중요한 부분을 강조하기
차이점들 중에 중요한 것이 몇 가지뿐이라면, 주요 차이점을 강조해서 유저가 중요한 것에 집중할 수 있도록 합니다. 또한 점진적으로 공개해서, 디테일한 세부 정보를 필요로 하는 사람들한테만 제공하고 일반 사용자에게는 부필요한 정보를 과도하게 제공되지 않게 할 수도 있습니다.
fastpens.com안 좋은 예시 fastpens.com : 이 표는 펜의 차이점을 두드러지게 알려주지 못하고, 차이점이 왜 중요한지도 명확히 하지 않습니다. fastpens.com은 두 가지 원칙을 따르지 않아 사용자가 자신의 필요에 맞는 펜을 결정하기 어렵게 만들었습니다.
Great Clips좋은 예시 Great Clips: 헤어스타일의 차이점을 강조하기 위해 이미지와 헤어스타일이 어떻게 인식되는지에 대한 정보를 줍니다, Check it out을 클릭하면 더 많은 차이점(헤어스타일 유지 관리 등)을 설명합니다.
Explicit Copy
명시적 사본
옵션에 대해 몇 가지 간단한 차이점만 있어도, 사본이 정확한 차이점을 상상에 맡긴다면 유저는 옵션을 간과하거나 오해할 수 있습니다.
Le Creuset좋은 예시 Le Creuset : 사용자가 1쿼트의 크기를 알고 있다고 가정하는 대신, 냄비 크기의 차이를 보여주기 위해 제공량을 사용했습니다.
예를 들어, 대학 웹사이트 사용성 연구에서 대학생의 수업료(Tuition)를 설명하는 다양한 방법을 테스트했는데요, 혼란스러운 표현과 사람들의 주의력 차이로 거주자, 비거주자 수업료를 구별한 가능성이 낮았습니다.
아래 표에서도 주내 학생(in state)과 주외 학생(out od state tuition)의 차이가 있지만 설명이 부족하고, 이 용어에 대해 익숙하지 않은 사람은 의미를 오해할 수 있습니다.
University of West Virginia:안 좋은 예시 웨스트버지니아 대학교: 학비 추정 비용을 보여주는 표. 사람들이 In-state와 Out-of-state라는 용어의 차이에 익숙하다고 가정합니다.
또한 주거비(housing expenses)에 대해 혼란스러울 수 있습니다. 캠퍼스에 거주하는 사람만 적용되는지, 부모와 사는 것도 포함되는지 명시되지 않았습니다. 캠퍼스 내 숙박비나 기숙사 비용을 명확하게 밝히는 것이 좋습니다.
마지막으로 표에 모든 주요 차이점이 명시되지 않았습니다. 특정 전공과 관련된 추가 비용을 확인하기 위해 다른 페이지로 이동해야 했습니다.
반면 캘리포니아 대학교 샌디에이고는 옵션의 차이를 명확하게 보여줍니다. 거주자 앞에 주를 포함해서 용어의 모호성을 줄였고, 비용에 따른 수업료의 차이를 명확하게 구분했습니다. 모든 주택 옵션에 대한 예상 비용을 나열해서 잠재적인 주택 비용도 명확히 했습니다.
캘리포니아 대학교 샌디에이고좋은 예시 캘리포니아 대학교 샌디에이고: 참석 비용을 추정하기 위한 자세하고 명확한 표
Why does it matter?
왜 중요한가요?
좋은 UX는 유저가 처음에 올바른 선택을 하도록 돕거나, 실수를 하더라도 서비스의 잘못이 아니라고 느끼게 합니다. 옵션의 차이점을 명확하게 드러내는 것은 올바른 선택을 돕는 첫 번째 단계입니다.
옵션의 차이가 제대로 보이지 않으면 유저는 잘못된 옵션을 선택할 가능성이 커집니다. 잘못된 옵션을 선택하면 시간을 낭비하고 좌절하고, 때로는 돈을 낭비할 수도 있습니다. 실수를 알아채고 돌아가서 올바른 선택을 찾는 수고로움도 듭니다. 서비스에서 저지른 실수 하나만으로도 회사의 평판이 손상될 수도 있습니다.
Guaranteeing Explicitness
명시성 보장하기
항상 말했듯이, 우리는 유저가 아닙니다.
암묵적 차별화와 명시적 차별화의 구분은 옵션을 제공하는 모든 서비스의 핵심 사용성 요인 중 하나입니다. 간과하는 사람이 많습니다. 디자인 회의에서 "X는 당연해요".라고 하더라도, 조직 외부의 사람들에게는 당연하지 않을 수도 있다는 것을 기억하세요. 더 명확하게 설명할수록 (특히 차이점) 사이트가 더 성공할 가능성이 높아집니다.
옵션을 비교하는 UI는 많이 볼 수 있습니다.
특히 무언가를 구매할 때 표로 비교해 주는 경우가 많습니다.
애플애플의 맥북프로 구매 비교화면입니다.
정확히 어떤 것이 다른지 한눈에 비교하기 어렵습니다. 저장용량이 다르네요. 어떤 점이 다른지 표시해 주면 유저는 더 빠르게 비교할 수 있습니다.
쿠팡의 화면을 보면 옵션을 선택할 수 있는데요, 일반과 와우쿠폰할인가, 쿠폰할인가가 어떻게 다른지 내가 받을 수 있는 할인인지 명확하지 않습니다. 단위당 가격이 쓰여 있어서 좋은데요, 가장 낮은 가격에 표시가 되어있다면 더 좋을 것 같아요. (원래 표시가 되었던 것 같은데 별로 차이가 안 나서 그런지, AB테스트 중인지 없어졌네요.)
카드 혜택들을 비교해 볼 수 있는 카드고릴라의 화면입니다. 카드고릴라의 경우 같은 항목을 다르게 표현해서(1,000원당 1 마일리지 / 1 천원당 1 스카이패스 마일리지) 더 비교가 어렵습니다.
스픽의 구매 화면에서는 두 가지 옵션의 차이를 명확하게 보여줍니다.
싱가포르 에어라인에서도 여러 옵션들 중 유저가 정말 원하는 가장 낮은 가격들을 잘 보여줍니다.
