[UX스터디] 서비스 비교분석 가이드 적용. 카카오택시 vs 우버 예시

이전 글에서 UX관점으로 서비스를 비교 분석하는 가이드에 대해서 알게 되었다.

https://pearlluck.tistory.com/841

[UX스터디] 서비스 비교분석 가이드. 어떻게 어떤걸 고민해봐야하는가

 

UX관점에서 유사한 서비스를 어떻게 비교해야할지 몇가지 포인트를 알게되었다. 

원문에서 카카오택시와 우버의 비교를 통해 예시로 한번에 설명하지만 글이 길어 이렇게 분리하게 되었다.

 

이번 글에서는 두 서비스를 아래와 같이 다섯가지 포인트에 대해서 비교해보려고 한다. 

1.진입경로

2.컴포넌트 UI 디자인

3.컴포넌트 위치

4.UX라이팅

5.모션 인터랙션

 

4단계 분석단계인데, 아티클에서는 없었던 조금더 개인적인 의견까지 덧붙였다.

5단계로서 이런 기능을 사용하는 사용자의 시나리오도 상상해볼 것이다. 이러한 택시 서비스가 어떤 타켓에게 어떤 상황에서 쓰이는지까지 생각해보면 분석했던 기능들이 왜 불편하고 왜 편한지 파악할수 있다.

마지막으로 도출한 문제점에 대해서 스스로 솔루션도 생각해봤다. 물론 아티클을 쓰신 분의 솔루션도 참고했다..

 

 

아래의 아티클을 읽고 개인적인 편집과 함께 요약한 내용입니다. 

https://www.wanted.co.kr/events/article_241011b?sort=deadline&label=article&payable=all&keywords=

UX 디자이너 서비스 분석 방법 : 실제 분석 > 개선 > 정리 단계 | 원티드

 

 

---

 

1. 진입경로 

플로우 : 택시를 호출 할때

 

카카오택시는 지도와 내 현위치를 제대로 보여주고, 목적지 검색 필드를 클릭해야, 목적지를 선택하는 모달로 이동한다.

반면 우버는 별다른 액션없이 바로 목적지 검색 모달로 자동이동한다. 

 

인사이트

우버는 내 위치를 제대로 인식했는지에 대한 의문이 있다. 

앱이 내 위치를 제대로 파악한게 맞나? 잘못부르면 어쩌지 싶은 불안감이 든다. 

내 위치를 확인하지 않고 바로 빠르게 택시를 호출하는 경험은 오히려 사용자에게 불안감을 줄 수 있다.

 

플로우 : 택시호출을 취소할때 

 

카카오택시는 <취소>를 누르면 정말 취소할것인지 확인하는 바텀시트가 전부이다. 

반면 우버는 무려 "세개의" 바텀시트를 지나야했다. 왜 취소하는지 이유를 선택해야하고, 정말 취소할것인지 한번더 확인해야했다. 

 

인사이트

우버가 택시 호출을 취소하는 요인을 물음으로써 한뎁스가 더 생긴다. 사용자에겐 딜레이가 생긴다. 

심지어 취소요인은 사용자에게 중요하거나 필수적인 정보가 아니다. 진입경로가 깊고 비효율적이라 사용자에게 불편함을 줄수 있다.

불필요한 뎁스는 사용성을 크게 저하시켜서 최대한 경로를 최소화하는게 좋고, 실질적으로 사용자에게 필요한 정보만을 제공해야한다.

 

 

2. 컴포넌트 UI 디자인 

플로우: 전체적인 디자인 부분

 

취소를 확정하는 CTA 버튼의 위치가 있다 없다 한다. 우버는 터치의 연속성을 해치고 있다. 

왼쪽처럼 버튼이 같은 위치에 있다면 취소버튼을 같은 위치에서 연속으로 누를수 있게 된다. 

그러나 오른쪽처럼 구성되어 있어서 손가락을 계속 왔다갔다 해야하는 불편함이 생긴다. 

 

 

플로우: 결제 수단 선택

 

카카오택시는 택시를 선택한 "후에" 뜨는 바텀시트에서 결제수단을 결정한다. 

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

택시호출취소 플로우와는 반대로 이번에는 카카오택시에서 한뎁스가 더 생겼다.

 

 

결제 수단을 자세하게 선택할때도 다르다.

