쿠팡이츠 앱 분석 (1)

휴리스틱 10가지 원칙을 바탕으로 쿠팡이츠 앱을 분석했다.

아래는 스터디에 참여하며 분석한 내용을 복사한 것이다.

 

WEEK1

휴리스틱 원칙 10가지 중 다섯가지를 선택해 앱 분석하기

1. 시스템 상태 가시성 확보

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

디자인은 항상 적절한 시간 내 피드백을 통해 사용자들에게 지금 무엇이 일어나고있는지 알려줘야합니다.

 

배달 현황 보기 페이지

 

> 상태 가시성은 역시 주문 후 배달 중 페이지에서 개선점을 많이 찾아낼 수 있을거라 판단해 선택했다.

해당 페이지에선 지도와 주문 처리 현황, 내역을 정리해서 보여준다. 처리 현황이 4단계로 나눠져 현재 상태를 알려주고, 배달이 시작되면 지도의 아이콘 또한 움직인다.

 

좋은 점 :
지도를 전면에 배치하고, 계속 줄어드는 시간 숫자를 두어 실시간 배달 상황을 볼 수 있다.
특히 화면을 아래로 스크롤 해 지도를 크게 볼 수 있는 점이 신선했다. 우버, 카카오택시처럼 배달파트너가 움직이는 모습을 실시간으로 볼 수 있어 쿠팡이츠만의 특징을 잘 드러냈다.

 

아쉬운 점 :
실시간 업데이트 되는 정보지만, 사용자가 원할 때 직접 눌러 새로고침할 수 없어 아쉬웠다. 
라이더가 멈춰있는건지, 기기에서 데이터 수신이 안되는 것인지 모른 채 수동적으로 받아들일 수 밖에 없기 때문이다.또, 해당 주문은 치타배달 매장이었는데, 일반 배달과 큰 시각적 차이가 없어 아쉬웠다.마지막으로, 사용자가 주문관련 클레임 등의 행동을 취할 수 있는 방법은 주문 현황에 따라 
<1.주문취소버튼 누르기-2.매장에 전화-3.배달파트너에게 전화 + 4.고객센터> 일텐데, 서비스의 정책인건지 2, 4는 빠져서 아쉬웠다.

 

느낀 점 :
쿠팡이츠는 치타배달 등 시간을 강조하는 서비스인만큼, 
주문~배달 완료 사이 시간이 굉장히 중요하며, 시시각각 변하는 값과 사용자의 액션을 충분히 보장하는 것이 중요하다고 느꼈다.
사용자가 이 시간동안 취할 수 있는 더 능동적인 방법이 뭐가 있을지 찾아보려 한다.
새로고침 관련 가이드 참고 : https://developer.apple.com/design/human-interface-guidelines/ios/controls/refresh-content-controls/

Refresh Content Controls - Controls - iOS - Human Interface Guidelines - Apple Developer

 

 

3. 유저 컨트롤과 자유도

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.

사용자는 실수로 액션을 취하기도 합니다. 이러한 원치않은 액션을 더이상 진행하지 않고도 떠나기 위해선 정확히 명시된 "비상 출구"가 필요합니다.

 

좋은 점 :

주문과 관련한 내역을 한 페이지에서 정리해서 보여준다.

 

아쉬운 점 :
주문 “성공” 혹은 “완료” 에 해당하는 텍스트가 없어서, 주문이.. 된건가? 하는 생각이 잠시 들었다.
실제 세상에서 주문을 하는 경우, 주문을 확정짓는 어떤 *순간*이 있는데 (매장의 경우 포스기에서 나오는 영수증, 기계음, 직원 안내 등)
쿠팡이츠에서는 그 부분이 충분히 느껴지지 않았기 때문이다. 화면 전환방식 (아주 잠깐이지만 스피너가 돈 후 홈화면으로 나갔다가 다시 주문내역 화면이 아래서 위로 올라온다.) 도 한몫 하는 것 같고,
주문 완료 후 처음 보는 ~습니다 문장이 꽤 딱딱하게 느껴지는 것도 이유가 될 것 같다. ‘골라먹는 맛집’ 이라는 모호한 언어를 쓰면서도, 주문을 확인하고 있습니다. 라는 시스템 위주의 언어도 동시에 써서, 혼란스럽기도 하다.또한 숫자와 알파벳으로 이뤄진 주문번호는 어렵게 느껴질 뿐더러, 방금 주문을 마친 사용자가 원하는 정보는 아니라고 생각한다.
마찬가지로 ‘배달 주소, 주문번호, 합계금액’ 텍스트가 화면에서 가장 중요한 위계도 아니라는 생각이 들었다.

 

