얼마전 지방으로 갈 일이 생겨 고속버스를 예매했다. 평소와 다르게 야놀자로 예매했는데, 야놀자로 예매하면 할인을 해주었기 때문이다. 그런데 운전기사님께서 승차권을 확인하신 후, "어, 야놀자네. … 혹시 처음부터 다시 해보실래요?" 하시는 거였다. 얘기를 들어보니 야놀자로 고속버스를 예매한 분들이 승차권을 확인하는 방법을 몰랐고, 기사님도 마찬가지여서 확인을 못하고 있었다. (고속버스를 웹/앱에서 예매하면 QR코드를 통해 승차권을 확인할 수 있다.) 야놀자를 켜서 화면 하나하나를 보여드리면서 설명해드렸더니, 기사님께서 "복잡하네..이러니까 모르지."라며 한숨을 쉬셨다.
그래서 그분들이 왜 승차권을 확인하기 힘들었는지, 평소에 쓰던 어플과 어떤 차이가 있었는지를 알아보고 개선안을 제시해보려 한다.
고속버스 앱들의 승차권 확인 경험 비교
먼저 야놀자의 고속버스 승차권 확인 경험을 살펴보자.
야놀자의 경험
기존 야놀자의 메뉴에 고속버스 예매를 추가하고, 국내여행 통합 예약에서 고속버스 티켓을 확인할 수 있도록 한 기능 중심적인 경로로 추정된다. 이렇게만 보면 별 문제 없어 보인다. 특히나 야놀자를 평소에 잘 쓰던 사람이라면 무엇이 문제인지도 모를테다.
그렇다면 기존 고속버스 예매자들은 어떤 경로로 QR코드를 확인해왔을까? 두 가지 사례를 살펴보려 한다. 하나는 고속버스 티머니, 하나는 티머니GO다.
고속버스 티머니의 경험: 홈에서 알림배지로 표시
고속버스 티머니는 홈 화면의 예매 확인 및 변경 란에 알림 뱃지를 달아놔서 확인해야 할 정보가 있음을 사용자가 알 수 있다. 해당 메뉴 오른쪽의 모바일 티켓을 누르면 탑승권을, 왼쪽의 예매 확인 및 변경을 누르면 티켓 정보를 확인할 수 있다. 하지만 '예매 확인 및 변경'과 '모바일 티켓' 메뉴가 별도임을 쉽게 알기 어렵다.
티머니GO: 홈에서 바텀 시트로 표시
티머니 GO는 하단 바텀 시트를 통해 탑승권 정보를, 알림 뱃지를 통해 아직 확인하지 않은 정보가 있음을 알려준다. 바텀 시트를 열면 바로 탑승권을 보여줘서 이동 경로가 짧다. 다만 이 바텀 시트는 하단 영역을 크게 차지하고 있기에 중요한 정보를 가릴 수도 있다는 단점이 있다. 야놀자는 정보량이 많고 동시에 여러 예약을 할 수도 있는 프로덕트여서 이 패턴을 그대로 적용하면 오히려 UI의 복잡성을 높일 수 있다.
다시, 야놀자
위의 사례들을 보고 정의한 야놀자의 고속버스 승차권 확인 UX/UI의 문제는 '목적 달성을 위한 경로를 알기 어렵다'는 것이다.
인터페이스를 디자인하는 첫 단추는 사용자가 무엇을 완료하려고 하는지 아는 것이다.
출처: 8p, 제니퍼 티드웰 외 2인, 박재현 역, 사용자를 끌어들이는 UX/UI의 비밀: MAU는 높이고 이탈률은 낮추는 UX/UI 실무 패턴 80, 인사이트, 2021.
갈 수 있는 길은 스무가지가 넘는데 어디로 가야 할지를 모른다. 길이 많은 이유는 많은 기능과 정보를 담는 올인원 플랫폼이기 때문이다. 이 문제는 당장 수정하기 힘들다. 때문에 길은 그대로 두면서 어디로 가야 할지 알려주는 것이 효율적이다. 그래서 사용자가 어디로 가야 할지 알려주는 이정표를 제시해서 이 문제를 해결해보려 한다.
여기로 가세요
위의 해결책을 바탕으로 UX를 개선해봤다. 비교를 위해 본래 화면과 개선안을 함께 제시한다.
홈
바텀 네비게이션의 MY야놀자 탭에 뱃지를 추가한다. 뱃지는 상태 정보를 전달하며 목적지와 관련된 동적 정보를 제공한다. 사용자가 '봐야 할 것'이 있음을 알려주는 중요한 지표다.
처음 예약내역을 보는 사용자들에게는 홈에서 툴팁을 제시한다. 홈 화면에서 MY야놀자로 가야 함을 알려주는 이정표가 가장 중요하다. 홈 화면의 복잡도가 가장 높기에 툴팁을 추가한다.
MY야놀자
예약내역 제목에 뱃지를 추가하고 추가 안내 문구를 표시한다.
툴팁과 메뉴 색상의 변경도 고려했지만 복잡도가 높아질 것 같았다. 다른 UI와 일관성을 유지하면서 "여기에 무언가가 있어요."라는 이정표를 두었다.
(예약내역)상세
승차권 QR보기의 글 색상을 변경하고 툴팁을 제시한다.
버튼 색상을 수정하면 다른 정보들이 잘 안보일것 같아서 글의 색상만 조정한다. 대신 처음 보는 사용자에게는 툴팁을 보여준다.
이상으로 야놀자의 고속버스 승차권 확인 경험의 문제를 살펴보고 그것들의 해결방안을 제시했다. 이것은 임시 방편에 불과하며, 분명 내가 미처 생각못한 문제와 해결방안이 있을거다. 프로젝트를 오래 진행하지 않았고 내 주관이 많이 포함됐다는 외적인 문제도 있다.
그럼에도 저 날 들었던 "처음부터 다시 해보실래요?" "어렵네..." 라는 말이 계속 기억에 남았기에 그들의 문제를 해결해보고 싶었다. 지금 당장 버스에 탑승해야 하는데 승차권을 보여주지 못할 때의 긴장감과 승객의 티켓을 검수해야 하는데 방법을 몰랐던 기사님의 당혹감을 아는 사람으로서 말이다.*
(*드물게도 승차권을 버스기사님께서 일일히 검수하는 경우가 있다.)
참고자료
- 어플 야놀자 (8.23.1)
- 어플 고속버스 티머니 (1.9.25)
- 어플 티머니GO (2022-09-02 추정)
- 뉴스기사 ‘티머니GO' 앱으로 추석 고속버스 예매하기, 동아일보, 김동진 기자, 입력 2022-09-02 18:41, 업데이트 2022-09-02 18:45, https://www.donga.com/news/article/all/20220902/115280752/1
- 책 제니퍼 티드웰 외 2인, 박재현 역, 사용자를 끌어들이는 UX/UI의 비밀: MAU는 높이고 이탈률은 낮추는 UX/UI 실무 패턴 80, 인사이트, 2021.
- 웹사이트 Badges, Material Design 3, 2022-10-20
