브랜드에 통일되게 디자인 개편하기
UX를 유지하며 UI Renewal
앞서 메인 페이지의 사용성을 개선한 것에 이어 콘텐츠의 UI 개선을 진행했다. 각각의 디자인이 더 나은 사용성을 가지고 매력적인 디자인으로 보이는 것도 중요하지만, 앱의 화면이 같은 브랜드로 느껴지도록 통일성을 유지하는 것도 중요하다.
이에 따라 이전에 콘텐츠 UI의 사용성을 개선한 것에 이어 브랜드의 통일성을 띄도록 화면 UI를 개편해보려 한다.
OVERVIEW
개편하려고 하는 페이지는 "현재 나의 기분과 상태를 기록하는 콘텐츠"로, 서비스에서 가장 핵심 기능을 담당한다. 해당 페이지는 매일 유저가 하루 3번 이상의 기록을 남기도록 하는 것이 목표이며, 유저는 이전의 기록을 더욱 편리하게 선택해서 볼 수 있어야 한다. 유저가 일기, 금융 기록 등 자신의 히스토리를 살펴보는 것에서 가장 핵심 되는 행동의 목적은 1. 특정 날짜의 기록을 확인하는 것 2. 기존 기록들을 살펴보는 것이다. 이에 따라 현 페이지에서 유저의 Key Action은 Scroll과 Search이며, 해당 행동을 지속하는데 더욱 편리한 UX로 개편해야 한다. 브랜드에 맞도록 개편을 진행할 때, 위와 같은 UX를 유지하는 것을 Gardrail로 삼고 UI 개선을 진행했다.
AS IS
왼쪽이 개편된 홈 화면이고, 오른쪽이 아직 개편되지 않은 콘텐츠 화면이다.왼쪽의 개편된 홈 화면과 개편되지 않은 오른쪽의 콘텐츠 화면을 놓고 보면 같은 앱이라고 느껴지지 않으며, 어색한 느낌을 준다. UI가 같은 브랜드로 느껴지게 하는 요인에는 통일된 Component, Component의 화면 배치, Padding과 Margin의 규칙성, 통일성 있는 Color의 사용 등이 있다. 세밀한 부분들의 통합과 통일된 UX가 브랜드의 통일성을 만드는 요인일 것이다.
위의 두 화면의 component를 비교하더라도 색상, 그림자, 코너 라운딩, 배치 등 많은 것들이 통일성을 깨뜨리고 있다.
Header를 규칙성 있게
페이지 title을 메인 페이지와 style을 동일하게 변경했으며, date picker 또한 메인화면의 스타일과 통일되게 개선했다.
내용이 방해받지 않도록
페이지에서는 유저가 기록을 지속해서 읽는 것에 방해가 되지 않도록 하는 것이 가장 중요한 원칙이다. 그렇기 때문에 기존의 디자인에서 기록을 작성하는 버튼이 하단에 위치하여 내용을 가리는 문제를 없애는 것 또한 변경해야 하는 사항이었다. 오른쪽 하단에 shortcut 버튼을 둘 경우, 유저가 가장 필요한 기능을 빠르고 쉽게 이용할 수 있는 장점이 있다. 하지만 해당 페이지에서 중요한 기능은 새로운 기록을 남기는 것보다 유저가 남긴 전체 기록을 읽기 쉽도록 하는 것이므로 버튼을 오른쪽 상단 헤더 부분으로 옮겨 글을 읽는데 방해되지 않도록 했다.
더 넓은 화면에서 글을 볼 수 있게
유저가 한 화면에서 더 많은 내용을 확인할 수 있도록 스크롤을 내릴 때, 헤더가 축소되고 화면이 확장되도록 했다. 스크롤을 내리는 경우, 유저가 글을 기록하거나 날짜를 선택하려고 하기보다 전체 내용을 살펴보고자 한다는 의도로 파악할 수 있기 때문에, 헤더에 위치한 날짜, 내용 삽입 버튼은 축소하도록 변경했다. 또한 하루 동안의 아이콘은 그룹핑하여 한번에 확인하기 쉽도록 변경하였는데, 이는 하루 단위의 기분변화를 확인하는 것이 중요한 유저의 니즈이기 때문이었다. 또한 이는 내용과 함께 확인하기 쉽도록 스크롤을 내리더라도 해당 아이콘 그룹은 헤더 아래 고정되도록 하여 더욱 편리한 UX를 보여주었다.
TO BE
개선된 디자인은 메인 페이지와 좀 더 통일된 디자인 스타일을 유지하며, 더 나은 사용성을 보여준다.
UI 개선은 유저에게 기존보다 더 나아진 시각적 경험을 주는 효과가 있지만 자칫 익숙하지 않은 화면으로 인해 어색함을 느끼거나 불편함을 느끼게 할 수 있다. 그렇기 때문에 개선을 할 때는 단계별로 하나씩 자연스럽게 변경하며 유저가 새로운 UI에 적응할 수 있도록 학습시킬 수 있어야 한다. 유저가 서비스에서 더 나은 경험을 할 수 있도록 항상 세밀하게 유저의 시각을 살펴야 할 것이다.
https://www.notion.so/6d2d4e097246439187a521f821132dc2
