디자인 논리 #1 이유 있는 아이콘 ICON 사용
아이콘을 어떻게 바라봐야 할까?
오류 혹은 이견은 언제나 환영입니다.
댓글로 의견을 나누면 좋을 것 같아요!
스타트업 프로덕트 디자이너로 일하면서 가장 어려운 부분은 상대방에게 내 디자인을 설득하고 이해시키는 일입니다. 이를 위해선 타당한 근거와 이유가 필요한데, 가령 5살 어린아이에게도 내 생각을 이해시킬 수 있도록 쉽고 명료하게 얘기해야 하죠.
그 첫 번째 주제는 ‘ICON’입니다. 최근 디자인 아이콘 이슈가 있었기에 깊이 생각해 보다 마침 알맞은 참고 문헌을 찾아서 이를 바탕으로 정리한 내용을 공유하려 합니다.
아이콘 역할
UX를 고려할 때는 아직 글을 모르는 어린아이도 우리 서비스를 쉽게 이용할 수 있도록 한다는 생각으로 바라보는 편인데 이때 아이콘이 글을 대신해 서비스를 사용하는데 도움을 주는 보조적인 역할을 해준다고 생각합니다.
아이콘 종류
아이콘은 크게 3개 카테고리로 나눌 수 있습니다.
1. 보편적인 아이콘
2. 여러 의미의 아이콘
3. 브랜드 아이콘
1. 보편적인 아이콘
보편적인 아이콘이라는 것은 전 세계인 모두가 같은 의미로 해석하고 있는 '그림언어'입니다.
대표적인 홈, 검색, 장바구니, 설정, 닫기 등은 모든 국가 웹앱에서 공통 의미로 사용되는 범용적인 아이콘으로 암묵적인 약속과 같죠. 이때 생각해 볼 수 있는 것은 유저는 새로운 아이콘을 그리 달가워하지 않는다는 것입니다. 보편적인 의미의 아이콘이라면, 독특한 형태를 만드는 것보다 유저에게 익숙한 형태의 아이콘을 제공하는 것이 좋습니다.
아이콘 홈 / 검색 / 장바구니 / 닫기시대의 흐름에 맞는 아이콘 사용
다만, 시대와 맞지 않는 아이콘의 사용은 고민할 필요가 있습니다.
일례로 과거 플로피디스크를 기억하는 사람들이라면 이는 저장이라는 뜻에 익숙하겠지만, 현시대의 어린아이들은 플로피디스크가 무엇인지 이해 못 할 수 있기 때문이죠.
2. 여러 의미의 아이콘
여러 의미의 아이콘은 이중적인 의미를 가졌다고 볼 수 있습니다.
같은 모양(형태)의 아이콘이지만 각 브랜드마다 사용자에게 전달하려고 하는 목적이 다른 경우이죠.
예를 들어 하트 아이콘은 좋아한다는 공통 의미가 있지만 음악 앱인 바이브에서 하트는 "이 노래 좋아요"이고 쿠팡에서는 "상품을 찜 목록에 저장했다"라는 의미를 가집니다.
<좌:바이브 좋아요 / 우:쿠팡 찜한 상품>저의 경우 실제로 매장 음악 플레이어 화면 UI를 디자인할 때 아이콘에 대한 고민을 아래와 같이 했습니다.
행동유도 : 유저가 해당 음악의 '좋아요 싫어요'를 선택하게 함.
행동목적 : 선호 음악을 파악하여 유저가 좋아할 만한 음악을 큐레이션 한다.
기술방침 : '좋아요'한 음악과 유사한 장르를 서치 및 제공하고 '싫어요' 음악은 다음부터 나오지 않게 한다.
여러분이라면 어떤 선택을 하실 건가요?
물론 꼭 정답은 아니지만 결론적으로 저는 3번 방안을 선택했습니다.
이유는 '싫어요'한 음악이 안 나오게 한다는 점을 중요하게 보았고 매장이라는 특수성을 생각하면 매 순간 듣고 싶은 노래를 골라서 재생하는 것보다, 한 세트를 틀고 듣다가 마음에 들지 않는 음악이 나올 때 싫어요를 클릭할 확률이 높았기 때문입니다.
- 1번 하트만 배치하는 것은 싫은 음악에 대한 정보를 얻을 수 없기 때문에 제외
- 2번은 감정이라는 것은 무수히 많고, 사람마다 느끼는 차이가 있기 때문에 직관적이지 않다고 보아 제외
3. 브랜드 아이콘
각 브랜드만이 가지고 있는 고유의 서비스 및 기능을 표현하기 위한 아이콘으로, 유저가 쉽게 인지/학습할 수 있도록 표현해야 합니다. 대표적으로 바이브 오디오, 유튜브 Shots, 당근마켓 동네생활, 인스타 릴스가 있습니다.
<바이브 오디오>
<유튜브 Shorts>레이블과 함께 하는 아이콘
원문 연구에 따르면 레이블이 있는 아이콘의 경우 사용자가 아이콘을 누를 때 발생할 일을 88%의 시간 동안 정확하게 예측할 수 있음을 알 수 있었고 레이블이 없는 아이콘의 경우 이 수치가 60%로 떨어졌다고 합니다. 그리고 브랜드 아이콘의 경우 레이블이 없으면 사용자는 아이콘을 탭 했을 때 발생하는 상황을 34%만 정확하게 예측했습니다.
그래서 브랜드 아이콘은 보통 레이블(텍스트)을 사용하여 유저가 아이콘을 눌렀을 때 어떤 기능이 나올지 예상하게 하는 친절한 UI를 제공합니다.
만약 토스 메뉴에 아이콘만 있고 레이블이 없다면 유저들은 "무슨 서비스지?" "무슨 콘텐츠이지?"라는 의구심을 품을 수 있습니다.
토스 메뉴 아이콘그렇다고 해서 모든 브랜드아이콘에 꼭 레이블을 써야 하는 것은 아닙니다. 가령, 유튜브 Shorts 아이콘이 오랜시간 사람들에게 인지되어 고유명사가 된다면 레이블이 없어도 사용자는 인지할 수 있습니다. 대표적으로 인스타 '릴스 아이콘'은 레이블이 없어도 많은 사람들이 이미 알고 있죠.
[정리]
1. 유저들은 새로운 학습을 그리 달가워하지 않는다.
2. 아이콘은 정보를 전달하는데 보조적인 역할을 한다
3. 보편적인 아이콘은 세계공통 그림 언어이자 암묵적인 약속이다.
4. 시대 흐름에 맞는 아이콘을 사용하자.
5. 이중적 의미의 아이콘은 레이블을 사용하면 사용자가 기능을 이해하는데 도움이 된다.
6. 브랜드의 고유 아이콘은 오랜 시간 사용자에게 노출하고 인지 시키자.
참고문헌
https://www.usertesting.com/blog/user-friendly-ui-icons
