24.아이콘 사용성
요약
아이콘에 대한 사용자의 이해는 이전 경험에 크게 의존한다.
하지만 대부분의 아이콘은 표준화된 사용 방식이 없기 때문에, 의미를 명확히 전달하고 혼란을 줄이기 위해서는 텍스트 라벨이 꼭 필요하다.
아이콘은 색상이나 스타일을 통해 브랜드의 개성을 표현할 수 있다. 하지만 그래픽 사용자 인터페이스(GUI)에서 아이콘의 핵심 역할은 의미를 전달하는 것이다.
아이콘은 본질적으로 객체, 행동, 혹은 아이디어를 시각적으로 나타내는 것이다.
그런데 그 의미가 사용자에게 바로 이해되지 않는다면, 아이콘은 단지 보기 좋은 장식일 뿐이고, 오히려 사용자가 작업을 수행하는 데 방해가 되는 시각적 잡음이 된다.
⸻
아이콘의 장점
아이콘이 인터페이스에서 가지는 장점은 다음과 같다.
• 좋은 조작 대상(target) 이 된다.
아이콘은 보통 충분히 크게 만들어서 손가락으로 쉽게 누를 수 있고, 마우스로도 클릭하기 편하다. (반면 텍스트는 터치 스크린에서 ‘읽기’와 ‘탭하기’ 사이의 균형이 어렵다.)
• 공간을 절약한다.
도구 모음이나 팔레트 등에서 여러 아이콘을 비교적 작은 영역에 넣을 수 있다.
• 빠르게 인식된다.
특히 사용자가 이미 본 적 있는 표준 아이콘이라면 한눈에 기능을 알아차릴 수 있다.
• 번역이 필요 없는 경우가 있다.
다만 문화적 차이를 고려해야 한다. 예를 들어 각 나라의 우체통은 생김새가 다르지만, 봉투 아이콘은 전 세계적으로 비슷하기 때문에 이메일을 상징할 때 더 효과적이다.
• 시각적으로 보기 좋다.
디자인의 미적 완성도를 높이고 브랜드 개성을 표현하는 데 도움이 된다.
• 제품군의 일관성을 유지할 수 있다.
같은 아이콘과 스타일을 여러 제품에서 사용하면 브랜드 정체성을 강화할 수 있다.
하지만 이런 장점에도 불구하고, 아이콘이 사용자 경험을 해치게 되는 경우가 많다. 이는 설계 과정에서 아이콘의 잠재적 단점을 고려하지 않은 탓이다.
⸻
“보편적인” 아이콘은 거의 없다
몇몇 아이콘은 많은 사용자가 직관적으로 이해한다. 예를 들어 홈(home) 아이콘, 프린트(print) 아이콘, 돋보기(검색) 아이콘 같은 경우다.
하지만 이런 예외를 제외하면, 대부분의 아이콘은 플랫폼마다 다른 의미로 사용되어 사용자를 혼란스럽게 한다.
표준화가 부족하기 때문에 아이콘의 의미가 시간이 지나도 일관되게 유지되기 어렵다.
예를 들어 햄버거 아이콘은 대부분의 앱에서 메뉴를 의미하지만, 어떤 앱에서는 리스트나 필터로 사용되기도 한다. 이 때문에 사용자는 아이콘이 정확히 어떤 기능을 하는지 쉽게 예측하지 못한다.
하트나 별아이콘도 마찬가지다. 어떤 곳에서는 ‘좋아요’를 의미하고, 다른 곳에서는 ‘즐겨찾기’나 ‘북마크’, ‘추천’을 나타낸다. 같은 아이콘이라도 사이트마다 기능이 다르면, 사용자는 다음에 비슷한 아이콘을 봤을 때 혼란을 느끼게 된다. 예를 들어서 Combadi 는 하트아콘을 좋아한다는 표식으로 사용하여 리스트로 저장하는 기능이 아니지만 인테리어 디자인 쇼핑 사이트 Fab에서는 이 아이콘이 나중에 더 쉽게 상품을 찾을 수 있는 위시리스트 기능을 하였다.
어떤 웹사이트에서는 시계 아이콘을 내비게이션 메뉴에 두었는데, 그것이 ‘방문 기록(history)’ 기능을 의미했다. 하지만 사용자 테스트에서 아무도 그 아이콘을 클릭하지 않았다. 즉, 아이콘이 기능을 제대로 표현하지 못하면 그 기능은 사실상 존재하지 않는 것과 마찬가지가 된다.
애매하게 디자인된 아이콘은 버리는 기능이다.
⸻
아이콘은 텍스트 라벨이 필요하다
모든 아이콘이 가진 모호함을 해결하기 위해서는 텍스트 라벨이 반드시 필요하다.
표준 아이콘을 사용하더라도, 디자인을 약간이라도 수정했다면 라벨을 포함하는 것이 안전하다.
라벨은 사용자의 상호작용 없이 항상 화면에 표시되어야 한다. 특히 내비게이션 아이콘은 그렇다.
마우스를 올렸을 때만 라벨이 나타나는 방식은 상호작용 비용을 높이고, 터치 기기에서는 제대로 작동하지 않는다.
예를 들어 미국 정부의 웹사이트 Usability.gov 는 Methods, Templates, Guidelines 등의 메뉴를 아이콘으로 표시한다.
모바일 버전에서는 아이콘 옆에 텍스트가 함께 보이지만, 데스크톱 버전에서는 마우스를 올려야만 텍스트가 나타난다.
이런 방식은 오히려 아이콘의 의미를 약화시키는 결과를 낳는다.
⸻
크기는 인식에 영향을 준다
일반적으로 아이콘은 모바일 기기에서 데스크톱보다 눈에 더 잘 띈다.
그 이유는 간단하다. 모바일 화면에는 경쟁하는 시각 요소가 적기 때문이다.
반면 데스크톱 화면은 크고, 콘텐츠가 많아서 사용자가 아이콘을 쉽게 놓칠 수 있다.
예를 들어 모바일에서는 햄버거 메뉴 아이콘이 내비게이션 바의 약 25%를 차지하지만, 데스크톱 화면에서는 같은 크기의 아이콘이 전체 바의 3% 정도만 차지한다.
결국 아이콘의 상대적 비중이 줄어들어 눈에 잘 띄지 않게 된다.
이 문제를 피하려면, 큰 화면에서는 아이콘으로 메뉴를 숨기기보다 텍스트 메뉴를 그대로 보여주는 것이 낫다.
이렇게 하면 메뉴 항목을 더 쉽게 찾을 수 있고, 전역 내비게이션을 숨겨서 생기는 사용성 문제도 줄어든다.
⸻
아이콘 설계 팁
아이콘을 사용하기로 했다면, 먼저 조사부터 해야 한다.
타깃 플랫폼이나 경쟁 제품에서 어떤 아이콘을 쓰는지, 사용자에게 어떤 이미지가 익숙한지 파악하는 것이 중요하다.
새 아이콘을 만들어야 한다면, 다음 원칙을 따르는 것이 좋다.
• 디자인을 단순하게 만든다.
사실적인 그림보다는 도식적인 형태로 표현하고, 작은 크기에서도 명확히 보이도록 불필요한 디테일은 줄인다.
• “5초 규칙”을 적용한다.
아이콘의 의미를 떠올리는 데 5초 이상 걸린다면, 그 아이콘은 적절하지 않다는 뜻이다.
• 인식 가능성을 테스트한다.
사람들이 그 아이콘을 보고 무슨 뜻인지 바로 이해하는지 확인한다.
• 기억 가능성을 테스트한다.
몇 주 후에 같은 사람들에게 물었을 때, 여전히 그 아이콘의 의미를 기억하는지 살펴본다.
• 항상 텍스트 라벨을 추가한다.
디자인 구루 Bruce Tognazzini가 말했듯이,
“한 단어(word)는 천 개의 그림(pictures)만큼의 가치가 있다.”
-
정확한 내용은 아래 원문을 확인하시길 바랍니다.
https://www.nngroup.com/articles/icon-usability/
