brunch

매거진 서비스 분석 스터디

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Greening Feb 25. 2024

[UX/UI] 택시, 어떤 앱으로 부르시나요? #1

우버 vs 카카오택시로 비교하는 사용자 경험

여러분들은 택시 자주 타시나요? 저는 ~~그러면 안되지만~~ 즐겨 타는 편인데요, 주로 카카오택시와 우버로 택시를 잡습니다. 급할 때는 동시에도 쓰다 보니, 서비스 간 UX/UI 차이가 눈에 띄고 또 흥미롭더라구요. 그래서 이번 글에서는 제가 두 서비스로 택시를 잡으면서 느꼈던, 서비스별 사용자 경험 차이에 대해 이야기하려 합니다.

서비스 이용 과정을 크게 5가지(❶출발 및 목적지 선택, ❷택시 종류 선택, ❸결제 수단 선택, ❹기사님 매칭, ❺배차 성공 후 대기)로 나눠 비교 분석했으며, 내용이 조금 많아 1-2편으로 정리했습니다. 본 글은 1편으로 3가지의 플로우를 다룹니다 :-)

⓿ 앱의 전반적 인상

카카오택시 (KaKao Taxi)

군더더기 없이 필요한 것들로만 구성된 앱이라 느꼈습니다. 정보나 그래픽 요소가 많다는 생각은 거의 하지 않았어요.

우버 (Uber)

전체적으로 앱 내 텍스트나 컴포넌트들이 큼직하고 볼드한 편입니다. 그래픽도 디테일하고, 재밌는 인터랙션이 많아요.

STEP ❶ 택시를 잡아볼까!

[출발지 및 목적지 선택]

카카오택시는 사용자의 택시 호출 위치를 지도로 보여준 다음 → 목적지 검색 필드를 클릭할 시 관련 모달로 이동합니다.

우버는 그렇지 않아요. 제 현 위치를 보여줄 듯하다가- 호출 위치 안내 없이 곧바로 목적지 검색 페이지로 이동합니다. 그래서 검색 전, '이 앱이 지금 내 현 위치를 제대로 파악한 게 맞나?'라는 의문과 불안감이 들었어요.

illust ⓒ Greening

돈과 시간이 걸려있는 서비스인 만큼, 사용자에게 [너 돈 날릴 일 없고, 택시 다시 부를 일도 없어. 네 정보 제대로 파악했거든!]이란 메시지를 명확히 전달할 필요가 있습니다. 돈과 시간은 사용자가 특히나 더 예민해질 수밖에 없는 부분이잖아요. 그러니 서비스를 이용하는 동안 [내 실수나 앱의 오류로 → 택시를 잘못 불러 → 바빠/피곤해 죽겠는데 시간 낭비하는 거 아냐?] 란 불안이 들지 않게끔 확신을 주는 과정이 필요합니다.

STEP ❷ 어떤 택시를 탈까?

[택시 종류 선택]

카카오택시로 택시를 고를 경우, 리스트 내 컴포넌트 디자인이 통일되어있어 직관적이고, 정보를 구분하기 용이합니다.

반면 우버는 택시 종류에 따라 컴포넌트 스타일이 다릅니다. 비용도 [A원 ~ B원]으로 표기되어 있어 읽어야 할 텍스트가 많죠. 카카오택시에 비해 필요한 정보들을 곧바로 파악하기 어렵습니다.

UI component 비교

그러나 우버의 디자인에선 '사용자 친화적'으로 설계하기 위한 노력이 보입니다.

카카오택시의 경우, 비용이 [조금 더 비싼 카카오 블루]를 선택지 최상단에 노출시킵니다. 이 때문에 택시를 급하게 부를 때 ~~혹은 술 마시고 택시를 부를 때~~ 잘못 선택할 뻔한 적이 한두 번이 아닙니다.

반면 우버는 사용자가 자주 선택할 [가장 싼 일반 택시]를 최상단에 올렸죠. 그리고 다른 선택지들과는 다르게 컴포넌트 크기가 가장 크고, 박스 테두리에 검은색 라인 처리가 되어있습니다. 아마 해당 선택지를 강조해 보여주기 위함인 듯 한데요. UI의 전체적인 통일성과 직관성은 떨어졌지만, 사용자를 배려하는 디자인이라 생각되어 괜시리 고마웠습니다.

STEP ❸-1. 결제는 뭘로 하지?

[결제 수단 선택]

우버는 택시를 선택하는 페이지에서 바로 결제 수단을 결정하거나 변경할 수 있습니다.

카카오택시는 택시를 선택한 후 뜨는 다음 바텀 시트(bottom sheet)에서 결제 수단을 결정해요. 큰 차이는 아니지만, 우버에 비해 뎁스가 하나 더 들어가다보니 조금 오래걸린다는 느낌을 받았어요.

특히 결제 수단을 고르는 페이지 UI 차이가 큰데요. 서비스마다 장단점을 나눠 정리했습니다.

카카오택시는 은행과 대표 브랜드 색상을 카드 모양으로 보여줘 직관적입니다. 그러나 하나하나 스와이프해 변경하는 방식이므로, 등록한 카드가 많은 사용자라면 꽤나 번거로울 겁니다. 직접 결제를 종종 이용하는 사용자 또한 불편함을 느낄 확률이 높습니다. 왜냐하면 해당 수단은 리스트 가장 끝에 배치되어 있기 때문에, 등록한 모든 카드를 스와이프해야지 나오거든요.

저같은 경우에는 등록된 카드가 많은데 + 친구 택시를 대신 불러주느라 or 재발급 받은 카드를 미처 등록하지 못해 직접 결제를 이용하는 일이 잦습니다. 그러다보니 그 때마다 카드들을 하나하나 넘기는게 불편하더라고요.

이와 다르게 우버는 등록한 결제 수단을 리스트뷰로 한 번에 확인할 수 있어 편합니다. 다만 은행이 아닌 VISA / BC 아이콘과 카드 뒷자리 넘버 4개가 보여지는 정보 전부이기에 어떤 회사의 카드였는지 기억하기 어려울 수 있겠죠.

STEP ❸-2. 좋아, 이걸로 결제!

[결제 수단 선택]

카카오택시는 결제 수단을 고른 뒤 [적용하기] 버튼을 누르는 반면, 우버는 X 버튼을 눌러야합니다. 전자의 방법은 사용자로 하여금 '이게 적용되겠군' 이란 확신을 들게 하지만, 후자는 '적용되는거 맞나? 취소는 아니겠지?'란 불안감을 들게하죠.

뿐만 아니라 카카오택시의 적용하기 버튼은 가장 하단에 위치하기 때문에 엄지로 선택하기 용이하지만, 우버의 X 버튼은 엄지영역(Thumb Zone)에서 많이 벗어난 최 좌측 상단에 위치하므로 손가락을 보다 멀리 이동시켜야합니다.

엄지 영역(Thumb Zone)은 스마트폰 터치 스크린에서 사용자의 엄지가 닿기 편한 곳을 뜻합니다. 스마트폰 세로의 중간 지점의 위 · 아래나 아래쪽 영역에 해당해요. 멀리있는 메뉴 버튼을 누르기 위해 손가락을 쭉 뻗느라 불편함을 느낀 적이 있다면, 엄지영역(Thumb Zone)을 벗어났기에 발생하는 문제입니다.