다크 모드 UX : 트렌드가 아닙니다. 그러나 사용자에게 어떤 영향을 미칩니 까?

인생의 실제 문제

당신은 밤에 소셜 미디어를 쟁기질 한 적이 있습니까? 아니면 중요한 기사를 읽지 만 전화 화면이나 컴퓨터의 밝은 빛이 대신 좁아 지거나 내 두통을 느낄 때까지 눈을 찔렀습니까? 아니면 배터리가 너무 빨리 소진 될 것이라고 느끼기 때문에 화면을 닫으려면 서둘러야합니까?

이것들은 특히 작은 것들이 아닙니다. 특히 우리가 거의 항상 화면과 함께 살고있는 시대에. 아침부터 일, 학습, 온라인 쇼핑 또는 레크리에이션이든, 우리가 사용하는 웹 사이트 나 응용 프로그램에는 각 상황에서 사용하기에 적합한 옵션이없는 경우 경험이 쉽게 악화 될 수 있습니다.

삽화를위한 프롬프트 : 컴퓨터 앞에 앉거나 어두운 방에있는 여자 나 남자의 사진. 불편 함을 표현하거나 손을 사용하여 눈을 문지르십시오.

그 문제가 발생한 이유는 무엇입니까?

이러한 문제는 여러 요인에서 발생합니다. 특히 다양한 사용자 환경을 고려하지 않는 설계, UI (User Interface) 및 UX (User Experience).

상상해보십시오 : 대부분의 웹 사이트는 밝은 색상 배경 (흰색 모드)으로 설계되었으며 낮에는 충분한 빛이있는 환경에서 사용하기에 적합합니다. 그러나 밤에 있었거나 낮은 빛이있는 방에 있었을 때 하얀 빛의 색이 많이 나왔습니다. 즉시 큰 문제가되었습니다. 이러한 문제의 주요 원인은 다음과 같습니다.

• 과도한 빛의 차이 : 흰색 배경이 어두운 어두운 문자와 대조되는 경우, 우리 눈은 초점을 조정하기 위해 더 열심히 노력해야합니다. 쉽게 속눈썹을 유발합니다
• 블루 라이트 방출 : 전자 장치의 스크린은 파란색 빛을 방출합니다. 특히 어둠 속에서 오랫동안 사용될 때 장기적으로 수면과 눈 건강에 영향을 줄 수 있습니다.
• 화면의 전력 : OLED 또는 AMOLED 화면 (새로운 스마트 폰에서 발견). 검은 색 픽셀은 흰색 픽셀보다 훨씬 적은 에너지를 사용합니다. 이것은 Dark Mode를 사용하면 실제로 배터리를 절약 할 수 있음을 의미합니다.
• 불가능한 설계 접근성 : 때로는 설계자가 눈 문제가있는 사용자를 고려하지 않습니다. 또는 화면을 오랫동안 사용해야하는 사람들은 눈의 부담을 줄이는 데 도움이되는 선택의 여지가 없습니다.

그림을위한 프롬프트 : 인포 그래픽 이미지는 각 모드에서 OLED/AMOLED 화면의 배터리 전력을 사용하는 원으로 흰색 모드와 어두운 모드의 차이를 보여줍니다.

남은 경우 어떤 영향을 미칩니 까?

여전히 어두운 모드가 없거나 사용자를위한 유연한 UX/UI 디자인이없는 웹 사이트 또는 응용 프로그램을 사용하도록합니다. 사용자 자체와 비즈니스에서 여러 측면에 영향을 줄 수 있습니다.

• 사용자에게 미치는 영향 :
  • 눈 건강 문제 : 황갈색, 건조한 눈, 두통 및 장기적으로 눈에 부정적인 영향을 줄 수 있습니다.
  • 무제한 수면 : 취침 전에받은 푸른 빛은 멜라토닌 생산을 억제 할 수 있습니다. 잠들기가 더 어려워 지거나 잘 잠들 수 없습니다.
  • 잘못 사용 경험 : 사용자는 불편하고 좌절감을 느끼며 해당 웹 사이트 나 응용 프로그램 사용을 중단 할 수 있습니다.
