brunch

매거진 UI 톺아보기 시리즈

라이킷 55 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유저해빗 Oct 01. 2019

배달앱 UI, 뭣이 중한디?

[UI 톺아보기 시리즈] 음식 배달 서비스 (2)

[주의] 본 글은 앱을 하나씩 선정해서 화면 인터페이스를 톺아보기(=샅샅이 훑어 가며 살피기) 위해 기획한 "UI 톺아보기 시리즈"입니다. 독자들의 관심을 끌기 위해 제목을 다소 자극적으로 선정했지만 글 내용은 UI 분석에 초점이 맞춰져 있음을 미리 밝혀 드립니다.

이전 글인 굿바이 우버이츠, 한국 대표 배달앱과 다른 그림 찾기에서는 UberEats의 메인화면을 중심으로 국내 배달앱 3사와 비교해보았습니다. 링크를 통해서 복습하고 오시면 좋습니다.

굿바이 우버이츠, 한국 대표 배달앱과 다른 그림 찾기

[UI 톺아보기 시리즈] 음식 배달 서비스 (1) | [안내] 본 글은 앱을 하나씩 선정해서 화면 인터페이스를 톺아보기(=샅샅이 훑어 가며 살피기) 위해 기획한 "UI 톺아보기 시리즈"입니다. 글 내용은 UI 분석에 초점이 맞춰져 있음을 미리 밝혀 드립니다. 지난번에 다룬 시리즈 첫 번째 주제인 "메신저" 서비스에 이어서, 이번에는 최근 앱 마켓에서 핫이슈로 부상 중인 "음식 배달" 서비스에 대해 살펴보겠습니

brunch.co.kr/@userhabit/69

계속해서 배달앱 UI를 비교해서 살펴본 후, 상세페이지와 주문 프로세스의 UI 위주로 정리해 보겠습니다.

배달의민족 김봉진 대표님께서 음식점 전단지를 직접 주으며 식당정보를 모았다는 일화는 3조 원대에 이르는 배달앱 시장뿐 아니라 이젠 스타트업계의 레전드가 되었죠. 16절 홍보 전단지에 총천연색으로 매장 고유의 개성을 뽐냈던(?) 시절과 달리, 이제 요식업 사장님들은 각종 배달앱에 노출되는 메모지보다 작은 한 칸 크기의 영역에서 배달시간, 평점, 가격 등 각종 숫자들과 씨름해야 하는 시대가 되었습니다.

데이터로 고객 유인하기

그렇다면, 각 배달앱에서 음식점 정보를 어떻게 보여주고 있을까요?

UberEats, 쿠팡이츠의 음식점 메뉴카드

UberEats와 쿠팡이츠의 UI는 전반적으로 매우 흡사합니다. 음식점 리스트를 표시할 때, 메인 화면에서 쓰인 카드 UI를 사용하는데 대표 메뉴의 사진을 큼직하게 제공하고 음식점 선택에 필요한 정보를 하단에 표시하고 있습니다.

또, UberEats의 경우 음식점과 메뉴에서 영문을 함께 제공하고 있으며 가격 정보, 음식 카테고리, 배달 예상시간, 평점 등 많은 정보를 간결하게 잘 배치했습니다. 고객의 관심을 끌 만한 할인 정보의 경우 이미지 안에 넣거나, 배너 띠를 이용해서 좀 더 돋보이게 만들었네요.

배달의민족, 요기요 음식점 리스트

배달의민족과 요기요의 경우 메인 화면에서는 카드 UI를 사용하지만, 음식 카테고리를 클릭하면 음식점 리스트 UI를 제공합니다. 카드 UI보다 이미지 영역이 작아서 더 많은 개수의 음식점과 정보를 보여줄 수 있지만, 텍스트가 많아서 정보가 한눈에 들어오지 않는 단점도 있습니다.

따라서, 고객들이 관심 가질만한 정보인 별점에 컬러를 입히거나, 제공 서비스나 할인정보 등을 눈에 띄게 블록으로 표시하는 방법으로 정보의 Hierarchy를 주려는 노력이 보입니다.