느낀 점 :
전반적으로 주문을 마치고 영수증을 받은 소비자가 아닌,
갑자기 어드민화면으로 접속해 주문처리과정을 보는 관리자가 되었다는 느낌이 들었다. 또, 배달의 민족에서 뜨는 ‘주문 완료!’ 페이지가 생각보다 즐거움+실제 세상에서의 방식을 따라왔구나 하는 생각도 들었다.

 

 

 

 

4. 지속성과 표준

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.

사용자들은 다른 단어, 상황, 액션이 서로 같은 것인지 다른 것인지 고민해야할 필요가 없습니다. 플랫폼과 산업의 관습을 따르세요.

 

배달주소 관리 페이지

> 휴리스틱 4번에 해당하는 지속성에 대해 고민하다가, 쿠팡이츠에서 사용하는 단어를 찾아봤다. 배달지 주소, 배달주소 등 단어가 혼용되고 있었고, 거의 같은 기능임에도 다른 화면을 제시해 혼란을 주었다고 생각했다.

좋은 점 :
이미 알고, 자주 쓰는 주소에 ‘집’, ‘회사’ 처럼 직관적인 장소 이름을 붙일 수 있다.
주소 등록 후 앱 어디서든 집/회사 등 대표 단어만 사용해 친근감을 높이고 받아들이는 텍스트의 양을 줄일 수 있다.

 

아쉬운점 :
두 화면은 (현재 어떤 주소가 선택됐는지 표시 외에) 거의 동일한 기능을 하고 있지만, 타이틀과 엘리먼트가 조금씩 달라 혼란스럽게 느껴진다.
특히 ‘설정‘과 ‘관리‘, 그리고 ‘배달지‘와 ‘배달주소’ 라는 단어는 어떤 차이가 있는지 혼동을 주기 쉽다.

 

느낀 점 :
거의 같은 의미를 갖고있다면, 단어는 통일시키거나 (필요에 따라) 완전히 분리해내야 한다는 점을 느꼈다.
사실 코드에서 텍스트만 조금 바꿔주면 될 마이너한 부분이지만, 처음 어플을 깔고 등록했을 때 미묘한 혼동이 생겼던 부분이다.
그 외에도 ‘카트’ ‘배달파트너’ 같이, 경쟁업체에서도 자주 사용하는 단어들을 어떻게 다르게 쓰고 있는지, 단어들에서 브랜드가 추구하는 바가 느껴지는지 생각해보았다.

 

 

 

 

5. 오류발생 방지

Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.

좋은 오류 메세지는 중요하지만, 애초에 이러한 문제가 발생하지 않도록 주의깊게 디자인하는 것이 더 중요합니다. 오류 발생이 쉬운 조건을 삭제하거나, 미리 확인하고, 사용자들이 액션을 취하기 전에 확인 옵션을 보여주세요.

 

 

[메뉴가 담긴 카트 페이지]
담아둔 메뉴와 배달 장소, 쿠폰, 요청사항 등을 보여준다.

 

좋은 점 :
장바구니-주문하기-결제하기 단계를 나누지 않고, 한 페이지에서 결제 직전 단계까지 진행할 수 있다.
에러 발생 시 같은 페이지에서 바로 처리 가능하다.

 