카카오택시는 은행 대표 브랜드 색상을 카드모양으로 보여줘서 직관적이다.

그러나 "하나하나 스와이프"해서 변경해야한다. 직접 결제 옵션은 스와이프의 맨끝에 있다.

직접 결제를 이용하는 사용자의 경우 등록된 모든 카드를 하나하나 다 끝까지 넘겨야되서 꽤 번거로울수 있다. 

반면 우버는 등록한 결제수단을 "리스트뷰"로 보여줘서 한번에 확인할수 있다.

물론 아이콘과 카드뒷자리 넘버만 보여주기 때문에 어떤 카드인지는 기억하기 어려워 카카오택시보단 덜 직관적이다. 

 

등록된 카드가 많다면 카카오택시처럼 구분하기 쉽도록 스와이프하는 형식이 좋겠지만, 적을경우 리스트뷰가 오히려 좋을것 같다. 

그리고 개인적인 생각으로 카카오택시에서 직접 결제 옵션을 스와이프의 맨 끝에다가 배치한 이유는 카드 등록을 의도한게 아닐까 싶다. 

굳이 불편하게 직접 결제로 해서 스와이프를 번거롭게 하지 말고, 자주 사용하는 카드를 등록해서 더 편하게 카카오택시를 이용하라는 목적일까. 그럼에도 끝까지 등록하지 않고 직접 결제하는 사람. 바로 나. 

 

3. 컴포넌트 위치

플로우: 결제수단 선택

 

카카오택시는 결제수단을 고른뒤 <적용하기> 버튼을 누른다. 반면 우버는 <X>버튼을 눌러야한다. 

전자는 사용자로 하여금 '적용되겠군'이라는 확신이 들지만, 후자는 '혹시 취소는 아닌가?'하는 불안감이 든다. 

 

각 버튼의 위치도 주목해볼 필요가 있다.

카카오택시의 적용하기 버튼은 가장 하단에 위치한다. 즉 엄지로 선택하기 용이한 엄지영역(Thumb Zone)에 있다. 

반면 우버의 X버튼은 가장 엄지영역을 많이 벗어난 최 좌측 상단에 위치해서 손가락을 멀리 이동시켜야되서 불편하다. 

 

엄지영역에 버튼이 있는게 사용성을 높인다. 

터치 스크린에서 사용자의 엄지가 닿기 편한 곳. 스마트폰 세로의 중간지점 위 아래나 아래쪽 영역

 

플로우 : 배차 성공 후 대기 

 

카카오택시는 남은 도착시간이, 움직이는 그래픽 위에 있다. 현재 어디까지 택시가 왔는지 몇분남았는지 동시에 파악할수 있다. 

차번호 또한 상단에 노란박스로 강조처리가 되어 있어서 시선이동이 짧고 편하다.

반면 우버는 지도는 위에 있고, 남은 도착정보는 바텀시트 헤더이 있다. 택시정보는 우측하단에 있다. 

시선을 많이 이동해야하고, 모두 검정 텍스트로만 처리되어 있어서 한눈에 찾기도 쉽지 않다. 

 

맥락상 이어지는 정보를 강조해주거나 비슷한 위치에 배치하는 것이 시선이동이 짧기 때문에 사용친화적이라는걸 알수 있다.

 

4. UX 라이팅 

플로우: 기사님 매칭

 

카카오는 배차를 시작하자마자 '3분 내 거리에 있는 기사님 요청중' 이라는 안내가 보인다.  시간이 지날수록 대기시간이 늘어난다. 

반면 우버는 몇분 남았다가 아니라 "배차 요청중. 가까이에 있는 기사님을 찾고 있어요"라는 메세지가 보인다. 

정확히 몇분 남았는지 알려주는 카카오택시의 라이팅이 더 직관적이고 편안하다. 

 

 

5. 모션 인터랙션 정도

플로우: 기사님 매칭

 

우버는 기사님을 연결하는 과정에서 이미지와 같이 지도가 줌인, 아웃이 된다.

덕분에 택시를 기다리는 동안 지루함이 조금은 덜 해지는 효과가 느껴진다.

 

하지만 이 모션이 사용자에게 정말 필요한가? 를 따져봐야한다. 

현재 이 플로우에서는 '기사님이 언제 매칭되는가'에 대한 정보가 더 필요하다. 

