존 야블론스키가 쓴 UX/UI의 10가지 심리학 법칙을 참고하여 스타벅스 앱 서비스를 분석해보자~!
스타벅스 앱을 키면 나오는 첫 화면이다.
첫 화면의 구성은 총 5블록으로 상단의 메시지, 별 리워드, Summer e-Frequency, 추천 메뉴, 하단 메뉴바로 구성되어 있다. 보자마자 한눈에 들어오면서 핵심적인 요소들을 배치했다.
이는 밀러의 법칙을 따르고 있다.
밀러의 법칙은 보통 사람이 기억하는 단위를 7(±2) 개로 보고 있다.
하지만 7이라는 단위에 빠져 디자인을 제약해서는 안 되고 사용자가 쉽게 처리하고
이해하고 기억할 수 있게 콘텐츠 덩어리를 작게 나눠 정리해야 한다고 당부한다.
스타벅스 앱이 개선되고 놀랐던 점은 다른 앱처럼 하단에 메뉴바를 생성했다는 점이다.
많은 O2O 서비스와 비슷한 형식으로 업데이트했는데
이는 하단에 있는 Pay, Order, Gift 이용을 유도했다고 생각한다.
특히 Gift 메뉴는 카카오톡으로 기프티콘을 보내는 방식 말고 자사의 앱을 통해 선물하는 서비스를 더욱 강조한 느낌이다.
이렇게 큰 변화가 있었지만 사용자는 크게 불편함을 느끼지 못한다. 이는 사용자가 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영하는 심리인 제이콥의 법칙을 반영한 것이다. 또한, 사용자들은 따로 적응을 하지 않아도 바로 앱을 사용하는데 무리가 없다.
힉의 법칙에 따르면 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다고 한다.
스타벅스는 추천 메뉴를 강조하고 사용자의 부담을 줄여 사용자의 편의를 제공한다.
터치 대상의 크기는 사용자가 정확하게 선택할 수 있도록 충분히 커야 한다는 피츠의 법칙을 적용한 화면이다. 음료의 사이즈 선택이 필수인 카페에서 스타벅스는 사이즈 선택 버튼을 크게 만들고 사이즈별 이미지와 용량을 추가해 사용자에게 정확한 정보를 제공하고 이해를 도우고 있다.
스타벅스 앱은 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 하라는 본 레스토프 효과를 가장 적절하게 사용하고 있다.
스타벅스의 대표 컬러인 녹색을 주문하기와 같은 중요한 버튼의 색으로 지정하여 주문과 결제를 유도하며 다른 텍스트와 차별점을 둔다.
개인적으로 본 레스토프 효과를 가장 잘 나타낸 부분을 꼽자면 HOT/ICED를 구분하는 버튼의 색상을 달리한 부분이지 않을까?
뚜렷한 색상과 HOT과 ICED를 나타내는 색상을 사용해 사용자의 실수를 미연에 방지할 수 있을 거라고 생각한다.
(카페 알바생이었다면 한 번쯤은 들어본 적이 있는.. 핫 시켰는데 아이스로 나왔어요!?!?)
본 레스토프 효과
복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재하므로, 시스템이나 사용자 중 한쪽이 감당해야 한다고 한다. 스타벅스 앱은 사용자가 Pay 탭을 누르지 않고도 흔들면 결제 바코드가 보이는 화면을 제공한다.
테슬러의 법칙
피크엔드 법칙은 인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단한다고 한다.
스타벅스 앱은 가장 마지막 순간까지 세심하게 신경을 썼다는 것을 느낄 수 있는데 결제를 마치면 몇 번째로 메뉴가 준비 중인지, 음료가 모두 준비되었을 때 알려주는 알람이 온다.
이 화면은 도허티 임계가 적용됐음을 알 수 있다. 사용자가 기다릴 수 있는 시간은 단 0.4초!
사용자의 주의가 분산되는 것을 막는 동시에 생산성도 향상시키려면 시스템 피드백을 0.4초 이내에 제공하여야 한다.
스타벅스 앱은 로딩 시간이 길진 않지만 애니메이션을 통해 로딩이나 프로세싱이 진행되는 동안 사용자의 시선을 끌며 대기시간을 관대하게 기다리게 한다.
요즘 매일 스벅에 출근하듯이 이용하고 있는데 그냥 지나쳤던 화면들이 많은 심리와 법칙에 따라 구성되었다는 게 너무 신기했다.
정말 하나도 그냥 만드는 법이 없구나,,
정말 멋지다,,
'Product manager' 카테고리의 다른 글
| [코드스테이츠 PMB 6기] W7L2-1, WAP 아,,아니 APP (0) | 2024.04.29 |
|---|---|
| [코드스테이츠 PMB 6기] W6L2 "I 따릉이 U", 따릉이의 개선된 UX/UI와 Wireframe 만들기 (1) | 2024.04.29 |
| [코드스테이츠 PMB 6기] W5L2 빅쿼리, SQL을 이용한 데이터 분석 (0) | 2023.10.12 |
| [코드스테이츠 PMB 6기] SELECT 6기 FROM PMB; (0) | 2023.10.05 |
| [코드스테이츠 PMB 6기] 삼쩜삼, 세금 환급 무야호~ (0) | 2023.10.04 |
