[UX/UI] 택시, 어떤 앱으로 부르시나요? #2
우버 vs 카카오택시로 비교하는 사용자 경험
택시 서비스를 애용하며 느꼈던 UX/UI 차이 및 분석 2편입니다. 이번 글에서는 ❹기사님 매칭, ❺배차 성공 후 대기) 플로우 별 UX/UI 차이점을 다루고, 우버의 GUI에 대한 이야기도 나눠보려 해요.
1편이 궁금하신 분들은 아래 링크를 확인해 주세요. 1편에서는 ❶출발 및 목적지 선택, ❷택시 종류 선택, ❸결제 수단 선택 플로우를 다뤘습니다.
https://brunch.co.kr/@greening/3
STEP ❹-1. 하염없는 기사님 기다리기
[기사님 매칭]
카카오택시는 배차를 시작하자마자 '3분 내 거리에 있는 기사님 요청 중'이란 안내가 보입니다. 시간이 지날수록 해당 대기시간은 4분, 5분으로 길어지고, 오래 기다린다 싶으면 기사님이 곧바로 매칭되는 카카오 블루를 추천합니다.
반면 우버는 '몇 분 남았다'가 아닌, '배차 요청 중 - 가까이에 있는 기사님을 찾고 있어요'라는 메시지를 보여줍니다. 시간에 쫓겨 택시를 조급하게 기다리는 저로써는 우버의 '찾고 있어요'라는 두리뭉실한 메시지가 불편합니다. 그보다는 '정확히 몇 분 남았는지' 알려주는 카카오택시의 메시지가 더 직관적이고 편안하죠.
그래도 우버의 GUI 모션은 흥미롭습니다. 우버를 사용해 보신 분들은 아실 텐데, 기사님을 연결할 때 위에 보이는 지도가 줌 인아웃 되더라고요. 꼭 필요한 인터랙션은 아니지만, 그래도 택시를 기다리는 지루함이 조금은 덜어지는 효과가 있는 것 같아요.
하지만(!) 이 과정에서 우리에게 가장 필요한 건 '재미'가 아닌 '언제 매칭되는가'에 대한 '정보'잖아요. 때문에 카카오택시가 더 사용자 친화적인 경험을 제공한다 생각됩니다.
STEP ❹-2. 왜 이렇게 안 잡혀? 취소할래!
[기사님 매칭]
거두절미하고 결론만 먼저 말하자면, 우버는 취소하려는 사용자를 미치게 만듭니다. 그래서 이 부분에선 필자의 분노가 느껴지실 수 있습니다(..)
- ① 취소 버튼 어딨는데?
자, 택시를 취소한다 칩시다. 각 서비스에서 어떤 버튼을 누르면 될 것 같나요? 카카오택시는 쉽습니다. 우측 상단에 있는 '취소'버튼을 누르면 되죠. 하지만 우버는 취소라 적힌 버튼을 찾아볼 수가 없습니다.
그렇다면 어디일까요? 우버의 취소 버튼은 [픽업 지점에서 기사님을 만나게 될 거라는 안내 메시지] 옆 [···] 버튼]입니다.
c.f. 참고로 이 버튼은 'Meatballs Menu Icon미트볼 메뉴 아이콘'인데요, 작은 원 세 개가 나란히 모여있는 모습이 마치 미트볼처럼 보인다 하여 붙여진 이름이라고 합니다. 저는 편의상 '말줄임표 아이콘'이라 부르도록 할게요.
통상적으로 [···] 아이콘을 누르면 = [관련 메뉴 / 생략된 추가 정보]가 나온다입니다. 그래서 [택시 안내 메시지 옆에 있는 말줄임표 버튼]이니까 [관련한 택시 정보나 취소 기능]이 나오겠거니 추측할 순 있어요. 하지만 취소처럼 사용자에게 꼭 필요한 기능은 추측해 찾는 것이 아닌, 쉽게 발견하고 누를 수 있어야 합니다.
말줄임표 버튼에는 [지금 당장에는 필요하지 않은, 추가 액션]들을 모아두기에 더욱 그렇습니다. 취소는 해당 과정에서 [당장 필요한, 핵심 액션]입니다. 따라서 굳이 말줄임표 아이콘이 그려진 버튼으로 숨겨둘 필요도, 그래서 취소 버튼을 찾는 과정을 한 뎁스 늘릴 필요도 없죠.
- ② 취소를 향한 무한 대장정
취소 버튼을 찾기 어려운 것도 문제지만, 취소로 가기까지의 뎁스가 필요 이상 긴 것 또한 큰 문제입니다. 카카오택시는 '정말 취소를 할 것인지' 확인하는 바텀 시트만 지나면 끝납니다. 하지만 우버는 어떤가요?
무려 세 개의 바텀 시트를 지나야 합니다. 애써 취소 버튼을 찾아 눌렀더니, '왜 취소하는지' 선택해야 하고, 그 다음에는 '정말 취소할 건지' 또 선택해야 하죠. 미치고 팔짝 뛸 노릇이었습니다.
첫 번째와 마지막 바텀 시트는 사실상 중복이나 확인차 한 번 더 묻는 건, 그래요. 필요합니다. 혹여나 잘못 누를 수도 있으니까요. 그러나 취소 요인을 묻는 시트는 불필요해 보입니다. 더 정확히 말하자면 '굳이 이 사이에 배치될' 필요가 없어 보여요.
(1) 우선 사용자의 입장에서는 취소 과정에 딜레이를 줄 정도로 중요한 / 필수적인 정보가 아닙니다. 오히려 유저의 택시 취소 원인을 알고 싶은 우버에게 필요한 데이터겠죠. 뭐, 상단에 Skip 버튼이 있긴 합니다만 급한 상황에서는 저 작은 글자를 발견하기 힘들뿐더러, 갑자기 등장한 수많은 선택지들은 사용자는 허둥지둥 읽기 바쁘게 만듭니다.
(2) 이런 배치는 터치의 연속성도 깨트립니다. 만약 왼쪽 이미지와 같이 첫 번째와 마지막 바텀 시트로만 이루어져 있다면, 사용자는 취소 버튼을 같은 위치에서 연속해 누르면 됩니다. 하지만 오른쪽 이미지처럼 구성되니 사용자는 하단에 있는 취소 버튼 눌렀다가, 중간에 있는 선택지 눌렀다가, 다시 하단 취소 버튼을 눌러야 하는- 손가락을 계속 왔다 갔다 하는 불상사가 일어납니다.
Done - Keep my ride - Wait for drive 측면에서는 연속성이 있지 않냐고요? 글쎄요. 택시를 기다리겠다 마음먹어 Done이나 Keep my ride 버튼을 눌렀다면, 바텀 시트는 곧바로 종료되니 다음 창을 볼 일이 없을 겁니다.
(!) 즉슨, 이 3가지의 바텀 시트를 모두 보게 될 사용자는 대다수 [택시를 취소하려는] 유저겠죠. 때문에 취소하려는 사용자를 우선적으로 고려한 설계(: 완료 버튼 < 취소 버튼 연속성)가 더 중요하다 생각됩니다.
그래서 다음과 같은 TO BE가 있을 것 같아요.
(1) 취소 요인을 묻는 바텀 시트를 꼭 사이에 넣어야겠다. → 불편함이나 번거로움을 느끼는 사용자를 위해 곧바로 해당 과정을 생략할 수 있는 Skip 버튼을 하단 CTA로 배치하고, 터치 위치가 바뀌지 않도록 나머지 취소 버튼들 또한 최하단에 고정시키는 방법입니다. 더불어 취소 CTA 디자인도 기사님 기다리기 버튼 디자인: 대비감이 높은 background: black, text: white으로 변경해주면 눈에 잘 띌 테니 더 좋겠죠.
(2) 취소 요인을 묻는 바텀 시트를 맨 마지막 ‘추가 선택 과정’으로 배치시킴으로써, 필수적인 취소 과정은 짧고 빠르게 만드는 방법입니다. 이러면 두 번의 터치 위치도 유지되고, 취소가 완료된 뒤 이유를 묻는 창이 나오기 때문에 상대적으로 마음 편히 선택지를 훑어볼 수 있을 거예요. (급한 상황이라면 skip 버튼을 바로 누르면 되고요.)
취소 과정을 이렇게 상세히, 그리고 비판적으로 다룬 이유는, 해당 프로세스에 놓인 사용자의 경우 부정적인 감정(불편함, 화남, 짜증남 등)을 더 쉽고 빠르게 느낄 것이기 때문인데요. 시나리오상 택시를 취소하는 사용자는 보통 다음과 같은 케이스일 겁니다.
(a) 택시가 너무 안 옴 → 짜증남
(b) 목적지든 택시 종류든 뭔가를 잘못 설정해 다시 불러야 함 → 예민하고 조급함
(c) 다른 택시가 잡혔으니 최대한 빨리 취소해야 함 → 조급함
아무리 편안하고 느긋한 상황의 사용자라도 뎁스가 길어지면 불편하기 마련인데, 이런 상태의 사용자라면 어떨까요? 더 큰 스트레스와 짜증으로 다가오겠죠. 예, 제가 참 그랬습니다
STEP ❺. 배차 성공! 그럼 언제쯤 도착하시려나?
[배차 성공 후 대기]
배차 성공 후 보여주는 정보 및 구성은 카카오택시와 우버 거의 동일합니다만, 굳이 비교를 해보자면 카카오택시가 조금 더 보기 편한 것 같네요. 미세한 차이지만 택시 정보를 볼 때 시선의 이동이 적습니다.
①두 서비스 모두 지도 위 택시가 움직이며, 택시가 현재 어디까지 왔는지 실시간으로 정보를 제공합니다. 보통 시선은 움직이는 곳으로 집중되기 때문에, 해당 지점을 중심으로 사용자의 시선이 이동할 겁니다. ②도착하기까지 남은 시간과 ③자동차 번호 정보로 말이죠.
카카오택시는 ②남은 도착 시간이 ①움직이는 그래픽 위에 있어, ①현재 어디까지 오셨는지와 ②몇 분 남았는지를 동시에 파악할 수 있습니다. ③차 번호 또한 상단에 노란 박스로 강조 처리 되어있어, 시선 이동이 짧고 편합니다.
반면 우버는 ①지도는 위에, ②도착 정보는 바텀시트 헤더로, ③택시 정보는 시트 안 우측 하단에 있어 시선을 많이 이동해야 합니다. 또한 ②와 ③모두 검정 텍스트로만 처리되어 있기 때문에 한눈에 찾기도 쉽지 않습니다.
그러나 우버의 경우 '잠금화면'에서도 택시 도착 정보를 체크할 수 있습니다. 그래서 기다리는 중간에 다른 앱을 써도 손쉽게 아래로 스와이프하면(잠금화면 위젯) 정보를 확인할 수 있죠. 핸드폰 화면을 꺼도 무방하고요.
+ ❻ 우버의 GUI
우버의 그래픽(특히 모션)은 카카오택시에 비해 눈에 띕니다. 앱을 이용하는 내내 뭔가가 움직이거든요.
택시 호출 과정 GUI
기사님 매칭 과정 GUI귀엽고 재밌습니다. 확실히 카카오택시보다 생동감이 있어 앱 사용이 즐겁긴 합니다만, 모션감이나 그래픽 요소를 조금 줄여도 좋을 것 같아요. 왜냐하면 저같은 경우, 앱을 자주 이용할수록 그래픽들에 익숙해지다 보니 금세 피로해지더라구요. 움직이니까 눈에는 자꾸 들어오는데 그렇게까지 필요한 모션도 아니야, 그런데 이런 모션이 메인으로 반복되다보니 질릴듯 말듯해.. 하다 오랜만에 들어가면 또 귀여워의 무한 반복입니다.
서비스에 그래픽이나 모션 인터랙션을 넣을 계획이라면, 사용자가 느낄 즐거움과 피로감 사이에서 신중히 고민하고 두 밸런스를 적절히 맞추는 것이 꼭(!) 필요하겠어요.
카카오택시와 우버로 비교해 본 택시 서비스 UX/UI 분석은 여기까지입니다. 평소에는 별생각 없이 썼는데, 플로우를 나눠 하나하나 분석해 보니 뭐가 참 많네요. '뭔가 불편한데..'라 [느낌]만 들었던 것들이 '이래서 불편했구나!'라는 [이유]로 명확해진 것 같아요. 그리고 UX는 참 복잡하고 고려할게 많은 작업임을 또 한 번 느꼈습니다. 수많은 사용자들의 각기 다른 니즈와 케이스를 고려하는 건 불가능에 가깝겠지만, 그럼에도 불구하고 최선의 디자인을 내기 위해 노력해야겠쬬..
오늘도 택시를 이용하고야만..다음에도 비슷한 도메인의 2가지 내지 3가지 서비스 비교 글을 써볼까 해요. 언제가 될지는 모르겠지만 마땅한 글감을 찾게 된다면 공유하러 오겠습니다. 그럼 안녕!