다소 정적이더라도 몇분거리에 있는 기사님을 매칭중이라는 안내메시지가 사용자에게 더 친화적인 경험이다. 

 

출처 https://it.chosun.com/news/articleView.html?idxno=2021012802929

 

아티클에는 없던 부분인데, 카카오택시는 지루함을 덜기 위해 광고를 넣었다. 

개인적으로 살짝 킹받는 포인트이지만 뭔가 똑똑한 방법이라고 생각했다. 

아니 여기에 광고를? 

그리고 사용자는 광고를 볼수 밖에 없었다.  

보통 광고는 안보고 싶은데 불현듯 불쑥 튀어나와서 불쾌감을 주기 마련인데 카카오택시안에 있는 광고는 꽤나 자연스럽다.

우버처럼 사용자에게 굳이 불필요한 모션으로 지루함을 달래는게 아니라 광고를 보면서 심심하지 않게 기사님을 기다리도록 했다.

사용자 경험을 헤치지 않으면서 광고 효과까지 내니 일석이조의 효과라고 생각한다. 

 

서비스에 모션이나 인터랙션이 재밌는건 좋지만 굳이 꼭 필요한 액션인지를 생각해봐야한다.

순간 호기심에 경험해볼순 있지만, 익숙해지고 나면 금세 피로해지고 불필요한 부분이 될수 있다.

인터랙션에 광고를 활용 할 수도 있다. 대신 자연스러워야할것 같다.

물론 이또한 사용자에게 꼭 필요한 정보는 아니지만 단순한 모션으로 사용한다면 꽤 좋은 방법일지도 모른다.

 

 

왜 그럴까? 돈과 시간이 걸려 있는 택시 서비스

지금까지 비교분석해본 결과, 카카오택시와 우버 같은 택시 서비스에서 저러한 디자인들이 왜 불편하고 왜 만족스럽게 느끼는것일까?

택시 서비스는 사용자가 자신의 돈과 시간을 걸고 이용하기 때문이다.

돈과 시간은 사용자가 예민해질수 밖에 없는 요소이다. 

그래서 바빠죽겠는데 이상한곳으로 택시가 호출되지 않는 불안감을 줄여주는것도 포인트다.

택시를 잘못부를일은 없다는 확신을 그 짧은 순간에 주는 경험이 필요한 것이다. 

 

특히 우버는 택시 호출을 취소하는 경우, 취소사유를 한번더 물어보며 뎁스가 추가되는걸 비롯해서 나쁜 사용자 경험을 제공해준다. 

시나리오를 상상해보면 택시를 취소하는 경우는 아래와 같을 것이다. 

 

택시가 너무 잘못되거나, 목적지나 택시종류를 잘못 설정하거나, 또는 다른 택시가 잡힌 경우이다. 

그렇다면 이런 순간에 뎁스가 계속해서 추가되고, 터치의 연속성을 헤친다면 사용자는 부정적인 감정을 느낄수 밖에 없다. 

짜증나고 화가나고 조급하고 예민해진 상황에서 불편함은 스트레스가 될수 있다. 

 

 

개선:  우버의 UX를 고쳐본다면?

아티클에서 가이드라인으로 알려주신 분이 제안한 개선방법은 아래와 같다.

 

택시 호출을 취소할때 취소 요인을 묻는 플로우에서 몇가지 해결방안을 고민할수 있었다. 

첫번째는 한뎁스가 어쩔수 없이 들어가야한다면 CTA 버튼위치를최대한 통일시키는 것이다.  

그리고 SKIP을 메인 CTA 버튼으로 이동시켜서 터치의 연속성을 보장하도록 할수 있다. 

 

나는 해결책으로 법인카드 이용시 이용사유를 입력하던 화면이 생각났다. 

 

택시 호출을 취소할때 위처럼 바로 사유까지 입력한다면 한뎁스를 추가하지 않고도 할수 있지 않을까 싶었다. 

개인적으로 우버를 사용해본적이 없어서 명확한 해결 방법이 될수 있을진 모르겠지만 그냥 던저보았다. 

 

---

 

알고보니 내가 참고한 아티클은 아래 브런치 글을 작성하신 분이 쓰신 글이였다...! 

브런치에서 카카오택시와 우버를 비교한 원문 글이 있는데 참고하면 좋을것 같다. 

 

출처

https://brunch.co.kr/@greening/3

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

https://brunch.co.kr/@greening/5

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