사용자 중심으로 “배달의 민족”앱을 리디자인 해보았다.
사용자 테스트와 조사를 기반으로 앱의 진짜 문제점을 찾다.
저번 학기에 "UX 디자인"이라는 수업을 듣게 되었다. 수업에서는 카카오톡의 프로필 편집 기능을 여러 과정을 거쳐 리디자인 하였다. 그저 나 혼자만의 생각에서 비롯된 문제를 고치는 것이 아니라 사용성 테스트를 통해서 객관적인 문제점을 찾고 해결방안을 제공한 후 리디자인 하는 것이었다. 수업에서 배운 과정을 바탕으로 이번 여름 방학동안 "배달의 민족" 앱을 리디자인 해보기로 하였다.
나는 이번 방학 때 처음으로 "배달의 민족" 앱을 사용하기 시작했다. 이 전부터 "배달의 민족" 앱은 핸도폰에 깔려있었지만 딱히 사용할 일이 없어 1년 넘게 로그인도 하지 않은 채 두었다. 하지만 이번 여름 방학 때 코로나 때문에 집에 있는 시간이 많아지면서 음식을 시켜먹을 일이 많아졌다. "배달의 민족" 앱의 초보자로써 처음 사용했을 때 메뉴를 찾고 주문하기 까지 생각보다 어렵고 불편했다. 그래서 나는 사용자 입장에서 "배달의 민족" 앱을 사용하는 과정이 훨씬 편리하고 쉬워지도록 리디자인 해보기로 하였다.
GOAL
배달의 민족의 주 타겟인 20-30대 사용자가 앱을 통해 메뉴를 찾고 주문하기까지의 과정이 편리하고 쉽게 이루어지도록 하겠다.
PROCESS
1. HEURISTIC EVALUATION
사용성을 위한 디자인 원칙 12가지(Visibility, Feedback, Affordance, Signifier, Metaphor, Constraints, Forgivenss, Accessbility, Flexibility, Learnability, Consistency, Others)를 사용하여 체크리스트를 만들어 직접 사용성을 테스트 하였다. 최대점수 102점에서 26점으로 많이 낮았다.
테스트를 하면서 적은 Rationale을 기반으로 문제점을 정리하였다.
1. 메인화면의 아이콘들이 그루핑이 되어있지 않아 복잡하다.
2. "배민 라이더스", "배민 오더", "바로 결제" 등의 용어가 불명확하고 아이콘의 가시성이 떨어진다.
3. 검색창을 찾는 것이 어렵고 음식점 리스트 화면에서는 검색창이 없다.
4. 한번에 여러 음식점에서 음식을 시키지 못한다.
5. 음식점 안에서 메뉴를 선택할 때 메뉴가 너무 많아서 복잡하다.
2. Usability Test
실험 참여자
20-30대 "배달의 민족" 앱 사용자 5명을 테스트 하였다.
테스크 시나리오
휴리스틱 평가를 통해서 도출한 문제점을 기반으로 사용성 테스트를 위한 시나리오를 작성하였다.
<Pre-question>
실례지만 현재 어떤 일에 종사하고 계신지 여쭤봐도 될까요?
가장 최근에 언제 배달의 민족 앱을 사용하셨나요? 어떤 일로 사용하셨나요?
다른 배달 앱과 비교했을 때 배달의 민족 앱은 어느 정도 비율로 사용하시나요?
배달의 민족앱을 사용하기 전 보통 어느 정도 구체적으로 메뉴를 정해놓으시나요?
<Look-around question>
아직 터치하거나 조작하지 마시고 먼저 첫 화면을 둘러본 뒤에 전체적인 느낌을 말씀해 주세요. 왜 그렇게 느끼셨나요?
가장 처음에 보셨을 때 어떤 부분이 시선을 사로잡았나요? 왜 그렇게 느끼셨나요?
배민 라이더스는 어떤 기능인지 아시나요? 어떤 기능인 것 같나요? (아이콘의 가시성 문제)
배민 오더는 어떤 기능인지 아시나요? 어떤 기능인 것 같나요? (아이콘의 가시성 문제)
<Task 1>
“푸라닭 치킨의 블랙알리오 순살 1개와 블랙치즈볼 하나를 시켜주세요.”
(원하는 음식점과 메뉴가 정해진 경우)
<Task 2>
“떡볶이 2인분을 시켜주세요.”
(원하는 음식 카테고리만 정해진 경우)
<Task 3>
“점심으로 먹을 음식 2인분을 알아서 시켜주세요.”
(전혀 정해지지 않은 경우)
<Post-question>
음식점을 찾을 때 어려움이 없으셨나요?
음식점을 선택 후 음식을 찾을 때 어려움이 없으셨나요?
개선되었으면 하는 점이 있을까요?
시나리오를 기반으로 한 사용성 테스트실험 결과 분석
사용성 테스트를 통해 공통적으로 발견된 문제들:
1. 검색창 위치의 문제
<메인 화면>
우선 메인화면의 경우 스크롤을 해야만 검색창이 드러난다. 초보 사용자인 A 참여자의 경우 검색창을 찾는 것을 어려워 하였다. 검색창은 원하는 메뉴나 음식점을 쉽게 찾을 수 있도록 만드는 기능임에도 불구하고 그 검색창을 찾는 것이 어렵고 불편하다면 절대로 좋은 UX 디자인이 아니다.
<음식점 리스트 화면>
메인화면에서 음식 카테고리를 누르고 들어갔을 때 나오는 음식점 리스트 화면이다. 하지만 이 화면에서는 검색창이 존재하지 않는다. 이로 인해 A, C, E 참여자들은 해당 화면 상단에서 검색창을 찾지만 없어서 메인 화면으로 돌아가 검색을 하였다. 사용자가 검색을 하기 위해서 추가적인 과정과 노력을 요구하는 것은 적절하지 않다.
2. 음식점마다 다른 메뉴 구성의 문제
"푸라닭 치킨"의 경우 메뉴 화면에서 치킨을 선택하고 들어갔을 때 순살을 선택할 수 있는 옵션이 따로 없다. 대신 메뉴 화면에서 따로 순살 메뉴를 찾아서 들어가야 한다. B, C, E 참여자들은 순살옵션을 기대했지만 없어서 순살 메뉴를 찾는데에 어려움을 겪었다.
사용자들이 순살 옵션을 기대한 이유는 다른 여러 치킨집의 경우 치킨을 선택하고 들어갔을 때 순살을 선택할 수 있는 옵션이 있기 때문이다. 음식점들마다 메뉴 구성에 대한 일관성이 없기 때문에 사용자들은 혼란과 불편을 겪을 수 밖에 없다.
3. 작업 구조의 문제
사용자를 위한 작업 구조(Task Structure)의 유형에는 크게 두가지가 있다. 첫 번째는 얕고 넓은 구조(shallow and wide structure)로 사용자가 골라야할 버튼의 범위가 매우 넓지만 원하는 버튼을 찾기만 하면 적은 조작 단계로 조작이 가능하다. 두 번째는 깊고 좁은 구조(deep and narrow structure)로 사용자가 한번에 선택해야할 버튼의 범위는 좁지만 많은 조작 단계가 요구된다. 일반적으로 얕고 넓은 구조는 경험자 위주이고 깊고 좁은 구조는 초심자 위주의 작업 구조이다.
"배달의 민족" 앱의 메뉴 화면의 경우 얕고 넓은 구조로 메뉴를 보여주고 있다. 하지만 음식점마다 메뉴구성이 많이 다르기 때문에 사용자들은 원하는 메뉴를 찾는데 오랜 시간이 걸린다. C 참여자의 경우 스크롤을 통해서 메뉴를 찾는데 10초 이상이 걸렸다.
메뉴 상단에 카테고리 버튼이 나열되어 있지만 대부분의 참여자들은 카테고리 버튼 대신 스크롤을 통해서만 메뉴를 찾았다.
4. New Design Solution
1. 검색창의 위치 문제
메인화면에서는 스크롤을 해야만 검색창 나타나기 때문에 시각적으로 숨어있었다. 이로 인해서 검색창의 위치가 불편하고 찾기가 어렵다는 사실이 실험을 통해 드러났다. 문제를 해결하기 위해서 검색창의 위치를 위로 옮김으로써 어떤 인터렉션을 주지 않아도 바로 보이도록 하였다.
참여자들은 음식점 리스트 화면에서 검색창이 있으리라 기대했지만 그렇지 않아서 불편함을 느끼는 것을 볼 수 있었다. 이를 해결하기 위해서 음식점 리스트 화면에도 검색 버튼을 추가하였다.
2. 음식점마다 다른 메뉴 구성의 문제 / 작업구조의 문제
음식점마다 메뉴 구성이 다름에도 불구하고 얕고 넓은 구조로 메뉴를 보여주기 때문에 참여자들은 메뉴를 찾는 것이 쉽지 않았다. 그리고 한번에 너무 많은 양의 정보가 제공되고 전체적인 메뉴구성을 파악하기가 어려웠다. 이를 해결하기 위해서 대표메뉴 밑으로는 카테고리 이름으로된 버튼만 보여지도록 하였다.
버튼을 눌렀을 때는 카테고리별로 메뉴가 보여지고 왼쪽에는 카테고리 버튼이 나열시켰다. 카테고리 별로만 메뉴를 보여주어 사용자에게 한번에 제공되는 정보를 제한시키고 사진을 중심으로 메뉴를 보여줌으로써 직관적으로 메뉴를 파악할 수 있도록 하였다.
음식점마다 메뉴 구성이 다르기 때문에 얕고 넓은 구조가 아닌 깊고 좁은 구조로 보여주는 것이 사용자 입장에서 원하는 메뉴를 찾고 고르는데에 편리하다.
