웹 사이트의 다크 모드 : 아름다운 트렌드 일뿐입니까 아니면 실제로 UX 및 변환에 영향을 미칩니 까?

논쟁은 끝나지 않습니다! 웹의 다크 모드는 아름다운 트렌드입니다. 아니면 실제로 변환을 증가시킬 수 있습니까?
지난 2-3 년 동안 어떤 앱에 관계없이 어떤 앱을 사용하는지 생각해 본 적이 있습니까? 또는 유명한 웹 사이트로 이동하는 곳, 우리는 항상 사용할 "어두운 모드"또는 "어두운 모드"를 찾는 경향이 있습니다. 비즈니스 소유자, 마케팅 담당자 및 많은 웹 사이트 개발자의 마음에 질문이 될 때까지 "우리의 웹 사이트는 ... 어두운 모드가 필요합니까?" 도착한 것은 단지 아름다움 트렌드 일뿐입니다. 또는 실제로 말하는 것처럼 사용자의 경험 (UX) 및 전환율에 영향을 미치는 중요한 기능입니다. 오늘날, 우리는 어두운 모드의 모든 측면에서 완전히 수술을받을 것입니다. 귀하의 웹 사이트는 "빛을 켜야"또는 "빛을 끄십시오".

이 시대에 Dark Mode가 왜 "가져야"가되는 이유는 무엇입니까?
다크 모드 현상은 일어나지 않지만 흥미로운 소스가 있습니다. 개발자 측에서 시작하여 오랫동안 흰색 코드를 응시 해야하는 프로그래머에서 시작하여 눈을 가리기 때문에 어두운 배경과 밝은 색상을 사용하여 반사를 줄이고보다 편안하게 작동하는 것을 좋아합니다. 나중에 iOS 및 Android와 같은 거대한 운영 체제가 시스템의 주요 기능으로 어두운 모드를 가져 왔을 때, 태국인이 도시 전역에서 사용하는 인기있는 소셜 미디어 앱은이 모드를 선택할 수 있습니다. 사용자의 행동이 바뀌기 시작했습니다. 사람들은 "현대적인"및 "사용자에게주의를 기울이는"웹 사이트와 응용 프로그램이 어두운 모드를 가져야 할이 옵션을 가져야하므로 더 이상 프로그래머에 관한 것이 아닙니다. 그러나 기본적으로 많은 사용자의 눈에 좋은 사용자 경험의 표준 중 하나가되었습니다.

우리 웹 사이트에 어두운 모드가 없으면 "빠져 나가거나"기회를 잃을까요?
어두운 모드는 비즈니스를 즉시 망치지 않을 수 없습니다. 그러나 예상치 못한 차원에 영향을 줄 수 있습니다. 상상하다:
- 첫인상 : 큰 브랜드가 모든 어두운 모드를 가진 시대에. 이 옵션이없는 웹 사이트는 "시간 트렌드에 따라"또는 "작은 세부 사항에주의를 기울이지 않음"으로 보일 수 있으며, 이는 브랜드 이미지에 영향을 줄 수 있습니다. 특히 새로운 세대의 기술, 디자인 또는 제품과 관련된 비즈니스에서
- 특정 상황에서의 사용자 경험 (문맥 UX) : 어두운 침대에서 휴대 전화에 누워있는 고객을 생각하십시오. 그런 다음 흰색 배경 만있는 웹 사이트로 누르십시오 ... 너무 밝은 빛으로 인해 고객이 불편 함을 느끼고 즉시 닫을 수 있습니다. UX가 실제 사용에 응답하지 않기 때문에 불행히도 기회를 잃는 것입니다. 이 문제는 Slow Clinic 웹 사이트와 UX가 너무 나빠서 고객을 잃는 것과 유사합니다. 모르고 가십시오
- 인상적인 기회에 대한 오해 : 사용자에게 옵션을 제공하는 것은 자신의 경험을 "제어"하는 것 (예 : 빛/어두운 모드 중에서 선택)은 좋은 느낌을주는 작은 마이크로 상호 작용으로 간주됩니다. 브랜드가 사용자에게 얼마나 관심을 갖는지 보여줍니다. 한 고객과 긍정적 인 관계를 맺을 수있는 기회를 놓치는 기능은 없습니다.

