색상이 UX와 사용자 행동에 미치는 영향
게시 됨: 2016-12-24색상: 디자인이 맞으면 알아차리지 못할 가능성이 높습니다. 하지만 디자인이 잘못되면? 너무 밝고 눈을 찌르는 배경이든 짙은 회색 배경의 검은색 텍스트이든 상관없이 하위 수준의 색상 선택은 가장 기능적인 앱조차 망칠 수 있습니다. 디자인의 다른 측면과 마찬가지로 색상은 앱을 돋보이게 하는 데에만 있는 것이 아닙니다. 색상은 사용자 경험의 다른 기능과 마찬가지로 도구가 될 수 있습니다.
각 요소의 크기에서 UI를 가로지르는 방식, 색상에 이르기까지 앱을 디자인하는 데 사용되는 그래픽 디자인 철학은 사용자 행동에 영향을 미칩니다. 디자이너가 프로젝트의 첫 달을 와이어프레임이 아닌 색상 팔레트에 대해 고민하는 데 자주 보내는 데에는 그럴만한 이유가 있습니다.
완벽한 팔레트를 선택하는 것은 실제로 사용자가 긴장을 푸는 데 도움이 되는 명상 앱을 디자인하는 것과 휴대전화를 벽에 던지고 싶게 만드는 명상 앱의 차이일 수 있습니다. 잔고 확인이 걱정되는 은행 앱과 다음 급여가 언제 들어올지 걱정되는 앱의 차이입니다.
그렇다면 어떻게 하면 올바른 결과를 얻을 수 있습니까? 디자인에서 색상을 마스터하기 위해 무엇을 할 수 있습니까?
그래픽 디자인 철학: 색상 이론
그래픽 디자인 철학(그리고 심리학!)의 두꺼운 부분에 들어가기 전에 색상과 디자인의 몇 가지 기본 원칙을 이해하는 것이 중요합니다. 색상이 매우 복잡한 주제처럼 보이지 않을 수도 있지만 모든 미술 수업이 색상 사용 방법뿐만 아니라 색상을 만드는 방법에 대한 수업으로 시작하는 데에는 그만한 이유가 있습니다.
기본 색상(색상환에서 설명)은 간단합니다. 기본 색상(빨간색, 노란색 및 파란색)을 결합하여 보조 색상(녹색, 보라색 및 주황색)을 생성할 수 있습니다. 마찬가지로 흰색의 다양한 부분을 색상에 추가하여 색조를 만들고 검정을 추가하여 음영을 만들 수 있습니다.
서로 반대되는 색상(빨간색과 녹색 또는 파란색과 주황색)은 보색으로 간주됩니다. 이러한 색상은 대비가 강하여 서로 옆(또는 위에) 있을 때 눈에 띄게 만듭니다.
서로 옆에 있는 색상은 유사한 것으로 간주됩니다. 이 색상은 대비가 훨씬 낮아 서로 가까이 있을 때 눈에 잘 띄지 않는 경향이 있습니다.
대비가 높거나 낮은 색상에 대해 본질적으로 "옳고" "그른" 것은 없습니다. 때때로 응용 프로그램은 서로 완전히 대조되는 밝은 색상을 요구합니다. 다른 때는 좀 더 부드러운 것을 원할 것입니다. 일반적으로 눈에 띄는 것을 더 원할수록 대비되는 색상에 더 많이 의존해야 합니다.
색상이 어떻게 조화를 이루는지(그리고 그렇지 않은) 느낌을 얻는 가장 좋은 방법은 색상을 가지고 노는 것입니다. 지금 프로젝트 작업을 하고 있지 않더라도 Adobe의 색상환을 빠르게 돌리면 색상에 대해 새로운 방식으로 생각하게 될 것입니다.
감정의 견본: 색상과 심리학
앱 이면의 그래픽 디자인 철학을 공고히 할 때 사물이 어떻게 보이는지 생각하는 것이 아니라 느낌에 대해 생각해야 합니다. 우리는 햅틱 피드백에 대해서도 이야기하고 있지 않습니다. 요한 볼프강 괴테(Johann Wolfgang Goe)가 색의 생리학적 효과를 연구한 이후로 우리는 색을 사용하여 신체적, 정서적 효과를 내는 데 집착해 왔습니다.
오늘날에도 색상은 많은 브랜드의 디자인 철학에서 중심을 차지하고 있습니다. 의료, 비즈니스 및 정부 모두 파란색을 사용하는 경향이 있습니다. 파란색은 신뢰감과 전문성을 주기 때문입니다. 녹색은 에너지로 가득 찬 젊음의 색으로 간주되며, 물론 환경주의와 자연에 대한 친밀감을 반영합니다. 빨강은 에너지가 넘치고 충동적이어서 속도, 효율성, 힘의 인상을 줍니다. 우리가 보는 모든 색상(및 특정 브랜드와 본질적으로 연관되는 모든 색상)은 직간접적으로 개별 브랜드에 대한 인식을 유도하는 데 도움이 되는 무언가를 의미합니다.
매우 색상 중심적이라고 인식하는 브랜드와 기호에 대해 생각해 보십시오. Apple, Wikipedia 및 The New York Times는 모두 회색조 색상을 사용하여 차분한 신뢰성을 상징합니다. 이러한 브랜드는 균형 있고 신뢰할 수 있는 것으로 간주됩니다. Whole Foods, John Deere 및 Starbucks는 모두 로고에 녹색 음영을 사용하여 자연과 건강을 브랜드 및 제품에 연결합니다.
일부 색상은 브랜드를 넘어 전체 산업을 정의하기도 합니다. 예를 들어 얼마나 많은 패스트푸드 또는 레스토랑 체인이 빨간색 또는 노란색 색상 구성표를 사용하는지 생각해 보십시오. 이러한 색상은 우리를 정신적으로 촉발시켜 일종의 제품을 구매하도록 유도하는 심리적인 장소에 우리를 둡니다.
이것은 마케터들이 오래 전에 알아낸 것이지만, 과학은 색상에 대한 우리의 상호 감정을 정당화합니다. 예를 들어, 빨간색은 일부 사람들이 특정 자극에 더 빠르고 강력하게 반응하도록 만드는 것으로 밝혀졌습니다. 또한 위협할 수도 있습니다. 연구자들은 응시자가 빨간색을 보았을 때 점수가 더 나빠졌다는 것을 발견했습니다.
심지어 낯선 사람? 알약의 색상은 작동 방식에 약간의 영향을 미칩니다. 파란색 알약은 진정제로 가장 잘 작동하고 노란색은 항우울제로 가장 잘 작동하며 모든 경우에 밝은 색이 가장 잘 작동합니다. 이것은 활성 약물에 대한 우리의 반응을 높이는 플라시보 효과일 가능성이 높지만, 그 효과는 기업이 새로운 의약품을 생산할 때 고려하기에 충분합니다.
기분 추적 앱에서 노란색 기반 색 구성표를 사용하는 것이 항우울제로서 효과적이라고 말하는 것은 아니지만 선택한 색상 팔레트가 사용자의 기분에 합리적으로 영향을 미칠 수 있으므로 현명하게 선택하십시오.
당신을 위해 추천 된:
메타버스가 인도 자동차 산업을 어떻게 변화시킬 것인가?
인도 스타트업에 대한 반 영리 조항은 무엇을 의미합니까?
Edtech Startup이 인도 인력의 기술 향상 및 미래 준비를 돕는 방법...
이번 주 새로운 시대의 기술 주식: Zomato의 문제는 계속되고 EaseMyTrip은 Str...
인도 스타트업, 자금 조달을 위해 지름길 선택
디지털 마케팅 플랫폼 Logicserve, INR 80 Cr 자금 지원, LS Dig...
색상 및 사용성
디자인은 단순히 아름답게 보이는 것이 아니라 UX 디자이너에게 가장 중요한 두 가지 원칙인 기능과 유용성에 관한 것입니다. UX가 매끄럽지 않다면 선택한 색상 팔레트가 얼마나 아름다운지 또는 UI가 얼마나 멋진지는 중요하지 않습니다. 사용자가 효율적으로 스와이프할 수 없으면 지속력이 없습니다.
그러나 색상이 그 모든 것과 무슨 관련이 있습니까?
단순함: 색상은 눈을 안내하는 데 도움이 되는 도구입니다 . 색상을 효율적으로 사용할 수 있다면 긴 튜토리얼, 일련의 복잡한 비디오 또는 한 단어도 없이 앱을 통해 새로운 사용자를 안내할 수 있습니다. 직관적인 UI는 색상을 사용하여 사용자의 관심뿐만 아니라 전체 경험과의 상호 작용을 유도합니다.
잠시 동안 대규모 조직에서 음식 주문을 쉽게 사용자 지정할 수 있도록 도와주는 케이터링 회사용 앱을 개발한다고 상상해 보십시오. 잠재 고객이 처음으로 앱을 다운로드하고 엽니다. 그들은 무엇을 보는가?
앱에서 배경 및 정보 상자를 포함한 대부분의 메뉴 항목은 회색조 색상의 음소거되고 흐릿한 팔레트로 표시됩니다. 한 가지 예외는 "주문"이라고 적힌 주황색-빨간색 상자입니다. 디자이너로서 사용자가 앱을 사용할 때 가장 먼저 하고 싶은 일은 음식 주문을 간편하게 설정하는 것입니다. 이 기능을 앱 깊숙이 숨기거나 해당 기능을 사용하기 위해 한 페이지씩 아래로 스크롤하도록 요구하는 대신 전면 중앙에 배치합니다. 뿐만 아니라, 당신은 즉시 그들의 시선을 끌고 있습니다. 색상은 눈에 잘 띄는 데 도움이 되며 신규 사용자에게 어디로 가야 하는지 정확히 보여줍니다.
마찬가지로 우리는 매일 다양한 방식으로 색상과 상호 작용하고 마음에 특정 사회적 연관성을 구축합니다. 예를 들어 신호등을 이용하세요. 녹색은 진행, 빨간색은 정지, 노란색은 속도를 줄입니다(또는 전방에 무언가가 있음을 알려줍니다). 중요한 경고를 노란색으로 표시하거나 빨간색을 사용하여 강조 표시하면 사용자의 입력을 유도하는 메시지를 강력하게 전달할 수 있습니다.
그러나 동일한 논리를 경고 화면 이상에 사용할 수 있습니다. 인앱 구매로 이어지는 앱의 버튼 색상을 변경하면 전환율에 상당한 영향을 미칠 수 있습니다.
앱 내부에 있지는 않지만 HubSpot은 버튼을 녹색 대신 빨간색으로 만드는 것만으로 전환율을 21% 높일 수 있음을 발견했습니다. 이제 이것이 모든 인앱 구매 버튼을 밝은 진홍색으로 변경해야 한다는 의미는 아니지만 색상이 디자인 철학의 일부일 수는 없다는 주장이 있습니다. 전체 앱 개발 철학.
색상을 현명하게 사용하기: 디자인과 접근성에 대한 철학
Proto.io에서 접근성은 항상 우리 디자인 철학의 최전선에 있습니다. 솔직히 말해서, 접근성은 좋은 디자인으로 구워져야만 하는 것입니다. 그것이 없으면 디자인이 그다지 좋지 않습니다.
약 8%의 남성과 0.5%의 여성이 어떤 형태의 색맹을 가지고 있습니다. 대중적인 생각과 달리 색맹은 한 가지 종류가 없지만 적색/녹색 색맹이 가장 흔한 경향이 있습니다. 이러한 형태의 색맹으로 고통받는 사람은 일반적으로 적색과 녹색의 변화를 보는 데 어려움을 겪을 것입니다. 이러한 형태의 색맹의 심각성은 상당히 다양하지만 가벼운 적색/녹색 색맹이라도 많은 앱을 사용하는 것을 사실상 불가능하게 만들 수 있습니다.
색맹 외에 근시 사용자는 화면을 얼굴 가까이로 이동하지 않는 한 낮은 대비로 텍스트를 읽는 데 어려움을 겪습니다. 이는 잠재적으로 많은 앱의 유용성을 손상시킬 수 있습니다.
이 두 가지 문제에 대한 해결책은 매우 간단합니다. 배경에 텍스트를 표시할 때 대비되지 않는 색상을 사용하지 마십시오 . 모든 사람이 의도한 대로 앱을 볼 수 있다고 보장할 수는 없지만 대비되는 색상을 사용하는 경우 최소한 사람들이 사용할 수 있는 앱을 제공해야 합니다. 마찬가지로 고대비 색상을 사용하면 시력 문제가 없더라도 모든 사람이 텍스트를 더 쉽게 읽을 수 있습니다.
접근성을 높이는 또 다른 옵션은 앱에서 교체 가능한 색상 팔레트를 제공하는 것입니다. 모든 사람이 선택할 수 있는 것은 아니지만 앱의 접근성을 크게 높일 수 있습니다. 사용자가 특정 기능의 색상을 변경하도록 허용할 수도 있습니다. 예를 들어 앱의 강조 색상이나 앱 전체의 텍스트 색상을 변경하는 옵션이 있을 수 있습니다. 이 두 가지 옵션 모두 사용자의 통제력을 어느 정도 빼앗을 수 있지만 더 많은 사용자가 앱에 액세스할 수 있도록 합니다.
앱의 접근성을 해치지 않는 방식으로 색상을 디자인 철학에 통합하는 방법을 찾는 데 여전히 어려움을 겪고 있다면 Google의 머티리얼 디자인 라이브러리를 확인하는 것이 좋습니다.
완벽한 팔레트 선택: 디자인 철학 강화
색상과 관련하여 따라야 할 몇 가지 규칙이 있음이 분명해야 하지만 반드시 과학도 아닙니다. 색상은 종종 느낌과 같은 보다 추상적인 것에 관한 것입니다. 앱이 사용자에게 어떤 종류의 감정을 나타내려고 하지 않는다고 해서 그렇지 않다는 의미는 아닙니다. 완벽한 팔레트를 찾는 것이 흑백 작업은 아니지만 회색조로 시작하는 것이 좋습니다 .
회색조 그라데이션으로 앱의 평면 프로토타입을 만들고 이를 기준으로 사용합니다. 모양과 느낌을 기록해 두십시오. QA 팀에 전달하고 그들이 말하는 내용을 확인하십시오. 색상 없이 온보딩 프로세스가 흐릿합니까? 앱의 잘못된 부분에 주의를 기울이고 있습니까? 이 피드백을 바탕으로 몇 가지 프로토타입을 더 디자인하고 이번에는 색상을 가져옵니다. 단일 팔레트에 의존하지 마십시오. 대신 Google의 머티리얼 디자인 웹사이트에서 힌트를 얻어 몇 가지 견본을 가지고 놀아보세요.
이 수정본도 QA로 보냅니다. A/B 테스트를 서로에 대해(및 원래 회색조 버전에 대해) 두려워하지 마십시오. 경쟁에 가져올 색상에 대해 어려운 질문을 하고 있는지 확인하십시오. 앱에서 사용자의 눈을 안내하기 위해 색상을 사용하고 있습니까? 스파크를 추가하기 위해 화면에 색상을 던지고 있습니까? 색상이 사용자가 원하는 곳으로 이동하는 데 방해가 됩니까?
사용자 심리나 접근성을 잊지 마세요. 여행 앱을 만들고 있다면 정말 모든 것이 밝은 빨간색이 되기를 원하시나요? 건강 관리 앱을 만드는 경우 배경이 정말 녹색이어야 합니까? 텍스트를 읽을 수 있을 만큼 색상 대비가 충분합니까?
좋은 UX 디자인은 이러한 모든 질문을 고려합니다. 결국 색상은 사용자 행동과 즐거움에 결정적인 영향을 미칩니다. 당신의 디자인 철학이 이것을 고려하지 않는다면 당신은 당신이 생각하는 것만큼 접근하기 어렵거나 사용할 수 없는 앱을 만들고 있을 수 있습니다. 디자인의 모든 단계에서 프로토타입을 만들고 있는지 확인하고 한두 가지 색상에 너무 집착하지 마십시오.
실험하고 다른 색상을 선택하고 자신에게 완벽한 팔레트가 나올 때까지 계속 수정하십시오.