[UX 원칙#11]컬러 적용 16가지 사례
Econsultancy에 게재된 Ben Davis의 글 clever uses for colour in ecommerce UX를 소개하고자 합니다.
UX 관점에서 보는 컬러 적용 16가지 사례
(요약문)
색상은 정보의 중요성을 강조하고, 사용자의 행동을 유도하는 효과적인 도구로 작용합니다.
1. 입력란 색상 구분
Virgin America는 입력란에 문제가 없을 경우 초록색으로 표시하여 긍정적인 피드백을 제공합니다. 보라색은 미완성 입력란에 사용되어 주의를 환기시키고 입력을 유도합니다.
2. 메가 메뉴 강조
세일 항목을 빨간색으로 강조하여 사용자에게 주목성을 부여하고, 더 많은 탐색과 구매를 유도하는 효과를 가져옵니다.
3. 제품 강조
나이키는 흑백 디자인을 통해 제품의 본질을 강조하며, 주황색 '장바구니에 담기' 버튼으로 중요한 행동을 유도합니다.
4. 강조 색상과 인포그래픽
Trainline의 앱은 강조 색상과 스마트한 인포그래픽을 통해 사용자의 예약 과정을 직관적으로 돕고, 실수에 대한 두려움을 줄입니다.
5. 제품 차별화
Pure Cycles는 색상을 통해 제품을 매력적으로 보이게 하며, 야광 자전거 페이지에서 이미지 강조로 소비자의 구매 욕구를 자극합니다.
6. 대비 효과
Pelican사의 웹사이트는 선명한 색상과 디자인 요소로 정보의 중요성을 쉽게 인식하게 하여 사용자 경험을 향상시킵니다.
7. 제품 강조
Houzz 앱은 녹색 가격 태그를 사용하여 클릭 가능한 제품을 쉽게 인식할 수 있도록 합니다.
8. 리뷰 강조
Houzz는 브랜드 색상인 녹색을 활용하여 디자이너나 건축가에 대한 신뢰도를 높이고, 서비스 이용을 촉진합니다.
9. 고스트 버튼
녹색 고스트 버튼은 시각적 요소를 강조하여 사용자 경험을 향상시킵니다.
10. 행동 유도 버튼
명확하고 눈에 띄는 디자인의 행동 유도 버튼은 사용자가 원하는 행동을 쉽게 인식하도록 돕습니다.
11. 브레드크럼
색상을 적용하여 사용자가 현재 위치를 쉽게 인식할 수 있도록 하고, 혼란을 줄입니다.
12. 롤오버 효과
Houzz는 롤오버 효과를 통해 버튼과 아이콘의 시각적 인지도를 높이며, 클릭 유도를 강화합니다.
13. 여백 활용
Helbak Ceramics는 파스텔 톤으로 제품 사진의 여백을 효과적으로 활용하여 시각적 편안함을 강조합니다.
14. 카트 아이템 강조
쇼핑몰 사이트는 카트에 아이템이 있을 때 강조하여 결제를 유도합니다.
15. 결제 프로세스 안내
특정 색상을 사용해 결제 프로세스의 현재 위치를 강조하여 사용자의 집중을 높입니다.
16. 결제 오류 안내
IKEA는 잘못된 입력 필드를 빨간색으로 강조하여 사용자가 문제를 쉽게 인식하고 수정할 수 있도록 돕습니다.
위글은 요약문입니다.
이 글에 대한 전체 번역 원문(구체적인 사례 등)은 아래 링크를 클릭해주세요~
https://maily.so/uiux/posts/3425ee62
