오늘의 집으로 알아보는 좋은 사용자 경험

좋은 사용자 경험이란 무엇일까? 책에서 말한 대로 사용자가 생각할 필요 없게 만드는 것을 말한다. 좋은 사용자 경험을 위해 오늘의 집은 얼마나 노력했는지 알아보자.

 

관례를 이용하라

관례는 널리 사용되거나 표준화된 디자인 패턴을 가리킨다. 예를들어 빨간색을 보고 우리는 정지 혹은 주의라는 의미를 떠올린다.

오늘의 집은 새로운 내용을 알릴 때 빨간색에 태그 디자인을 사용해서 사용자들이 쉽게 새로운 내용이라는 것을 인지할 수 있도록 사용자 경험을 설계하였다.

 

 

여러분의 새로운 아이디어가 더 낫다는 것을 확신할 때 혁신하라.
하지만 그렇지 않을 때는 관례를 사용하라

시각적 계층 구조

시각적 계층 구조는 무엇이 가장 중요하고 어던 것들이 비슷하며 요소 간의 위계는 어떠한지 시각적 단서를 주는 것이다. 쉽게 말하자면 강 중 약이다. 무엇이 가장 강하게 강조돼야 하는지 혹은 어떤 요소가 작게 들어가도 상관없는지를 보여주는 것이다. 시각적 계층 구조가 뚜렷하면 사용자는 고민하지 않고 프로덕트를 사용할 수 있다.

 

빨간색 네모는 가장 중요한 요소(강)를 가리킨다. 주문 내역과 배송조회를 하는 페이지이기 때문에 이게 지금 구매완료 인지 배송 중인지와 같은 상태를 나타내는 구역이 가장 중요하기 때문에 네모에다가 볼드체에 프라이머리 컬러로 확실한 강조를 해주었다. 위치도 가장 상단에 위치시켰다.

 

그다음으로 중요한 요소(중)는 주황색으로 표시하였다 업체가 직접 배송하는가? 일반 택배인가? 와 가격을 나타내는 부분을 조금 더 작은 볼드체로 강조해 주었다. 어떤 방식으로 택배가 오는지와 가격을 강조해주면서도 가장 상단에 있는 부분보다는 덜 강조가 되도록 더 작게 , 네모 표시도 삭제해주었다.

 

마지막으로 가장 중요하지 않은요소 (약)은 노란색으로 표시하였다. 이 제품의 사이즈 또는 색깔과 몇 개를 시켰는지를 표시해주었다. 오늘의 집에서는 이 정보들을 가장 중요하지 않다고 생각했나 보다. 연한 회색에 얇은 서체를 사용하여 확실히 덜 강조가 되도록 디자인해주었다.

 

 

페이지의 구역을 또렷하게 구분하라

오늘의 집 홈 화면을 보면 모든 부분을 선으로 찍찍 그어놓지 않았지만 검색 부분, 탭 부분, 광고 부분, 메뉴 부분, 포스팅, 하단 탭으로 보이지 않는 네모를 생성하여 페이지의 구역을 뚜렷하게 구분한 것을 알 수 있다. 이중에서도 같은 구역에서는 비슷한 스타일의 아이콘의 사용한다든가, 같은 그리드를 사용한다든가 하여 좋은 사용자 경험을 제공하고 있다.

 

 

주의를 흩뜨릴 만한 요소를 없애라.

이 부분은 처음부터 페이지를 기획할 때부터 페이지의 목적을 분명히 가지고 가면 이렇게 될 일이 거의 없다. 비주얼적인 부분은 앞에서 말한 3가지를 잘 지키면 된다. 좋은 사용자 경험은 한 페이지에서 한 가지 행동 외에 다른 것을 크게 요구하지 않는다. 오늘의 집의 집들이 탭이 좋은 예시이다. 집들이 탭은 집들이만 딱 크게 보여준다. 집들이 옆에 쿠폰을 다닥다닥 붙인다거나 옆에 슬쩍 물건 구매 페이지를 붙이지 않는다. (물론 상세페이지에서 플러스 버튼을 누르면 물건 구매 페이지로 넘어갈 수 있긴 하다!)

 

출처

http://www.yes24.com/Product/Goods/15238736

사용자를 생각하게 하지 마! - YES24