08. UXUI 설계에서 사용성을 점검하는 방법 (1)
우리는 사용자의 '경험'을 디자인하는 사람이니까요.
| 사용자 인터페이스(UI) 설계의 기본 원칙과 사용성 평가
UXUI디자이너가 뭐 하는 사람인가요?
다른 직종의 사람들을 만나다보면 이런 질문을 심심치 않게 받곤 한다.
간혹 직종이 나와 너무 동떨어져 있거나 연세가 있으셔서 "서비스의 사용성이 어쩌구 인터페이스가 어쩌구..." 의 설명을 어려워하는 분들에게는 그냥 "웹디자인 해요^^" 하고 에둘러 얘기했다.
그런데 이 일을 3년 정도 하다보니, 정말로 UXUI 디자인과 웹디자인을 혼동해 실무 중에 UX기획이 생략되고 심미성만 좇는 경우가 적지 않게 보이는 듯 하다. (극단적으로는 포토샵으로 상세페이지를 만드는 그래픽 담당자를 구인하는데 'UI 디자이너'를 채용한다고 하는 경우도 보았다.)
그래서 오늘은 UXUI디자이너의 주 업무 중 하나이자 UX 설계의 기본인 사용성을 개선하고 평가하는 방법에 대해 이야기해보려 한다.
1 사용성의 기본 요건 3가지
"사용성이란, 사용자가 특정 사용 맥락에서 목표한 바를 효과적이고, 효율적으로, 만족스럽게 달성할 수 있도록 하는 것이다" - 국제표준화기구(IOS)
국제표준화기구(IOS)에서는 사용성을 위와 같이 정의하고 있다.
(1) 효과성 : 시스템이 사용자의 목적을 얼마나 충실히 달성하는가?
(2) 효율성 : 사용자가 과업을 달성하기 위해 투입한 자원과 그 효과 간의 관계
(3) 만족도 : 사용자가 시스템을 사용하면서 기대했던 것에 비해 얼마나 만족했는가?
이 세가지는 줄여서 EES라고도 부른다 (Effectiveness-Efficiency-Satisfaction)
자세히 이야기하자면, 먼저 효과성은 사용자가 서비스를 이용하여 얻고자 하는 것을 얼마나 충실하고 정확하게 제공하는 지를 묻는 것이다. 배달 어플을 이용하여 주문을 얼마나 정확하게 할 수 있는지, 메신저 어플을 이용하여 의사소통을 얼마나 제대로 할 수 있는지, 금융 어플을 이용하여 송금을 정확히 할 수 있는 지 등 서비스 또는 기능의 목적에 충실하는 지 평가하는 기준이다.
효과성을 지키기 위해서는 사용자가 서비스를 정확하게 이용할 수 있도록 프로세스나 UI등을 직관적이고 명료하게 제공할 필요가 있다.
효율성은 사용자가 노력에 비해 효과를 얼마나 효율적으로 얻을 수 있는 지를 묻는 것이다.
초보 사용자가 서비스를 학습하는 데 걸리는 시간, 사용자가 작업 완료까지 걸리는 시간, 작업 중 발생하는 에러의 수나 비율, 에러에서 얼마나 빨리 벗어날 수 있는지, 도움말이나 보조적인 안내 자료의 유무 등이 판단 지표가 된다. 프로세스를 간결화 하는 방법 등으로 효율성을 높일 수 있다. 예를 들면 어플리케이션에서 온보딩이나 튜토리얼 과정에 '건너뛰기' 기능을 넣는다던지, 커머스에서 상품을 찾을 때 검색 필터를 넣어 원하는 조건의 상품부터 노출시키는 경우가 서비스의 효율성을 높인 케이스이다. 사용자가 서비스를 사용하면서 피로감을 느끼지 않도록 하는 것이 관건이다.
만족도는 말 그대로 사용자가 서비스를 사용하면서 얼마나 만족스러웠는지, 기대치를 충족했는지를 묻는 것이다. 앞서 이야기한 효과성과 효율성을 기반으로 하는 지표로, 서비스의 내실을 판단하는 내용이다. 만족도를 높이기 위해선 서비스 본래의 목적을 잘 달성하는 것 뿐만 아니라 사용자가 미처 깨닫지 못 했던 니즈까지 찾아내 해결하는 것도 방법이 될 수 있다.
2 사용성의 5대 요소 - 제이콥 닐슨
뭔가 외워야 할 것 같은 게 나왔다고 도망가지 말아요... 예시로 쉽게 설명해줄게요...
(제이콥 닐슨은 웹 사용성을 연구하고 주도하는 덴마크 컨설턴트이자 작가인데, UXUI 서적에서 바이블처럼 여겨지는 도널드 노먼과 '닐슨노먼그룹'에서 활동하고 있는 사용성전문가이다.)
제이콥 닐슨은 사용성의 5대 요소를 다음과 같이 정의하고 있다.
(1) 학습성 : 사용자가 처음 접했을 때 기본 과업(Task)을 쉽게 완수하는가?
(2) 효율성 : 사용자가 학습한 과업(Task)을 빨리 수행하는가?
(3) 기억가능성 : 사용자가 오랜만에 사용 시 숙련도를 쉽게 회복하는가?
(4) 오류 : 사용자가 오류를 일으키는가? 심각한 오류인가? 오류에서 쉽게 회복하는가?
(5) 만족도 : 사용하는데 만족스러운가?
(1) 학습성
서비스는 시스템을 처음 접한 초보자도 쉽게 이용할 수 있어야 한다.
사용자를 생각하게 하지 마! 라는 책이 있을 정도로, 학습에 시간이 필요한 서비스는 사용성을 떨어뜨린다. 대부분의 사람들은 학습을 싫어한다. 안 그래도 어렵고 복잡한 것이 많은데 어플 하나 웹사이트 하나 쓸 때 마저 공부를 하고 싶지는 않다. 상상을 해보자. 은행 어플을 켜고 첫 화면을 마주하자 기능이 20개 정도 있는 것 같은 복잡한 화면이 나타난다. 내가 찾는 '송금하기' 기능이 보이지 않는다. 어디부터 들어가야 할 지 막막하고 머리가 아프다. 갈 곳을 잃은 사용자는 그냥 앱을 끄고 생각하지 않기로 한다. 심지어 요즘엔 대체할 다른 어플들도 많다.
머리를 비우고 무지성으로 화면이 하라는 대로만 클릭해도 목적을 달성할 수 있는 서비스 중, 유독 신박하게 편리한 UX를 가지고 있는 서비스가 TOSS이다. 토스는 워낙 사용성으로 유명한 서비스라 새삼 예시로 들기 민망하기도 하지만, 그만큼 이해하기 쉬운 케이스라 가져왔다.
토스에서 계좌를 연결하거나 상품을 가입하는 등 과정이 길고 복잡한 기능을 사용할 때, 하단의 CTA 버튼만 계속 누르면 프로세스가 완료된다. [다음], [모두 동의하기], 심지어는 [아래로 스크롤하기] 까지도 모두 동일한 위치와 형태의 버튼이 상황에 맞춰 기능을 바꿔가면서 수행하니 사용자가'이제 내가 뭘 해야하지?' 고민하고 학습할 필요가 없다.
꼭 이런 새로운 UX를 개척하지 않아도, 사용자가 시스템을 쉽게 이용할 수 있도록 직관적이고 명료하게 만들면 학습성을 준수했다고 볼 수 있다
(2) 효율성
서비스는 사용자가 원하는 결과물을 최대한 빨리, 적은 노력으로 제공할 수 있어야 한다.
사람들은 나노 단위로 시간을 쪼개 사용하는 것에 익숙해져 있다. 시간이 낭비되는 것을 싫어하기 때문에 원하는 결과를 빨리 얻어내고 싶다.
요즘 커머스나 콘텐츠 서비스를 이용할 때 검색과 검색필터 기능을 사용하지 않는 곳이 없다. 핸드폰 잠금을 해제할 때는 비밀번호 누르기도 귀찮아 Face ID나 지문인식을 사용하고, 요즘 젊은 친구들은 타자 치는 것도 번거롭다고 느껴 음성인식으로 텍스트를 입력해서 채팅을 한다고 한다. 대부분의 서비스에서 간편로그인과 간편결제 기능을 제공하고, 카페에 갈 땐 스마트 오더로 대기시간 없이 바로 상품을 수령한다.
토스에는 계좌를 사진 촬영해서 송금하는 기능이 있다.
토스 송금하기 화면에 있는 카메라 기능으로 계좌번호를 촬영하면 텍스트 인식이 되어 계좌번호를 타이핑하지 않아도 빠르게 송금할 수 있는 기능이다. 특히 시장이나 길거리 점포, 코인노래방 등에서 카운터에 적힌 계좌번호로 현금을 빠르게 송금해야 할 때 유용하다. 미리 저장한 사진을 불러와서 계좌번호를 인식할 수도 있다. 복잡한 계좌번호를 두번 세번씩 재확인하여 타이핑해야 하는 사용자의 번거로움을 해결한 사례이다.
KT에서 운영하는 멤버십 어플에서도 사용자의 효율성을 고려한 사례를 발견했다.
멤버십 어플을 사용하는 가장 큰 이유는 포인트 적립 및 사용이다. 멤버십의 바코드나 멤버십번호를 빠르게 찾아야 한다. 특히나 내 뒤로 줄이 잔뜩 서 있는 계산대 앞에서는 멤버십 어플을 사용할 때 마음이 더 조급해진다.
그래서 KT멤버십 어플은 어플을 실행하자마자 멤버십 카드의 바코드와 번호가 전면에 출력된다. 서비스 진입과 동시에 목적을 달성할 수 있다. 서비스의 목적을 완전히 제대로 파악한 기획이라고 생각한다.
KT멤버십 어플리케이션기능이 많고 정보구조가 복잡한 공공기관 사이트에서는 메인 페이지에 '자주 찾는 서비스' 영역을 두어 효율성을 높이곤 한다.
NPS 국민연금 PC Web(3) 기억 가능성
사용자가 서비스를 오랜만에 방문해도, 이전에 학습했던 사용법을 쉽게 기억할 수 있어야 한다.
우리가 매일매일 사용하는 서비스는 극히 일부이다. 나머지 다수의 서비스는 짧게는 며칠, 길게는 몇달, 몇년 만에 다시 사용하기도 한다. 서비스를 이미 경험했던 사용자가 기존의 기억을 잊었어도 쉽게 회복하고 학습할 수 있어야 한다. 이는 1번의 학습성과 맞물리기도 한다.
기억가능성을 지키기 위해서는, 서비스를 한번에 너무 혁신적으로 변경하는 것을 지양해야 한다. 업데이트 후 기존 UXUI와의 갭이 너무 크면 사용자가 기존에 알고 있던 정보와 충돌하며 혼란이 올 수 있다. 학습성과 효율성과 기억가능성을 한번에 망칠 수도 있는 위험한 길이다. 업데이트는 사용자의 반응을 관찰하여 조금씩 진행하는 것을 추천한다.
이에 대한 스포카의 블로그 글이 있어 공유한다.
(4) 오류
서비스는 오류를 최대한 일으키지 말아야 하며, 사용자가 오류에서 쉽게 회복할 수 있어야 한다.
여기서 이야기 하는 오류는 기술적인 오류 뿐만 아니라 사용자의 실수 등으로 인해 일어난 오류도 포함한다. 로그인 시 비밀번호를 잘못 입력한다던가, 오탈자를 낸다던가 하는 경우 말이다.
유튜브와 구글에서는 영문키보드로 검색어를 잘못 입력하거나 검색어에 오탈자를 냈을 때, 사용자가 의도했던 검색어를 추측하여 결과를 제공한다. 사용자의 실수를 자연스럽게 대처하는 오류 방지책을 선보이고 있다.
하나은행의 용돈관리 어플리케이션인 '아이부자'에서는 가입 중 본인인증이 실패했을 때 입력한 정보를 빠르게 다시 확인하고 수정할 수 있도록 안내한다. 원래 아이부자는 사용자에게 1페이지에 1개의 정보씩 천천히 순차적으로 입력하는 방식을 제공해 본인인증 정보를 수집한다. 하지만 사용자가 정보를 잘못 입력해 본인인증이 실패하는 오류가 발생했을 땐, 자신이 입력한 정보를 빠르게 파악하고 수정할 수 있도록 화면을 전환한다.
(5) 만족도
사용자가 서비스를 사용하는 데 충분히 만족스러운가?
앞서 '사용성의 기본 요건 3가지' 에서 말한 것 처럼 서비스가 사용자를 충분히 만족시키는 내실이 있는가를 묻는 지표이다. 만족도는 사용자의 재방문과도 관련이 깊다.
만족도를 높이기 위해선 서비스의 기본적인 목적을 충실히 이행하는 것 뿐만 아니라, 사용자가 미처 깨닫고 있지 못 했던 불편함을 해소하거나 서비스의 중심 기능을 수행하기 위한 부가기능을 구축하는 것도 도움이 된다. 페르소나를 통해 고객여정지도를 그려보거나 사용자를 대상으로 한 심층 설문조사, 또는 프로토타입을 사용한 UT에서 이를 해결하기 위한 아이디어를 발견해낼 수 있다.
카카오에서 운영하는 대중교통 어플인 '카카오버스'에서 이렇게 예상치 못하게 만족도를 높이는 사례를 발견했다.
버스 어플은 버스의 노선도를 제공하고 도착예정 시간을 안내하는 것이 주 목적이다. 요즘에는 사용자의 만족도를 더 높이기 위해 버스의 혼잡도를 기재하거나 도착 예정 시간에 알림을 띄우는 등 여러 부가기능도 제공하고 있다. 그 중 지금 이야기할 사례는 카카오버스의 버스 노선도에서 정체 구간을 표시하는 기능이다.
각 버스의 노선도에서 현재 버스의 위치를 표기하는 것에 더해 각 구간의 도로 정체 정도까지 색깔로 표기하고 있다. 초록색은 원활, 노란색은 서행, 빨간색은 정체구간임을 의미한다. 버스를 기다리는 사용자가 어느 구간이 정체구간인지를 미리 알고 있기에 대기시간을 조금 더 인내하거나 다른 경로를 택할 수도 있다.
카카오버스 - 버스노선도 (정체구간 표기) (사진출처: 카카오 고객센터)네비게이션에서는 이처럼 정체구간을 시각적으로 표기하는 방법이 이전부터 사용되어 왔다고 한다. 하지만 나같은 뚜벅이는 네비게이션을 사용해 본 경험이 없기에 생소한 부가기능이었고, 기대하지 못한 유용한 정보를 보너스로 받아 만족도가 상당히 높았던 경험이 되었다. (따라서 본인은 대중교통 어플로 카카오버스만 사용한다)
이어서 휴리스틱 평가에 대해서도 설명하고 싶었는데, 글이 길어져 피로도가 높을 것 같아 다음 편에서 설명하기로 했다. <10. UXUI 설계에서 사용성을 점검하는 방법 (2)> 에서는 휴리스틱 평가의 10가지 지표에 대해 예시와 함께 설명하도록 하겠다. 오늘 언급한 제이콥 닐슨의 5가지 사용성 요소와 유사하면서 조금 더 자세한 지표가 될 것이다.