UberEats와 쿠팡이츠의 매장 정보 UI

또, 다른 두 업체와 달리 UberEats와 쿠팡이츠는 매장의 위치정보를 지도와 함께 제공하는데요. UberEats는 배달받을 위치와 음식점 위치를 함께 표시해서 대략적인 배달 거리와 예상 배달시간을 짐작할 수 있게 해서 편리했습니다.

점심식사 시간, 막내의 험난한 길

회사 막내의 점심시간은 왜 늘 고달픈 걸까요? 오늘도 배 군은 배달앱을 켜고 직원들의 주문을 열심히 받고 있습니다. 장바구니에 열 명 남짓의 메뉴를 꾸역꾸역 담고 결제하기를 누르려는 찰나, 뒤늦게 박 과장님이 외치십니다. "배군, 나 김치볶음밥 말고 계란볶음밥으로 바꿔줘"

모든 앱에서 메뉴를 추가하거나 삭제하는 기본 기능을 제공하고 있지만, 수량을 변경하는 부분에서는 UI가 조금씩 달라서 살펴보겠습니다.

각 배달앱의 장바구니 UI

GOOD

배달의민족의 경우 메뉴 개수 변경이 쉽고, 메뉴 추가와 삭제에 동일한 폰트 컬러를 지정해 눈에 잘 띄게 한 점이 좋았습니다. 전체 삭제 버튼도 제공하고 있어서 편리했고요.

NOT ENOUGH

요기요의 경우 배달의 민족과 비슷한 UI를 제공하고 있습니다. 하지만, 보통 다른 앱들은 아래쪽 CTA(Call to Action) 버튼을 클릭하면 장바구니 페이지로 넘어가는데, 요기요는 바로 결제 페이지로 넘어가서 단계를 줄였지만, 수량이나 메뉴를 변경하는 경우 장바구니 메뉴(상단에 카트 모양 버튼)를 찾기가 어려웠습니다.

UberEats는 동일한 메뉴를 추가해도 개별 아이템으로 추가되어 쌓이는 구조로 되어있어 익숙하지 않았는데, 메뉴별 옵션이 다양한 외국에서는 익숙한 구조일 수 있을 것 같네요. 메뉴를 지우려면 스와이프를 해야 한다는 것도 알아채기 어려웠습니다.

쿠팡이츠는 실수로 같은 메뉴를 2번 추가했다면, 다시 전체 삭제를 하고 메뉴를 추가해야 해서 불편했습니다.

메뉴, 수량 변경 등 서비스 주요 사용 흐름에서 벗어나는 경우에도 사용하기 편리한 UI를 꼼꼼하게 챙기는 것 잊지 마세요!

"방금 출발했어요"가 안 통하는 시대

모든 역경을 딛고 음식 주문에 성공했다면, 이제 배달원만 목 빠지게 기다리면 됩니다. 중국집에 전화하면 "방금 출발했어요"한다는 우스갯소리가 있죠. 배달원의 위치를 실시간으로 친절하게 제공해주는 배달앱 덕분에 이제는 이 우스갯소리도 아재 개그가 될 위기에 놓였네요.

UberEats와 쿠팡이츠의 배달 중 UI

GOOD

UberEats와 쿠팡이츠의 경우, 주문이 접수되고 배달원이 매칭 되면 지도에서 배달원의 위치 정보를 실시간으로 제공해줍니다. 아주 정확하진 않아도, 굳이 음식점에 전화하지 않고도 진행 상태와 배달 예상시간을 가늠해볼 수 있으니 고객의 답답함을 UX로 해결하는 훌륭한 사례입니다.

쿠팡이츠의 경우 전체 단계를 각 단계별 시작시간과 함께 표시해 한눈에 현황을 파악할 수 있도록 했습니다. 한 단계 더 고민하고 꼭 필요한 요소들을 적재적소에 잘 배치한 사례입니다. 배달원에게 연락하기 버튼과 현재 단계, 배달원의 아이콘까지 포인트 컬러를 통일한 것도 좋은 센스네요.