• 비즈니스에 영향을 미치기 :
  • 전환율 감소 : 사용자가 사용에서 불편하거나 좌절감을 느끼면 주문 버튼을 클릭하거나 양식을 작성하거나 원하는 활동을 수행하는 것을 더 빨리 웹 사이트를 떠나게됩니다.
  • Bookce 비율이 높습니다. 입구 비율이 즉시 증가합니다. 사용자가 웹 사이트에 있고 싶지 않아 기분이 나쁘기 때문에
  • 브랜드 충성도 감소 : 사용자는 브랜드가 고객 경험에주의를 기울이지 않는다는 것을 알 수 있습니다. 반복적으로 사용하지 않도록합니다
  • 불우한 레이스 : 경쟁 업체는 Dark Mode 또는 사용자가 적용 할 수있는 디자인을 사용하기 시작할 수 있습니다. 경쟁 우위를 잃게됩니다.

WebFlow에서 UX/UI 에 대한 기사를 살펴보십시오 더 많은 것을 클릭하고 구매하여 좋은 경험이 전환에 어떤 영향을 미치는지 이해할 수 있도록합니다. [인용 : 106]

그림의 프롬프트 : 전환율 감소 및 눈 통증이있는 사용자의 이미지와 병렬로 증가 된 바운스 속도를 보여주는 그래프. 또는 불만족스러운 표현을 보여줍니다

해결책이 있습니까? 그리고 어디에서 시작해야합니까?

이러한 문제는 Dark Mode UX를 사용하여 해결할 수 있습니다. 다크 모드는 단순히 디자인의 패션 트렌드가 아닙니다. 그러나 조명이 저조한 문제를 충족시키고 다른 많은 이점을 제공하는 솔루션입니다. 시작은 다음과 같이 고려해야합니다.

1. 어두운 모드 UX는 무엇을 이해합니까?

• 다크 모드 (Dark Mode) : 검은 색 또는 어두운 회색 배경과 같이 어두운 색조를 메인으로 사용하는 사용자 인터페이스 표시입니다. 그리고 흰색 또는 밝은 색상을 사용하는 라이트 모드 (밝은 모드) 반대편에 문자 나 다른 요소를 밝게 사용하십시오.

2. 어두운 모드 사용의 이점

• 낮은 조명에서 더 편안하게 : 화면의 밝기를 줄이는 데 도움이됩니다. 밤이나 어두운 방에서 사용하기에 이상적인 눈을 긴장시키고 눈을 감소시킵니다.
• 배터리 에너지 절약 : OLED 또는 AMOLED 스크린이있는 장치의 경우 완전히 검은 색 디스플레이는 흰색보다 적은 에너지를 사용합니다. 배터리 수명이 길어집니다
• 파란색 빛 감소 : 자연스럽게 어두운 모드는 화면에서 방출 된 파란색 양을 줄입니다. 잠자리에 들기 전에 사용하면 더 잘자는 데 도움이 될 수 있습니다.
• Beauty and Modern 추가 : Dark Mode는 종종 프리미엄 감정, 현대 및 일반 웹 사이트와는 다른 프리미엄 감정을 제공합니다.
• 일부 사용자 그룹 지원 : 색맹이 특정한 사용자 또는 밝은 빛에 알레르기가있는 사용자는 어두운 모드에서 매우 유용 할 수 있습니다.

3. 사용하기 전에 고려하십시오

• 밝은 독서 : 어두운 모드는 매우 밝은 환경에서 읽는 데 적합하지 않을 수 있습니다. 어두운 배경의 글자를 밝게 할 수 있기 때문에
• 이미지에 미치는 영향. 브랜드 : Dark Mode는 원래 브랜드 이미지와 다른 느낌을 줄 수 있습니다. 브랜드가 밝기 나 밝기를 강조한다면
• 보다 복잡한 디자인 : 조명 모드와 다크 모드 모두에 대한 디자인이 잘 작동합니다. 더 많은 색상과 요소를 선택할 때 더 조심해야합니다.

