Econsultancy에 게재된 Ben Davis의 글 clever uses for colour in ecommerce 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가 입력란에 빨간색 테두리를 적용하고 유익한 메시지를 제공하는 것은 사용자에게 더 명확한 피드백을 주어 결제 과정의 원활함을 높이고, 사용자 경험을 개선하기 위한 전략입니다.
UX 실무에 필요한 모든 UX 원칙을 담았어요! UX 디자인 원칙까지 실무에서 바로 활용할 수 있도록 ✏️
PM이라면 반드시 알아야 하는 UX 원칙 가이드라인 원칙
본 강의는UI, 인터랙션에서 UX 디자인 원칙까지 실무에서 바로 활용할 수 있는 내용들을 정리한 강의입니다. UX 실무에 필요한 모든 UX 원칙을 담았습니다!
UX 원칙 가이드 다양한 실무 Case Study 외 관련 이론에 대한 UX 원칙 가이드 개념을 명확히 정립하는 시간을 갖게 됩니다.
이런걸 배워요
UX 디자인 원칙 가이드 정립
컴포넌트 UX 원칙
UX 문제 정의 / UX 분석 노하우
자사 제품 분석 / 경쟁사 제품 분석 노하우
[챌린지] UX 디자인 가이드라인 수강 신청 시 주의 사항
플립드 러닝(Flipped Learning) 수업 방식으로 인해, 선착순 10명입니다. (수업 관련 외 Case Study 강의 및 Q&A 집중!!!! 소수 정예 수업!!!)
[챌린지] UX 디자인 가이드라인 프로그램 소개
폼 입력 행위 작업 줄이기, Context 내비게이션, 행동유도버튼의 어포던스, 간결성, 주목성, 인식성 등 필수!!!! 깊게 강의할 예정입니다.
총 4회, 총 12시간, 줌 Live 강의 형태로 진행합니다 🔥 (1주차 Live 수업: 3시간) (2주차 Live 수업: 3시간) (3주차 Live 수업: 3시간) (4주차 Live 수업: 3시간) 매회 Live 수업은, [VOD 커리큘럼 관련] 수업 관련 외 Case Study 및 Q&A 중심으로 수업이 진행됩니다.
개인 사정으로 인해 Live 수업 미참석를 위해 강의 종료 후 24시간 이내 녹화본 제공합니다.
수업 당일 라이브클래스에 강의 자료 PDF 제공합니다.
수강 정원: 선착순 10명입니다.
수강료 : 98,000원
VOD & Live 수업 녹화본(다시보기) 영상 시청 기간은, 수강 신청 이후 365일 입니다
[챌린지 혜택 !!!!]
챌린지 도전에 성공한 수강생 모두에게, 다른 챌린지 UX 과정 50% 할인 쿠폰 드립니다. (예. 98,000원 > 챌린지 도전 성공한 수강생에게 드리는 할인 쿠폰 50% 적용 시 > 49,000원)
[챌린지 성공 시, 50% 할인 쿠폰 적용, 또 다른 챌린지 UX 수강 과정은 다음과 같습니다] 챌린지 1. 휴리스틱 평가 (10월 오픈 예정) 챌린지 2. 사용성 테스트 (10월 오픈 예정) 챌린지 3. UX 리서치 (11월 오픈 예정) 챌린지 4. UX 인지심리학 A-Z (11월 오픈 예정) 챌린지 5. UX 디자인 설계 A-Z (11월 오픈 예정) 챌린지 6. UX 디자인 첫걸음 (11월 오픈 예정)
[챌린지 > 성공 기준]
아래 3가지 조건, 모두 충족되어야 합니다
1. VOD(총 209개) 80% 이상 수강
2. Live 수업 총 4회 중 3회 이상 출석 (사정상 Live 수업 참석 못하는 경우, Live 녹화본 다시보기 완료시 출석 인정)
3. 총 4회 Live 수업 중 1회 이상 질문하신 분 (VOD 강의 내용 중 궁금한 것 미리 체크한 후 !!!! Live 수업할 때 강사님께 질문 하면 됩니다 ㅎㅎ)
[챌린지] UX 디자인 가이드라인 과정은 플립드 러닝(Flipped Learning) 수업 방식으로 진행됩니다.
플립드 러닝(Flipped Learning) 수업이란? 플립드 러닝은 전통적인 수업 방식과 반대로, 수강생들이 수업 전에 비디오나 자료를 통해 기본 개념을 사전에 학습하고, 수업 시간에는 그 내용을 바탕으로 심화 학습, 토론, 문제 해결 등을 진행하는 방식입니다. 이 접근법은 수강생들이 능동적으로 참여하고, 개인의 학습 속도에 맞춰 공부할 수 있도록 돕습니다.
플립드 러닝(Flipped Learning) 수업 방식을 적용했을 때 수강생이 얻는 기대효과
1) 기본 이해도 향상 VOD 영상을 통해 수업의 기본 개념이나 내용을 미리 학습함으로써, 수강생은 Live 수업에서 다루어질 내용을 더 잘 이해할 수 있습니다. 이는 수업에 대한 자신감을 높입니다.
2) 질문 준비 VOD를 시청한 후, 수강생은 궁금한 점이나 이해가 안 되는 부분을 정리할 수 있습니다. 이를 통해 Live 수업에서 더 효과적으로 질문하고, 강사와의 상호작용을 극대화할 수 있습니다.
3) 시간 활용의 효율성 VOD 영상을 통해 수업의 기본 내용을 미리 습득하면, Live 수업에서는 더 심화된 내용이나 사례 중심의 활동에 집중할 수 있습니다. 이는 수업 시간을 더 효율적으로 활용하는 데 도움이 됩니다.
4) 개별 학습 속도 조절 수강생은 자신의 속도에 맞춰 VOD를 시청할 수 있으므로, 개념을 천천히 이해하고 반복해서 학습할 수 있습니다. 이는 각자의 학습 스타일에 맞춰 학습 효과를 극대화할 수 있게 합니다.
5) 집중력 향상 미리 VOD를 시청한 수강생은 Live 수업에서 이미 알고 있는 내용을 반복적으로 듣지 않게 되어, 더 집중할 수 있습니다. 새로운 정보나 심화된 내용을 듣는 데 더 많은 에너지를 쏟을 수 있습니다.
6) 상호작용의 질 향상 미리 학습한 수강생들은 Live 수업 중 보다 적극적으로 참여할 가능성이 높습니다. 이는 강사와의 상호작용을 더욱 풍부하게 만들어, 전체적인 수업의 질을 높이는 데 효과적입니다.
이제부터 [UX 원칙 가이드 1기] 플립드 러닝(Flipped Learning) 세부 커리큘럼에 대해 알아볼까요?
댓글
의견을 남겨주세요