배달의민족과 요기요의 배달 중 UI

배달의민족과 요기요에서는 지도정보 없이, 진행 단계와 도착 예정 정보를 제공합니다. 배달의민족은 배달이 진행 중일 때 메뉴에 알림 아이콘을 표시해서 진행상황을 확인할 수 있고, 해당 메뉴를 클릭하면 현재 상황을 실시간으로 갱신해줍니다. 배달원 정보를 크게 노출시키고 있는 점이 눈에 띄네요. 고객에게 신뢰를 주기 위한 기획의도에서 나온 선택의 결과물입니다.

NOT ENOUGH

요기요의 경우, 배달정보를 제공하지만 새로고침 버튼을 누르지 않으면 해당 정보가 실시간으로 갱신되지 않는 점이 아쉬웠습니다. 또, "18분 후 배달 예정"이라는 문구가 18분 후 배달을 시작한다는 의미인지, 배달이 도착한다는 의미인지 정확하게 전달되지 않아 혼란을 줍니다.

그릇 대신, 리뷰 회수

각 배달앱에서 리뷰를 수집하는 방식에도 조금 차이가 있습니다. UI 보다는 기능적인 측면이지만 간단히 살펴보시면 좋을듯합니다.

UberEats, 쿠팡이츠의 리뷰 UI

UberEats와 쿠팡이츠의 경우에는 메뉴에 대해서 좋아요, 싫어요 2개의 평가를 내릴 수 있습니다. 5점 척도를 평가할 때 기준이 사람마다 조금씩 다른 것에 비추어볼 때 단순하게 평가지를 제공하는 것은 좋은 선택인 것 같습니다. (5점 척도냐, 2점 척도냐에 대한 더 자세한 고민은 참고 링크를 살펴보세요.)

과거 주문 이력에 재주문 버튼을 추가해두는 것도 사용 플로우를 고려해서 설계한 좋은 사례입니다.

배달의민족, 요기요의 리뷰 UI

배달의민족, 요기요 모두 5점 척도의 별점과 사진 리뷰를 쓰도록 권장하고 있습니다. 사장님이 댓글로 피드백을 관리하게 하는 등 리뷰에 굉장히 신경을 쓸 수 있도록 만들었습니다. 배달의민족에서는 해당 리뷰가 "도움돼요"라고 리뷰에 대한 평가를 제공하기도 하고, 요기요는 맛, 양, 배달로 세분화해서 평가기준을 제공하고 있습니다.

결론

같은 산업분야의 앱 UI는 결국 비슷한 화면으로 수렴해가기 마련입니다. 특히, UberEats와 쿠팡이츠의 UI가 흡사하고, 배달의민족과 요기요의 UI가 서로 흡사하다는 것도 재밌는 부분이었습니다.

네 개의 배달앱을 비교하면서, 기획의도에 따라 수집하는 데이터와 화면 설계가 달라진다는 점이 업체 간에 명확히 드러나서 좋았습니다. 서비스 기획 초반부터 주요 사용 흐름과 쌓아야 할 데이터를 잘 정의해놓아야 사용하기 편리한 UI를 그릴 수 있다는 점을 다시 짚고 가면 좋겠습니다.

곧, 한국에서 서비스를 종료할 UberEats에 대해 아쉬움을 표하는 글을 종종 찾아볼 수 있었는데요. 서비스 기획의도와 사용자의 편의를 위해 잘 구현된 UI의 힘이 크기 때문이라고 생각합니다. 국내 배달앱도 주력 시장인 국내 사용자 특성에 맞게 편리한 기능들이 잘 녹아져 있지만, UberEats에서 제공하는 개인 맞춤형 데이터 최적화, 외국인을 대상으로도 서비스가 가능하도록 글로벌화에 신경 쓴 부분 등을 잘 흡수해서 사용자에게 더 편리함을 주는 좋은 배달앱 서비스로 계속 거듭났으면 좋겠습니다.

*글에 대한 의견이 있으시면 댓글과 피드백 자유롭게 부탁드립니다.