최상의 해결책 : "Mee"뿐만 아니라 "이해가 있어야합니다"
이에 대한 대답은 단지 "어두운 모드가 있어야한다"또는 "가지고 있지 않아야한다"는 것이 아니라 최상의 솔루션은 "모든 라운드 평가"이며 전략적으로 결정합니다. 시작해야합니다.
- 목표 및 브랜드 분석 : 고객은 누구입니까? 그들은 기술을 얼마나 자주 사용합니까? 당신의 브랜드는 어떤 종류의 이미지입니까? (어린이 제품과 같은 것은 어두운 모드가 필요하지 않을 수 있지만 개발자를위한 가제트 브랜드 또는 플랫폼. Dark Mode는 이미지를 많이 향상시킵니다.)
- 이점의 무게를 측정하는 것은 불리한 불리함 :
- 장점 : 낮은 조명 시력을 줄이고 배터리 저장 (OLED 화면의 경우)을 현대적으로 보이며 사용자의 개인적인 요구를 충족시킵니다.
- 단점 : 긴 텍스트를 읽는 능력을 줄일 수 있습니다 (Halation Effect 현상에서 어두운 바닥의 밝은 글자는 흐린 것처럼 보일 것입니다), 디자인은 단지 채색하는 것보다 더 복잡하며 추가 개발 및 테스트를 위해 시간과 예산이 필요합니다.
- 전문가의 연구 : 과 같은 신뢰할 수있는 데이터 소스는 많은 문자가있는 웹 사이트에서 항상 더 낫지는 않다는 것을 분석했습니다 적절한 대비에 중점을 둔 디자인이 가장 중요합니다.
- 계획에서 시작하여 코드가 아닌 코드 : 결정을 내리기로 결정하면 설계 계획 "Dark Mode"로 시작해야합니다. 특히 검은 흰색 교대 코드를 쉽게 작성하는 것이 아니라 결과가 악화 될 수 있습니다.
좋은 출발점은 "Dark Mode가 고객이 더 나은 경험을 더 잘 도울 것인가?"라고 질문하는 것입니다. "왜 우리는 어두운 모드가 없습니까?"

실제 예제 : 글로벌 앱이 Dark Mode를 사용하여 성공을 창출 할 때
명확하게하기 위해 앱의 예를 살펴보십시오. YouTube, Twitter, Slack 또는 Messenger 및 Line 앱과 같이 익숙한 웹 사이트는 Dark Mode를 추가하는 것이 아니라 모든 새로운 경험을 설계했습니다.
사례 연구 (가정) : 다크 모드 기능을 추가 한 후 프로그래밍을위한 전자 학습 플랫폼을 생각해보십시오. 일어난 일은 다음과 같습니다.
- 밤에 약혼이 증가 : 밤 늦게 공부하고 싶어하는 학생들은 느낌없이 플랫폼에서 더 오래 걸릴 수 있습니다.
- 압도적으로 긍정적 인 피드백을 받았습니다. 사용자는 브랜드가 기술 근로자의 요구를 "듣고"이해한다고 생각합니다.
- 이미지는 "프로모션"과 더 안정적으로 보입니다. Dark Mode를 사용하면 플랫폼이 시장의 다른 전문 개발자와 비교할 수 있습니다.
이 성공은 버튼에서 스위치 모드를 갖는 것만이 아닙니다. 그러나 Dark Mode가 색상 일뿐 아니라 UX/UI라는 것을 이해하는 디자인에서 고객은 목표를 달성하는 데 도움이됩니다. 이것이 전환의 핵심입니다

