탐색의 사용성을 높이는 디자인
UX Case Study_애슐리 매장 정보 찾기
배경
코로나19의 방역지침이 완화됨에 따라 대면 모임이 증가하며 외식 산업이 다시금 활기를 띄고 있다. 이랜드이츠의 6월 매출은 지난해 같은 달 대비 60%가 넘는 성장세를 기록했다. 코로나로 비대면 채널의 사용이 크게 증가하여 이랜드이츠 또한 디지털 채널을 통해 고객 멤버십을 관리하고 매장 정보를 제공한다.
이랜드 이츠는 애슐리 퀸즈, 로운, 리미니 등의 외식 브랜드를 운영한다. 그 중 애슐리 퀸즈는 증가하는 고객 수에 효과적으로 대응하기 위해 대기 순번 키오스크를 도입했고, 이를 앱과 연동하여 고객이 매장에 방문하기 전에도 대기 순번을 받을 수 있게 하였다. 고객이 가고자 하는 매장에서 원하는 정보와 서비스를 확인하려면 미리 매장 현황을 확인하는 과정이 필요하다. 이 과정의 사용성이 낮다면 고객들은 서비스 이용 과정에 불편함을 느낄 것이며, 결과적으로 브랜드 이미지에 악영향을 미칠 수 있다.
목표
고객이 기존보다 적은 시간과 노력을 들여 원하는 매장 정보를 확인할 수 있도록 '매장 정보' 화면의 사용성 을 개편한 디자인을 제언한다.
나의 역할 / 케이스 스터디 기간
유저 리서치, 프로토타입 제작 / 1주일 (7/24~7/30)
진행과정 및 내용
이번 케이스스터디는 다음과 같은 과정을 거쳐 진행되었다.
1. 사용성 분석 및 가설 설정
[주요 화면 및 사용 흐름]
애슐리 앱 매장정보 찾기 주요 화면과 흐름HCI 사용성 지표를 기반으로 매장 정보 확인 기능의 잘된 점과 보완해야 할 점을 분석했다. 이에 따른 주요 발견점과 가설은 다음과 같다.
1) [의미성 > 이해가능성] 여러 가지의 브랜드를 드롭다운 형태로 제공한다. 하지만 레이블이 없어 해당 드롭다운이 브랜드를 분류하기 위한 UI인지 알기 어렵다. 사용자는 드롭다운을 잘 사용하지 않을 것이다.
2) [의미성 > 변화제시성] '거리순 검색' 에서 내 위치 아이콘을 눌렀을 때, 목록에는 변화가 있지만 장소를 나타내는 텍스트는 변하지 않아 사용자가 시스템 변화 상태를 인지하지 못할 것이다.
+ 여기에 같은 기능을 지칭하는 레이블이 다르다거나 화면마다 드롭다운의 크기가 달라지는 등 전반적인 일관성 문제도 함께 관찰되었다.
2. 테스트 시나리오 계획
닐슨 노먼은 그의 아티클에서 5명의 참여자만 있어도 사용성 테스트에서 약 84%의 오류를 발견할 수 있다고 했다. 이에 따라 총 5명을 대상으로 매장 정보 화면의 UT를 계획했다. 매장 탐색 과정을 살펴보기 위한 4개의 시나리오와 주요 관찰 포인트를 선정하였다.
[시나리오]
Q. 방문하고자 하는 애슐리/로운 매장 정보를 찾아 주세요.
- (검색을 해서 찾았다면) 이번에는 검색을 사용하지 않고 찾아 주세요.
- (검색을 하지 않았다면) 이번에는 검색을 사용해서 찾아 주세요.
[관찰 포인트]
- 일차적으로 활용하는 탐색 방식
- 오류가 자주 발생하는 행동(액션)
- 오류 발생 횟수
3. 테스트 진행
테스트는 5명의 참여자를 대상으로 진행되었다. 앱과 조사하고자 하는 것, 시나리오에 대해 간략히 소개하고 참여자들이 해당 기능을 활용하는 방식을 관찰했다. 이후 참여자가 느낀 점에 대해 이야기를 나누고 녹화한 화면에 관해 궁금한 점에 대해 질문하였다. 마지막으로 SUS 설문으로 해당 화면의 사용성을 평가할 것을 요청했다.
System Usability Scale Questionnaire4. 결과 분석, 개선방향 도출
사용성 테스트에서 다음과 같은 주요 포인트들을 발견했다. 중요하거나 우선적으로 개선해야 한다고 생각하는 부분에는 ★ 표시하였다.
1) 결과 분석
[가설 검증]
1) 여러 가지의 브랜드를 드롭다운 형태로 제공한다. 하지만 레이블이 없어 해당 드롭다운이 브랜드를 분류하기 위한 UI인지 알기 어렵다. 사용자는 드롭다운을 잘 사용하지 않을 것이다.
★ 드롭다운 UI는 메뉴 탭을 제외하면 왼쪽 최상단에 위치해 있어 시각적으로 상당히 중요한 위치를 차지한다. 그래서인지 사용자가 드롭다운을 어떻게 인지하는지에 따라 이후의 탐색 방식이 달라졌다.
먼저 '매장명 검색' 메뉴에서 가장 먼저 검색창을 누른 사람은 드롭다운을 지역구분을 위한 요소로 생각했다. 초기 멘탈모델 형성 시 드롭다운이 크게 중요하다고 생각하지 않았고 이후 '로운' 브랜드 탐색에서 탐색 시간이 길어지거나, 드롭다운의 용도를 뒤늦게 발견하였다.
" '역삼' 때문에 같이 지역을 찾을 때 쓰는 줄 알았어. " / " '역삼'이 있는데 굳이 지역을 또 찾아야 할 필요가 있어?"하지만 또 다른 사람은 같은 화면에서 가장 먼저 드롭다운을 눌렀는데, 드롭다운을 브랜드 구분을 위한 요소로 받아들였기 때문이다. 검색창에 '역삼'이 적혀 있으니 리스트를 압축적으로 보려면 먼저 브랜드를 구분하는 표시가 필요하다고 여겼고 그 역할을 드롭다운이 한다고 추측했다. 이 경우 로운 지점을 검색할 때도 애슐리를 검색할 때와 탐색 방식에 큰 차이를 보이지 않았다.
탐색 방식은 달라도, 공통적으로 사용자들은 1차 탐색 기준을 브랜드(애슐리,로운)로 두었다.
2) '거리순 검색' 에서 내 위치 아이콘을 눌렀을 때, 목록에는 변화가 있지만 장소를 나타내는 텍스트는 변하지 않아 사용자가 시스템 변화 상태를 인지하지 못할 것이다.
★ 모든 인터뷰 참여자는 '거리순 검색'에서 나의 현재 위치 아이콘을 눌렀을 때 나타나는 시스템의 상태 변화를 알아채지 못했다. 이는 기능의 유용성에 대한 의구심으로 연결되었다.
[추가 인사이트]
화면 진입시 [메뉴 > 매장 정보] 경로 화면에 진입한다. 즉 '스토어' 아이콘을 '매장 찾기' 활동과 연결짓지 못하고 있는데, 이는 스토어 아이콘이 온라인몰을 나타낸다고 생각하기 때문이다.
★ 가장 오류가 많이 나왔던 터치 부분은 드롭다운과 검색창이었다. 이들의 크기가 작기 때문에 인터뷰 참여자들이 위아래의 탭을 잘못 선택하거나, 키보드가 나올 때까지 연이어 선택하는 모습을 관찰했다.
★ 모든 사람은 가장 먼저 검색창을 터치했다. 첫 화면의 가장 눈에 띄는 곳에 위치하기 때문이다. 또 어떤 사용자는 그 이유로 '장소를 찾을 때는 지도 앱을 많이 사용하므로 자연스럽게 검색을 한다'고 언급했다.
검색 시 주로 '강남', '강서' 등의 지역명을 입력했는데, 검색창 안의 자리표시자(placeholder)에 지역명이 제시되었기 때문이다. 하지만 실제로는 지역명뿐만 아니라 지점명에 해당하는 텍스트만 검색 가능하다.
매장 탐색 시 현재 기준인 '예약', '대기 가능한 매장' 보다는 본인의 현재 위치를 중점적으로 고려한다.
앱에서 예약이나 대기 기능을 기대하지 않는다. 네이버 예약, 카카오톡 알림 등 충분한 대체제가 있기 때문이다. 버튼을 눌러볼 것을 요청했을 때, 터치 후 앱 내에서 예약/대기 서비스가 주어지기를 기대하였으나 웹페이지로 연결되어 다소 실망한 반응을 보였다.
앱의 다른 곳에서 얻은 단서를 적극적으로 활용한다. 메뉴의 이벤트 배너에서 다른 브랜드명을 발견하면 매장정보 화면에서 별도의 안내가 주어지지 않더라도 분류 기준으로 브랜드를 활용하는 식이다.
2) 개선방향 도출
따라서, 다음과 같은 개선 방향을 도출할 수 있었다.
1) 핵심 사용성 문제 (드롭다운, 검색창 크기, 아이콘 선택 시 반응 등)를 개선한다.
2) UI의 기본적인 일관성을 확보한다.
3) 주된 탐색 방식을 중심으로 화면을 변경하고, 필터를 활용해 더 구체적인 검색을 할 수 있도록 지원한다.
5. 프로토타입 제작 (1차)
전체 화면6. 2차 테스트 진행
1차와 동일한 시나리오로 프로토타입 사용성 테스트를 진행한 후, 한 번 더 SUS 설문을 요청했다.
[SUS 설문 점수와 주요 의견]
SUS 점수 변화"(오프라인 매장에서 로고를 볼 수 있기 때문에) 앱에서도 아이콘을 같이 보여주는 것이 더 예상이 잘 간다."
"이전 것과 탐색 방식이 크게 달라지지는 않았지만, 더 직관적인 것 같다."
7. 완성된 프로토타입
1. 1차 기준 정리, 스토어 아이콘 레이블 변경
2. 검색 화면 개편
3. 매장 정보 재정리
4. 필터
5. 매장명 검색TAKEAWAY
1. 효과적인 사용성 테스트를 진행하고 싶다면 시나리오를 명확하고 구체적으로 계획해야 한다. 이 때 구체성이란 '시작은 이 화면에서부터, 과정은 이런 루트를 통해야 하고 끝은 이 버튼을 누르는 것(또는 이 정보를 조회하는 것)까지' 정하는 것을 의미한다. 그렇지 않으면 프로토타입 테스트를 진행할 화면을 정하는 데 제약이 따를 수 있고, 가설을 정량적으로 검증하는 데도 어려움을 겪을 수 있다.
2. 의미 있는 개선점을 찾아내려면 문제가 어느 범주에 속해 있는지 발견하는 것이 중요하다. 이번 사이드 프로젝트의 목적은 사용성 개선이었으나 막상 테스트를 해 보니 더 중요한 문제는 사용자가 화면이 유용하다고 느끼지 않는 것이었다. 앱(또는 웹, 디지털 제품)은 물리적으로 보면 기능의 집합이지만, 사용자는 서비스를 맥락적으로 바라본다. 따라서 서비스의 전체 UX가 사용자에게 매력적으로 다가갈 수 있어야 비로소 사용성 개선이 의미를 가질 수 있다.
3. 리서치를 진행하며 몇 가지 더 느꼈는데, 먼저 인터뷰 참여자 수. 이 화면은 기능이 적어 5명 정도로도 사용성 문제가 발견되었지만 더 넓은 범위에서 사용성을 테스트하려면 적어도 8~10명은 있어야 할 것 같다. 그리고 리서치를 또 진행할 수 있다면 편향, 그 중에서도 특히 초두 효과를 조심해야겠다. 첫 번째 테스트가 참고는 될 수 있지만 이후 테스트에서의 가늠자로 기능하면 안 된다.
4. 마지막으로 단순하게 디자인하는 것은 어려운 일이었다. 화면에 대한 사용자의 기대치나 이들의 탐색 방식을 잘 반영하면서도 이들이 제품 사용 과정에서 최소한의 자원을 활용하게끔 해야 하기 때문이다. 이를 위해 벤치마킹을 잘 하는 것도 쉬운 일이 아니었고.. 더욱이 사용자의 경험을 잘 반영하지만 기존과는 무언가 다른 해결책을 만들어내는 건 더 그런 것 같다. 끊임없는 노력이 필요하다.
참고