아쉬운 점 :
최소 주문금액을 채우지 못해 주문하지 못하는 경우더라도, 주문 가능한 경우와 비교했을 때 텍스트 외에 큰 차이가 없어보여 주문 불가 에러를 만나기 쉽다.
하단의 주문 버튼이 불가능 상태여도 똑같은 하늘색이라, 텍스트를 주의깊게 읽지 못하면 주문 가능 여부를 판단하기 어렵기 때문이다. 색상과 같은 경고 요소가 충분하지 않다고 생각한다.
또, 최소 주문 금액과 최대 할인 쿠폰 적용 요소의 생김새가 비슷해 혼동을 더하기도 한다.

 

느낀 점 :
쿠팡이츠는 난색과 한색 모두 긍정/부정 구분없이 사용하기 때문에, 경고를 나타내는 색상을 쉽게 고르지 못할 것 같다.
상황에 따라 빨간색이 아닌 다른 색상값을 사용할 수 있긴 하지만, 이미 색상을 상당히 많이 써서 추려낼 필요가 있어보이긴 하다.
(참고: 붉은색을 주 색상으로 사용하는 넷플릭스는 경고 문구를 무슨 색으로 사용할까? https://story.pxd.co.kr/1467)혹은, 색상이 아닌 다른 방법으로 어떻게 경고할 수 있을지 고민하게 되었다.
이 화면의 경우 아래 버튼을 회색으로 바꿔 비활성화 상태를 보여주는게 가장 쉬운 방법이겠지만, 삭제 등 다른 파괴적 행동에도 널리 쓰일 수 있는 경고용 디자인이 필요하다 생각한다.

 

 

 

 

 

8. 진실되고 미니멀한 디자인

Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.

인터페이스는 불필요하거나 거의 필요하지 않은 정보를 포함하지 말아야 합니다. 화면 위에 띄워진 여분 정보들은 중요한 정보와 경쟁하고, 중요한 정보를의 가시성을 낮춥니다.

여러 버전의 썸네일들을 보며 의문이나 아쉬웠던 부분들을 구어체로 적었다.

 

좋은 점 :
양질의 사진을 사용해 전반적인 이미지 퀄리티를 유지한다.

 

아쉬운 점 :
이미지가 눈길을 끌지만, 영역을 너무 많이 차지해 텍스트는 딸린 악세사리처럼 보인다. (텍스트 내용이 매우 중요함에도 불구하고)
예상 시간(17-27분)과 거리(1.5km))는 시간과 관련해 결정을 내릴 때 서로 충돌하는 정보라 사용자의 혼동을 높일 것 같다.‘신규’ 와 ‘치타배달’ 아이콘은 함께 붙어있지 못하도록 설계된 것 같은데, 디자인 문제인지 내부 규정인지 알 수 없어 오히려 정보의 신뢰도를 낮춘다.마지막으로 별점과 별점 갯수, 거리, 배달비, 예상시간이 동일한 크기와 굵기의 텍스트이며, 거의 숫자로만 이루어져있고, 가게 이름 아래에 흩뿌려져 있는 것처럼 보여 나열된 정보 습득에 시간이 더 걸리는 것처럼 느껴진다.

 

느낀점 :

어떤 메뉴를 먹을지 결정하고 난 뒤에는 매장 사진이 다 비슷비슷해 보인다. 결국 어떤 매장에서 먹을지 탭하는 것은 텍스트를 보고 골라야 하는데, 텍스트는 숫자가 단순나열된 느낌이라 스크롤 양에 비해 얻는 정보가 적어 아쉽게 느껴졌다.수많은 텍스트 변수에 대비해야 하기 때문에, 일괄적인 썸네일 템플릿을 만드는건 힘들고, 어디서든 밀도있게 보이기는 더 힘들다. 그치만 쿠팡이츠에선 아직 좀 더 정리하고 각 매장의 특징을 더 보여줄 요소들이 있으리라 생각이 든다.

 

+ 개인적으로 쿠팡이츠에서 사진을 보며 꼭 쇼케이스의 모형같다는 생각을 했다. 아주 멋지고 아름답지만, 식욕을 돋구진 않는...?

참고_ 쇼핑몰 썸네일 디자인하기 https://brunch.co.kr/@pliossun/112#comment
여러 버전의 썸네일들을 보며 의문이나 아쉬웠던 부분들을 구어체로 적었다.