27.목록아이템을 구분하기 위한 시각적 표식자들
요약:
웹페이지의 리스트에서 색상과 아이콘이 함께 사용된 시각적 표시(visual indicator) 가 있는 경우, 텍스트만 있는 경우보다 사용자가 항목을 찾는 속도가 약 37% 더 빠르다.
만약 색상과 아이콘 중 하나만 선택해야 한다면, 의미가 명확한 아이콘(icon with strong information scent) 이 색상만 사용하는 경우보다 더 효과적이다.
모바일 화면 공간은 제한되어 있고, 이동 중인 사용자는 자주 방해받거나 주의가 분산된다.
이 때문에 모바일 디자이너들은 UI를 단순화하고 불필요한 요소를 제거하려는 시도를 꾸준히 한다. 이는 훌륭한 접근이다!
하지만 어떤 종류의 ‘시각적 복잡성(clutter)’은 사실 사용자에게 도움이 되는 중요한 인터페이스 요소일 수 있으며, 단순히 공간 절약을 위해 제거해서는 안 된다.
그 대표적인 예가 바로 시각적 표시자(visual indicator) 이다.
시각적 표시자는 서로 비슷해 보이는 항목들 사이에서, 특정 항목의 중요한 특징을 빠르게 식별하도록 도와주는 시각적 ‘표시(mark)’ 이다.
일부 디자인에서는 여러 가지 종류의 시각적 표시(visual indicators) 를 동시에 사용하는 경우가 있다.
예를 들어, 전자상거래 사이트에서는 “신상품(new)”과 “세일 중(on sale)” 상품 을 각각 표시하고 싶을 수 있다.
그렇다면 이런 상황에서, 각 표시가 서로 구별되면서도 사용자가 빠르게 항목을 찾을 수 있도록 디자인하려면 어떻게 해야 할까?
이 글에서는 하나의 시각적 표시군(family of visual indicators) 안에서 디자인 차이가 사람들의 관련 항목을 찾는 능력에 어떤 영향을 주는지 를 측정한 정량적 연구 결과를 보고한다.
-
연구 개요 (About the Study)
우리는 4개의 서로 다른 모바일 페이지를 선정했다.
그중 2개는 전자상거래 상품 목록 페이지, 2개는 주식 성과 데이터 표(stock-performance data tables) 였다.
각 페이지에서, 시각적 표시(visual indicator) 로 구분하고자 하는 두 가지 유형의 항목을 정했다.
(예를 들어, 주식 성과 페이지에서는 가치가 상승한 주식과 가치가 하락한 주식을 구분하고자 했다.)
그리고 우리는 4가지 형태의 시각적 표시 쌍(visual-indicator pairs) 을 디자인했다.
각 쌍은 다음 중 하나의 방식으로 서로 다르다:
1. 텍스트만 다름 (text only):
같은 표시군 내의 각 표시가 텍스트 라벨만 다르게 표시됨
2. 색상만 다름 (color only):
각 표시가 서로 다른 색상을 가짐
3. 아이콘만 다름 (icon only):
각 표시가 서로 다른 아이콘을 가짐
4. 색상과 아이콘 모두 다름 (color and icon):
각 표시가 서로 다른 색상의 서로 다른 아이콘을 가짐
이 4가지 시각적 표시 쌍을 기반으로, 우리는 각 모바일 페이지의 4가지 버전을 설계했다.
각 페이지에는 여러 항목이 나열되어 있었으며, 그중 3개의 항목은 한 가지 시각적 표시로,
나머지 3개의 항목은 다른 표시로 표시되었다.
이 연구에는 총 96명의 사용자가 참여했다.
각 참가자는 4개의 사이트 각각에서 1가지 버전과 상호작용했다.
참가자의 과제는, 두 가지 시각적 표시 중 하나에 해당하는 항목 3개를 찾는 것이었다.
(예: “당신은 성과가 높은 주식을 찾고 있습니다. 최근 가치가 상승한 주식 3개를 이 목록에서 찾아보세요.”)
참고로, 각 참가자가 찾아야 하는 표시 유형은 무작위(random) 로 선택되었다.
각 참가자는 4가지 시각적 표시 유형(텍스트만, 색상만, 아이콘만, 색상+아이콘) 을 모두 경험했지만,
각 사이트는 한 번씩만 보았다.
또한 사이트 과제와 조건의 순서는 무작위로 배치하여 순서 효과(ordering effect) 를 방지했다.
⸻
효과 측정을 위한 UX 지표
각 시각적 표시 조건의 효과를 측정하기 위해, 다음 4가지 UX 지표를 수집했다:
1. 첫 클릭까지 걸린 시간 (Time to first click)
2. 정답에 해당하는 첫 클릭까지 걸린 시간 (Time to first correct click)
3. 전체 과제를 완료하는 데 걸린 시간 (Time to complete task)
4. 성공률 (Rate of success) – 총 3번의 클릭 중 올바른 클릭의 비율
⸻
모든 클릭 데이터는 UserZoom의 스크린샷 클릭 테스트(screenshot click testing) 를 사용해 기록했다.
또한 UserZoom 지원팀이 요청에 따라 모든 클릭의 시간 데이터(timing data) 를 제공했다.
-
텍스트만 사용한 경우: 효과적이지 않음 (Text Only: Not Effective)
모든 측정 변수에서, 텍스트만 사용한 경우보다 비(非)텍스트 기반 시각적 표시(색상, 아이콘 등)를 사용한 경우가 더 좋은 성과를 보였다.
이 결과는 사람들이 정보를 구분하고 관련 항목을 빠르고 쉽게 찾을 때, 색상(color) 이나 형태(shape) 와 같은 보조적인 단서(secondary cues) 에 의존한다는 것을 보여준다.
아래 차트는 각 시각적 표시 유형별 평균 과제 수행 시간을 나타낸 것이다.
반복측정 일반화 선형모델(repeated-measures generalized linear model)을 통해 분석한 결과, 조건 간 차이는 매우 유의미했다(p < 0.005).
쌍별 비교(pairwise comparison)에서도, 텍스트만 사용한 조건이 다른 모든 조건보다 성과가 나빴다(p < 0.05).
텍스트만 사용한 경우는 동일한 쌍 내에서 시각적 표시기의 색상과 아이콘이 모두 다른 가장 성능이 좋은 조건보다 57% 느렸다.
사용자가 처음으로 정답 항목을 찾는 데 걸린 시간(즉, 첫 번째 올바른 클릭까지의 평균 시간) 만 고려했을 때도,
텍스트만 사용한 조건은 색상과 아이콘을 모두 다르게 사용한 조건보다 56% 더 느렸다(p < 0.05).
또한, 아이콘만 사용한 조건(icon only) 이 색상만 사용한 조건(color only) 보다 약간 더 빠른 결과를 보였다(p < 0.01).
아울러, 정답 비율(percentage correct) 에 대한 조건의 영향도 근소하게 유의미한 수준(p < 0.1) 으로 나타났다.
올바른 선택의 비율은 텍스트만 사용한 표시 디자인에서 가장 낮았다.
대비 분석(contrast analysis) 결과, 텍스트만 사용한 조건은 모든 비(非)텍스트 조건을 합친 것보다 통계적으로 유의미하게 더 나쁜 성과를 보였다(p < 0.05).
-
아이콘 vs. 색상 (Icon vs. Color)
이 연구의 주요 목적 중 하나는 ‘아이콘만 사용한 조건(icon-only)’과 ‘색상만 사용한 조건(color-only)’의 차이점을 조사하는 것이었다.
인간 지각(perception)에 관한 연구에 따르면, 아이콘(icon) 과 색상(color) 은 모두 전주의적 특징(preattentive features) 에 속한다.
즉, 사람들은 화면의 각 항목을 하나하나 시각적으로 탐색하지 않아도, 이러한 특징의 차이를 비교적 빠르게 인지할 수 있다.
(지각이 사용자 인터페이스 디자인에 미치는 영향에 대해서는 Nielsen Norman Group의 하루짜리 교육 과정 “The Human Mind and Usability” 에서 더 깊이 다룬다.)
데이터 분석 결과, 아이콘과 색상 조건 간에는 ‘첫 번째 올바른 클릭까지 걸린 시간(time to 1st correct click)’에서 약한 수준의 차이가 있었다.
앞 절에서 언급했듯이, 아이콘만 사용한 조건의 참가자들이 색상만 사용한 조건보다 약간 더 빠르게 표시를 찾아냈다.
이 효과를 더 자세히 이해하기 위해, 연구진은 주식 데이터 테이블(stock tables) 에 초점을 맞췄다.
이 데이터는 아이콘만 사용한 조건에 특히 흥미롭고 도전적인 상황이었는데, 그 이유는 아이콘들이 서로 매우 비슷한 형태(위쪽 화살표와 아래쪽 화살표) 를 가지고 있었기 때문이다.
주식 테이블 데이터만 분석했을 때,
아이콘 조건이 색상 조건보다 4가지 지표 중 2가지(첫 번째 올바른 클릭까지의 시간, 첫 번째 클릭까지의 시간) 에서 통계적으로 유의미하게 더 좋은 성과를 보였다(p < 0.05).
또한 전체 과제 수행 시간(task time) 에서도 근소하게 더 좋은 성과(p = 0.08) 를 나타냈다.
주식 성과 테이블에서 아이콘만 사용한 조건(icon-only) 이 색상만 사용한 조건(color-only) 보다 더 좋은 성과를 보인 이유는 여러 가지 가능성이 있다.
1. 화살표(arrow) 아이콘은 이런 종류의 데이터에서 익숙한 디자인 요소이기 때문이다.
사용자는 주가 상승·하락 정보를 볼 때 화살표 표시를 기대하는 경향이 있다.
2. 색상은 아이콘보다 더 모호하기 때문이다.
사용자는 빨간색은 주가 하락, 초록색은 주가 상승 을 의미한다고 추론해야 한다.
이런 추론 과정은 사용자가 처음 화면을 볼 때 약간의 시간이 더 걸릴 수 있다.
반면, 위쪽 혹은 아래쪽 화살표의 의미는 직관적으로 즉시 이해할 수 있다.
-
둘 다 사용하는 것이 가장 좋다 (Both Is Best)
색상(color)과 아이콘(icon) 중 어느 쪽이 사용성(usability)에 더 강한 영향을 주는가를 두고 논의하거나 연구하는 것은 흥미로운 일이다.
그러나 실제 대부분의 사용자 인터페이스(UI) 디자인 프로젝트에서는 이 두 가지를 서로 배타적으로 선택할 필요가 없다.
우리는 색상과 아이콘을 함께 조합해 사용할 수 있으며, 각각의 표시 요소(visual indicator)가 색상과 아이콘 모두에서 다르게 보이도록 만들 수 있다.
연구 결과, 각 표시 유형마다 고유한 아이콘과 색상을 결합하여 사용하는 방식이 우리가 측정한 모든 UX 지표에서 가장 높은 성과를 보였다.
항목을 구분하는 데 하나의 방법만 사용하는 경우, 사용자가 미세한 차이를 인식할 가능성이 줄어든다.
색상만 사용하는 경우, 색각 이상(color-blind) 사용자를 지원하지 못할 위험이 있으며, 의미가 다소 모호하게 해석될 수 있다.
반대로, 비슷한 모양의 아이콘만 교체하거나 약간의 형태 차이만 두는 것은 화면을 빠르게 훑는 사용자에게 쉽게 간과될 수 있다.
즉, 서로 다른 표시를 위해 색상뿐 아니라 형태(예: 아이콘)까지 함께 다르게 설정하면,
사용자가 그것을 더 쉽게 인지하고, 관심 있는 항목을 더 빠르게 찾아낼 가능성이 높아진다.
요약하면, 사이트 내 항목을 구분하기 위한 시각적 표시군(visual indicator family) 을 고려하고 있다면 다음을 권장한다:
• 색상과 아이콘을 모두 다르게 사용하는 것이 가장 눈에 잘 띈다.
• 만약 어떤 이유로 두 개의 유사한 아이콘 중 하나를 선택해야 하거나, 두 가지 색상 중 하나를 골라야 한다면,
좋은 정보 냄새(information scent) 를 가진 고유한 아이콘을 구분 요소로 추가하는 편이 낫다.
테스트 결과, 모바일 화면에서 색상과 아이콘이 모두 다른 시각적 표시를 사용할 때,
사용자들은 텍스트만 있을 때보다 약 37% 더 빠르게 항목을 찾았다.
이번 연구에서는 이러한 표시를 데스크톱 화면에서는 테스트하지 않았지만,
결과는 유사할 것으로 예상된다.
비록 정확한 비율은 다를 수 있지만, 더 큰 화면에서는 시각적 표시가 더 잘 보이기 때문에 속도 향상 효과가 오히려 더 클 수도 있다.
이 부분은 독자 중 대학원생이나 연구자들에게 맡겨둘 과제로 남겨둔다.
(모바일 디자인의 시각적 요소에 대한 더 깊은 논의는 Nielsen Norman Group의 “Visual Design for Mobile & Tablet” 하루 과정에서 다룬다.) 둘 다 사용하는 것이 가장 좋다 (Both Is Best)
색상(color)과 아이콘(icon) 중 어느 쪽이 사용성(usability)에 더 강한 영향을 주는가를 두고 논의하거나 연구하는 것은 흥미로운 일이다.
그러나 실제 대부분의 사용자 인터페이스(UI) 디자인 프로젝트에서는 이 두 가지를 서로 배타적으로 선택할 필요가 없다.
우리는 색상과 아이콘을 함께 조합해 사용할 수 있으며, 각각의 표시 요소(visual indicator)가 색상과 아이콘 모두에서 다르게 보이도록 만들 수 있다.
연구 결과, 각 표시 유형마다 고유한 아이콘과 색상을 결합하여 사용하는 방식이 우리가 측정한 모든 UX 지표에서 가장 높은 성과를 보였다.
항목을 구분하는 데 하나의 방법만 사용하는 경우, 사용자가 미세한 차이를 인식할 가능성이 줄어든다.
색상만 사용하는 경우, 색각 이상(color-blind) 사용자를 지원하지 못할 위험이 있으며, 의미가 다소 모호하게 해석될 수 있다.
반대로, 비슷한 모양의 아이콘만 교체하거나 약간의 형태 차이만 두는 것은 화면을 빠르게 훑는 사용자에게 쉽게 간과될 수 있다.
즉, 서로 다른 표시를 위해 색상뿐 아니라 형태(예: 아이콘)까지 함께 다르게 설정하면,
사용자가 그것을 더 쉽게 인지하고, 관심 있는 항목을 더 빠르게 찾아낼 가능성이 높아진다.
요약하면, 사이트 내 항목을 구분하기 위한 시각적 표시군(visual indicator family) 을 고려하고 있다면 다음을 권장한다:
• 색상과 아이콘을 모두 다르게 사용하는 것이 가장 눈에 잘 띈다.
• 만약 어떤 이유로 두 개의 유사한 아이콘 중 하나를 선택해야 하거나, 두 가지 색상 중 하나를 골라야 한다면,
좋은 정보 냄새(information scent) 를 가진 고유한 아이콘을 구분 요소로 추가하는 편이 낫다.
테스트 결과, 모바일 화면에서 색상과 아이콘이 모두 다른 시각적 표시를 사용할 때,
사용자들은 텍스트만 있을 때보다 약 37% 더 빠르게 항목을 찾았다.
이번 연구에서는 이러한 표시를 데스크톱 화면에서는 테스트하지 않았지만,
결과는 유사할 것으로 예상된다.
비록 정확한 비율은 다를 수 있지만, 더 큰 화면에서는 시각적 표시가 더 잘 보이기 때문에 속도 향상 효과가 오히려 더 클 수도 있다.
이 부분은 독자 중 대학원생이나 연구자들에게 맡겨둘 과제로 남겨둔다.
-
정확한 내용은 아래 원문을 확인해주세요.
https://www.nngroup.com/articles/visual-indicators-differentiators/
