아이콘은 장식이 아니라 어휘입니다
인터페이스 아이콘은 언어처럼 작동합니다 – 그리고 그 유창성에 관한 데이터는 겸손을 요구합니다. 레이블 없이 사용자가 확실하게 알아보는 어휘는 대략 열몇 개의 기호에 불과합니다. 돋보기, 톱니바퀴, 휴지통, 플러스, X, 집, 뒤로 가기 화살표. 그 열몇 개를 넘어서는 것은 잘해야 지역 방언이고, 최악의 경우 개인적인 발명품입니다. 작업 원칙은 여기서 곧바로 도출됩니다. 아이콘에는 기본적으로 레이블을 붙이고, 아이콘 단독으로 쓸 예산은 진짜 보편 기호에만 쓰며, 모든 글리프를 하나의 패밀리와 하나의 그리드에서 그리고, 하나의 은유를 제품 전체에서 하나의 동작에 묶습니다 – 그리고 어떤 개념에 널리 인식되는 기호가 없다면 단어를 쓰십시오. 레이블은 디자인의 실패가 아닙니다. 수수께끼를 출시하는 것이 실패입니다. {.answer-block}
TL;DR
- 보편적인 아이콘 어휘는 대략 열몇 개입니다. 검색, 설정, 삭제, 추가, 닫기, 홈, 뒤로, 재생 – 이 기호들은 단독으로도 의미를 전달합니다. 그 밖의 거의 모든 것에는 텍스트가 필요합니다. 사용자의 추측이 제각각이거나 아예 이루어지지 않기 때문입니다.
- 아이콘과 레이블의 조합이 기본이고, 아이콘 단독은 자격을 얻어야 합니다. 레이블 없는 아이콘을 정당화하는 것은 진정한 보편성이거나, 제한된 공간에서의 높은 반복 빈도(사용자가 매일 다루는 툴바)이지, 시안에서 얼마나 깔끔해 보이는지가 아닙니다.
- 하나의 패밀리, 하나의 그리드, 하나의 선 굵기. 뒤섞인 아이콘 세트는 사용자가 이유를 설명하기도 전에 “무언가 망가졌다”로 읽힙니다. 세 가지 서체가 섞인 문단과 똑같습니다.
- 동작 하나에 은유 하나, 은유 하나에 동작 하나. 어떤 화면에서 연필이 편집을 뜻한다면 연필은 어디서나 편집을 뜻합니다. 연필이 편집한다면 다른 어떤 것도 편집하지 않습니다.
- 기호가 없다면 단어를 쓰십시오. “동기화 상태”, “워크스페이스”, “인사이트” 같은 추상적 개념에는 사용자가 알아보는 아이콘이 존재하지 않으며, 그런 아이콘을 발명하는 일은 레이블이었다면 아무 비용도 들지 않았을 자리에 수수께끼를 제조하는 행위입니다.
사용자는 실제로 몇 개의 아이콘을 알아볼까
아이코노그래피의 출발점에 놓인 과대평가는 그림이 만국 공통의 언어라는 믿음입니다. 한 세기에 걸친 픽토그램 작업은 그렇지 않다고 말합니다. 기호는 천천히, 엄청난 반복 노출을 거쳐야 보편성을 얻으며, 인터페이스에서 그 문턱을 넘은 집합은 작습니다. 돋보기는 검색을 뜻합니다. 톱니바퀴는 설정을 뜻합니다. 휴지통은 삭제하고, 플러스는 추가하고, X는 닫고, 집은 홈으로 가고, 삼각형은 재생합니다. 여기에 몇 개가 더 있습니다 – 연필, 자물쇠, 종, 다운로드를 뜻하는 트레이로 들어가는 화살표 – 이들은 바로 그 아래에 자리하며, 맥락이 있으면 대다수가 알아봅니다.
그다음은 절벽입니다. 공유 기호는 하나가 아닙니다. Apple은 위쪽 화살표가 달린 상자를 그리고, Android는 세 점을 연결한 형태를 그리며, 어느 쪽도 반대편 플랫폼에서 사는 사용자에게는 확실히 읽히지 않습니다. 하트와 별과 북마크는 모두 “이것을 저장한다, 아마도”를 뜻하지만 제품마다 정의가 다릅니다 – 즐겨찾기, 좋아요, 나중에 읽기 – 그래서 기호만으로는 자신이 어떤 계약에 들어가는지 사용자에게 알려줄 수 없습니다. 햄버거 메뉴는 오랜 세월의 편재를 통해 인식 가능한 기호가 되었지만, 보여주는 대신 감춘다는 바로 그 성질 때문에 여전히 참여를 확실하게 억제합니다. 그리고 이렇게 논쟁적인 사례들 너머에는 망망대해가 펼쳐집니다. “대시보드”, “인티그레이션”, “워크스페이스”, 또는 우리 제품이 지난 분기에 발명한 어떤 개념에도 사용자가 알아보는 기호는 존재하지 않습니다.
어떤 아이콘에 대해서든 정직한 기획 질문은 “이 그림이 개념을 표현하는가”가 아닙니다 – 그린 사람에게는 모든 그림이 개념을 표현합니다. 물어야 할 것은 “처음 보는 사용자 중 몇 퍼센트가 레이블 없이 이것의 의미를 말할 수 있고, 그 답이 모두 같은가”입니다. 그리고 이 질문은 반나절이면 검증할 수 있습니다. 맥락을 걷어낸 글리프만 5초쯤 보여주고 “이것이 무엇을 할 것 같습니까”라고 묻고, 수렴하는 답변만 인식으로 계산하십시오. 공공 기호의 고전적인 이해도 기준은 대략 3분의 2의 일치이며, 발명된 인터페이스 아이콘 대부분은 흩어진 추측 더미로 돌아옵니다 – 그것이 바로 단어를 쓰라는 테스트의 답입니다. 열몇 개의 기호에 대해서는 그 값이 높게 나옵니다 – 가장 엄격한 인식 테스트는 열몇 개조차 후한 숫자라고 주장하지만 말입니다. 나머지 전부에 대해서는 그 값이 낮다고 가정하고 설계하십시오. 실제로 낮으니까요.
레이블 원칙
기본 구성은 아이콘에 보이는 텍스트 레이블을 더한 형태입니다. 아이콘은 빠른 인식과 훑어보기 편의를 사고, 레이블은 실제 의미를 전달하며, 둘이 함께할 때 능숙한 재방문 사용자와 처음 온 사용자를 모두 지원합니다. 레이블 없는 내비게이션에는 이름이 있습니다 – 미스터리 미트 – 그리고 그것은 UI를 기억력 시험으로 바꾸어, 추측이 틀릴 때마다 화면을 오가는 왕복 비용을 물립니다.
아이콘 단독은 신중하게 써야 할 예산이며, 정당한 지출처는 두 가지입니다. 관례적인 위치에 놓인 진짜 보편 기호: 헤더의 돋보기, 닫을 수 있는 패널의 X – 여기서는 관례 자체가 레이블 역할을 합니다. 제한된 공간의 고빈도 도구: 사용자가 하루에 수십 번 다루는 서식 툴바처럼, 레이블이 작업 공간을 잠식하고 반복이 한 세션 안에 세트를 가르쳐주는 경우입니다 – 다만 접근성 이름은 언제나 붙이고, 포인터가 존재하는 곳에는 툴팁을 반드시 제공해야 합니다. 터치에는 호버가 없으므로 첫 사용의 대비책은 레이블이거나 길게 누르기로 드러내는 방식입니다. “반복하면 배울 수 있다”는 말은 열 번째 사용에 관한 이야기이지 첫 번째에 관한 이야기가 아니기 때문입니다.
아이콘 단독을 결코 정당화하지 못하는 것은 심미성입니다. 레이블 없는 글리프의 행렬은 포트폴리오 이미지에서 더 깔끔해 보입니다. 포트폴리오 이미지를 보는 사람은 무언가를 해내려는 중이 아니기 때문입니다. 사용자는 다릅니다. 이것은 이 시리즈 전반에서 살펴본 것과 같은 거래입니다 – 사용자가 아니라 데모에 봉사하는 모션, 묻기가 쉬웠다는 이유로 존재하는 폼 필드 – 관찰자를 위한 광택을 참여자의 마찰로 사들이는 일입니다.
하나의 패밀리, 하나의 그리드
아이콘 세트는 그림을 위한 타이포그래피이며 같은 규율을 따릅니다. 제품 안의 모든 글리프는 하나의 패밀리에서 나옵니다. 하나의 그리드(보통 24px), 하나의 선 굵기, 하나의 모서리 처리, 채움과 외곽선에 관한 하나의 방침입니다. 사용자는 아이콘의 불일치를 말로 설명하지 못하지만 즉시 감지합니다 – 굵게 채워진 휴지통 옆에 머리카락처럼 가는 외곽선 톱니바퀴가 있으면 “이 제품은 뭔가 어긋나 있다”로 읽히며, 이는 오타의 시각적 판본입니다.
규율은 세 가지입니다. 그리드에 그리고, 타깃에 배치하십시오: 글리프는 24px 그리드 위에 존재하고, 그 주위의 터치 타깃은 플랫폼 최소치(iOS 44pt, Material 48dp)를 지킵니다. 이는 버튼과 필드가 타깃 최소치를 지키는 것과 정확히 같습니다 – 작은 글리프는 괜찮지만, 글리프만 한 터치 타깃은 곤란합니다. 기하학이 아니라 시각으로 정렬하십시오: 바운딩 박스 기준으로 가운데 놓은 재생 삼각형은 시각적 무게가 왼쪽으로 쏠리기 때문에 눈에 띄게 중심을 벗어납니다. 오른쪽으로 살짝 미는 것이 옳으며, 이는 광학적 간격 조정이 옳은 것과 같은 의미입니다 – 눈이 자를 이깁니다. 의미는 스타일이 아니라 상태로 표현하십시오: 채움과 외곽선의 대비는 선택 상태와 기본 상태를 부호화할 수 있고(탭 바에서는 정당한 관례입니다), 그렇다면 오직 그것만 부호화해야 합니다 – 다른 곳에서 장식적 선택을 겸하게 하는 순간 신호가 망가집니다.
제 iOS 앱에서 그 패밀리는 단일 굵기의 SF Symbols이고, 디자인 킷 계층에서 강제됩니다 – 글리프는 텍스트와 동일한 타입 역할로 크기가 정해지므로, 어디선가 흘러들어온 아이콘은 시스템과 눈에 띄게 부딪히지 않고서는 출시될 수 없습니다. 이것이 원칙의 일반형입니다. 라이브러리를 하나 고르고, 오직 그것만 쓰고, 필요한 글리프가 없다면 그 패밀리의 그리드 위에 그 패밀리의 굵기로 직접 그리십시오 – 검색 한 번 거리에 있었다는 이유로 두 번째 세트에서 낯선 글리프를 가져오는 일은 결코 하지 마십시오.
동작 하나에 은유 하나
어휘가 작동하려면 일관성이 필요합니다. 프로필 화면에서 연필이 편집을 뜻한다면 연필은 어디서나 편집을 뜻합니다 – 한쪽 구석에서는 “작성”, 다른 구석에서는 “이름 변경”이 되어서는 안 됩니다. 그리고 이 대응은 일대일입니다. 연필이 편집한다면 다른 어떤 기호도 편집하지 않습니다. “설정 편집”을 여는 톱니바퀴가 “세부 정보 편집”을 여는 연필과 나란히 있으면, 사용자는 하나의 동사에 두 개의 항목을 기억해야 합니다.
같은 일관성이 플랫폼 방언도 다스립니다. iOS에서 공유는 상자와 화살표이고, Android에서는 세 점을 연결한 글리프입니다. 웹 제품은 대상 독자에 맞춰 관례를 고르고 그것을 끝까지 지킵니다. 뒤로 가기 화살표는 왼쪽에서 오른쪽으로 읽는 언어권에서는 왼쪽을 가리키고 오른쪽에서 왼쪽으로 읽는 언어권에서는 뒤집힙니다 – 반면 미디어 재생 컨트롤은 뒤집히지 않습니다. 재생 삼각형은 읽는 방향이 아니라 테이프 주행에 관한 관례이기 때문입니다. 이런 것들은 잡학이 아닙니다. 사용자의 방언을 말하는 것과 사용자에게 내 방언을 배우게 하는 것의 차이입니다.
대응 관계를 유지하려면 장부가 필요합니다. 디자인 시스템 안의 아이콘 용어집 – 이 기호, 이 의미, 다른 곳에서는 쓰지 않음 – 을 간격 토큰이나 타입 역할과 같은 강도로 강제하는 것입니다. 용어집이 없으면 새 기능마다 자기만의 은유를 협상하고, 세 분기 뒤에는 저마다 다른 의미를 가진 화살표 네 개를 품은 제품이 남습니다.
단어가 이길 때
아이코노그래피에서 가장 강력한 수는 폼 디자인에서 가장 강력한 수와 마찬가지로 대개 삭제입니다. 설정 페이지에는 줄마다 맞춤 글리프가 필요하지 않습니다. 줄에는 이미 레이블이 있고, 아이콘은 색을 더하는 대신 실제로 일하는 소수의 기호가 내는 신호를 희석합니다. 대시보드의 “인사이트” 섹션에는 기호가 없습니다 – 전구일까요, 차트일까요, 반짝임일까요 – 그 개념에는 그림으로 굳어진 관례가 없어서 어떤 후보든 동전 던지기이고, 사용자마다 다르게 해석하기 때문입니다.
이 테스트는 레이블 원칙과 대칭입니다. 아이콘이 제자리를 얻는 것은 인식이 읽기를 이길 때입니다 – 기호가 그 단어보다 빠르게 해석될 때이며, 이는 보편적인 열몇 개와 학습된 고빈도 도구에 대해서만 정확히 참입니다. 그 밖의 모든 곳에서 단어는 대비책이 아닙니다. 단어가 곧 디자인입니다.
자주 묻는 질문
인터페이스 아이콘에는 항상 레이블이 있어야 합니까?
기본적으로는 그렇습니다. 레이블 없는 아이콘이 허용되는 경우는 두 가지입니다. 관례적인 위치에 놓인 진정으로 보편적인 기호(검색 헤더의 돋보기, 닫을 수 있는 패널의 X), 그리고 반복이 의미를 금세 가르쳐주는 고빈도 도구입니다 – 접근성 이름은 언제나 갖추고, 포인터 사용자에게는 툴팁을 더해야 합니다. 그 밖의 모든 곳에서는 아이콘과 레이블의 조합이 새로 온 사용자와 다시 온 사용자를 모두 지원합니다.
사용자는 레이블 없이 몇 개의 아이콘을 알아봅니까?
확실하게는 대략 열몇 개입니다. 검색, 설정, 삭제, 추가, 닫기, 홈, 뒤로, 재생, 그리고 연필과 자물쇠처럼 거의 보편적인 기호 몇 개입니다. 그 집합을 벗어나면 인식률이 급격히 떨어지고 플랫폼마다 달라집니다 – 공유 하나만 해도 Apple과 Android의 관례가 서로 호환되지 않습니다 – 그러므로 핵심 집합 밖의 아이콘은 텍스트가 필요한 것으로 취급하십시오.
인터페이스에서 서로 다른 아이콘 라이브러리를 섞어 써도 됩니까?
아닙니다 – 제품의 아이콘 세트는 하나의 그리드, 하나의 선 굵기, 하나의 모서리 처리를 가진 단일 패밀리에서 나와야 합니다. 패밀리가 뒤섞이면 시각적 불일치로 읽히고, 사용자는 이름을 붙이지 못해도 즉시 알아챕니다. 필요한 글리프가 없다면 두 번째 라이브러리에서 가져오는 대신 그 패밀리의 사양에 맞춰 직접 그리십시오.
아이콘 대신 텍스트 레이블을 써야 하는 때는 언제입니까?
널리 인식되는 기호가 그 개념에 없을 때는 언제나입니다 – 워크스페이스, 인티그레이션, 인사이트처럼 대부분의 추상적인 제품 개념이 여기에 해당합니다. 아이콘이 제자리를 얻는 것은 인식이 읽기를 이길 때이며, 사용자가 기호를 배우거나 추측해야 한다면 단어가 더 빠르고 더 분명하며, 그것은 디자인의 실패가 아닙니다.
