-
말 안하고 주문하는 법 - 스마트 오더UX, UI 2021. 2. 17. 11:21
이 글은 '지금 써보러 갑니다'의 뉴스레터 '00:00'를 읽고 작성한 일종의 독후감입니다
↓해당 뉴스레터
작년 한 해 지겹도록 들은 소리가 있다
바로 '코로나로 인해'다
뭐만 하면 코로나로 인해 어쩌구, 코로나로 인해 저쩌구
이제는 저 소리가 코로 나올 지경이다
(무리수 ㅈㅅ ㅋ)
그래서...?
나도 한 번~ 불러본다~
코로나로 인해
비대면 주문(배달, 포장)이 증가하면서
각종 브랜드에서 자체 배달, 포장 앱을 출시하고 있다
이는 배달앱 수수료 절감, 주문 데이터 활용,
자체 프로모션 등의 장점을 지녀
충성고객을 확보할 수 있는 수단이 된다
이번에는 그중에서
커피 브랜드 앱을 살펴볼 계획이다
특히 '스마트 오더'라고 불리는
앱으로 주문하고 매장에서 받는 주문 방식을 중심으로
- 각 앱의 주문 방식은 어떤지
- 특징과 장단점은 무엇인지
를 확인하며 큰 깨달음을 얻어 가도록 하자
참고로 6개 브랜드를 다룰 예정인데
너무 길어질 것 같아서 3개씩 나눠
- 상편(스타벅스, 해피 오더(파리바게뜨), 커피빈)
- 하편(이디야, 빽다방, 투썸플레이스)
으로 진행하겠음
스마트 오더 원조 맛집 - 스타벅스
요즘 출시되는 스마트 오더 서비스들은
스타벅스 형님한테 인사 한 번 오지게 박고 시작해야 한다
스타벅스는 '사이렌 오더'라고 부르는 스마트 오더를
커피 브랜드 중 가장 먼저 시작했다
그것도 전 세계에서 우리나라 스타벅스가 제일 먼저 함
(2014년 5월에 시작)스마트 오더를 제일 먼저 시작한 만큼
서비스 고도화가 일정 수준 이상일 것이고
사이렌 오더, 스타벅스 자체가 워낙 인기 있으니
충분한 사용자를 기반으로
앱 개선이 이루어졌을 것이다
그러니 좋은 귀감이 될 듯
홈 화면부터 살펴보면
<- 화면의 상단에는 배너 광고가 있고
<- 아래에는 전체 메뉴, 나만의 메뉴, 히스토리를 나열해
사용자가 빠르게 메뉴에 접근할 수 있도록 했다
<- 그 아래 메뉴 영역들은
로그인을 했냐/안 했냐, 어떤 요일이냐/시간대냐
에 따라 달라지는데
이 사진은 로그인을 안 했을 때, 주말 점심 화면이고
로그인을 하면 '사용자를 위한 추천 메뉴'가 나열된다
추천 메뉴는 주문을 많이 했거나
최근 주문한 메뉴 등으로 구성된다고 한다
그 외에는 새로 나온 메뉴가 뜬다든지,
디저트를 추천해준다든지,
매장을 설정해놓은 경우
해당 매장 추천 메뉴가 뜬다든지 등
유동적으로 알고리즘에 맞춰 뜨는 것으로 보인다
사이렌 오더 메뉴 화면의 좋은 점은
이미지와 메뉴명을 함께 제시해
어떤 메뉴인지 바로 이해할 수 있다는 것
특히 신메뉴 추천할 때 좋을 거 같다
(나도 저거 보고 스벅 디저트 먹고 싶어 져서
티라미수 롤 사 먹었는데 개노맛임
절.대.먹.지.마)
홈 화면에서
'전체 메뉴'를 클릭하면 나오는 화면이다
큰 범주의 1차 카테고리(음료, 푸드, 상품)와
세부 메뉴의 2차 카테고리(NEW, 추천, 콜드브루 등)로 구성되어 있다
자세히 보면
홈 화면에도, 전체 메뉴 화면에도
하단에 매장 설정 안내가 있다
평범해 보이는 이 안내 배너는
사용자 행동 유도의 정석이라고 할 수 있는데
왜냐하면, 사용자 행동 유도의 3요소인
- 어떤 행동을 해야 하는지 알려주기 -> 매장 설정
- 왜 해야 하는지 알려주기 -> 주문 가능 수량 표시 위해
- 그 행동을 쉽게 할 수 있도록 도와주기 -> 설정 버튼 제공
를 갖추었기 때문이다
무엇보다도 행동의 이유를 설명한 점이
제일 잘 한 점이다
아무리 재밌고 친절하게 안내하고, 강조하고,
버튼도 만들어 주는 똥꼬쇼를 해도
이유를 설명하지 않으면 실제 행동으로 이어지지 않기 때문
이건 전체 메뉴에서 특정 메뉴를 선택하면 나오는 화면이다
여기서도 사이렌 오더의 장점이 드러나는데
아이스에서 바로 핫으로 바꿀 수 있다는 것이다(vice versa)
일반적으로 옵션을 선택하는 과정은
'옵션 누르고 - 원하는 옵션 선택 - 확인 누르기'
이런 식으로 진행된다
(제일 오른쪽의 사이즈 선택 창이 그런 식으로
'사이즈 누르고 - 원하는 사이즈 선택 - 확인'
의 과정이다)
뉴스레터의 말을 빌리자면
'선택 - 확인 - 선택'의 과정인 것
근데 사이렌 오더는
바로 아이스/핫을 확인해서 선택할 수 있도록 했다
즉, 3단계의 과정을
'확인 - 선택'의 2단계 과정으로 만든 거셈
'그게 뭐 장점이냐 ㅋㅋ'라고 할 수도 있다
근데 한 두 번이야 별 차이가 없겠지만
옵션이 여러 개거나 여러 잔을 시켜야 하는 경우처럼
이 과정을 반복해야 하는 경우에는
'하 ㅈㄴ 귀찮게 만들어놨네'라고 생각하게 될 거다
근데 핫/아이스랑 컵 선택은 쉽게 만들어 놨으면서
사이즈 선택은 '선택-확인-선택' 방식으로 해놨다는 게 좀 의아함;
'퍼스널 옵션'은
화면에서 바로 선택하거나
팝업 창이 뜨는 게 아니라
새로운 화면으로 이동해 선택하게 했다
선택지가 많기 때문에 모두 나타내기 위함인 걸로 보인다
이걸 보면 '확인 - 선택' 방식은
선택지가 적은 경우(아이스/핫 - 2개, 컵 종류 - 3개)에
잘 어울린다는 걸 알 수 있다
우여곡절 끝에 주문하기를 누르면
왼쪽 사진처럼 매장을 선택하라는 말이 나온다
안내 문구에 이어서
매장 선택에 왜 이렇게 집착하나 생각해보니
사이렌 오더라는 게 결국
매장에서 상품을 받는 거다 보니
매장 상황에 따라 움직여야 한다
아마 메뉴를 열심히 선택하고
주문하려고 매장을 선택했는데
해당 매장에 재고가 없다고 주문이 안된다면
'아 매장을 빨리 선택하라고 했어야지 ㅡㅡ'하는 반응이 나올 것이다
그리고 실제로 이런 사람들이 많았고
'짜증 섞인 피드백이 지금의 사이렌 오더를 만들었다'
라고 조심스레 추측해본다
주문할 매장을 선택하기 위해서는
GPS를 켜야 하는데
그러면 근처에 있는 매장을 알려준다
주문이 가능한 매장은 진하게
불가능한 매장은 연하게 표시해
알아보기 쉽게 나타냈고
매장 사진과 특징(주차 가능 여부, 리저브 매장인지 등)을
잘 알려주고 있다
총평을 하자면 짬바가 가득 묻어 나오는 앱이다
배달과 주문의 중점에서 - 해피 오더
난나 난나난나 난나나~
해피해피 해피해~
...뭐?
이 해피송의 주인이 아니라고?
'해피오더'는 SPC 그룹의 앱이다
해피포인트 적립하는 그 SPC임
(해피송 때문에 이마트가 더 잘 어울리긴 함)
위에 링크에 설명 써있는거 보면
무슨 앱인지, 어떤 브랜드들이 있는지 알겠제?
사이렌 오더가 메뉴부터 선택할 수 있던 것과 달리
해괴오더는 매장부터 선택하도록 한다
이건 스벅처럼 한 브랜드가 아니라
여러 브랜드를 통합해놓은 앱이기 때문에
처음부터 메뉴를 보여주기엔
선택지가 너무 많아져서 그런 것 같다
메뉴부터 보여줬으면 대환장파티였을듯
그렇게 주소를 입력하면 매장 리스트가 나오는데
사이렌 오더가 매장 사진을 보여준 것과 달리
브랜드 로고를 보여준다
이것 또한 사진을 보여주면
어떤 브랜드인지 인식하는데 시간이 걸리지만
로고를 보여주면 바로 알 수 있기 때문에
로고를 택한 것이라 생각한다
나름... 최적화를 잘했잖아?
그 외에 별점, 리뷰 수, 사장님 댓글 수,
픽업 가능 시간, 취급 품목 수, 매장과의 거리
등의 정보가 나온다
근데 화면을 보면 알 수 있듯이
텍스트가 빼곡하게 차있다
게다가 별점, 댓글 수 같이
너무 배달앱처럼 해놨는데
'프랜차이즈 매장인데 매장마다 평점이 다르다는 건
프랜차이즈로서 제 역할을 하지 못한다는 거 아닌가?'
라는 생각이 들었다
굳이 별점을 넣어야 하나 싶다
품목 수를 나타낸 점에 대해서는
같은 값이면 다홍치마처럼
'비슷한 거리면 품목 수가 많은 곳이 낫지 않을까'
하는 생각을 반영한 것 같다
참고를 위해 배민을 보면
이름, 리뷰 등 기본적인 정보와
평균 배달 시간, 최소 주문 금액, 배달 팁 등을 나타냈는데
이처럼 리스트를 구성하는 정보는
사용자가 앱을 사용하는 목적에 부합해야 한다
쓸데없는 정보를 제공하면 안 된다는 소리
간단하게 얘기하자면
리스트(목록) = 여러 가지 선택지
이므로
리스트에 나오는 정보는
사용자의 선택을 돕는 정보여야 한다
그렇지 않으면 사용자가 선택지를 일일이 다 눌러서
들어가 본 다음에 확인해야 하는데
그러면 좋아하겠어요~안 좋아하겠어요?
매장을 선택하면 나오는 메뉴 화면인데
상단에는 메뉴, 리뷰, 매장 정보
좌측에는 메뉴 카테고리
하단에는 주요 화면 탭
거기다 우측 하단에 장바구니 버튼, 상단 이동 버튼까지
아주 꽉꽉 눌러 담았다
고봉밥 배 터지겠네;
그러다 보니 영역 간 구분이 잘 안되고
피로감이 느껴진다
이 부분은 개선이 필요할 듯
메뉴를 선택한 화면이나 주문 화면은
별 특징이 없어서 PASS
총평을 하자면 다양한 브랜드를 담기 위해
꽤나 최적화를 잘했지만
개선의 여지가 많은 앱
'다방'의 피가 흐른다 - 커피빈
커피빈이라고만 부르다 보니
풀 네임이 '커피빈 앤드 티 리프'인 건 몰랐다
지금 보니 이 로고에도 아래에 써있구나ㅎ
그래서 그런지 커피빈에는 티 메뉴가 많음
물론 마셔보지는 않았습니다만...
우리에게 콩다방으로 친숙한 커피빈의 스마트 오더는
별다방으로 친숙한 스타벅스의 사이렌 오더와 매우 비슷하다
(이름은 '퍼플오더'다)
저희.. 어디서 본 적 있지 않아요?
퍼플오더는 사이렌 오더처럼
매장을 선택하지 않은 채로
메뉴 선택 - 주문 단계까지 갈 수 있다
상단에 매장을 선택하라고 써있기는 하지만
별로 눈에 띄지도 않고
(사이렌 오더는 텍스트 색깔을 다르게 해서 강조했음)
왜 매장을 선택해야 하는지
이유도 써있지 않다
(사이렌 오더는 써있었...)
메뉴를 보여주는 구성도 심플하긴 한데
너무 심플한 느낌이 든다
좀 텅 비어 보이는...
솔직히 디자이너 없이 기획자, 개발자가 프로토타이핑으로 만든 느낌 남
대신 전체 메뉴, 나만의 메뉴, 주문내역이 하단 탭에 있는 점은
요즘 하단 탭을 사용하는 앱들이 많아서
사람들이 하단 탭에 익숙할 텐데
이 점을 잘 반영한 것 같다
(사이렌 오더는 중간에 있어서 살짝 어색했음)
전체 메뉴 화면은 사이렌 오더와 거의 흡사하다
사이렌 오더가 리스트로 제시했다면
퍼플 오더는 그리드로 제시한 차이 정도?
메뉴를 선택한 화면인데
퍼플 오더도 바로바로 변경이 가능한 사항이 많았다
아이스/핫 도 바로 변경 가능했고
사이즈, 컵도 바로바로론~
사이즈까지 변경 가능한 점에서
퍼플오더 상점 10점!
그리고 더 칭찬하고 싶은 부분은
퍼스널 옵션 부분이다
사이렌 오더가 아예 다른 페이지로 넘어가서
옵션을 추가하는 것과 달리
퍼플 오더는 팝업으로 뜨게 해서
연속성을 느낄 수 있었다
어둡지만 뒤에 어떤 메뉴를 선택했는지 보이는 것도 좋았음
그리고 각 옵션에 대해
선택을 하면 추가되는 가격이 바로 표시돼서
뭘 얼마나 추가했는지 알 수 있는 점이 좋았다
(사이렌 오더는 안됐거든)
마지막으로 상품 하단에
이커머스처럼 '상품 금액 + 옵션 금액 = 주문금액'
으로 뜨는 점이
내가 얼마를 추가해서 먹는구나,
얼마짜리를 먹는구나 알 수 있어서 더 편했다
(사이렌 오더는 그냥 뭉뚱그려서 얼마라고만 나옴)
사이렌 오더가 교묘하게
얼마 썼는지 모르게 하려는 건지는 모르겠지만
제대로 된 가격 정보를 제공하는 입장에서는
퍼플 오더의 승리다
("나야.. 니가 예뻐하던 사이렌 오더...")주문을 하려고 하면 역시
매장 선택화면으로 이동하는데
선택 가능한 매장과 불가능한 매장 모두를 보여주고
작은 아이콘(디카페인, 주차, 와이파이, 배달 등)으로
매장 정보를 알려준다
이렇게 조건에 맞지 않는 경우
목록에 보여줘야 할지, 말아야 할지
(선택이 불가능한데도 목록에 보여주는 것처럼)
에 대해 에디터 분께서 좋은 말씀을 해주시는데
에디터 분이 어떤 앱에서 영상 업로드 기능을 기획할 때
15초짜리 영상으로 제한을 뒀다고 한다
근데 업로드 영상 선택 시
목록에 15초 이하의 영상만 보여줄지,
아니면 모든 영상을 보여주고
15초 이하만 선택 가능하도록 할지
고민을 했다고 한다
결국 후자를 선택했는데
그 이유는 사용자가 영상 길이를 기억하지 못할 가능성이 높고
영상 길이가 길어 선택이 불가능하단 걸 알게 되면
이를 편집해서 올리는 걸 유도할 수 있기 때문이다
(불가능한 선택지를 보여줌으로써 행동을 유도함)
커피빈의 경우에
퍼플 오더를 쓴다는 건
커피빈이라는 브랜드에 관심이 있다는 뜻이므로
선택이 불가능한 매장이더라도
노출시킴으로써 매장을 알려
추후에 다른 매장을 이용하도록 만들 수 있기에
선택 불가능한 매장도 보여주는 것이
적절한 선택이었다고 할 수 있다
총평하자면 심미적으론 조금 부족하나
기능적으론 사이렌 오더에 버금가는 앱
이상으로 세 브랜드의
스마트 오더에 대해 살펴봤다
서로 비슷하면서도 다른 점이
꽤나 재밌었다
(물론 글 쓰는 건 힘들었다^^)
하편에서 봅시다
'UX, UI' 카테고리의 다른 글
앱 크리틱 - 당근마켓 下 2편 (0) 2021.07.21 앱 크리틱 - 당근마켓 下편 (0) 2021.07.21 앱 크리틱 - 당근마켓 上편 (0) 2021.07.16