정말 오래만에 글을 쓴다.
UX 디자이너로 일을 시작한지 얼마 안된 것 같은데 다음 달이면 2년차가 된다는게 믿기지가 않음
내 첫 희생양은 알뜰교통카드 애플리케이션이다.
얼마 전 UI가 대대적으로 개편이 되며 불편한 점이 한 두가지가 아니었는데
실제로 UXUI가 개선이 됐는지, 단점이 있다면 어떤 점인지에 대해 간략하게 보도록하자.
기존 앱
먼저 기존 앱을 살펴보자.
- 앱을 눌러 들어가면 제일먼저 얼마나 적립되어있는지 확인할 수 있다.
- 왼쪽 상단에 이번 달에 적립된 마일리지를 통해 쌓인 금액을 확인할 수 있다.
- 우측 스탬프 업데이트는 실효성이 있는지 모르겠으나, 오류가 있을 경우 새로고침을 할 수 있는 버튼이다.
- 가운데 슬라이드 페이지를 통해 적립 현황을 확인할 수 있고 빈 공간 숫자로 적립 횟수를 파악할 수 있다.
- 이벤트가 있는 날엔 나무 모양이 바뀌며 게임처럼 소소하게 지켜보는 재미를 준다.
- 하단에는 출발 / 도착 버튼이 엄지존에 알맞게 위치하고 있었다. 크기 덕분에 높은 주목도를 가져간다.
=> 내 정보와 관련된 탭을 더보기란에 두었으면 설정을 할 수 있다고 인식할 수 있었을 것 같다.
공지가 하단에 있어 오히려 버튼이 밑으로 내려오는 것이 오클릭을 덜 유발할 것이라 예상된다. 이용가이드를 따로 두는 것은 좋지만 하단 메뉴 구성을 일반적인 앱처럼 두었다면 하는 아쉬움이 있다. 가이드를 상단으로 올렸다면..?
그럼 바뀐 UI는 어떻게 되어있을까
메인화면
먼저 눈에 띄게 바뀐 것은 메인 화면 구성이다.
- 하단에 있던 공지를 상단으로 옮겼다. 한 줄씩 보이기 때문에 자리를 많이 차지하지않을 수 있다.
- 나의 알뜰교통카드 탭에선 현재 사용 중인 카드 종류와 이번달 적립금액을 확인할 수 있다.
- 즐겨찾기는 원하는 정류장을 설정한 뒤, 카드를 찍지 않아도 자동으로 인식해서 적립되는 기능이다. 실제로 작동하는지 실험을 해보려했으나 안찍힐까봐 무서워서(?) 확인을 못했다.... 사회 초년생은 교통비를 아껴야한다.
- 바로 확인할 수 있던 적립내역을 달력 형태로 변경시켰다. 일주일 단위로 표시가 되며 하단엔 이번 달에 얼마나 사용했는지 보여준다.
- 바로 밑엔 공지외 알림, 이벤트 등을 확인할 수 있도록 유도하는 배너를 추가했다.
- 출발, 도착 CTA는 진짜 구려졌다. 항상 노출되어있도록 z-index 값을 높였는데 엄지존 - 우측에 출발 도착버튼을 위치시킨 것은 좋으나 버튼의 크기가 너무 작고 무엇보다 눈에 띄지않는다.
- 주변 배경색 등과 동일한 색상을 사용했기 때문에 색상 주목도가 너무 떨어진다.
- 즐겨찾기 기능을 활용하지않는 유저라면 '오늘은 다른 목적지에 갈래요' 라는 문구가 와닿지 않을 것이다.
- 메인 화면에서 바로 볼 수 있었던 횟수는 밖으로 빼고 상세 내역은 전체 보기를 클릭해야 들어올 수 있다.
- 오늘 몇시에 출발 도착했는지 알 수 있는 것인데 유의미한 기능인지 잘 모르겠다.
- 그날그날 이용한 내역이 메인에서 보이는 횟수에 바로 반영되는 것이 아니기 때문에 정확한 확인을 위해 넣어둔 기능인 것 같다.
- 하단에도 출발 CTA를 넣어두었다.
=> 왜....승, 하차는 찍히지도 않는 항목인데 보이도록 해놓은 것인지 모르겠다. 심지어 상세보기, 전체보기를 누르면 하단 탭은 사라지기 때문에 새로운 화면이 펼쳐진다는 인식이 생겨버려 답답하다. 닫기가 있지만 뒤로 돌아갈 수 없을 것 같은 느낌을 주고, 바로 다른 항목으로 이동할 수 없기 때문이다.
- 하단 카드 모양의 메뉴를 누르면 현재 사용 중인 카드 내역이 나온다.
=> 이것도 왜,, 메인 메뉴에 넣어둔 것일까 라는 생각이 든다. 기존에도 있던 메뉴인데 사실 사용자 입장에서 카드 변경 등의 이용 관련 설정과 관련된 기능은 상세 메뉴로 빠지도록 은연 중에 기대하고 있을 것이라 생각한다. (이미 많은 앱이 그러고 있기 때문에) 혹은 하단 우측에 있던 프로필을 눌렀을 때 서브 항목으로 카드 앱 설정 / 내 정보 수정 등으로 나누었다면 좋았을 것 같다. (지금은 누르자마자 바로 내 정보 수정으로 들어가진다.)
이렇게 바뀐 UXUI에 대해 분노하고 있던 찰나,
일주일이 지나서 다시 들어가니 (보통 위젯만 활용한다.) UI가 한 번 더 바뀌어있었다.
메인 UI 구성과 라이팅이 바뀌었다는 것!!! (야호 ~!)
- 하나로 뭉쳐져있던 항목을 각각 카드+금액 / 마일리지 적립으로 구분시켜놨다.
- 상단에선 금액과 관련된 부분을, 하단에선 마일리지가 자동으로 적립된다는 것을 알릴 수 있도록 UX라이팅을 변경했다.
- 그리고 제일 중요한!!! 하단 출발 도착 버튼이 기존 앱과 유사하게 변경되었다는 사실
=> 버튼 구성 변경이야말로 환호해야할 부분이라고 생각한다. 유저들의 반응이 매우 나빴던 것인지 A/B test 도중이었던 것인지 아무튼간에 한 눈에 띄는 크기와 색상 변경으로 원래 기능의 위계를 찾았다!
그리고 하단 메뉴에 탭이 하나 더 추가되었는데
- 하단 마일리지M 버튼을 누르면 나오는 탭이다.
- 위의 달력 상세보기와 사실상 동일한 기능을 사용하고 있다.
- 특히 출발, 도착 시간이 찍히는데 위 달력에선 승, 하차도 리스트에 나와있지만 여긴 보이지않는 것으로 보아 차후 업데이트 할 예정이거나 보여주기식(...)으로 보인다.
=> 차라리 메인에서 달력 상세보기를 없애고 하단 메뉴를 통해서만 상세 내역을 보게 한다면 기능이 중복되지않을 것이라고 생각했다. 사용자가 직접 날짜를 설정해서 볼 수 있기 때문에 마일리지적립 탭이 더 유용하다고 생각하는데 왜 두 개를 분리해서 둔 것인가에 대한 의문이 있다.
전체적인 UI는 미니멀하게 바꾸려고 노력한 것이 보이나 초반엔 오히려 기존 앱보다 사용자경험이 더 떨어지는 문제가 발생했다.
버튼의 위계도 떨어지고 라이팅도 (띄어쓰기도,,) 사용성에 맞지않는 경우가 있었다. 그리고 지금도 기능상 왜..? 싶은 것도 있고 햄버거 메뉴를 펼치면 나오는 UI도 고칠 필요가 있지만 아무래도 사용자가 제일 많이 사용하는 부분에 대해선 빠르게 대처를 하려했다는 것이 느껴진다.
정부 앱이 계속해서 피드백을 받고 발전해나가기가 쉽지않다는 것을 알고 있기 때문에 이정도면 매우 긍정적으로 평가해줄 수 있을 것 같다.
상세하게 메뉴를 뜯어보지 못해서 아쉽지만.. 다음에 시간이 된다면 이 앱을 어떻게 고치면 더 좋은 UX를 가져갈지에 대해 직접 프로토타입을 만들어 포스팅해보려고 한다.
