UX case study. 다이어트 앱-3
다이어트신 (3) : 개선안 제언 1. 사용성 개선
직관적인 UI와 IA 정리로 다이어리 사용성 개선하기
다이어리는 다이어트신 사용자들이 스스로의 상태를 관리하기 위해 매일 사용해야만 하는 메뉴이다. 하지만 초기에 사용법을 익히는 것이 어렵고, 서비스에 익숙해진 후에도 화면을 자주 사용하기에는 불편한 점이 많다. 다이어리 메뉴(기능)를 이해하기 위해 주요 화면의 UI, IA, 그리고 핵심 행동이라고 할 수 있는 식단 추가 과정을 살펴보고, 사용 시 어떤 점이 불편한지 분석해보려고 한다.
다이어리 메뉴에 해당하는 주요 화면의 UI는 다음과 같다.
다이어리 메인 > 일일 기록 > 식단 기록 | 월간 상세 리포트1. 일일 기록 화면
이 화면은 매일의 식단, 물, 운동, 배변과 눈바디 등 다이어트에 필요한 정보를 하루 단위로 기록하는 일일 기록 화면이다. 입력에 따라 다이어트 현황과 변화 추이를 확인할 수 있는 만큼, 이 화면 하나에 꽤 다양한 입력 폼과 정보들이 포함되어 있다. 이 화면에서 가장 크게 느끼는 불편함은 입력해야 하는 정보는 많으나 이를 어떻게 입력하고 조회할 수 있는지 쉽게 파악하기 어렵다는 점이다.
우선 이 화면에 어떤 정보를 어떻게 입력할 수 있는지 확인해보자. 바로 아래 일일 기록 화면의 IA와 대표 UI를 함께 정리해 보았다.
표기된 부분은 사용자의 입력이 필요하지 않은 곳들이다.좌측 표를 보면 이 화면에 다양한 콘텐츠가 포함되어 있음을 알 수 있는데, 그중 노란색으로 표기된 음식, 운동, 최종 칼로리 그리고 영양소와 권고량은 사용자가 직접 입력한 식단과 운동 칼로리를 바탕으로 자동 산출된다. 그 말은 즉 이를 제외한 나머지는 모두 사용자가 입력해야 하는 정보라는 뜻이다.
원래 사람의 작업기억에는 일정한 용량 제한이 있어 동시에 처리할 수 있는 정보에 한계가 있다(힉의 법칙). 그래서 한 번에 많은 정보를 제공할수록 사용자의 인지적 부담은 증가한다. 디자이너들은 사용자의 인지적 부담을 줄이기 위해 다양한 방법을 시도한다. 비슷한 정보를 한 자리에 묶어두거나, 중요한 내용은 크기나 색깔을 통해 강조하는 등 정보들 간의 위계를 만들어서 이를 구조화하는 방법이 대표적이다. 만약 다양한 정보가 보기 편하게 정리되어 있다면 사용자가 쉽게 화면 사용법을 익힐 수 있을 것이다.
또한 이 화면은 중요도가 높은 행동인 기록(식단, 물, 운동) 버튼의 크기가 크다는 장점이 있다. 모바일 화면에서는 주로 손가락으로 스크린을 조절하므로, 피츠의 법칙을 생각해 보았을 때 사용성을 위해 버튼의 크기를 조절했음을 알 수 있다. 하지만 이 화면은 입력해야 하는 정보가 많은 상황에서 기록 버튼의 크기만을 키움으로써 다른 기능들 사이에 비효율적인 가치의 trade-off가 발생했다. 여기에 더해 전반적인 폰트의 크기가 너무 작고, 여러 개의 색상이 사용되고 있어 어느 부분이 중요한지 한눈에 파악하기 어렵다는 단점이 있다.
그럼에도 불구하고 사용자에 따라 학습 자체는 어렵지 않을 수 있다. 어쨌든 중심 행동인 식단 기록 부분의 버튼이 선택하기 편하며, 여러 색상이 사용되는 부분은 영양소 차트와 식단/물/운동 입력으로 한정되어 있기 때문이다. 예를 들어, '내가 데이터를 입력하면 중요한 부분은 노란색으로 표시된다' 거나 '무엇인가를 입력하고 싶다면 원을 선택하면 된다'는 식의 멘탈 모델을 만들 수 있다. 하지만 이 화면의 몇몇 인터렉션은 이러한 사용자의 기대를 벗어난다.
'성공' 원형 버튼은 정보를 입력하는 버튼이 아니다.먼저 칼로리 요약 부분의 '성공' 버튼을 보자. 이 버튼은 식단 입력이 완료되었을 때 나타나는 UI와 동일하다. 사용자는 이 버튼을 보고 '선택이 가능한 버튼인가?'라는 순간적인 판단을 하게 되며, 선택 시 입력 화면이 아닌 성공/실패 산정 기준을 팝업으로 마주하고 당혹감을 느낀다.
일반적이지 않은 UI와 인터렉션 사용도 사용자가 혼란스러움을 느끼게 하는 요소이다. 보통 사용자가 잘 모를 수 있는 내용을 안내할 때는 호버링을 해 내용을 확인하는 툴팁이나 아이콘 선택 시 팝업을 띄우는 팝업 팁을 사용한다(nn group). 하지만 그러한 팝업 안에서 조회하고 싶은 정보를 선택하는 UI는 다른 서비스에서는 일반적으로 사용되지 않는 방식이다.
팝업 팁 안에서 그래프 표시 방식을 정하는 UI는 일반적이지 않다.또 영양소 비율 그래프 바로 아래의 버튼들을 보자. 총 여섯 개의 버튼이 있는데, 이 중 네 개는 탭에서 다른 페이지로 이동하는 인터렉션을 제공하고, 나머지 두 개는 시스템의 상태를 변화시킨다. 하지만 시스템의 상태를 변화시키는 버튼이 따로 나머지 4개의 버튼들 사이에 위치하고 있어 사용을 어렵게 만든다.
같은 모양의 버튼, 서로 다른 피드백UI나 인터렉션이 정보 입력 방식에 따라 명확하게 구분되어 있지 않으면, 사용자가 인터렉션에 몰입하는 것을 방해하고 멘탈 모델 형성에 악영향을 준다. 또 사용자는 UI에 익숙해질 때까지 인지 자원을 추가로 소모해야 한다. 이는 '사용자가 우리의 서비스만 사용하는 것이 아니라는' 제이콥의 법칙을 충족하지 못한다는 이야기로, 일반 사용자는 앱의 사용법을 익힌 후에도 지속적으로 설명 못할 이질감 내지는 불편함을 느낄 것이다. 결국 낮은 사용성은 사용자가 대체재를 발견할 시 앱을 이탈하는 하나의 요인이 될 수 있다.
한편, '전체보기' 버튼으로 보았을 때 입력 화면과 조회 화면을 분리하려 했으나 그 의도가 사용자에게 잘 전달되지 않는 것으로 추측된다. 이 화면에는 식단과 운동 칼로리뿐 아니라 물 섭취, 배변, 만보계 등 하루의 추이가 함께 포함되어 있기 때문이다. 그런데 웬만한 부분은 입력 후에도 바로 확인이 가능하고, 다른 기능을 하는 버튼들과 함께 붙어 있기 때문에 눈에 잘 띄지 않는다.
따라서 개선은 다음과 같은 방향으로 이루어져야 한다.
> 명확한 시각적 위계, 인지하기 쉬운 직관적인 입력 방식 제공
> UI와 인터렉션에 통일성을 부여해 효과적인 멘탈모델 형성
> 기록 시 바로 변화된 상태를 조회할 수 있는 화면 제공
2. 식단 기록 화면
식단 추가 과정(검색). 식단 기록 > 음식 검색 > 음식 상세 > 추가 후 조회위는 식단을 기록하는 화면을 캡쳐한 것이다. 이 과정에서도 사용을 어렵게 만드는 요소들을 발견할 수 있다.
첫째는 광고이다. 식단 기록 화면에서 앱 설치를 유도하는 광고의 CTA 버튼이 검색 버튼과 같은 시각적 중요도를 가지고 있으며 심지어 검색보다 큰 크기를 차지해 사용자에게 혼란을 준다. 또한 음식 칼로리를 보여주는 화면에서 광고 영역을 부각해 더 중요한 정보 (칼로리당 필요 운동량)를 조회하고 싶을 때 추가적인 스크롤 액션을 필요로 한다. 이는 유저의 피로감을 가중시킨다.
둘째, 요소들의 크기가 전체적으로 너무 작아 선택하기 어렵고, 의미를 알기 어려운 용어로 인해 사용이 불편하다. 특히 중요한 '검색' 버튼이나 음식의 메뉴는 크기가 충분하지 않아 사용 시 오류가 발생할 수 있다 (다른 말로, 바로 옆에 있는 다른 버튼들을 선택할 수 있다). 또한 '마이 칼로리'는 일종의 즐겨찾기로 이 메뉴는 검색 기능 안에 숨겨져 있어 처음 사용할 때 사용자의 추가적인 탐색을 요구한다. 사용자는 검색 기능 안에서 또 다른 기록방식을 학습하게 되어 일반적인 기대를 벗어난 멘탈 모델을 형성하며, 향후 사용에도 지속적인 불편함을 겪게 된다.
특히 식단 기록은 앱 사용을 위해 매일 그리고 자주 반복해야 하는 행동인 만큼 이 과정이 사용하기 불편하다면 사용자들은 앱을 잘 찾지 않게 될 것이다. 따라서 필요한 개선 방향은 다음과 같다.
> 등록 과정의 기본적인 사용성 증진
> 사용 맥락을 방해하지 않는, 자연스러운 광고 제시
이번 글에서는 다이어리 기능이 사용하기 불편한 이유를 알아보았다. 일일 기록 화면에서는 입력해야 하는 정보는 많으나 이를 어떻게 입력하고 조회할 수 있는지 쉽게 파악하기 어렵다는 점, 식단 기록 과정에서는 낮은 사용성과 맥락에 맞지 않은 광고로 인해 사용자가 불편함을 겪는다는 점을 발견할 수 있었다. 다음 글에서는 이 내용을 기반으로 한 구체적인 개선점을 제언하고자 한다.
참고