4. 어디서 시작해야합니까?

• 목표 분석 : 사용자는 언제 웹 사이트를 사용합니까? 비전에 대한 특별한 욕구가 있습니까?
• 디자인 시스템 : 라이트 모드와 다크 모드 모두에 대한 색상 팔레트를 결정하십시오. 색상 강도를 결정하십시오. 텍스트, 배경, 아이콘 및 대화식 요소의 경우 적절한 대비를 갖습니다.
• 중요한 부품부터 시작 : Dark Mode를 사용하여 착륙 페이지 페이지 또는 제품 페이지와 함께 먼저 전환하여 응답을보기 시작할 수 있습니다.
• 사용자가 선택할 수 있도록 : 사용자가 Light Mode와 Dark Mode를 스스로 전환 할 수있는 옵션이 있어야합니다. 하나의 모드를 사용하지 않아야합니다

그림을위한 프롬프트 : 인포 그래픽 이미지는 관련 아이콘이있는 어두운 모드의 장점과 고려 사항을 보여줍니다.

성공했던 실제의 예

Dark Mode UX가 아름다움에 관한 것이 아니라 사용자를 업그레이드하고 비즈니스에 도움이되는 전략은 무엇입니까? 다크 모드를 사용하는 데 성공한 많은 세계 클래스 플랫폼 및 응용 프로그램의 예를 살펴보십시오.

• YouTube : Dark Mode를 심각하게 사용하는 첫 번째 플랫폼 중 하나입니다. 사용자가 어둠 속에서 비디오를 더 편안하게 볼 수 있도록합니다. 화면을 오랫동안 쳐다 보면서 눈 피로를 줄이십시오. 특히 밤 동안 비디오를 보는 사람들은 사용자가 플랫폼에서 사용하는 시간 (시계 시간)을 크게 늘리는 데 도움이됩니다.
• Twitter (현재 X) : 사람들이 항상 사용하는 온라인 소셜 네트워크, Dark Mode를 사용하면 사용자가 통증을 느끼지 않고도 뉴스를 지속적으로 연기 할 수 있습니다. 잠자리에 들기 전에 어두운 방이나 침대에서 사용 되더라도 사용자의 응답은 매우 긍정적입니다. 사용자가 응용 프로그램에 더 첨부 된 느낌을줍니다
• Apple (iOS 및 MacOS) : 모바일 및 컴퓨터의 Apple 운영 체제는 시스템 전체에서 Dark Mode를 사용하고 있습니다. 경험을 일관되게 만드는 데 도움이됩니다. 애플리케이션이 열린 것에 관계없이 다크 모드를 사용할 수 있습니다. 이것은 사용자 경험에 대한 진정으로 관심을 보여주고 사용자 전체의 만족도에 영향을 미칩니다.
• Google (Android 및 다양한 응용 프로그램) : Apple과 유사하게 Google은 Android 운영 체제 및 Gmail, Google Maps, Chrome과 같은 인기있는 Google 응용 프로그램 전반에 걸쳐 Dark Mode를 추진했습니다. 또한 OLED 화면을 효과적으로 사용하는 Android 장치의 배터리를 저장하는 데 도움이됩니다.

이러한 예는 다크 모드가 단순한 기능이 아니라는 것을 지적합니다. 웹 접근성을 하고 많은 사용자에게 훌륭한 경험을 만드는 데 도움이되는 중요한 요소입니다.

삽화 프롬프트 : YouTube, iOS/MacOS 화면

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있음)

웹 사이트에서 Dark Mode UX를 사용하려는 WebFlow의 디자이너 및 웹 사이트 소유자. 이것은 체크리스트이며 즉시 시작할 수있는 절차입니다!

1. 어두운 모드에 대한 색상 팔레트를 계획합니다

