Mood Tracking Page UIUX Development

OVERVIEW

개선하려고 하는 기능은 사용자가 기분을 입력하고, 그것에 대한 구체적 감정과 상황, 느낀점을 작성하도록 하는 기능이다. 하나의 기능에서 유저는 기분의 정도, 느껴지는 세세한 감정, 기분을 느끼게 한 대상, 기분을 느끼게 했던 행동, 추가적인 기록을 작성해야 하기 때문에, 유저가 중요한 기능이 무엇인지 알고, 지나침 없이 잘 활용할 수 있도록 그 과정을 잘 설계해야 한다. 

 

 

AS IS

화면안의 요소들을 기능별로 나눈 것이다.

위는 디자인을 개선하기 전 화면이다. 한 화면 안에 입력해야하는 내용이 모두 나열되어 있고, 모든 기능의 중요도가 구분되지 않는다. 그렇기 때문에 사용자는 화면에서 너무 많은 정보를 확인하는 것에서 자칫 부담스럽게 느낄 수 있다. 이를 개선하기 위해 먼저 가장 중요한 기능이 무엇인지, 어떤 순서로 작성하도록 유도할 것인지 시나리오를 살펴볼 필요가 있다. 

 

 

USER SCENARIO

사용 시나리오는 총 5단계로 구분되며, 작성순서는 3단계로 나누어진다. 필수적으로 입력해야 하는 내용은 기분의 정도, 감정 단어 선택(감정 정의)이며, 구체적 기록(해소 및 회고)과 대상, 행동을 입력하는 것은 선택적인 사항이나, 구체적인 기록은 서비스의 가치를 제공하는 부분이기 때문에 되도록이면 작성하도록 유도해야 한다. 

 

또한 작성 순서는 기분 정도 선택, 감정 단어 선택, 구체적 기록 순서로 작성하도록 한다. 2번과 3번은 특별하게 꼭 순서대로 작성해야 하는 것은 아니지만 기분의 정도를 입력하는 것과 감정을 선택하는 것의 순서는 바뀌지 않도록 해야한다. 이는 순간의 기분 정도를 입력하는 것이 중요하기 때문에, 그와 관련된 감정들을 선택하면서 기분의 정도가 바뀌었다면 그것은 서비스를 사용하는 과정에서 기분의 정도가 바뀐 것이라고 판단할 수 있기 때문이다.(물론 강제적으로 입력된 내용을 변경할 수 없도록 하는 것은 아니다.) 

 

 

기분을 강조하기

이 화면에서 가장 핵심되는 기능은 기분의 정도를 입력하는 것이다. 그렇기 때문에 가장 강조되어야 하며, 화면의 전체적인 분위기를 담당해야 하기도 한다.

 

기존의 디자인은 전반적으로 강조되는 기능으로 느껴지지 않으며, 조절 UI가 눈에 띄지 않아 변경 기능의 전달력이 부족하다. 개선된 디자인에서는 먼저 7단계로 구분되는 기분에 따라 색상을 입혀 선택한 것이 차별되도록 강조했다. 또한 선택 가능한 감정을 화면 상에 살짝 노출하어 변경을 유도했으며, 스와이프 슬라이더 UI의 레이어를 구분 되도록 하여 기능을 설명했다. 

 

 

귀찮음을 없애고 고르는 재미를 주기

두 번째 기능은 감정 단어를 선택하는 것이다.  6가지로 분류되는 단어들이 나열되어 있어, 굉장히 많은 선택지가 있다. 기존에는 6가지의 대분류만 먼저 노출하고 선택지는 아코디언 ui 를 사용하여 펼쳐볼 수 있도록 했다. 너무 많은 선택지가 있기 때문에 스크롤이 길어지는 것을 방지하기 위한 방법이었는데, 사용하는 과정에서 선택지가 바로 노출되지 않아 하나하나 모두 펼쳐봐야 하는 불편함이 존재했다. 

 

개선된 디자인에서는 선택을 하는 것에서 불필요한 행동을 줄이고, 고르는 재미를 느낄 수 있도록 했다. 이를 위해 화면상에 너무 많은 메뉴가 바로 보여서 복잡하게 느껴지는 것을 방지하도록  하단 drawer를 활용했다. drawer에서 전체 선택지를 모두 나열하여 스크롤하면 모든 선택지를 확인할 수 있다. 또한 선택지의 분류를 보여주고, 쉬운 이동을 위해 drawer 내 상단에 선택가능한 서브 네비게이션 적용하였다. 더해서 대상과 행동을 입력하는 것은 필수 기능이 아니기 때문에, 선택지 아래 "+"로 입력을 추가할 수 있도록 가볍게 제공했다. 

 

이를 통해 적용된 화면은 이전보다 시각적인 복잡함도 줄어들고, 오히려 고르는 것의 재미를 느낄 수 있도록 개선된 것을 확인할 수 있다.

 

 

 

화면을 분리하여 작성 유도하기

가장 하단에 위치한 장문 입력 칸은 중요한 가치를 제공하는 부분으로 사용자가 입력하도록 유도해야하는 기능이다. 하지만 강조되지 않아 그 중요성이 잘 느껴지지 않을 뿐더러 가장 하단에 위치하여 이용률이 가장 낮은 기능이었다. 이는 위치의 문제도 있지만, 다른 기능과 차별되어 보이지 않는 이유도 있다. 

 

이 기능을 더 잘 활용하도록 하기 위해 페이지를 분리해 단계를 나눴다. 화면에서는 이전에 입력한 내용을 요약해서 정리해주고, 내용을 입력하는 칸만 제공하여 그 사용률을 높였다.

 

 

TO BE

선택한 기분이 강조되어 보이는 화면

개선된 디자인 화면은 좀더 정돈되고 내용이 압축되어 중요한 기능만 강조되어 보인다. 개선을 통해 사용의 부담이 줄고, 조금더 선택의 재미를 느끼길 기대한다.

 

가끔 서비스를 사용하는 과정을 살펴보면, 사용자는 디자인한 Flow대로 제대로 따라가지 않거나, 정보를 놓치고, 잘 사용하지 못하는 경우가 있다. 서비스가 전문성을 요구하기 때문에 학습이 필요한 경우도 있으나, 그렇지 않은 경우에도 빈번하게 일어난다. 이 경우 사실 유저에게 잘못이 있다기보다는 잘못된 서비스의 설계에 문제가 있다고 생각한다. 적절한 화면 배치와 요소들을 활용하여, 빠르게 훑더라도 기획자의 의도대로 이용할 수 있도록 유도하는 것이 중요할 것이다.

 

---