따르고 싶어요, 시작하는 방법? 웹 사이트에 Dark Mode 추가를위한 점검 목록.
당신이 그 어두운 모드가 당신의 웹 사이트에서 옳은 것이라고 결정한 경우. 이것은해야 할 단계입니다. 좋은 결과를 얻고 실제로는 아름답고 그림을 작동시키기 위해 : 그림은 다음과 같습니다.
- 1 단계 : 새 색상 세트를 만듭니다 (반전하지 마십시오) : 직선 색상 스위칭 방법을 사용하지 마십시오! 흰색 (#fffff)은 완전히 검은 색이되어서는 안됩니다 (#000000). 진한 회색 (예 :#121212)을 배경으로 사용하고 문자의 밝은 흰색을 줄입니다.
- 2 단계 : 대비를 확인하십시오. 심장 : 대비 비율을 사용하여 문자와 요소를 보장하십시오. 여전히 WCAG를 읽고 통과하기가 쉽습니다 (웹 컨텐츠 접근성 가이드 라인).
- 3 단계 : 모든 요소를 테스트하십시오 : 로고, 아이콘, 버튼, 사진 및 다양한 형태. 어두운 모드에 잘 표시되어야합니다. 일부 이미지는 배경을 삼키지 않도록 약간 더 밝게 조정해야 할 수도 있습니다.
- 4 단계 : 현대 기술 사용 :
Prefers-Color-Scheme
이라는 CSS 미디어 쿼리를 사용할 수 있습니다 운영 체제가 설정 한 운영 체제 설정에 따라 웹 사이트가 자동으로 교대 할 수 있도록 - 5 단계 : 사용자가 결정하도록하십시오. 가장 중요한 것은 "토글 스위치"를 갖는 것이 사용자가 스스로 선택할 수 있도록하는 것입니다. 사용자가 한 모드에 있도록 강요하지 마십시오. 이것은 사용자의 결정의 존중이며 투자자의 설계, 명확한 정보를 제공하고 사용자가 스스로 볼 수 있도록 투자자의 설계

어두운 모드에 대한 질문 (및 가장 명확한 답변)
Q1 : 더 나은 어두운 모드가 있습니까?
A : 직접적인 영향은 없습니다. Google은 Dark Mode가있는 웹 사이트에 더 나은 순위를 부여하지 않지만 UX를 통해 간접적으로입니다. 다크 모드가 사용자에게 도움이된다면. 웹에서 더 긴 (거주 시간) 또는 웹 사이트 (참여)와 더 많은 상호 작용을합니다. 이것들은 장기적으로 SEO에 긍정적 인 영향을 미치는 좋은 신호입니다.
Q2 : 모든 유형의 웹 사이트가 다크 모드에 적합합니까?
A : 항상 그런 것은 아닙니다. 웹, 어머니 및 어린이와 같이 밝고 친근한 의사 소통을 원하는 긴 기사, 정부 웹 사이트 또는 웹 사이트를 읽는 데 중점을 둔 웹 사이트. 다크 모드에는 적합하지 않을 수 있습니다. 반면, 기술 웹 사이트, 엔터테인먼트 (스트리밍) 또는 현대적인 사치가 필요한 브랜드는 일반적으로 다크 모드에서 더 좋습니다.
Q3 : 어두운 모드를하기 위해 많은 예산이 필요합니까?
A : 웹 사이트의 복잡성에 따라. 새로 생성 된 웹 사이트이고 처음부터 계획 인 경우 비용은 그리 높지 않을 수 있습니다. 그러나 복잡한 구조 (개조)가있는 오래된 웹 사이트에 설치되면 예산과 디자인 및 테스트 시간이 필요할 수 있습니다. 의 일부로 간주 될 수 있습니다 (웹 사이트 리노베이션 )
Q4 : 웹 사이트를 밤에 자동으로 어두운 모드로 설정해야합니까?
A : 흥미로운 아이디어입니다. 그러나 가장 좋은 방법은 "하지 않는 것"입니다. 우리는 환경에 어떤 종류의 사용자가 있는지 알 수 없습니다. Togle을 통해 사용자 옵션을 제공하는 것은 항상 사용자를 사용하는 가장 안전하고 유용한 방법입니다.

요약 : 다크 모드는 마술 의학이 아닙니다. 그러나 사람들의 도구는 ux를 관리합니다
이 시점에서 우리는 이미 Dark Mode가 아름다운 트렌드 이상이라는 데 동의했지만 사용자의 경험 (UX)을 향상시키는 것은 "강력한"입니다. 올바르게 사용하면 시간과 올바른 경우 키는 웹 사이트가 어두운 모드가 아니라는 것이 아니라 고객을위한 최상의 경험을 제공하기 위해 고객을 이해하고 돌보는 데 충분합니까?
다크 모드를 수행하거나하지 않기로 선택하는 것은 대상 그룹의 분석, 브랜드의 정체성을 이해하며 장점과 단점을 평가 한 결과입니다. 성공적인 웹 사이트는 사용하기 쉬운 웹 사이트, 답변 및 사용자에게 좋은 감정을 만드는 웹 사이트이기 때문에 추세를 따르는 것뿐만 아니라 추세를 따릅니다. 밝은 모드이든 어두운 모드에서든
귀하의 웹 사이트는 어떻습니까? 고객에게 최고의 경험을 제시 할 준비가 되셨습니까? 망설임이 비즈니스 기회를 차단하게하지 마십시오. 오늘 UX와의 좋은 투자. 미래의 성장을위한 강력한 토대를 구축하는 것입니다.
완벽한 조명 모드이든 어두운 모드이든 비즈니스에 적합한 UX/UI를 분석하고 설계하는 데 도움이됩니다 Vision X Brain Team을 참조하십시오. 당사는 귀하의 웹 사이트를 고객에게 사랑 받기 위해 변경하고 비즈니스 결과를 창출 할 준비가되었습니다.
최근 블로그

오프닝 속도, 미용 및 스케일 능력을 강조하는 스타트 업을 위해 충격, 웹 플로우 및 프레이머 사이의 충격을 비교하십시오.

웹 속도는 기술적이지 않습니다! 핵심 웹 생명 (LCP, INP, CLS)은 SEO 순위, 사용자 경험 및 조직 웹의 이익에 영향을 미치는 것입니다.

바닥 글을 내려다 보지 마십시오! UX를 개선하고 SEO를 보충하며 방문자를 리드로 바꾸는 데 도움이되는 웹 사이트 바닥 글 디자인 기술 모음.