우버(Uber) ¹
UI Insight 시리즈 02
© 우버(Uber)온보딩 ¹
스플래시 페이지에 로고가 발생하며, 시작 페이지가 추가적으로 발생합니다. 이때 위치정보에 대한 다이얼로그(dialog)가 온보딩 전 발생합니다. iOS에서는 얼럿(alert)이라고도 부릅니다.
© 우버(Uber)온보딩: 로그인 ¹
전화번호 · 소셜 로그인 · 계정 찾기를 통해 로그인할 수 있습니다. 전화번호의 경우 처음부터 텍스트 필드를 제공하여 플로우를 줄이고 있습니다. 인증번호를 입력하는 즉시 로딩 스피너가 발생하며 다음 페이지로 이동합니다. 약관 동의 시 필요한 알림에 대한 다이얼로그가 발생합니다.
© 우버(Uber)차량 호출 ²
차량을 호출할 위치와 차량의 종류를 선택합니다. 목적지 추가 버튼에 5개까지 경유지를 추가할 수 있다는 툴팁이 나타납니다. 가장 저렴한 차량의 종류를 태그를 통해 알려주며, 차량과 연결 중일 시 프로그래스바로 현재 연결 중임을 직관적으로 알려줍니다. 차량 연결 후 바텀시트를 드래그하여 정보를 수정할 수 있습니다.
© 우버(Uber)차량 호출: 라이더 추가 ²
함께 탑승할 라이더를 추가할 수 있습니다. 추가해 놓은 사용자를 리스트에서 선택하여 추가할 수 있습니다.
© 우버(Uber)차량 호출: 우버기사 전화 ²
바텀시트에서 전화 버튼을 누러 우버기사에게 전화를 걸 수 있습니다. 전화, 메모, 예약과 같은 부가적인 기능을 바텀시트에 넣어 가장 하단에 위치한 지도의 위계를 사용자가 항상 인지하고 있을 수 있습니다.
© 우버(Uber)차량 호출: 메시지 ²
인풋 필드에 메모가 필요한지 묻는 플레이스 홀더가 존재합니다. 탭 하여 메시지 페이지로 넘어갈 수 있으며, 칩을 탭 하여 주요 메시지를 간편하게 전송할 수 있습니다. 바텀시트에서 메시지와 같은 중요한 기능을 페이지를 넘겨서 위계가 복잡해지지 않습니다.
© 우버(Uber)차량 호출: 컬러 신호 ²
라이트 모양의 버튼을 탭 하여 우버기사에게 사용자의 위치를 알려주는 컬러 신호를 줄 수 있습니다. 하단에는 차종과 차량번호가 노출됩니다. 백그라운드의 색상을 명도가 낮아지는 그라디언트를 사용하여 인위적이지 않고 자연스러운 느낌을 줍니다.
© 우버(Uber)차량 호출: 경유지 추가 ²
경유지 추가라는 플레이스 홀더가 있는 인풋 필드를 탭 하여 경유지를 추가할 수 있습니다. 추가 시 하단 지도에 반영되어 나타나며, 확인을 탭 하면 가격이 변경되어 다시 사용자에게 확인시켜 주는 모달이 발생합니다.
© 우버(Uber)차량 호출: 호출 취소 ²
취소 버튼을 누르면 바텀시트 위에 새로운 바텀시트가 올라오며 호출을 취소할 수 있습니다. 취소 버튼은 텍스트가 빨갛고 위계가 낮게 하여 사용자에게 주의를 줄 수 있습니다. 아니오라는 버튼을 강조하는 것이 아닌, 기사에게 전화 버튼을 강조하여 기존 멘탈모델과는 다소 달라 보이는 버튼 배치가 인상적입니다.
© 우버(Uber)차량 호출: 안전 도구 ²
바텀시트 하단에 안전과 관련된 툴팁이 파란색으로 강조되어 있습니다. 탭 하면 바텀시트가 추가로 발생하며, 하단에 페이지 컨트롤이 있는 카드를 가로로 슬라이드 하여 안전도구에 관련된 정보를 얻을 수 있습니다. 안전 도구의 메뉴는 직관적인 아이콘으로 표현됩니다. 빈번히 사용되는 기능이 아님에도 긴급한 상황을 위해 버튼의 색상이 특히 강조되어 있습니다.
다음 글에서 이어집니다
인터랙션 ★★★☆☆
온보딩 및 툴팁 등에 사용되는 채도 높은 컬러와 일부 애니메이션이 매력적이지만, 페이지나 모달의 이동은 다소 딱딱하거나 부자연스럽게 보이는 경우가 있습니다.
직관성 ★★★★☆
택시 호출의 기능 및 전체 네비게이션의 직관성은 높습니다. 다만 택시 호출을 목적으로 앱을 사용하는 사용자는 그 외의 기능이나 뎁스에는 다소 직관적으로 구조를 알기 어려울 수 있어 보입니다.
