인도 사람들도 이 아이콘이 뭔지 알까요?
인도 길거리에서 Icon UT 하기
트루밸런스의 유저들
우리 유저들은 Next Billion Users(NBU) 혹은 New Internet Users라 불린다. 스마트폰 시장이 급속도로 성장하고 있는 동남아, 남미 등 이머징 마켓에서 나타나는 스마트폰 유저들 뜻한다. 이들은 저가형 스마트폰 보급과 낮은 데이터 요금 덕분에 인터넷 사회로 진입할 수 있게 되었다. 인터넷의 미래라고 칭해지고 있는 이들은 기술적, 사회적 환경이 기존 인터넷 세대들과 확연히 다르기 때문에 많은 글로벌 서비스들이 기존 방식과는 다른 이해와 접근으로 NBU들을 학습하고, 시장을 만들고 있다.
우리가 PC 앞에 앉아 인터넷 서비스를 학습하고 사용한 것과 달리, NBU는 바로 일상생활에서 그들에게 최적화된 모바일 서비스 사용하고 있다. 미래의 성공적인 글로벌 앱이 되기 위해선 PC가 아닌 휴대전화로 성장한 사람들의 보편적인 디자인 언어를 사용해야 한다. 트루밸런스도 타깃 유저에게 최적화된 서비스와 인터페이스를 제공하기 위해 다양한 노력을 하고 있다. 그중 디자이너가 인도 유저들을 대상으로 진행한 아이콘 UT 사례를 공유해 보고자 한다.
“인도 사람들은 이 아이콘이 뭔지 알까요?”
구글 이미지 출처인도 오피스에서 새로 출시하는 월렛 화면에 대해 디자인 리뷰를 하는 중이었다. 문의하기 기능을？ 아이콘이 아닌 상담원 아이콘으로 바꾸자는 피드백이 있었다. 그게 더 적합하겠다 라고 생각한 찰나에 곧바로 “인도 사람들은 이 아이콘이 뭔지 알까요?”라는 의견이 나왔다. 사실 상담원 아이콘은 주변에서 온/오프라인 서비스 채널로 흔히 접하며, 우리에게는 일반적이라고 볼 수 있다. 그러나 우리에게 익숙하다고, 인도 유저에게도 익숙할 것이라 쉽게 확신할 수 없었다. 우리와 유저 사이에 단순히 기술적 이해의 차이만 있는 것이 아니라 애초에 문화적, 사회적 환경부터가 다르기 때문이다. 인도 사람들에게도 상담원 아이콘은 도움이 필요할 때 찾게 되는 아이콘 일까? 상담원 이미지는 보편적인 이미지인가? 문화적, 사회적 맥락의 차이가 아이콘을 이해하는 데 영향을 미칠까?
01 직관적인 인터페이스에서 시각 언어의 중요성
인도는 공식적인 언어로만 22개의 지역 언어를 가지고 있고 문맹률도 높다. 사실 언어뿐만 아니라 (0을 만든 숫자의 나라임에도 불구하고) Rural 지역에는 숫자를 이해하지 못하는 사람들도 많다. 그런 이유에서인지 오래된 동전을 보면 숫자뿐만 아니라 핸드 제스처가 함께 표시되어 있다.* 따라서 이들에게 모바일 서비스를 제공하기 위해서는 직관적인 인터페이스가 필요하다. 이미지 및 영상 등을 활용해 비언어적인 방법으로 서비스를 이해시키는 것이 중요하다.
(*참고 : 인도 동전에는 엄지 척과 브이가 있다! )
myoralvillage 에서 연구한 '문맹자들 위한 모바일 월렛 디자인' (오히려.... 문해력있는 사람은 못 쓸듯.......)02 인터페이스에 적합한 아이콘의 기준
상징보다 기능
인터페이스에서 아이콘은 효율적이면서 언어 장벽에 영향받지 않고 사용성을 유도하는 강력한 비언어 수단이다. 아이콘을 심플하게 만들 수 있는 이유는 자세하게 그리지 않아도 모두가 그 상징의 본래 모습을 잘 알고 있기 때문이다.
그러나 인터페이스에서 아이콘은 상징 자체를 보여주기보다 기능적으로 작동하는 것이 훨씬 중요하다. 아이콘의 기능을 이미 학습이 했거나 기능을 유추할 수 있다면, 아이콘의 상징을 이해하지 못해도 좋다. 아이콘 상징의 이해와 기능의 이해는 일치하지 않기 때문이다. 2013년에 플로피 디스크 모양의 Save icon에 대한 흥미로운 조사가 있었다.* 1000명의 아이들에게 조사한 결과, 무엇의 상징인지 14%만이 알았지만 Save 기능이라는 것은 100%가 알았다고 한다. 아이콘은 만들어진 시점의 모습을 담기 때문에, 시간이 지나면 새로운 사람들에게는 아이콘의 형태만 학습된다.
(*참고 : Is this the perfect save icon? )
플랫폼과의 일관성
우리는 안드로이드 앱만 만드는 덕분에 여러 가지 이유(안드로이드 스튜디오에서 바로 불러올 수 있는 편리함)로 일반적이고 평범한 기능은 대부분 안드로이드 머터리얼 아이콘을 사용하거나, 아이콘의 메타포를 참고해서 만든다. 구글 아이콘은 안드로이드 플랫폼에서 사용하고 있으니, 이를 통해서 유저가 이미 충분히 학습했을 가능성이 높다.
플랫폼과 서비스의 일관된 경험을 유지하는 것은 유저와 앱 내 커뮤니케이션을 수월하게 하고, 서비스 사용 허들을 낮추는데 도움이 된다. 그러나 모든 기능이 구글 아이콘으로 만들어져 있지 않기 때문에 찾는 아이콘이 없다면 유사한 것을 적절하게 선택하거나 메타포를 정해서 아이콘을 제작해야 한다.
참고로 머터리얼 아이콘 세트에는 상담원 아이콘이 (아직) 없다. 구글 서비스 내에 Customer Support라는 기능이 없어서 인지, 혹은 상담원을 기호화하는 것보다 "모르겠음"를 기호화하는 것이 더 직관적이라 생각해서 인지는 알 수 없으나 유사한 기능으로 도움말, 상담을 의미하는 아이콘들은 모두? 기호를 활용하고 있다.
Help를 검색하면 나오는 아이콘들Customer Support 상담원 아이콘에 대한 궁금증을 계기로, 더불어 새롭게 서비스할 월렛 화면의 아이콘들을 모두 테스트해보기로 했다. 목표는 인도 유저가 인지하기 쉬운 월렛의 기능 아이콘 찾기. 화면 내에 쓰일 아이콘의 상징이 인도 유저들이 충분히 학습한, 혹은 이해 가능한 것인지 해당 기능에 적절한 아이콘과 레이블은 어떤 것 인지를 직접 알아보기로 했다.
03 아이콘 사용성 테스트
닐슨 노먼 그룹의 아티클을 참고해보니, 아이콘을 평가하는 4가지 기준을 찾아볼 수 있었다.
① 탐색 가능성 : 유저가 화면 내에서 아이콘을 찾을 수 있는가?
Findability: Can people find the icon on the page?
② 인지 : 유저가 아이콘이 뭘 나타난 건 지 이해하는가?
Recognition: Do people understand what the icon represents?
③ 정보 유추 : 유저는 아이콘과 상호 작용 시 어떤 일이 일어날지 정확하게 유추할 수 있는가?
Information scent: Can users correctly guess what will happen once they interact with the icon?
④ 매력도 : 아이콘이 심미적으로 아름다운가?
Attractiveness: Is the icon aesthetically pleasing?
디자인 목표와 디자인 단계에 따라 아이콘 디자인을 평가하는 방법은 달라진다. 우리는 인지 테스트라고 불리는 방법을 변형해서 진행했다. 원래 인지 테스트(Recognition Methods)는 인터페이스 요소 없이 아이콘이 무엇을 상징하는지 유저가 추론해 보는 것이다.
그러나 실제 인터페이스에서 아이콘은 단독으로 표시되는 것이 아니라 레이블과 함께 여러 아이콘 사이에서 기능하기 때문에 단순히 단일 아이콘만 테스트하는 건 의미가 없어 보였다. 인터페이스에 사용된 레이블이 이해 가능한 영어로 되어있는 지도 검증하고자 했기 때문에, 빈 인터페이스 화면을 보여주고 여러 옵션 중 아이콘을 선택하는 방법으로 진행하였다.
04 길거리에서 유저 테스트 하기
장소
다양한 연령과 직군의 사람들을 만날 수 있는 Huda City Metro역에서 테스트를 진행했다. 사무실 10분 거리에 있는 곳으로 이전에도 여러 번 테스트를 진행한 곳이다.
대상
길거리에서 20-30대로 보이는 사람들에게 무작정 다가가 테스트를 요청했다. 인도인들은 낯선 사람들의 요청에 굉장히 호의적인 편이다. 테스트를 수락받는 데 큰 어려움이 없었다. 무작위로 선정했음에도 불구하고, 다양한 스마트폰 숙련도를 가진 유저들을 테스트할 수 있었다. 그중에는 우연히 만난 실제 트루 밸런스 유저도 있다. 우리 팀의 인도 동료 Ramji 의 서포트를 받아 영어를 못하는 유저는 힌디어로 진행했다. 비교를 위해 오피스로 돌아와 직원 중 한 명도 추가로 테스트했다.
방법
유저의 맥락을 이해할 수 있도록 테스트 사전 질문을 준비했고, 테스트에는 야외에서 활용하기 용이 자석판 보드를 사용했다. 아이콘 영역을 비운 UI화면을 프린팅해 보드에 붙이고, 그 옆으로 다양한 옵션의 아이콘들을 자석으로 준비했다. 유저에게 어떤 아이콘이 적합한지 인터페이스 내에 아이콘을 위치하도록 요청하였다. 그리고 테스트가 끝날 때마다 유저가 조합한 화면의 모습을 찍어 기록했다.
1. 사전 질문 항목
나이/직업
스마트폰 사용 기간
최근 일주일 내 은행 업무 경험 (온라인/오프라인)
모바일 월렛 사용 경험 유무
2. 테스트 항목
04 아이콘에 대한 이해
모바일 이해에 따른 인지 차이
사전 질문과 테스트 이해도에 따라 A: 모바일에 대한 이해가 낮은 사람 / B: 사용 기간이 길지 않지만, 모바일에 대한 기본적인 이해를 갖춘 사람 / C: 모바일에 대한 이해가 높고, 완벽히 능숙한 사람으로 그룹핑할 수 있었다. 스마트폰 사용이 익숙하지 못한 사람들은 아이콘을 기능적으로 접근하지 못하고 상징/메타포로만 인지하는 듯 보였다. 스마트폰 사용에 익숙한 사람은 아이콘의 상징을 너머 기능적으로 잘 이해했다. 모바일 환경에 빠르게 적응하고 있는 B 타입 유저 또한 모바일 사용 경험에 기반해서 아이콘을 선택했다.
아이콘별 이해
CS 상담사 아이콘
우려와 달리 상담원 이미지는 인도에서도 보편적인 이미지였다. 또한 모바일 이해의 차이와도 관련이 없었다. 모바일 서비스를 많이 사용해 본 적 없는 B타입 유저는 CS 서비스를 이용해 본 적은 없지만, 다른 오프라인 매체로 이미지를 많이 접했다고 했다.
돼지 저금통 아이콘
돼지 저금통도 보편적인 이미지 일지 궁금했는데, 이 또한 인도에서도 통용되는 이미지라고 했다. 그러나 상징에 대한 이해와 달리 A 타입 유저들은 관련 있는 적절한 기능을 연결하지 못했다.
Send 아이콘
종이비행기 아이콘은 안드로이드 모바일에서 학습하지 않으면 '보내다' 기능을 유추하기 힘든 아이콘이다. B 타입 유저가 A 유저들과 달리 Money이 아닌 Send '보내다'라는 기능에 맞춰 아이콘을 선택했다. 어떻게 선택하게 되었냐고 질문하니, SMS 앱에서 사용하는 아이콘이라고 답했다.
History 아이콘
시계를 상징으로 한 History 아이콘 또한 모바일에서 학습하지 않으면 기능을 유추하기 힘든 아이콘이다. C 타입 유저들은 이 아이콘과 함께 리스트를 상징하는 아이콘도 선택했다. 혹시나 모래시계 이미지도 준비했지만 선택되진 못했다.
Recharge 아이콘
기존 트루밸런스 앱에서는 Recharge 기능을 번개 메타포를 활용해서 사용하고 있었다. 아이콘을 만들 당시에는 단순하게 "Recharge = 충전"이라고 해석했기 때문이다. 그러나 스마트폰 사용 5년 차인 우리 직원을 제외하고 유저 모두 돈이 들어간 아이콘을 선택했다. 인도에서 "Recharge"는 선불폰 잔액 충전이나 결제/지불의 의미를 가지기 때문에 번개보다는 돈을 더 쉽게 연상하는 것 같다.
Account 아이콘
Account는 계정이라는 의미도 있으나, 동시에 계좌라는 의미도 있다. 우리의 의도는 "내 계정"이지만, 월렛 화면 맥락상 "계좌"로 이해하는 유저들이 있었다. 따라서 좀 더 명확한 레이블로 변경이 필요했다.
Manage Balance
Manage Balance는 중요 기능 없이 여러 기능이 있어 애초에 하나의 레이블로 정의하기가 쉽기 않았다. 레이블이 애매해서 아이콘도 애매하게 ‘집’을 형상화해서 만들어보았는데, 3명의 유저들이 선택했다(?!). 유저들이 Manage 레이블에 맞춰 아이콘을 선택하는 듯 보였는데, 우리가 의도한 의미가 아니기에 레이블 자체 변경하기로 했다.
기타
지폐 아이콘도 있고 지갑 아이콘도 있었지만, 아무도 그와 관련 아이콘을 선택하지 않았다. 동전주머니, 동전을 들고 있는 손등 모두 동전과 관련된 돈 아이콘만 선택했다. 확실히 돈의 심벌로써 동전이 더 명확하고, 직관적이다.
05 결과 반영
결과를 참고로, 아래와 같이 아이콘과 레이블을 개선할 수 있었다.
1. Send/ Add Money : 돈 상징을 구체적으로 표시
“더하다”, "보내다" 두 기능 간의 구분보다는 화면 내에서의 주요 기능 강조를 위해 돈의 심벌을 명확하게 표시하는 쪽으로 개선했다.
2. Help : CS 상담사 이미지 적용
CS상담사 아이콘을 사용하기에 무리가 없다고 판단. 서비스 맥락상？ 아이콘 대신 CS상담사 아이콘으로 결정하였다.
3. Recharge : 결제를 의미하는 이미지로 변경
배터리 충전이 떠오르는 번개 이미지는 리차지에 적합한 아이콘은 아니었다. 결제/지불을 의미로 읽힐 수 있도록 돈과 핸드폰을 결합한 아이콘으로 변경했다.
4. Manage Balance → More : 모호한 기능 재정의
특정 기능으로 유저에게 이해시키기 어려워 아예 기타 기능으로 이해시키고자 하였다. 안드로이드 OS 기본 세팅에 있는 More를 참고하였다.
5. Account → My info : 중의적 의미 갖는 레이블 개선
보다 명확하게 "내 정보"를 의미하는 레이블로 개선했다. (Preview에 제외되어있음.)
위 테스트 결과로 인도 유저가 절대적으로 이해하기 쉬운 아이콘과 레이블을 찾았다고 보기 어렵다. 테스트 결과는 문화적 차이를 이해하는데 참고하고, 개선 방향은 앱 내 서비스 맥락에 따라 결정했기 때문이다.
디자이너의 관성적 판단을 경계하고, 유저의 관점으로 만드는 것
결과 반영물만 보면 뭐가 크게 다른가 싶을 수도 있지만, 아이콘, 레이블 하나하나 만드는 이의 언어가 아닌 유저의 언어로 이해하는 과정이 의미가 있었다. 처음에는 "인도 유저들은 이 아이콘을 알까?"라는 물음에서 시작했지만, 테스트하면서 깨달은 것은 "우리가 이 아이콘을 제대로 이해하고 활용하고 있는가?"였다.
한국에서 하는 서비스였다면, 굳이 이런 테스트까지 했을까. 그러나 방법은 다를지라도 디자이너가 어디서, 무엇을 만들든 중요한 것이 있다. 다 알면서도 지키기 어려운 것. 바로 디자이너의 관성적 판단을 경계하고, 유저의 관점으로 만드는 것이다.
가이드 : alexa / 기획, 진행 : young / 아이콘 제작 : chloe.hong / 인터뷰 기록 : Jessey Jung / 촬영 : Nina Kim / 인터뷰 지원 : Ramji Keshari
이해를 돕는 글
1. 인도 문맹자들을 위한 금융 관련 사회적 기업
2. 구글은 왜 인도만을 위한 앱을 만들까?
https://brunch.co.kr/@arangyi/5
3. Youtube Go는 왜 출시되었을까?
https://brunch.co.kr/@yeslee/24
4. Icon Usability
https://www.nngroup.com/articles/icon-usability
