메인 페이지의 사용성을 개선해보자

Main page UXUI Development

서비스를 시장에 내놓고 보면, 발견하지 못한 문제점들이 속속히 드러나기 마련이다. 문제점은 고객 서비스 불만이나, 내부 피드백, 버그 등등 다양한 형태로 전달이 되는데, 아예 발견하지 못하고 고객이 떠나가 버리는 것보다는 어떻게든 귀에 들어오는 게 낫다.(ㅜㅜ)

이 글은 서비스의 가장 핵심인 메인 페이지를 개인이 개선한 내용이고, 기존 시안에서 어떤 문제점을 발견했고, 어떻게 개선하였는지에 대해 작성하였다.

OVERVIEW

서비스는 해당하는 날짜에 사용 가능한 콘텐츠를 리스트 형태로 나열하는 대시보드로 제작되었다. 하루 단위로 제공되는 콘텐츠가 다르며, 날짜별 콘텐츠가 아카이브 되는 기능이 주요한 핵심 기능이다.

AS IS

개편 전 메인 페이지

개편 이전의 메인 페이지의 모습이다. 전체적으로 한 화면 안에 너무 많은 일러스트가 배치된 것을 확인할 수 있다. 일러스트가 과하면 시선이 분산되고 복잡해 보일 수 있어, 일러스트를 축소하고 콘텐츠 구성을 통일성 있게 보이도록 개선할 필요가 있어 보인다.

콘텐츠 리스트에는 이벤트 배너와 콘텐츠가 함께 배치되어있는데, 콘텐츠보다 많은 공간을 차지하고 있는 이벤트 배너로 인해 가장 중요도가 높은 콘텐츠가 눈에 띄지 않는 것이 문제이다. 이벤트 배너는 하나의 광고판으로 유저의 시선을 이끌 필요는 있지만, 콘텐츠와 구분되지 않고 더 중요하게 보이는 것은 눈속임으로 유저를 기만하는 느낌이 들기도 한다.(콘텐츠인 줄 알았지만 사실 광고야) 

사용성에서도 개선이 필요한 부분이 있다. 메인 페이지가 날짜 기반의 스와이프 가능한 페이지임에도, 사용자에게 제대로 전달되지 않아 핵심 기능임에도 놓치기 쉬울 것으로 보인다.  

일러스트 정돈

일러스트를 적절한 사용은 콘텐츠를 매력적으로 보이게 하지만 한 화면 안에 너무 많이 사용되다 보면 기능에 방해가 되기도 하고 시각적으로 잡음을 낸다. 기존 일러스트로 인해 글의 가독성이 낮고, 콘텐츠 간 어울리지 못하는 점을 개선하여 카드 전체에 입혀졌던 일러스트를 섬네일 형태로 축소했다.

또한 light, dark 모드 두 가지 배경이 제공되는 것에 더 잘 어울릴 수 있도록 카드의 색상 또한 배경색에 따라 변경되도록 디자인을 적용해 한층 안정감을 주었다.

이벤트 배너와 콘텐츠 리스트의 서열 정리

이벤트 배너가 눈에 띄면서도 콘텐츠의 중요성을 강조하는 방법을 고민했다. 이벤트 배너가 충분히 시선을 이끌 수 있으면서도 주된 콘텐츠를 메인으로 자리잡기 위해서 두 카드 형태를 차별화하였다. 구조적인 차이가 느껴지도록 하여 서로 다른 성질의 기능을 하는 것을 이해시키고, 이벤트 배너가 더 눈에 띄도록 전체적으로 눈에 띄는 색을 넣었다.  대신 이벤트 배너가 차지하는 공간을 축소하여 콘텐츠 하단에 배치해 균형을 맞췄다.

UI로 기능 설명하기

메인 페이지에서 가장 문제였던 것은 날짜를 이동하는 스와이프 기능이 제대로 설명되지 않고 있다는 것이다. 이를 위해 다양한 방법으로 기능을 알려줄 수 있지만, 자연스럽게 그 기능을 전달하는 방법에 대해 고민하였다.

리스트 상단에 Horizontal 한 날짜 메뉴를 삽입하여 가로 스와이프가 가능함을 알리고, 스와이프 할 시 이전 날짜 혹은 다음 날짜의 리스트를 확인할 수 있음을 전달하였다.

TO BE

개편된 메인 페이지

개편된 디자인은 전체적으로 불필요한 요소를 제거하여 이전 디자인에 비해 시각적인 피로도가 줄어든 것을 느낄 수 있다. 자주 사용해도 질리지 않는 매력적인 페이지를 제공하기 위해서는 각각의 요소를 중요 순위로 정렬하고 화면 안에서 통일성 있게 보이는 것이 중요하다.