사용자 친화적인 아이콘 만들기: UI 디자인 사용성 가이드

웹/앱 디자인을 할 때 어느 아이콘이든 목적을 전달해주어야 합니다. 물론 아이콘은 스크린에서 공간을 아끼기 위해 있기도 합니다. 하지만 더 중요한 것은, 아이콘은 사용자를 도와주기 위해 있는 것입니다. 아이콘이 올바르게 사용되었을 때, 아이콘은 사용자를 가이드 하는데 도움을 줄 수 있습니다. 하지만 잘못 사용되었다면, 아이콘은 사용자를 혼란스럽게 할 것입니다. 잘못된 방향으로 안내하고, 제품을 사용하는데 불편함을 겪을 것입니다. 

많은 앱과 웹사이트가 아이콘을 잘못 사용하는걸 보면서, 어떻게 하면 아이콘을 사용자 친화적으로 만들 수 있는지 궁금했습니다. 

그래서 모바일 앱에서 아이콘의 사용성 테스트를 통해 사용자 경험을 알아보았습니다. 35명의 사용자가 안드로이드 앱에 있는 190개의 아이콘을 가지고 인터랙션 하는 것을 지켜 봤습니다. 거기에는 검색 아이콘 같이 어떤 기능을 암시하는지 분명한 아이콘도 있었고, 깃발 아이콘처럼 무엇을 암시하는지 약간은 분명하지 않은 아이콘도 있었습니다. 

이제부터 테스트를 통해 무엇을 알게 되었는지 알려드리겠습니다. 

아이콘의 타입과 UX에서의 효과

쉬운 아이콘

보편적인 아이콘은 꽤 있습니다. 홈페이지나 홈 스크린으로 가는 집 모양 아이콘이나, 상품 사는 것과 관련이 있는 쇼핑카트 아이콘은 누구나 다 아는 아이콘으로 사용하기 아주 안전합니다. 

대부분의 경우를 보면, 아이콘은 창의적으로 만드는 것과는 거리가 멉니다. 제품은 브랜드 메세지에 따라 각기 다른 디자인 요소를 사용할 수 있습니다. 하지만 아이콘이 해야할 첫 번째 일은 사용자가 가려는 곳을 가이드 해주는 것입니다. 오히려 현란하거나 너무 디테일하게 디자인된 아이콘은 사용자 경험을 망칠 수 있습니다. 

아이콘 사용의 목적은 사용자를 가이드 하는 것입니다. 심플함을 유지하세요.

혼란스럽고 여러 의미를 가진 아이콘

문제가 나타나는 시점은 범용적으로 사용되는 아이콘에 모순적이거나 여러 의미를 가지고 있을 때 발생합니다.  

예를 하나 들자면, 아래 이미지가 앱에 아이콘으로 있다고 칩시다. 무엇을 의미할까요? 탭하면 어떤 일이 발생할까요? 

 이 아이콘은 사람들이 무언가를 좋아한다는데 쓰인다는건 확실합니다.  그러나 이미지를 저장하기라면요? 아이템을 즐겨찾기에 넣기라면요? 내가 좋아한다는 것을 다른 사람에게 알리는 기능이라면요? 혹은 그냥 확인했다는 표시라면요?

하트와 같이 여러 문맥에서 사용되는 아이콘들이 있습니다. 이 아이콘들은 제품에 따라 약간씩 다른 기능을 의미하고 있으니 기억해두세요. 

만약 사용자가 생각했던 것과 다르게 반응한다면 굉장히 당혹스럽겠죠? 

그리고 하나의 앱을 두고 iOS와 Android 간에 아이콘이 다르면 안됩니다. 

한물간 아이콘

범용적으로 사용되는 아이콘 다수가 너무 오래 되거나 한물간 테크놀로지를 의미하고 있습니다. 플로피 디스크를 기억하고 있는 사람들이라면 이것이 저장 아이콘이라는 것을 알고 있을 겁니다. 하지만 1995년 이후에 태어난 사용자라면 이상하게 생각하겠죠. 플로피 디스크 같은 아이콘을 계속해서 사용한다면 젊은 사용자들에게는 제품의 이미지가 구식 같다는 느낌이 들게 할 겁니다.

심지어 다이얼식 전화기 아이콘이 요즘 청소년들에게는 전화기로 잘 인식되지 않는다고 합니다. (아마 웃을지도 모르겠지만, 실제로 어린 아이가 엄마한테 왜 전화기 모양이 실제 전화기 모양이 아니냐고 물은 적이 있었답니다.)

독특한 아이콘

정말 이해하기 힘든 아이콘 중 하나는 제품이 일반적인 액션(공유하기, 즐겨찾기, 업로드하기, 글 작성하기 등)을 넘어 독특한 기능을 가지고 있을 때 입니다.

기존보다 더 추상적인 컨셉(다가오는 여행일정 보기, 오디오북 친구에게 보내기, 주문내역 보기, 내 수면패턴 트랙킹하기 등)을 단일 아이콘으로 어떻게 전달할 수 있을까요? 

