목록을 구별하기 위한 비주얼 인디케이터(UI)
흥미로운 비주얼 인디케이터 실험
본 글은 닐슨 노먼 그룹의 <Visual Indicators to Differentiate Items in a List>를 바탕으로 구성했습니다.
모바일 화면 공간은 한정되어 있어 모바일 화면을 설계할 때는 UI를 단순화하는 방법을 항상 모색해야 합니다. 그중 유용하게 사용할 수 있는 것이 비주얼 인디케이터입니다.
아래 내용은 비주얼 인디케이터의 시각적 디자인의 차이에 따라 관련 항목을 찾는 사람들의 능력에 어떻게 영향을 미치는지 측정한 결과입니다.
연구 조건
참여자: 96명
페이지 구성: 2개의 이커머스 리스트 페이지, 2개의 주식 퍼포먼스 데이터 페이지
식별 항목: 2종류의 비주얼 인디케이터가 표시되는 항목
ex) 주식 퍼포먼스 데이터 페이지에서는 상승한 종목과 하락한 종목
과제: 페이지에 내에서 요구받은 항목 찾기
ex) 해당 페이지에서 최근 가격이 상승한 3개의 주식 찾기
비주얼 인디케이터:
1. 텍스트만
2. 색상만
3. 아이콘만
4. 색상과 아이콘 모두
4개의 비주얼 인디케이터에 근거해, 각 모바일 페이지의 가능한 4개의 버전을 설계했습니다.
UX 메트릭:
1. 첫 번째 클릭 시간
2. 첫 번째 정확한 클릭 시간
3. 작업 완료 시간
4. 성공률 (3회 중 몇 번 성공했는지)
텍스트만
텍스트만을 제외한 다른 모든 비주얼 인디케이터 변수의 효과가 텍스트만으로 구성된 페이지보다 우수했습니다.
차트에서 나타나듯이 전체 테스트를 수행하는데 비주얼 인디케이터 중 텍스트만으로 구성된 페이지에서 가장 오랜 시간이 걸렸습니다. 이는 가장 적은 시간이 걸린 컬러와 아이콘 모두 사용된 페이지보다 약 57%가 느리다는 것을 알 수 있었습니다.
사용자가 첫 번째로 일치하는 항목을 찾는데만 걸린 시간을 비교해봐도 컬러와 아이콘 모두 사용된 페이지보다 56%가 느렸습니다.
올바른 선택 비율을 비교해보면 텍스트만의 항목이 76%의 비율로 가장 낮았습니다.
이를 통해 사람들은 텍스트만으로 이루어진 정보보다, 아이콘과 색 등에 따라 그룹화된 2차적 단서를 이용했을 때 더 쉽고 빠르게 정보를 찾을 수 있다는 것을 알 수 있었습니다.
아이콘만 또는 색상만
첫 번째 올바른 클릭까지 걸린 시간을 비교해보면 색상만으로 이루어진 것보다 아이콘만으로 이루어진 경우가 더 빨랐습니다.
이런 결과에 대해서는 아래와 같이 2가지의 이유가 있습니다.
화살표 인디케이터는 주식 테이블에서 쉽게 예상 가능한 아이콘이라는 점
(위 화살표 : 증가 / 아래 화살표 : 감소)
색상은 아이콘보다 모호하기 때문에 추론이 필요할 수 있다는 점
(빨간색 : 감소 / 녹색 : 증가)
색상과 아이콘 모두
하지만 텍스트만 사용하거나, 아이콘만 사용하거나 또는 색상만 사용하는 선택지가 상호 배타적이지는 않습니다. 대신 색상과 아이콘을 조합해 화면에 따라 적절하게 사용할 수 있습니다.
순서대로 요기요 / 무신사 / 브랜디첫 번째 요기요 실시간 검색어에서는 아이콘과 색상 모두 사용했지만 위쪽 방향 화살표에 색상으로 강조를 해 순위 자체보다 변동사항에 중점을 두었습니다.
두 번째 무신사 검색어 랭킹에서는 텍스트, 색상, 아이콘 모두 조합해서 사용해 전체적으로 랭킹을 인지하면서도 순위 변동 사항도 인지하기 쉽습니다.
세 번째 브랜디 검색어 랭킹에서는 상위 랭킹만 빨간색으로 강조해 눈에 띄게 하였습니다.
결론
색상과 아이콘을 모두 사용하는 것이 내용을 인지하는데 가장 도움이 된다.
비주얼 인디케이터로 아이콘만 사용해야 하거나, 색상만 사용해야 하는 경우에는 내용 식별에 조금 더 유용한 아이콘을 사용하는 것이 낫다.
작성자: 김성민
차트, 리스트와 같은 반복적인 정보를 제공하는 화면을 구성할 때, 어떻게 해야 더 쉽고 빠르게 정보를 인식할 수 있을지 고민하는 경우가 많습니다. 위의 연구 결과와 같이 주식 차트를 보여줄 때는 화살표 아이콘만을 사용하는 게 색상만 사용하는 것보다 더 빠르게 정보를 인식할 수 있습니다. 하지만 주식 차트가 아닌 쇼핑몰 목록, 음악 순위 차트, 월별 가계부 등 다양한 환경에서도 연구 결과에 따라 색상만 사용하는 것보다 아이콘만 사용하는 것이 더 유용할지는 추가적인 연구가 필요할 것 같습니다.
<관련 글>