• 기본 색상 설정 : 어두운 모드에서 사용될 브랜드의 주요 색상을 선택하여 어두운 배경에서 쉽게 읽을 수 있도록 약간 밝게 조정될 수 있습니다.
• 보조 색상 및 악센트 색상 : 색상 및 색상 정의, CATE (Call -to -Action), 아이콘 또는주의를 끌고 자하는 부분에 중점을 둡니다.
• 텍스트 색상 : 본문에 흰색 또는 밝은 회색을 사용하십시오. 그리고 당신이 강조하고 싶은 헤드 라인 또는 텍스트를위한 더 밝은 색상
• 배경색 : 완전히 검은 색 일 필요가 없습니다. 짙은 회색, 회색, 파란색 또는 파란색 회색을 사용해보십시오. 치수와 깊이를 추가합니다
• 대비 비율 : 문자와 배경의 색상이 읽기 쉽게하기 위해 적절한 대비 (최소 4.5 : 1)를 가지고 있는지 확인하십시오. Nielsen Norman Group 있는 사람들을 위해 .

2. 웹 플로에서 UI 요소

• 글로벌 스와치 : 웹 플로에서 글로벌 견본을 사용하여 라이트 모드 및 다크 모드의 색상 세트를 결정하십시오. 색상을 많이 전환하고 관리 할 수 있습니다.
• 토글 스위치의 상호 작용 설정 : 웹 플로 상호 작용을 사용하여 라이트 모드와 다크 모드 사이의 토글 스위치를 만듭니다. 사용자 가이 버튼을 클릭하면 클래스 클래스 또는 SESC를 변경하여 정의 된대로 색상을 변경하십시오.
• 타이포그래피 조정 : 어두운 모드에서 글꼴의 크기와 무게를 여전히 읽기 쉬운지 확인하십시오. 때로는 더 편안하게 읽으려면 어두운 모드에서 글꼴의 무게를 약간 두껍게 조정해야 할 수도 있습니다.
• 아이콘과 일러스트레이션 : 아이콘과 일러스트레이션은 어두운 모드의 색 구성표에 조정되어야합니다. 대신 흰색, 밝은 회색 또는 개요가 될 수 있습니다.
• 이미지 : 사진이 여전히 어두운 모드에서는 여전히 좋은지 고려하십시오. 일부 이미지는 눈에 띄지 않도록 어두운 오버레이 또는 약간 밝아 질 수 있습니다.

3. 테스트 및 개선

• 실제 장비 테스트 : 휴대 전화, 태블릿 및 컴퓨터를 포함한 다양한 장치에서 웹 사이트를 테스트하는 것을 잊지 마십시오. 어두운 모드가 모든 화면 및 모든 빛 조건에서 좋은 결과를 표시하는지 확인합니다.
• 사용자로부터 피드백을 받으십시오 : 사용자에게 생성 한 어두운 모드에 대한 피드백을 제공하십시오. 실제 사용자의 정보는 개선을 완료하는 데 매우 가치가 있습니다.
• 페이지 속도 확인 : 어두운 모드는 배터리를 저장하지만. 전체 페이지 속도 최적화를 무시하지 마십시오

그림을위한 프롬프트 : 웹 플로우 디자이너 화면 이미지를 보여주는 글로벌 스와치 및 다크 모드 토글 상호 작용을 보여줍니다.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

더 많은 자신감을주고 다크 모드 UX를 이해합니다. 명확한 답변으로 인기있는 질문을 보자.

Q1 : Dark Mode는 항상 조명 모드보다 낫습니까?

A : 항상 그런 것은 아닙니다! Dark Mode는 저조도로 사용하는 것이 뚜렷한 이점을 가지고 있으며 OLED/AMOLED 화면에 배터리를 저장하고 청색광을 줄이는 데 도움이됩니다. 그러나 주간의 날과 같은 매우 밝은 환경에서 조명 모드는 더 나은 독서 경험을 제공 할 수 있습니다. 흰색 배경의 검은 글자는 더 밝은 장소보다 높기 때문에 가장 좋은 방법은 선호도와 환경에 따라 사용할 모드를 "선택하게"하는 것입니다.

Q2 : Dark Mode의 사용이 SEO에 영향을 미칩니 까?

