목차6개 항목
출처와 참고
닐슨 노먼 그룹의 「Bad Icons: How to Identify and Improve Them」을 요약한 mytory 블로그의 「나쁜 아이콘 ─ 찾아내고 개선하기」(2017.11)를 바탕으로 재구성한 노트다.
아이콘은 공짜가 아니다
아이콘은 잘 쓰면 텍스트보다 빨리 알아보고 누르기도 쉽다. 하지만 의미가 모호한 아이콘은 사용자의 시간을 낭비시키고 화면을 어지럽힌다. 나쁜 아이콘을 쓰느니 아이콘을 안 쓰는 편이 낫다. 아이콘은 이점이 비용보다 클 때만 쓴다.
나쁜 아이콘의 다섯 가지 유형
| 유형 | 예 | 문제 |
|---|---|---|
| 이미 뜻이 있는 모양에 다른 뜻을 붙인다 | 즐겨찾기·별점을 뜻하는 별로 「PPT 템플릿」을 표시 | 사용자의 기존 학습과 충돌한다 |
| 은유가 너무 멀다 | 로켓 = 앱 실행, 과녁 속 화살 = 저축·은퇴 목표 | 해석에 추론이 필요하다. 사용자는 퍼즐을 풀고 싶어 하지 않는다 |
| 흐릿하다 | 픽셀이 보이는 저해상도 비트맵 | 알아보기 어렵고 품질이 낮아 보인다 |
| 목록 항목마다 같은 아이콘을 반복한다 | 사용자 목록 각 줄에 사람 아이콘, 문서 목록에 문서 아이콘 | 아무 정보도 주지 않는 잡음이다 |
| 세트 안에서만 뜻이 통한다 | 나란히 놓인 다른 아이콘과 비교해야 구분되는 아이콘 | 사용자가 세트 전체를 외워야 한다 |
레이블을 붙인다고 나쁜 아이콘이 면죄되지는 않는다. 레이블이 있으면 아이콘이 오히려 해석을 방해하는 장식이 될 수 있다. 모든 링크·메뉴에 아이콘이 필요한 것도 아니다.
비용과 이점
| 비용 | 이점 |
|---|---|
| 디자인·연구: 브레인스토밍, 리서치, 사용성 테스트 | 빠른 인식: 잘 만든 아이콘은 글보다 빨리 읽힌다 |
| 개발·유지: 코딩, QA, 지원, 문서화. 텍스트 링크보다 손이 많이 간다 | 누르기 쉬움: 단어 링크보다 큰 클릭·탭 대상이 된다 |
| 화면 공간: 텍스트보다 자리를 많이 차지한다 | 브랜드·스타일 강화 |
| 인지 부담: 나쁜 아이콘은 시각적 잡음이 된다 |
좋은 아이콘의 조건
- 알아보기 쉽고, 찾기 쉽고, 기억하기 쉽다.
- 개념이 아이콘으로 표현할 만큼 단순하다. 복잡한 개념은 글로 쓴다.
- 한눈에 무엇을 가리키는지 안다. 아이콘은 감상할 미술품이 아니다.
- 주변에 충분한 여백이 있다.
- 범용 아이콘(검색, 홈, 닫기 등)이 아니라면 레이블을 함께 쓴다. 모든 사람이 같은 뜻으로 읽는다는 보장이 없다.
점검 방법
- 레이블을 가린 채 사람들에게 아이콘의 뜻을 맞혀 보게 한다. 맞히지 못하면 아이콘을 바꾸거나 텍스트로 바꾼다.
- 목록·표에서 모든 행에 같은 아이콘이 있다면 지운다.
- 아이콘만 있는 버튼에는 접근 가능한 이름이 필요하다. 구현 방법은 SVG 아이콘에 있다.
정리
- 아이콘은 비용이 드는 UI 요소다. 이점이 비용보다 클 때만 쓴다.
- 기존 의미와 충돌하거나, 은유가 멀거나, 흐리거나, 반복되거나, 세트에 기대는 아이콘은 나쁜 아이콘이다.
- 범용 아이콘이 아니면 레이블을 붙인다.
- 연구·디자인에 투자할 여력이 없으면 텍스트 링크를 쓴다.