스타벅스 사이렌오더엔
UX심리학이 녹아있어,,!
[코드스테이츠 PMB 14] Daily
스며든다,,스며든다,,스타벅스에 스며든다,,
스타벅스 커피는 다른 카페브랜드와는 다르게 어딘가 고급지고 끌린다. 그 경쟁력에는 우수한 맛과 잘 쌓아온 브랜딩도 있겠지만, 고객의 심리와 니즈를 꿰뚫어 이에 척척 보답하는 브랜드라는 생각이 들었다. 사람의 마음을 설레게 하는 굿즈, 그리고 매달 나오는 입맛 저격 신메뉴,,,스타벅스는 다 생각이 있다. 그렇다면, 스타벅스가 국내 최초로 도입한 앱 주문인 '사이렌오더', 이 서비스에도 엄청난 비밀이 숨겨져 있지 않을까? UX/UI의 10가지 심리학적 접근을 바탕으로 스타벅스의 사이렌오더를 파헤쳐보자!
Laws of UX | 작가 Yablonski, Jon | 출간 2020.08.11
Laws of UX는 심리학적 접근을 이용하여 기능적인 UX 디자인을 어떻게 효과적으로 구성할지에 대한 10가지의 법칙을 다룬 책이다. 스타트업의 시작 단계에서 내부 관련 데이터가 없는 시점에 심리학적인 접근을 바탕으로 UX 기능의 법칙을 다뤘다고 한다. 저서는 국내도서 'UX/UI의 10가지 심리학 법칙'으로도 출간되었다.
UX/UI의 10가지 심리학 법칙
1. 사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
2. 대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다.
3. 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
4. 보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못한다.
5. 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
6. 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
7. 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
8. 비슷한 사물이 여러 개 있으면 그중에서 가장 차이 나는 한 가지만 기억할 가능성이 크다.
9. 복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
10. 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 높아진다.
1. 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
왼쪽부터 스타벅스, 커피빈, 할리스, 바나프레소의 앱주문 서비스 첫 화면이다. 화면의 심미적인 요소와 구성은 해당 브랜드 BI의 키컬러와 톤앤매너를 반영하기에 상이하지만, 구성하고 있는 요소(주문, 선물하기, 카페 페이(카드), 적립 상황)들은 모두 같다. 스타벅스가 처음 주문앱 서비스를 도입했기에 모두가 스타벅스의 UI를 어느정도 참고했기 때문에 생긴 결과라고 생각한다.(특히, 바나프레소는 거의 복사 붙여넣기 수준이다.)
2. 대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다.
요즘 나의 최애 음료, 아이스 블랙 글레이즈드 라떼를 주문하려면 해당 창을 거쳐야 한다. 그 중, '주문하기'라는 최종 구매 전환 CTA는 중간 하단에 초록색 버튼 형식으로 존재한다. 이는 클릭하는 손가락이 위치할 가능성이 큰 하단에 버튼을 위치시키고, 스타벅스의 키컬러를 담은 비교적 큰 사이즈의 버튼으로 디자인해 CTA로의 빠른 액션을 유도하고 있음을 알 수 있다.
3. 복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
스타벅스 특유의 깔끔하고 모던한 감성으로 심미적인 디자인을 했기 때문에 복잡하진 않지만, 해당 서비스의 주요 기능인 메뉴 브라우징, 앱 주문을 행하기 위해서는 스타벅스의 모든 메뉴와 커스텀 서비스를 담아내야 하는 어느 정도의 줄일 수 없는 복잡성이 존재한다.
4. 보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못한다.
해당 화면은 메뉴를 커스터마이징하기 위한 퍼스널 옵션이다. 주요 퍼스널 옵션은 총 8가지인데, 마지막에 위치하는 <기타> 카테고리에는 '글레이즈드 폼'과 '번트카라멜 파우더'가 존재한다. 폼과 파우더는 다른 종류의 옵션이며, 실제로 스타벅스에는 에스프레소 폼, 글레이즈드 폼등 다양한 종류의 폼이 존재하고 파우더 또한 민트초콜릿 칩 파우더, 바닐라파우더, 번트카라멜파우더 등 많은 옵션이 존재한다. 만들고자 한다면 만들 수 있는 카테고리인데, 해당 법칙만 아니었다면 폼과 파우더 카테고리 따로 만들어 총 10개의 옵션 카테고리를 생성하지 않았을까?
5. 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
이건 극히 내 주관적인 의견일지 모르겠지만, 스타벅스의 사이렌오더 디자인은 지독하게 깔쌈(?)하다. 일렬로 정렬을 맞춰 줄 서 있는 음료하며, 다른 앱보다 크게 보이는 음료 이미지까지,, 하단 바에 있는 아이콘들도 매우 깔끔하고 모던하여 군더더기없고, 탭바에 영어로 작성된 카테고리명 또한,, 멋지다,,
6. 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 높아진다.
나는 평소에 이 4가지 앱을 모두 쓴다. 사용해본 결과, 바나프레소와 스타벅스 앱주문 속도는 굉장히 빠르다. 앱 로딩 시간이 길지 않고, 갑자기 서비스에서 튕겨나가는 일도 없다. 주문과정 뿐만 아니라 주문 승인도 굉장히 빠르며, 내 주문의 진행 상황까지 알림으로 알려준다. 이 모든 것이 너무나도 빠르게 진행되기 때문에 주문을 하고 멍하게 기다리는 것보다는 사이렌오더를 간편하게 사용하고 책을 읽으며 기다리는 좋은 사용자 경험을 제공한다.
서비스 디자인에도 트렌드가 있을까?
기능적인 UI 디자인의 관점에서 확인한 스타벅스의 사이렌 오더, 그럼 심미적인 UI는 어떨까?
이를 알아보기 위해 서비스 디자인의 트렌드를 한번 살펴보자!
스큐어모피즘(Skeuomorphism)
:실제 사물의 형태와 질감을 그대로 디자인으로 재현
디자인한 사물을 사용자들이 직관적으로 인식할 수 있지만, 실제 물체의 '기능'이 아닌, 물체의 '모양'에만 집중하다 보니 생기는 단점들이 존재
*플랫 디자인(Flat Design)
: 플랫 디자인은 스큐어모피즘 디자인의 문제를 해결하기 위해 생겨난 디자인 방법론
최대한 간결하고, 입체감이 없는 형태의 2D 디자인을 추구
이런 디자인은 간결하고, 용량의 문제에서 자유롭고, 사용자로 하여금 좀 더 정보를 좀 더 쉽게 수용
하지만, 단순함에 초점을 두는 플랫 디자인은, 입체감에 대한 철저한 배제로 인해, 더 중요한 요소에 그림자나 깊이감과 같은 입체적 요소를 주는 형태를 사용할 수 없음즉, 정보의 우선순위를 표시할 방법이 색상을 제외하고는 거의 없음
머티리얼 디자인(Material Design)
: 현재 가장 대중적으로 사용하는 디자인
플랫 디자인의 장점을 살리면서, 스큐어모피즘과 같이 빛에 따른 그림자 효과를 이용해서 입체감을 살리는 디자인 방식
머티리얼 디자인은 이런 시각적인 차이를 이용해, ICON이나 버튼의 우선순위를 명확하게 표기
뉴모피즘(Neumorphism)
: 뉴모피즘은 최근, UI 디자인의 다음 트렌드로 대두되고 있는 방법론
머티리얼 디자인이 플랫 디자인을 중심으로, 스큐어 모피즘의 입체감을 섞었다면,
뉴모피즘은 스큐어모피즘의 입체감을 중심으로, 플랫 디자인의 단순한 색상과 표현을 사용한 디자인 기법
정식 기업에서 선포한 디자인 시스템이 아닌 만큼, 아직 대중화되지는 않았지만, 많은 전문가와 디자이너들에게 인정받으며, 머티리얼 디자인을 대체, 혹은 보완할 수 있는 차세대 디자인 기법으로 각광
스타벅스, 역시 넌 계획이 있구나?
역시나 그랬다. 스타벅스는 다 계획이 있었다. 사이렌오더는 철저히 심리학적인 법칙을 반영한 UX를 가지고 있었던 것이다. 또한, 스타벅스 브랜드의 톤앤매너에 가장 적합한 플랫디자인을 픽하고 있었다. 어쩐지,, 스타벅스가 대중의 마음을 홀린 이유에는 심리학적인 접근이 있었다는 결론!
(어떻게 너를 사랑하지 않을 수 있겠어,,, 근데 있지,, 쑥크림프라푸치노 좀 다시 내주라,,젭알,,,)
#PM부트캠프 #코드스테이츠 #PMB #PM #프로덕트매니저 #공감 #brunch #브런치 #스타벅스 #서비스기획 #스타벅스커피 #UX #UI #UX/UI #UX심리학 #심리학 #일상 #취준 #취준생 #직장인 #기획자 #기획 #스타벅스심리학 #스타벅스커피추천 #서비스디자인 #플랫디자인
