Main page UXUI renewal

OVERVIEW

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

 

AS IS

개편 전 메인 페이지

개편 이전의 메인 페이지의 모습이다. 전체적으로 한 화면 안에 너무 많은 일러스트가 배치된 것을 확인할 수 있다. 일러스트가 각자 목소리를 내고 있어 시선이 분산되고 어지러울 수 있어, 과한 일러스트를 제거하고 콘텐츠 구성을 통일성 있게 보이도록 개선할 필요가 있어 보인다. 콘텐츠 리스트에는 이벤트 배너와 콘텐츠가 함께 배치되어 있는데, 콘텐츠보다 많은 공간을 차지하고 있는 이벤트 배너로 인해 가장 중요도가 높은 콘텐츠가 눈에 띄지 않는 것이 문제이다. 이벤트 배너는 하나의 광고판으로 유저의 시선을 이끌 필요는 있지만, 콘텐츠와 구분되지 않고 더 중요하게 보이는 것은 눈속임으로 유저를 기만하는 느낌이 들기도 한다.(콘텐츠인 줄 알았지만 사실 광고야) 

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

 

일러스트 정돈

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

 

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

 

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

이벤트 배너가 눈에 띄면서도 콘텐츠의 중요성을 강조하는 방법을 고민했다. 이벤트 배너에 시선이 충분히 이끌릴 수 있으면서도 가장 잘 활용하는 기능이 콘텐츠가 되기 위해서 형태를 차별화하였다. 시각적으로 구조적인 차이가 느껴지도록 하여 서로 다른 성질의 기능을 하는 것을 이해시키고, 콘텐츠에서 어지러웠던 일러스트를 축소하고 이벤트 배너가 더 눈에 띄도록 전체적으로 색을 사용하였다. 대신 이벤트 배너가 차지하는 공간을 축소하여 콘텐츠 하단에 배치해 균형을 맞췄다.

 

UI로 기능 설명하기

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

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

 

TO BE

개편된 메인 페이지

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

 

---