많은 디자이너가 시도했고, 실패했습니다. 이 아이콘으로 의미를 얼마나 잘 표현해내는지와는 상관없이, 처음 보는 사용자에게는 완전히 다른 경험일 수 있습니다. 

그런다고 해서 항상 범용적인 아이콘만 사용해야 한다는 말은 아닙니다. 몇몇 독특한 아이콘은 처음 사용하는 사용자에게 효과적으로 의미를 전달하고 있습니다.

트위터의 유명한 깃펜 아이콘이 좋은 예가 될 수 있습니다. 레이블이 없음에도 불구하고, 80% 이상의 사용자가 이 아이콘이 무엇을 의미하는지 정확히 알고 있었습니다. 

트위터가 이 독특한 아이콘을 가지고 잘한 점을 보자면:

- 배치

트위터는 아이콘을 활동하기(트윗쓰기, 사진찍기, 이미지 업로드하기)와 탐색하기(피드, 알림, 메세지, 사람들, 검색)로 나눴습니다. 만약 사용자가 포스트 작성을 하고 싶다면 스크린 하단에 아이콘을 선택하면 끝입니다. 

-  데스크탑 버전에는 있는 레이블

많은 사람들이 데스크탑에서 트위터를 처음 시작합니다. 이 때 "트윗Tweet"이라는 글자가 깃펜 아이콘 옆에 눈에 잘 띄게 놓여 있습니다. 

- 기억하기 쉬움

깃펜이라는 것 자체가 플로피 디스크처럼 오래되어 더 이상 쓰이지 않는 것이지만, 이는 아주 독특하고 기억하기 쉽습니다. 깃펜 아이콘을 다른 앱에서 찾기란 쉽지 않죠. 그럼으로 다른 앱에 사용되었을 때 쓰였을 다른 의미와 구분지어 외울 필요 자체가 없는 겁니다. 

- 브랜딩

깃펜에 있는 깃은 트위터 로고의 깃을 반영합니다. 이것이 브랜드와 트윗을 하는 행위 간에 결속력을 만들어 주게 됩니다. 

레이블과 사용성

그림 하나가 천마디 말보다 낫다고 생각하는 사람에게는 실망스러울 수도 있을 글귀가 하나 있습니다.

레이블은 아이콘의 사용성을 엄청나게 증가시켜준다.

공통적으로 잘못된 인식 하나는 사용자가(특히 모바일 사용자가) 각각의 아이콘이 어떤 기능을 담당하고 있는지 알 때까지 신나게 눌러보면서 사용할거란 겁니다.

현실에서 사용자는 새로운 인터페이스를 사용하는걸 두려워하고, 평소에 자신이 자주 쓰는 것만 쓰지 우리가 기대하는 것만큼 사용하지 않습니다. 사용자는 자신이 어떠한 액션이 취하기 전에 무슨 일이 일어날지를 확실히 알고 싶어합니다. 

사용자가 아이콘을 클릭하거나 탭하기 전에 이것이 무엇을 의미하는지 확실히 알 필요가 있습니다. 이것은 곧 텍스트 레이블을 사용해야 한다는 것을 의미합니다. 

레이블 있음 vs. 레이블 없음

연구조사에 의하면 레이블이 있는 아이콘의 경우, 사용자의 88%가 아이콘을 탭하기 전에 생각한 것과 탭 후의 벌어진 일이 맞아떨어졌습니다. 

레이블을 없는 아이콘에서는 60%로 예측수치가 떨어졌습니다. 그리고 레이블 없는 독특한 아이콘의 경우에는, 그 수치가 34%까지 곤두박질 쳤습니다. 

제2의 해결책

다른 이들은 아이콘에 레이블을 다는 것은 아이콘을 사용하는 목적 자체를 해치고, 인터페이스를 지저분하게 한다고 생각합니다. 그들은 레이블을 사용하지 않는 대신에, 튜토리얼이나 코치 스크린에서 아이콘 사용에 관한 설명을 해주고 있습니다. 

튜토리얼이나 코치 스크린을 사용하는 것은 독특한 아이콘이 무슨 기능을 취할지 알려주는데 좋은 방법이긴 합니다. 하지만 이것이 직관적인 디자인을 대체하는 것이 되어서는 안됩니다. 사용자는 주로 튜토리얼을 넘어가고, 설령 봤더라도 금새 잊어버립니다. 튜토리얼은 도구일 뿐이지, 의지해야 할 것은 아닙니다. 

좋은 사용자 경험의 한 부분으로서의 아이콘

아이콘은 사용자가 필요한 것을 주저 없이 이행할 수 있게끔 도와주어야 합니다. 다음의 것들을 잘 기억하세요. 

- 여러 의미를 지닌 아이콘 사용 피하기

- 너무 현란하거나 디테일하지 않도록 하기

- 사용자에게 도움이 될 수 있다면 언제든 레이블 사용하기

- 항상 테스트 하기

원문: Making Your Icons User-Friendly: A Guide to Usability in UI Design

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.