미세상호작용 UX디자인 측면에서 분석한 하나투어 앱
앱 사용하다가 화가 나서 쓰는 UX 디자인 리뷰
앱 사용하다가 화가 나서 쓰는 UX 디자인 리뷰
뉴스 기사를 보다가 하나투어 앱이 최근에 리뉴얼을 했다는 소식을 듣게 되었다. 기존에 하나투어에서 제공했던 여행, 항공, 호텔 정보에 여행상품까지 더해 고객 맞춤형 상품을 확대하려는 취지라고 한다. 또한 이번 리뉴얼에서는 사용자 중심의 UX/UI 디자인을 강화해서 사용자 중심의 디자인을 선보인단다.
모바일에서 온라인 쇼핑을 하는 연령층이 20-30대에서 50-60대로 확대됨에 따라 사용자 중심의 모바일 디자인은 좋은 상품을 제공하는 것 이상으로 회사 매출에 중대한 역할을 하고 있다.
예전에 사용하던 마일리지도 확인할겸 리뉴얼이 된 하나투어 앱을 실행해 보았다. 그리곤 이내 실망감을 감출 수 없었다. 2년간 수 억을 들여서 리뉴얼을 한 앱이라고 하기엔 안정성과 속도에서 심각한 문제점을 갖고 있었다. 하나투어 앱을 보고 있는 중에 다른 앱으로 들어갔다 다시 접속을 하면 앱은 초기화가 되어 버린다. 일부 화면은 검색 도중 사라지거나 하얗게 변해버려 멘붕 상태로 만들기 일쑤. 최근에 리뉴얼을 해서 안정성 문제가 있다는 것을 감안하더라도 UX 디자인 측면에서 조차 개선해야 할 점이 너무 많아 보였다.
그 중에서 이번 시간에는 최근 UX 디자인에서 많이 화두되고 있는 미세 상호작용 디자인의 원칙에 입각해 하나투어 앱이 빠른 시일에 개선을 해야 하는 문제점 2가지를 나눠보려고 한다.
미세상호작용(Micro-interactions) 디자인이란?
사용자와 디자인이 상호 작용을 하는 모든 순간으로 사용자의 경험을 매끄럽고 즐겁게 해주는 모든 디자인 행위를 의미한다. 영어로는 마이크로 인터렉션인데 한글로 옮기면 미세 상호작용 디자인 정도가 되겠다. UX 디자인에서는 멋진 화면 설계를 하는 것 만큼이나 중요한 디자인이다.
'작은 차이가 명품을 만듭니다.'
오래전 필립스의 광고 카피를 기억하는가? 얼핏 보기에는 비슷해 보이는 앱 디자인일지라도 아주 작은 차이에 따라 사용자는 무의식적으로 그 앱을 지속적으로 찾게 된다. 똑똑한 사용자가 많아지는 요즘, UX 디자이너라면 미세 상호작용 디자인은 반드시 고려해야 하는 요소이다.
미세 상호작용 디자인의 가장 쉬운 예는 텍스트 이모티콘을 들 수 있다. 텍스트를 보낼 때 다양한 이모티콘을 제공함으로써 디자이너는 사용자에게 재미있는 텍스트 경험을 제공할 수 있다.
핸드폰에서 디폴트되어 있는 다양한 이모티콘들
이모티콘이 없던 시절조차 사람들은 창의성을 발휘하여 이모티콘을 만들었다.미세 상호작용 디자인이 적용된 몇 가지 예
우리는 무의식적으로 미세 상호작용 디자인이 적용된 다양한 기능을 사용하고 있다. 그 중 쉽게 찾을 수 있는 디자인은 아래와 같다.
1. 스크롤링
출처: https://dribbble.com/shots/3300265-Scrolling-microinteraction-in-Contacts친구 목록에 스크롤링을 사용한 예-시각적인 재미와 함께 수많은 사람을 쉽게 찾을 수 있는 기능을 제공한다.
2. 자동 데이터 입력
https://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/사용자의 다음 액션을 예측하고 자동으로 데이터를 입력하게 해주는 기능이다. 숫자를 입력해야할 땐 숫자판을 제공하고, 텍스트를 입력해야할 땐 텍스트판이 등장한다. 검색을 위해 돋보기를 '탭'하면 자동으로 모바일 자판이 함께 나오는 기능 등 사용자의 행동을 최소화시킬 수 있는 미세 상호작용 디자인도 매우 중요하다.
3. 시스템 상태 확인
https://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/가장 쉽게 볼 수 있고 많이 사용되는 미세 상호작용의 예라고 할 수 있다. 시스템의 상태를 실시간으로 보여주는 것은 시각적인 재미와 함께 사용자를 그 상태에 머물 수 있게 해주는 가장 강력한 방법이다.
4. 하이라이트 변경
출처: https://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/공간을 절약하기 위해 많이 사용하는 버튼으로 최근 2017년 이후에 업데이트 된 앱에서 많이 사용하는 인터렉션 중 하나이다.
5. 튜토리얼 애니메이션
출처: https://www.webdesignerdepot.com/2015/07/7-secrets-for-enhancing-ux-with-micro-interactions/게임 앱이나 앱의 기능을 효율적으로 설명할 때도 미세 상호작용 디자인이 많이 사용된다.
다시 하나투어 앱으로 돌아와서,
새롭게 리뉴얼 된 하나투어 앱에서 발견된 UX 디자인 문제점 중 미세 상호작용 디자인 측면에서 접근했을 때 하루빨리 개선해야 할 문제점은 다음과 같다. (UX 리서치를 더 하고 싶어도 앱 속도가 너무 느려터져서 할 수가 없었다;;)
1. 회원가입과 로그인
2. 스와이핑(옆으로 밀기)
1. 회원가입과 로그인
마이크로 인터렉션 디자인의 시작은 회원가입에서부터 시작이 된다. 회원가입과 로그인 과정에 최소한의 노력으로 가능한지, 비밀번호와 같은 데이타를 입력했을 때 실시간으로 변화에 따른 피드백을 주고 있는지를 확인해야 한다. 열심히 비밀번호를 만들어서 'continue'를 클릭했는데 그제서야 '비밀번호가 적절하지 않습니다'라는 피드백은 유저를 피곤하게 만든다.
비밀번호를 입력할 때 사용성이 가능한지를 실시간으로 보여주는 것이 중요하다.
회원가입의 과정을 실시간 눈으로 보여주는 것이 중요하다하나투어 앱의 경우, 네이버, 페이스북, 카카오톡을 이용한 간편 회원가입을 제공하고 있다. 이 과정에서 발생하는 치명적인 문제를 발견하였는데 바로 꼭 필요한 기능이 빠져 있었다. 하나투어 앱에선 회원가입을 하기 위해 특정 SNS를 탭(tap)했다가 다시 이전 화면으로 돌아가고 싶어도 이전 화면 기능을 제공하지 않고 있다.
가령, 네이버 아이콘을 클릭하고 회원가입을 하려다가 페이스북으로 회원가입을 하기로 마음을 바꾸었다고 하자. 네이버 창에서 이전 화면으로 가거나 화면을 삭제하는 버튼을 제공하지 않고 있어 하나투어 앱으로 돌아가기 위해선 앱을 종료한 후 다시 앱에 들어가야 하는 문제가 발생한다.
핸드폰에 이미 네이버와 페이스북, 카카오톡에 로그인이 되어도 사용자는 각 SNS 계정의 아이디와 비밀번호를 다시 입력해야 한다.간편 회원가입을 하는 이유 중 하나는 불필요하게 아이디와 비밀번호를 만들거나 입력하지 않기 위해서이다. 하지만 하나투어 간편 회원가입의 경우, 이미 가입되어 있는 SNS로 가입을 하기 위해선 또 다른 아이디와 비밀번호를 입력해야 한다.
간편 회원가입을 제공하는 다른 앱들의 경우, 회원가입 시 이미 로그인이 되어 있는 앱은 사용자의 확장성 동의만 컨펌하면 자동으로 회원가입이 되지만 하나투어의 간편 회원가입 기능은 기존의 앱의 아이디와 비밀번호를 또 입력해야 하는 불편함을 제공한다.
회원가입 후 진행되는 회원통합 서비스 동의 창도 썩 만족스럽지 않다.
회원통합을 위해 본인인증을 선택하는 방법은 <휴대폰 인증> <실명 확인> <이메일인증>으로 나뉜다. <휴대폰 인증>을 클릭하면 자연스럽게 핸드폰 번호를 입력할 수 있는 창이 나와야할 것 같지만 <실명 확인> 창과 똑같은 창이 나와서 이름과 생년월일, 휴대폰을 입력해야 한다. <휴대폰 인증>을 선택한 사용자는 불필요한 과정을 반복하게 되는 식이다.
2. 스와이프 (swipe)
스와이프(옆으로 밀기) 기능은 사용자가 탭(Tap)을 빠르게 전환하고 제품에 대한 추가 정보를 쉽게 얻을 수 있는 동작이다. 스와이프는 지극히 자연스러운 동작이기 때문에 사용자는 무의식적으로 이미지를 아래로, 위로, 옆으로 미는 경향이 있고 최근에 업데이트 된 앱들은 스와이프 기능을 적극적으로 사용하고 있다.
스와이프 기능은 한 손으로 앱 내의 정보를 모두 파악할 수 있어 누워서 웹서칭을 하거나 밥을 먹으면서 웹서칭을 할 때도 가능하다.안타깝게도 하나투어 앱에서는 상품의 카테고리를 검색하는 일부 항목을 제외하고 대부분은 스와이핑 대신 탭 기능을 적용하고 있다. '옆으로 밀기' 기능을 제공하고 있는 항목으로는 랜딩 페이지의 패키지 상품 소개, 테마 상품 소개, 여행 종류 등에 국한되었고 호텔 예약 시 이미지를 보여주는 기능에 '옆으로 밀기' 기능을 제공하고 있었다.
왼쪽 상단을 '탭' 하는 기능은 엄지 손가락의 법칙(the rule of thumb)에 입각한 UX 디자인을 적용했을 때도 사용자 중심의 디자인을 고려하지 않은 디자인이라고 할 수 있다.
엄지손가락의 법칙은 2013년 스티븐 후버가 1,300명의 핸드폰 사용 관찰 연구에서 나온 결과를 토대로 만들어진 법칙이다. 그의 결과에 따르면 한 손으로만 사용하는 경우가 49%로 가장 많고 한 손으로 핸드폰을 받치고 다른 손으로 화면을 탭하는 경우가 36%, 양손을 이용하는 경우가 15%로 나타났다.
출처: https://alistapart.com/article/how-we-hold-our-gadgets/
출처: https://alistapart.com/article/how-we-hold-our-gadgets/이 결과에서 엄지 손가락의 사용률을 보면 75%가 엄지손가락으로 터치하는 방식을 선호하고 편리하다고 생각했다. 이 결과를 토대로 스마트폰을 디자인할 때 엄지 존 영역을 잘 활용하는 것은 매우 중요하다.
https://alistapart.com/article/how-we-hold-our-gadgets/위의 이미지처럼 디바이스의 크기에 따라서 엄지존의 영역이 다를 수 있다. 디바이스별로 컨텐츠 배열을 할 때 엄지존을 기본 바탕으로 두고 중요한 부분을 엄지존에 포함된 영역에 배치하는 것이 사용자의 편의성을 높이고 사용자 경험을 향상시킬 수 있다.
쉽게 탭을 하면 안되는 컨텐츠나 기호들은 엄지존에서 벗어난 왼쪽 상단 혹은 오른쪽 상단에 배치한다.
일반적으로 사용자가 호텔이나 패키지 상품을 예약할 때 최소 4-5개 이상의 상품을 비교하고 검색한다. 호텔을 예약한다고 생각해보자. 마음에 드는 호텔의 이미지를 빠른 속도로 스캔한 후 원하는 룸의 가격과 사양을 살펴보고 내가 검색한 호텔과 비슷한 컨디션의 다른 호텔도 빠른 속도로 검색하고 살펴볼 것이다.
이런 일련의 과정은 대부분의 사용자의 보편적인 행동이며 한 번에 수십개의 창을 열었다 닫았다를 하게 된다. 이런 창들은 '탭' 기능보단 '스와이핑(옆으로 밀기)' 기능이 더 적절하다.
또 누워서 모바일을 하는 사람들, 밥을 먹으면서 한 손으로 모바일을 하는 사람들의 행동을 살펴보더라도 한 손으로 스와이핑을 이리저리 하며 컨텐츠를 즐기는 경향이 있다. 특별한 경우가 아니라면 왼쪽이나 오른쪽 상단에 탭 기능을 제공하는 것은 UX 디자인 관점에서 벗어나는 디자인이다.
지금까지 미세 상호작용(마이크로 인터렉션) 디자인을 기반으로 하나투어 리뉴얼 UX 디자인에서 개선해야 할 점을 2가지 살펴보았다. 다른 사용성 테스트도 하고 싶었지만 앱이 다소 불안정하고 느려서 원활한 사용성 테스트를 진행하지 못한 것이 아쉽다.
코로나바이러스로 인해 어려운 시기를 겪고 있는 하나투어가 새로운 여행 상품 아이디어와 UX 디자인 성능 개선으로 고객들의 마음을 사로잡을 수 있기를 바란다. (UX디자인 개선과 안정성을 하루 빨리 개선하길 바라며...)
참고 문헌:
https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-the-ux-17094b3baaa0
https://uxdesign.cc/three-simple-rules-of-good-touch-design-4590e0dd1979
https://alistapart.com/article/how-we-hold-our-gadgets/
https://cyberx.tistory.com/196
