UX 관점에서 보는 컬러 적용 23가지 사례
UX 디자인 배우기 #27
Today UX 아티클
Econsultancy에 게재된 Ben Davis의 글 23 clever uses for colour in ecommerce UX를 소개하고자 합니다.
컬러는 웹 디자인과 이커머스에서 중요한 역할을 한다고 합니다. 이 글에서는 이커머스 UX에서 컬러를 똑똑하게 사용한 23가지 사례를 소개하고 있습니다.
Virgin America 확인된 입력란은 초록색으로
Virgin America에서는 입력한 데이터에 문제가 없을 때, 각 입력란을 초록색으로 전환한다고 합니다. 아직 완성되지 않은 입력란에는 보라색을 사용했다고 합니다.
ASOS – 메가 메뉴(mega menu)에서 세일 항목에 관심 끌기
이 사례는 너무 작아서 감지하기 어렵다고 할 수도 있지만, 분명 메가 메뉴에서 세일과 세이브를 빨간색을 사용해 강조해서 눈길을 끌고 있다고 합니다. 더 탐색해보고 구매하고 싶게 만드는 훌륭한 방법이라고 합니다.
나이키 – 제품 보여주고 장바구니에 담도록 유도하기
나이키는 컬러를 거의 사용하지 않은 대표적인 예인데, 흑백의 디자인은 제품 자체의 색상을 강조해준다고 합니다.
유일하게 주황색 한 방울이 사용된 곳은 ‘장바구니에 담기’ 버튼이라고 합니다.
Trainline – 대비, 명확성, 즐거움
강조 색상과 똑똑한 인포그래픽의 조화는 Trainline의 앱과 웹사이트를 이용하기 쉽고 즐겁게 만들어준다고 합니다.
예약할 때 보여주는 대비 효과는 유저가 차근차근 예약 프로세스를 밟으면서, 실수에 대한 두려움 없이 나아갈 수 있게 해준다고 합니다.
Pure Cycles – 제품 차별화
Pure Cycles는 온라인으로 자전거를 판매한다고 합니다. 색상을 어떻게 사용하느냐에 따라 제품이 차별화되거나 매력적으로 보일 수 있다는 점을 이 리테일러는 제대로 이해하고 있었다고 합니다.
이런 접근법은 손잡이 같은 더 저렴한 제품에도 적용된다고 합니다. Pure Cycles는 모든 색상을 한 번에 보여주어 표면상의 기능이나 지루한 아이템에 강한 인상을 남겼다고 합니다.
Pure Cycles의 야광 자전거 페이지에서는 이미지를 돋보이게 하는 데 특별히 애를 썼다고 합니다. 세일즈는 결국 제품이 전부이기 때문에 이커머스 사이트에서 좋아 보이게 만드는 것은 심미적 우선순위에서 1순위가 되어야 한다고 합니다.
Pelican – 더 많은 대비 효과로 이해 돕기
Pelican사의 전자책 구매 웹사이트는 선명하고 심플하며, 색을 잘 활용해 Penguin 사의 논픽션 하우스임을 명확하게 알 수 있게 직관적으로 전달하고 있다고 합니다.
단순한 출판사 웹사이트라고 생각하기 쉽지만 아래와 같은 결제 프로세스가 있는 물건을 파는 사이트라고 합니다.
Houzz- 브랜딩 & 전환
Houzz는 엄밀히 말하면 이커머스 웹사이트는 아니지만, 소비자가 디자이너, 건축가, 제품 등을 찾을 수 있는 마켓플레이스라고 합니다. 결제 프로세스가 없긴 하지만 ‘전통적인’ 이커머스 사이트에 직접 옮길 수 있는 많은 기능이 있다고 합니다.
이 사이트 또는 앱의 UX는 브랜드 색상(녹색)으로 디자인의 특정 요소를 강조하는 것을 중점적으로 다루고 있다고 합니다. 이는 유저에게 브랜드를 확실히 인지시켜 주면서도 유저를 안심시키고 독려할 수 있는 매우 효과적인 방법이라고 합니다.
UGC 상의 제품 강조하기
녹색은 Houzz 앱 전반에 걸쳐 사용된다고 합니다. 녹색 가격 택은 인테리어 사진에서 클릭할 수 있는 제품을 표시해 준다고 합니다.
리뷰 강조하기
보통은 리뷰에선 주황색을 사용하지만 Houzz에서는 브랜드 색상인 녹색을 사용해 선택한 디자이너나 건축가에 대한 사회적 신뢰도를 보여준다고 합니다.
고스트 버튼
고스트 버튼은 데스크탑 웹 디자인의 현대적인 특징으로, 여기서도 녹색을 사용했다고 합니다.
행동 유도
‘매장 방문’ 버튼으로 행동을 유도하고 있다고 합니다.
브레드크럼 트레일과 필터를 알아보기 쉽게 보여주기
유저가 계속해서 자기 위치를 파악할 수 있는 좋은 방법이라고 합니다.
롤오버
롤어버는 또 다른 UX 도우미라고 합니다. Houzz는 롤오버 효과를 통해 저장 버튼(위시리스트 같은 것 만들어줌) 이메일 아이콘(친구에게 제품을 보낼 수 있음)을 강조했다고 합니다.
Wish – 디스카운트 플래시
Wish는 싸고 질 좋은 물건을 찾아 헤매는 사람들을 타깃으로 만들어진 웹사이트이자 앱이라고 합니다. 할인율이나 남은 재고, 남은 시간을 강조하는 데 주황색 플래시를 사용한다고 합니다.
Helbak – 여백의 대안
Helbak Ceramics는 메인 페이지에서 제품 사진의 배경으로 파스텔 톤을 사용하였다고 합니다.
이렇게 하면 제품이 빛을 발하게 해줄 뿐만 아니라 전반적인 디자인에 활기를 넣어주고 공간을 설명할 수 있도록 도와준다고 합니다.
Best Buy – 카트에 있는 아이템 표시하기
카트에 아이템이 있을 때 강조하여 유저가 결제할 수 있게 해주는 것은 표준 절차가 되었다고 합니다. 많은 사이트에서 그렇게 하고 있고, 아래 Best Buy에서도 브랜드 색상이자 ‘카트에 추가하기’에도 사용한 노란색을 이용하여 카트에 표시했다고 합니다.
Crayola – 브랜딩과 순수한 즐거움
이커머스에서 이만큼 즐거움을 줄 수 있는 메뉴도 없을 것이라고 합니다. Crayola는 브랜드를 제대로 반영하여 웹사이트를 만들었다고 합니다.
모바일 역시 브랜드를 성공적으로 반영했다고 합니다.
Flipkart – 공지 강조하기
공지(notification)는 이커머스에서 점점 더 흔하게 사용되고 있는데 Flipkart에서는 노란색을 활용해 종 모양을 눈에 띄게 만들었다고 합니다.
Curry – 결제 프로세스 안내표시
또 다른 실용적인 컬러링 사례라고 합니다. 많은 사이트에서 이렇게 현재 위치한 결제 프로세스에 강조하는 색을 활용합니다.
Lush – 제품 대비
위에서 언급한 나이키 사례처럼, Lush는 엄청난 흰 공간을 사용해 다채로운 색상의 제품이 빛을 발하도록 만들었다고 합니다.
Kayak – 예약 시스템 이해가게 만들기
예약 시스템은 기가 죽을 만큼 엄청난 정보를 가지고 있을 수 있는데, Kayak는 브랜드 색상인 주황색을 사용해 중요한 기능이나 정보를 강조했다고 합니다. 또한 ‘저장’ 혹은 ‘리뷰’와 같은 유인 요소에는 보조색인 녹색을 활용했다고 합니다.
Odd Pears – 제품 일러스트레이션
제품 사진 대신 일러스트레이션을 사용하는 사이트가 많지는 않지만, 양말처럼 일러스트를 보고 상품을 예상할 수 있는 경우에만 사용할 수 있지만, 상당히 효과적이라고 합니다.
이런 패턴은 2D 화면에 활기를 불어넣어주고 이미지를 균일하게 만들어 주어 유저가 제품을 모두 수집하고 싶게 만든다고 합니다. 각 이미지에 색상 견본을 추가한 것도 매력을 더 해준다고 합니다.
IKEA – 결제 오류
또 다른 표준은 유저가 놓친 칸이나 잘못된 정보를 입력한 칸을 빨간색으로 강조하는 것이라고 합니다.
어떤 사이트는 결제 프로세스에서 빨간색으로 포괄적인 문구만 쓰지만, IKEA에서는 보다 분명하게 입력란 자체를 빨간색 테두리로 바꾸고 유익한 메시지를 제공한다고 합니다.
AO.com – 컬러 코딩 제품
AO.com는 색상을 매우 잘 활용하고 있다고 합니다. 배송 정보나 행동 유도 버튼 등과 같은 핵심 기능을 골라 브랜드 색상인 녹색으로 표시했다고 합니다.
또한 각 가전제품에 에너지 효율을 표시하는 깃발을 추가해 에너지 효율을 걱정하는 유저가 빠르게 최고의 제품을 고를 수 있게 해줬다고 합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
