UX case study. 다이어트 앱-4
다이어트신 (4) : 개선안 제언 1. 사용성 개선
Solution
저번 글에서는 다이어리 기능이 사용하기 불편한 이유와 개선 방향을 알아보았다. 일일 기록 화면에서는 입력해야 하는 정보는 많으나 이를 어떻게 입력하고 조회할 수 있는지 쉽게 파악하기 어렵다는 점, 식단 기록 과정에서는 낮은 사용성과 맥락에 맞지 않은 광고로 인해 불편함을 겪는다는 점을 발견할 수 있었다. 이번 글에서는 이를 바탕으로 한 구체적인 변경안을 제언하고자 한다.
먼저 아래의 표는 저번 글의 내용을 요약한 것이다.
화면별 문제점과 개선 방향1. 일일 기록 화면
1) 의미 덩어리 체계화하기 : IA 정리
일일 기록 화면의 정보를 정리할 때의 우선점은 사용자가 입력하고 조회해야 하는 정보를 명확하게 구분하는 것이었다. 밀러의 법칙에 따르면, 사람이 한 번에 기억 가능한 정보는 평균적으로 7개 전후이다. 하지만 이 숫자 '7'은 특정 음절이나 단어가 아니라 의미 단위이기 때문에, 정보들을 "유의미한 덩어리"로 정리하면 이 작업기억을 효과적으로 활용할 수 있다.
다이어트신은 다른 경쟁 앱들보다 많은 항목이 포함되어 있어 자세한 입력을 원하는 사용자들에게 유용하다고 말할 수 있다. 하지만 입력(식단, 물, 운동)에 초점을 맞추는 것에 집중하느라 다른 기능들이 비교적 분산되어 있어 이를 100% 효과적으로 활용하기 쉽지 않았다. 나아가 일일 기록 화면에 한 번에 인지하기 어려울 정도로 많은 양의 정보가 들어간 이유는 다이어리를 월간 - 일간이라는 두 분류로 나누었기 때문이라고 생각했다. 사용자가 정보의 분류를 직관적으로 인지하고 기능들을 더 효과적으로 활용할 수 있도록, 일일 기록 화면에 있는 지나치게 많은 정보의 양을 조절할 수 있는 방법을 찾아야 했다.
IA BEFORE > AFTER다양한 방법이 있겠지만 여기에서는 두 가지 방식을 활용해 다이어리를 좀 더 체계화하였다. 첫째, 주간 다이어리를 추가해 IA를 1차로 월 - 주 - 일로 세분화했다. 둘째, 일간 다이어리에서 관리해야 하는 정보를 신체 - 식단 - 운동 - 물의 4가지로 재분류했다. 입력과 조회 화면을 구분하는 대신 입력하는 동시에 한눈에 현황을 볼 수 있도록 화면을 설계할 수 있도록 했다.
또한 체크리스트, 눈바디 사진(신체 변화 사진)과 같이 매일 입력하지는 않지만 주기적으로 관리해주어야 하는 정보들을 주간 다이어리 항목으로 분산하였다. 그와 동시에 주간 리포트를 추가했는데, 몸무게와 같이 월간보다 자주 확인하고 싶을 것이라 예상되는 항목을 요약 제시해 유용성을 한층 높이고자 한 것이다.
한편 현재의 월간 다이어리 화면은 사용자들이 앱 내 커뮤니티 또는 챌린지에서 본인의 다이어트 현황을 인증하는 하나의 수단이다. 그래서 월간 다이어리를 간소화한 대신, 주간 다이어리에 기록 시 일일 칼로리가 나타나도록 명시했으며 바로 아래 원하는 항목의 주간 통계를 함께 볼 수 있도록 설정했다. 이로 인해 사용자들은 주간 달력 및 통계 화면이나 기존에 사용했던 월간 상세 통계 중에서 원하는 부분을 캡쳐해 인증에 사용할 수 있을 것이다.
1. 월간, 주간 다이어리2) 시각적 요소에 위계 부여하기: UI 변경
정보를 크게 신체 - 식단 - 운동 - 물을 위주로 재분류하되, 통계 요약 화면은 단계적 공개 방법을 활용했다 (사실 '더보기' 자체도 단계적 공개라고 할 수 있기는 하다). 가장 핵심 정보라고 할 수 있는 여분의 칼로리와 음식 섭취 칼로리, 운동 칼로리만 우선 노출했다가 더보기 화살표를 눌렀을 때 나머지 자세한 정보를 보여주어 학습 용이성과 사용성을 높이고자 했다.
2. 일일 기록원래 화면 가장 상단에 위치했던 몸무게, 골격근, 체지방량은 더보기 화살표를 눌렀을 때 입력, 조회할 수 있다. 그리고 기존의 팝업 툴팁에서 선택 가능했던 일일 섭취 영양소 비율 조회 방식 두 가지를 모두 표현함으로써 기존의 팝업 툴팁에서 선택, 변경해야 하는 번거로움을 없앴다. 또 칼로리와 영양소 메뉴명 옆에 같은 모양의 툴팁 아이콘을 두어 사용자에게 추가적인 정보를 볼 수 있다는 동일한 신호를 보내고자 했다. 이 방법들을 사용해 기존에 불편함을 주었던 점들을 개선하면서도, 화면 UI를 변경했을 때 기존 고객들이 느낄 수 있는 이질감을 낮추고 싶었다.
또한, 정보를 식단 - 운동 - 물 - 신체로 나누어 차례대로 나열했다. 식단의 경우 탭 UI를 활용해 식단을 재분류하고 아침-점심-저녁 간식으로 나뉘어 있던 간식을 하나로 합쳐 메뉴를 간소화하면서도 먹은 음식을 한눈에 볼 수 있도록 설계했다. 그 아래 배변이나 월경 등 신체 상태를 체크하는 UI들은 보다 일반적인 멘탈모델에 맞게끔 UI 입력 방식을 수정하였으며, 손으로 터치하기 쉽도록 전반적인 크기를 키웠다. 그리고 가장 아래 일기나 메모를 적은 내용을 배치해 전체 현황 조회를 위한 별도의 버튼 UI가 필요하지 않도록 수정하였다.
2. 식단 등록 화면
1) 사용성 개선
3. 식단 기록 (검색)검색 과정에서의 사용성을 개선하기 위해 다음과 같은 점들을 수정했다. 첫째, 검색 화면을 활용해 '최근에 먹은 음식'과 '마이 칼로리', '마이 식단'을 아예 앞으로 빼어 원하는 음식을 검색하기 전 다른 방식으로도 식단을 기록할 수 있는 방안을 보다 더 직접적으로 제공했다. 둘째, 검색 후에는 원하는 음식을 선택하기 편하도록 요소 크기를 키우고 전반적인 간격을 넓혀 가독성을 높이려 했다(예를 들어, 애플의 human intercafe design 가이드라인은 요소의 최소 규격을 44pt로 잡고 있다). 세 번째로는 온라인 쇼핑몰의 장바구니 기능처럼 선택한 음식을 잠시 담아둘 수 있는 공간을 만들었다. 이로써 음식을 하나씩 등록하고 수정하려 할 때마다 식단 기록 페이지로 돌아가야만 하는 번거로움이 줄어들게 되었다.
음식 상세 페이지에서는 음식명뿐만 아니라 영양소 정보, 필요한 운동의 양, 추천 운동을 함께 제공해 사용자가 이 음식이 자신이 하고자 하는 다이어트에 어떤 영향을 줄 지를 가늠해 볼 수 있도록 했다. 특히 영양소 부분에는 일일 기록 화면과 같은 단계적 공개 방법을 사용해, 먼저 핵심 정보인 탄단지 함유량을 제시하고 더 보기를 눌렀을 시 비타민 등의 상세 영양소 정보를 함께 제공하였다. 그리고 우측 상단 아이콘을 선택해 마이 식단과 마이 칼로리에 해당 음식을 추가할 수 있도록 했다.
2) 자연스러운 광고 제시하기
식단 등록 과정에서 광고가 적용되는 부분은 식단 등록 화면과 음식 상세 정보를 제시하는 화면 두 곳이었다. 이곳들이 다이어트신에서 판단한 '광고 시 효과가 좋은 페이지/위치'라는 가정을 해보면 좋을 것 같다. 이 위치에 앱 설치 광고 대신 자사몰 '다신샵'의 제품을 추천해 주는 것은 어떨까? 그렇다면 사용자가 광고에 갖는 거부감을 최대한 낮출 수 있을 것이라고 생각했다.
4. 광고 조정이제까지 서비스의 UX/UI를 어떻게 변경하면 좋을지에 대한 아이디어를 제시하였다. 하지만 UX/UI는 약점을 보완하는 것뿐만 아니라 더 차별화된 경험을 만드는 데도 효과적으로 사용될 수 있다. 따라서, 다음 글에서는 다이어트신의 강점을 부각하기 위한 UX 설계 아이디어를 제안해 보려고 한다.
참고
