[UI/UX 원칙 #11] 컬러 적용 16가지 UX 원칙 가이드라인

컬러 적용 16가지 UX 원칙 가이드라인

벤 데이비스의 [컬러 적용 16가지 UX 원칙 가이드라인] 소개하고자 합니다.

컬러는 웹 디자인과 이커머스에서 매우 중요한 요소로 작용합니다. 이커머스 UX에서 효과적으로 컬러를 활용한 16가지 사례입니다.

1. 확인된 입력란은 초록색으로

Virgin America에서는 입력한 데이터에 문제가 없을 경우 각 입력란을 초록색으로 표시합니다. 반면, 아직 완료되지 않은 입력란에는 보라색을 사용합니다.

입력한 데이터에 문제가 없을 경우 각 입력란을 초록색으로 표시하는 이유는 사용자에게 긍정적인 피드백을 주어 입력이 성공적으로 완료되었음을 알리기 위함입니다. 초록색은 일반적으로 안전하고 긍정적인 의미를 가지므로 사용자의 신뢰감을 높이는 데 도움을 줍니다. 반면, 아직 완료되지 않은 입력란에 보라색을 사용하는 것은 주의를 환기시키고, 사용자가 해당 필드를 채우도록 유도하기 위한 것입니다. 보라색은 일반적으로 경고나 주의의 의미를 내포하고 있어, 입력 완료를 촉구하는 효과가 있습니다.

2. 메가 메뉴(mega menu)에서 세일 항목에 관심 끌기

다음 사례는 다소 미미하게 느껴질 수 있지만, 메가 메뉴에서 '세일'과 '세이브'를 빨간색으로 강조하여 눈길을 끌고 있습니다. 이는 사용자로 하여금 더 탐색하고 구매하고 싶도록 유도하는 방법이라고 할 수 있습니다.

메가 메뉴의 '세일'과 '세이브'를 빨간색으로 강조하는 이유는 빨간색이 주목성과 긴급성을 전달하기 때문입니다. 빨간색은 시각적으로 강렬하여 사용자의 관심을 끌고, 할인이나 특별 혜택을 강조하는 데 효과적입니다. 이러한 시각적 요소는 사용자가 해당 정보를 쉽게 인식하고, 더 많은 탐색을 하거나 구매 결정을 내리도록 유도하는 데 도움을 줍니다. 결과적으로, 소비자의 행동을 촉진하는 데 중요한 역할을 합니다.

3. 제품 보여주고 장바구니에 담도록 유도하기

나이키는 컬러를 거의 사용하지 않는 대표적인 사례로, 흑백 디자인이 제품 자체의 색상을 더욱 돋보이게 해줍니다.

유일하게 주황색이 사용된 부분은 '장바구니에 담기' 버튼입니다.

나이키가 컬러를 거의 사용하지 않는 이유는 흑백 디자인이 제품의 본질과 색상을 강조하기 위해서 입니다. 이 방식은 제품에 대한 집중도를 높이고, 소비자가 제품의 특징을 더욱 잘 인식할 수 있도록 돕습니다. 또한, 유일하게 주황색을 사용한 '장바구니에 담기' 버튼은 사용자에게 중요한 행동을 유도하는 역할을 합니다. 주황색은 시각적으로 눈에 띄기 때문에 클릭을 유도하고, 구매 결정을 쉽게 할 수 있도록 하는 효과가 있습니다. 이러한 전략은 브랜드 아이덴티티를 유지하면서도 고객의 행동을 촉진하는 데 효과적 입니다.

4. 대비, 명확성, 즐거움

강조 색상과 스마트한 인포그래픽의 조화는 Trainline의 앱과 웹사이트를 더욱 사용하기 쉽고 즐거운 경험으로 만들어 줍니다. 예약 과정에서 제공되는 대비 효과는 사용자가 단계별로 예약을 진행하면서 실수에 대한 두려움 없이 편안하게 나아갈 수 있도록 돕습니다.

강조 색상과 스마트한 인포그래픽의 조화가 Trainline의 앱과 웹사이트에서 중요한 이유는 직관적인 인터페이스를 제공하기 때문입니다. 강조 색상은 중요한 정보를 눈에 띄게 만들어 사용자가 쉽게 인식할 수 있도록 돕고, 인포그래픽은 복잡한 정보를 쉽게 이해할 수 있게 해줍니다.

예약 과정에서의 대비 효과는 사용자가 각 단계를 명확하게 인식하고, 실수에 대한 부담 없이 진행할 수 있도록 지원하여, 전반적인 만족도를 높이는 데 효과적 입니다. 이러한 요소들은 사용자에게 보다 원활하고 즐거운 경험을 제공합니다.

5. 제품 차별화

Pure Cycles는 온라인에서 자전거를 판매하며, 색상 사용에 따라 제품이 차별화되거나 매력적으로 보일 수 있다는 점을 잘 이해하고 있습니다.

이러한 접근법은 손잡이와 같은 저렴한 제품에도 적용됩니다. Pure Cycles는 모든 색상을 한 번에 보여주어 표면적인 기능이나 지루한 아이템에 강한 인상을 남겼습니다.

Pure Cycles의 야광 자전거 페이지는 이미지를 돋보이게 하는 데 특별한 노력을 기울였습니다. 세일즈는 결국 제품이 핵심이기 때문에, 이커머스 사이트에서 제품이 매력적으로 보이도록 하는 것은 미적 우선순위에서 가장 중요한 요소가 되어야 합니다.

정리하면, Pure Cycles가 색상과 디자인을 효과적으로 활용하는 것은 제품의 매력을 극대화하고, 소비자의 구매 욕구를 자극하기 위해서 입니다. 색상 사용은 제품을 차별화하고, 소비자에게 강한 인상을 남기는 중요한 요소로 작용합니다. 또한, 저렴한 제품에도 이러한 전략을 적용함으로써 전체적인 브랜드 이미지와 제품 인식을 높이는 데 효과적 입니다.

특히, 야광 자전거 페이지에서 이미지를 돋보이게 하려는 노력은 사용자가 제품을 시각적으로 매력적으로 느끼게 하여 구매로 이어지도록 하는 데 중요한 역할을 합니다. 결국, 이커머스 사이트에서 제품의 매력을 강조하는 것은 판매에 직접적인 영향을 미치기 때문에 미적 우선순위가 최우선이 되어야 한다는 점을 강조하고 있는 것입니다.

6. 더 많은 대비 효과로 이해 돕기

Pelican사의 전자책 구매 웹사이트는 선명하고 간결하며, 색상을 효과적으로 활용하여 Penguin사의 논픽션 하우스임을 직관적으로 전달하고 있습니다.

더 많은 대비 효과가 이해를 돕는 이유는 선명한 색상과 디자인 요소들이 사용자에게 정보의 중요성을 쉽게 인식하게 하기 때문입니다. 대비가 강한 색상은 시각적으로 눈에 띄어 사용자가 중요한 정보나 기능을 빠르게 파악할 수 있도록 도와줍니다. 또한, 이러한 대비는 웹사이트의 브랜드 정체성을 강조합니다.

7. UGC 상의 제품 강조하기

녹색은 Houzz 앱 전반에 걸쳐 사용되며, 녹색 가격 태그는 인테리어 사진에서 클릭 가능한 제품을 표시해 줍니다.

녹색을 사용함으로써 시각적 일관성을 유지하고, 사용자에게 직관적인 경험을 제공하기 위해서입니다. Houzz 앱에서 녹색은 특정 기능이나 정보를 강조하는 역할을 하며, 녹색 가격 태그를 통해 사용자는 인테리어 사진 속에서 어떤 제품이 클릭 가능한지를 쉽게 인식할 수 있습니다.

8. 리뷰 강조하기

일반적으로 리뷰에는 주황색이 사용되지만, Houzz에서는 브랜드 색상인 녹색을 활용하여 선택한 디자이너나 건축가에 대한 사회적 신뢰도를 강조하고 있습니다.

Houzz가 브랜드 색상인 녹색을 사용함으로써 일관된 브랜드 이미지를 유지하고, 사용자에게 신뢰감을 주기 위해서 입니다. 주황색이 일반적으로 리뷰에 사용되는 색상인 반면, 녹색은 Houzz의 고유한 색상으로, 선택한 디자이너나 건축가에 대한 긍정적인 인식을 강화합니다. 이는 소비자가 해당 전문가에 대한 신뢰를 느끼게 하고, 궁극적으로 서비스 이용을 촉진합니다.

9. 고스트 버튼

고스트 버튼은 데스크탑 웹 디자인의 현대적인 요소 중 하나로, 여기에서도 녹색이 사용되었습니다.

고스트 버튼이 사용자 인터페이스에서 시각적 요소를 강조하고, 브랜드 색상인 녹색을 활용함으로써 일관성을 유지하기 위해서 입니다. 고스트 버튼이 간결하고 세련된 디자인을 통해 사용자가 쉽게 인식하고 클릭할 수 있도록 돕기 위해서입니다. 최신 디자인 트렌드로 자리 잡은 고스트 버튼은 불필요한 시각적 요소를 최소화하여 사용자의 주의를 끌고, 직관적인 상호작용을 가능하게 합니다. 이를 통해 사용자는 원하는 행동을 쉽게 취할 수 있으며, 사용자 경험을 향상시키는 데 효과적입니다.

10. 행동 유도

‘매장 방문’ 행동 유도 버튼을 통해 사용자의 행동을 유도하고 있습니다.

행동 유도 버튼이 사용자의 특정 행동을 촉진하기 위해 설계되었기 때문입니다. 이러한 행동 유도 버튼은 명확하고 눈에 띄는 디자인을 통해 사용자가 원하는 행동(예: 구매, 가입, 다운로드 등)을 쉽게 인식하고 수행하도록 돕습니다.

11. 브레드크럼 트레일과 필터를 알아보기 쉽게 보여주기

브레드크럼은 사용자가 자신의 위치를 지속적으로 파악할 수 있는 효과적인 방법입니다. 브레드크럼에 색상을 적용하는 이유는 사용자가 현재 위치를 시각적으로 더 쉽게 인식할 수 있도록 하기 위해서입니다. 색상은 정보의 중요성을 강조하고, 사용자에게 명확한 네비게이션을 제공하여 혼란을 줄이는 데 도움을 줍니다. 또한, 색상 대비를 통해 브레드크럼이 더 눈에 띄게 하여 사용자가 빠르게 경로를 추적할 수 있도록 합니다.

12. 롤오버

롤오버는 또 다른 UX 도우미로, Houzz는 롤오버 효과를 활용하여 저장 버튼(위시리스트 생성)과 이메일 아이콘(제품을 친구에게 전송할 수 있는 기능)을 강조했습니다.

롤오버 시각적 효과를 통해 버튼이나 아이콘의 시각적 인지도를 높이고, 사용자의 관심을 끌기 위해서입니다. 색상의 변화는 사용자가 해당 요소와 상호작용할 수 있음을 직관적으로 알리며, 클릭 유도를 강화합니다. 또한, 강조된 색상은 사용자가 기능을 쉽게 이해하고 활용하도록 돕는 역할을 합니다.

13, 여백의 대안

Helbak Ceramics가 파스텔 톤을 사용함으로써 제품 사진의 여백을 효과적으로 활용하고 있다는 점입니다. 이러한 배경은 제품과의 시각적 대비를 제공하여 제품이 더욱 강조되며, 여백이 디자인의 정돈된 느낌을 주고 시각적 편안함을 강조합니다. 결과적으로, 공간이 더 잘 설명되고, 사용자에게 매력적인 경험을 제공합니다.

14. 카트에 있는 아이템 표시하기

카트에 아이템이 있을 때 강조하여 사용자가 결제할 수 있도록 유도하는 것은 이제 표준 절차가 되었습니다. 많은 사이트들이 이러한 방식을 채택하고 있으며, 아래의 Best Buy에서도 브랜드 색상인 노란색을 활용하여 '카트에 추가하기' 버튼과 카트 표시를 강조했습니다.

15. 결제 프로세스 안내표시

또 다른 실용적인 컬러링 사례로, 많은 사이트들이 현재 위치한 결제 프로세스를 강조하기 위해 특정 색상을 활용하고 있습니다.

특정 색상을 사용하여 결제 프로세스의 현재 위치를 강조함으로써 사용자의 인식과 집중을 높이기 위해서입니다. 이러한 컬러링은 사용자가 진행 중인 단계나 필요한 행동을 쉽게 이해하게 하고, 결제 과정에서의 혼란을 줄이며, 전반적인 사용자 경험을 향상시키는 데 효과적입니다.

16. 결제 오류

또 다른 표준으로, 사용자가 놓친 항목이나 잘못된 정보를 입력한 필드를 빨간색으로 강조하는 방식이 있습니다. 일부 사이트는 결제 프로세스에서 빨간색으로 포괄적인 문구만 표시하지만, IKEA는 입력란 자체를 빨간색 테두리로 변경하고 유익한 메시지를 제공하여 보다 명확하게 안내합니다.

빨간색 강조를 통해 사용자가 놓친 항목이나 잘못된 입력을 쉽게 인식하도록 돕기 위해서입니다. 빨간색은 경고나 주의를 나타내는 색상으로, 사용자가 즉각적으로 문제를 인지하고 수정할 수 있도록 유도합니다. IKEA가 입력란에 빨간색 테두리를 적용하고 유익한 메시지를 제공하는 것은 사용자에게 더 명확한 피드백을 주어 결제 과정의 원활함을 높이고, 사용자 경험을 개선하기 위한 전략입니다.