카카오T, 자주 쓰는 서비스 편집 페이퍼 프로토타입
[코드스테이츠 PMB 13기] 서비스의 UX/UI 개선 분석하기
들어가며
현재 제주도에 머무르고 있는 나, 항공권을 예약할 때 카카오T를 사용한다. 그런데 카카오T에 들어갈 때마다 항공 버튼을 찾는 데 시간이 걸렸다. 왜냐하면? 카카오T는 무려 14개의 서비스를 메인화면에 아이콘 형태로 뿌려놓고 선택하게 하고 있기 때문이다. 코드스테이츠 PMB 13기 수업에서 UX(사용자 경험) 10가지 심리학 법칙을 듣고 내 불편함의 원인이 명확해졌다. 카카오T 서비스의 UX, UI(사용자 인터페이스) 개선 부분을 분석하고자 한다.
W4D3. UX(사용자 경험) / UI(사용자 인터페이스)
서비스의 UX / UI 개선 분석하기
오늘의 프로덕트
: 카카오T
1. 앱, 혹은 웹 서비스 1개를 선택합니다. 해당 서비스가 가지고 있는 Flow에서 UX 개선이 필요한 부분을 서비스 이용자의 관점에서 정의 및 분석합니다.
- 카카오T UX 개선점을 크게 3가지로 생각했다.
- 첫 번째는 카카오T 항공 서비스와 관련해 카카오T 앱 내에서 사전 체크인이 되지 않는다는 점이다. 카카오T 앱 내 사전 체크인 버튼이 있지만, 이 버튼을 누르면 해당 항공사 페이지로 넘어간다.(진에어 티켓을 샀다면 진에어 홈페이지로 넘어간다)
여기서 불편한 점이 하나 더 있는데, 카카오T에서 항공권 예약번호를 미리 복사해야 한다는 점이다. 카카오T 앱 내에서 항공사 페이지로 넘어가기 때문에 사전 체크인 버튼을 눌러버리면 항공권 예약번호를 확인할 수 없어 뒤로 가기를 한 뒤 예약번호를 복사하고, 다시 항공 사이트로 들어가야 한다. 즉, 매우 불편하다(사전 체크인은 예약일 1시간 전에 이용 가능하기 때문에 이미지를 첨부하지 못했다)
- 두 번째는 역시 카카오T 항공 서비스와 관련해 항공권 예약 시 시간대를 직접 설정할 수 없고 '출발시간 빠른 순', '출발시간 늦은 순', '가격 낮은 순'으로만 정렬이 가능하다는 점이다. 이로 인해 원하는 시간대의 항공편을 찾기 위해 스크롤바를 내려서 찾는 번거로움이 있다. 타 앱과 비교해 보면 항공권 가격을 비교해주는 스카이스캐너 앱은 상세 설정에서 출발시간과 도착시간의 범위를 설정할 수 있게 해 놓았다.
(왼쪽) 카카오T 항공권 예약 페이지 (오른쪽) 스카이스캐너 항공권 예약 페이지- 세 번째는 카카오T 메인화면에 14개의 서비스 아이콘이 한 번에 보인다는 점이다. 이로 인해 원하는 기능을 선택하기까지 시간이 더 소요된다. 이는 UX의 10가지 심리학의 법칙 중 힉의 법칙에도 부합한다. 선택지의 개수와 복잡성에 비례해 의사결정에 걸리는 시간이 늘어나는 것이다.(힉의 법칙)
또한, 아이콘의 배열에도 의문점이 있다. 아이콘 정렬이 가나다 순도 아니고, 사용자(나)가 많이 사용하는 빈도 순도 아니다. 어떤 기준으로 정렬된 것인지 모호하다. 자주 쓰는 아이콘을 위에 배치하고, 아이콘의 개수를 줄일 수 있는 편집 기능이 필요하다고 생각했다.
- 위에서 말한 3개의 개선점 중에서 세 번째인 카카오T 메인화면에 14개의 서비스 아이콘이 한 번에 보인다는 문제점을 토대로 자주 쓰는 서비스 편집 기능을 페이퍼 프로토타입으로 제작했다.
- 카카오T 메인화면에 14개의 서비스 아이콘이 한 번에 보인다는 점은 현실적으로 크게 어렵지 않게 구현 가능하면서도 불편한 점을 개선할 수 있는 서비스라고 생각했다. 또한, UX 심리학 법칙을 대입했을 때도 사용자 심리를 고려해 사용자 경험을 개선할 수 있을 것이라 생각했다.
- 첫 번째 문제점인 카카오T 항공 서비스와 관련해 카카오T 앱 내에서 사전 체크인이 되지 않는다는 점은 카카오T만의 기술력으로 해결 가능한지 아니면 항공사와의 이해관계가 있는 것인지 불확실해서 현실 가능성 측면에서 제외했다.
- 두 번째 문제점인 항공권 예약 시 시간대를 직접 설정할 수 없는 점은 번거로움을 방지하기 위해 개선되면 좋은 점이라고 생각해서 제외했다.
2. 어떻게 화면(UI)을 개선할 수 있는지에 대해 페이퍼 프로토타입을 제작해 봅니다.
- 카카오T 메인화면 '자주 쓰는 서비스' 편집 기능에 대한 페이퍼 프로토타입을 제작했다.
- 실제 노트 페이퍼에 수성사인펜과 플러스펜, 볼펜으로 작성했다.
- 카카오T 메인화면 오른쪽 하단에 '편집' 기능을 할 수 있는 아이콘을 제작한다.
- 편집 아이콘을 누르면 서비스 아이콘들이 흔들리게 하며(유사 효과 가능) 각 서비스 아이콘 오른쪽 상단에는 엑스 표시를 만든다. 이 엑스 아이콘을 통해 표시를 원하지 않는 아이콘은 제거할 수 있다. 또한, 서비스 아이콘을 옮기면 그 자리에 있던 아이콘은 옆으로 비켜나게 한다. 백그라운드에는 편집 기능을 알리는 격자 문양을 표시한다. 화면 오른쪽 하단에는 취소와 적용 아이콘을 만든다.
- 취소 아이콘을 누르면 원래 메인화면으로 돌아간다. 적용 아이콘을 누르면 '홈화면을 이대로 적용하시겠습니까?'라는 팝업이 뜨고, 문구 아래에는 계속편집과 적용확인이 있다. 계속편집 시 편집 화면에 머무르며, 적용확인 시 변경된 화면이 표시된다.
- 변경된 화면 왼쪽 하단에는 서비스 더보기(또는 전체 서비스) 기능을 하는 아이콘이 있다.(실선 3개로 표현 가능)
- 서비스 더보기 버튼을 누르면 전체 서비스가 날개 형태로 등장한다. 페이퍼 상 칸이 작아 서비스가 두 줄로 들어갔는데, 이건 공간에 따라 한 줄로 표현해도 된다. 서비스는 가나다 순으로 정렬하는 것이 좋을 듯하다('대리'를 적는 순간 가나다 순이 아니라는 걸 깨달았지만 다시 그리기 귀찮... 현업 프로세스였으면 그냥 줄 긋거나 엑스하고 고쳤을 것 같다) 전체 서비스 오른쪽에도 엑스 아이콘을 만들어 전체 서비스 창을 닫을 수 있도록 한다.
- 전체 서비스를 닫을 시 적용된 메인화면으로 돌아간다.
4. 개선점을 적용한 서비스 기획 산출물(1가지 선택)을 작성합니다.
- 워드 파일로 요구사항 문서(PRD, Product Requirements Document)를 원 페이지로 작성해 보았다.
카카오T 메인 페이지 '자주 쓰는 서비스' 편집 기능 요청
1. 요약 및 배경
- 카카오T 메인 페이지에 14개의 서비스 아이콘이 한 번에 제시돼 원하는 서비스를 이용하기 위한 탐색 시간이 오래 걸린다는 VOC 다수 발생 및 접수
- 이에 자주 쓰는 기능을 상단에 배치하고, 자주 쓰지 않는 기능은 메인 페이지에서 숨길 수 있는 ‘자주 쓰는 서비스’ 편집 기능 요청
2. 주요 사용자
- 모든 모빌리티 이용 고객
- 슈퍼 앱 도약을 목표로 하고 있는 만큼 기존 택시 서비스 사용자뿐만 아니라 기차, 항공 등 다양한 모빌리티 서비스 사용자 증가 추세
3. 기능적 요구사항
- 메인 페이지 오른쪽 하단 편집 기능 아이콘 생성
- 편집 기능 페이지 접속 시 1) 아이콘 흔들리는 기능, 2) 백그라운드에 편집 가능 상태를 알리는 격자무늬 표시, 3) 각 아이콘 오른쪽 상단에는 엑스 아이콘 표시, 엑스 누를 시 해당 서비스 아이콘 사라지기, 4) 아이콘을 옮기면 그 자리에 있던 아이콘은 옆 또는 아래로 비켜나기, 5) 화면 오른쪽 하단에는 취소/적용 아이콘 생성
- 취소 아이콘을 누르면 메인 페이지로 복귀, 적용 아이콘을 누르면 '홈화면을 이대로 적용하시겠습니까?'라는 팝업 생성, 문구 아래 계속편집/적용확인 표시, 계속편집 시 편집 화면에 머무르며 적용확인 시 변경된 화면 표시
- 변경된 화면 왼쪽 하단에 서비스 더보기 아이콘 생성, 아이콘 누를 시 전체 서비스를 날개 형태로 표시. 서비스는 가나다 순으로 정렬. 전체 서비스 오른쪽에 엑스 아이콘 만들어 전체 서비스 창을 닫을 수 있도록 함
4. 배포 계획
- 4주 후 다음 업데이트(5.15.2) 버전에 탑재