A : 직접, 어두운 모드를 갖는 것이 SEO 순위에 직접적인 영향을 미치지는 않습니다. Google은 어두운 모드가있는 것처럼 웹 사이트를 순위하지 않습니다. 웹 사이트를 더 길게 사용하고 웹 사이트를 벗어날 수 있습니다 (이탈률). 이것들은 Google이 중요성을 제공하는 간접적 인 요소 (특히 유용한 콘텐츠 및 핵심 웹 생명체 )입니다. 따라서 좋은 다크 모드를 갖는 것은 장기적으로 UX 개선을 통해 SEO에 도움이 될 수 있습니다.

Q3 : 내 웹 사이트에 다크 모드가 있어야합니까?

A : 대상 고객과 웹 사이트의 특성을 고려하십시오.

• 웹 사이트가 오랫동안 읽어야하는 컨텐츠에 중점을 두는 경우 (예 : 블로그, 기사, 전자 책)
• 대상 고객이 밤 동안 웹 사이트를 방문하는 경향이있는 경우
• 웹 사이트에 최신 또는 프리미엄 이미지가있는 경우
• 모바일 경험을 업그레이드하고 사용자를위한 배터리를 저장하려는 경우 .

포인트 중 하나로 간주되면 어두운 모드를 추가하면 고려해야 할 가치가 있습니다. 그러나 웹 사이트가 빠르게 전환에 중점을 둔 짧은 방문 페이지 인 경우. 어두운 모드가 가장 먼저 필요한 것은 아닐 수 있습니다.

Q4 : 어두운 모드는 항상 완전히 검은 색이어야합니까?

A : 완전히 검은 색 일 필요는 없습니다 ( #000000 )! 실제로, 대부분의 UX/UI 디자이너는 다양한 색조로 Dark Grey를 사용하는 것이 좋습니다. 완전히 검은 색 대신 어두운 회색을 사용하면 배경 문자와 흰색 문자 사이의 심각한 대비를 줄이는 데 도움이됩니다. 눈을 편안하게하고 쉽게 읽으십시오. 예를 들어, Google 자재 설계 자체는 어두운 테마에 완전히 검은 색 대신 Dark Grey를 사용하는 것이 좋습니다.

그림을위한 프롬프트 : 이미지 아이콘, 질문 및 답변은 Dark Mode UX에 대한 의심을 나타냅니다.

이해하기 쉬운 요약 + 노력하고 싶어

요컨대, 다크 모드 UX는 단순한 기능이 아닙니다. 따라서 귀하의 웹 사이트는 시원하게 보이지만 "사용자 경험"의 "투자"는 장기적으로 비즈니스에 도움이 될 것입니다. 우리는 Dark Mode 옵션과 같은 작은 세부 사항에 대해 우리가 "이해"하고 "관리"하고 있음을 보여줍니다. 그리고 사용자가 귀하의 웹 사이트에 대해 기분이 좋으면 더 오래 당신과 함께하는 경향이 있고, 다시 사용하고, 물론 결국 원하는 "클릭 앤 구매"또는 "변환"을하십시오!

그러니 기다리지 마세요! 돌아가서 웹 사이트를보고 웹 사이트에 어두운 모드를 사용하여 UX/UI를 "업그레이드"할 시간인지 고려해 보겠습니다. "진정으로 트렌드에서 떨어지지 마십시오"와 "사용자의 마음을 사용하십시오"오늘의 작은 변화는 내일 비즈니스에 큰 결과를 보일 수 있습니다!

삽화를위한 프롬프트 : 웹 사이트의 Dark Mode에서 핸드 이미지가 판매 그래프를 지속적으로 증가시킵니다.

웹 플로우 웹 사이트에서 UX/UI를 업그레이드하고 "사용자 사용"및 "진정한 변환 생성"에 관심이 있으십니까? Vision X Brain Experts와 상담 할 수 있습니다! 우리는 당신이 당신이 아름다운 웹 사이트를 디자인하고, 사용하기 쉽고 모든 차원에서 비즈니스를 충족시키는 데 도움을 줄 준비가되었습니다! 또는 웹 사이트의 웹 사이트 디자인 및 웹 사이트 개발에 대한 자세한 내용을 먼저 배우십시오.

‍