CSS 스타일시트를 사용한 분할 테스트

웹사이트를 크게 분할 테스트하는 가장 빠른 방법은 사이트 전체 실험 내에서 CSS(Cascading Style Sheet)를 과감하게 변경하는 것입니다.

CSS 스타일시트가 중요한 이유

웹사이트의 기본 CSS 파일은 모든 웹페이지에 있는 모든 요소의 공통 스타일, 위치 및 동작을 제어하는 ​​중심 참조 지점입니다.

기본 CSS 파일에는 모든 글꼴, 여백, 색상, 정렬 등에 대한 설정이 있습니다. 대부분의 템플릿 웹사이트에서 가장 중요한 파일이며 약간의 편집만으로 웹사이트의 모양을 크게 바꿀 수 있습니다.

매번 수행해야 하는 사이트 전체 분할 테스트

웹사이트가 얼마나 쉽게 읽고, 사용하고, 탐색하고, 클릭 유도문안을 강조 표시하고, 모든 주요 정보를 표시하는지에 큰 역할을 하는 웹사이트 전반에 걸쳐 많은 공통 요소가 있습니다.

사용자가 웹사이트에서 연락할지 또는 구매를 할지 결정할 때 위의 사항 중 하나가 전환을 중지하는 결정적인 요소가 될 수 있습니다. 다음은 사이트 전체 요소에 대한 몇 가지 주요 고려 사항입니다.

클릭 유도문안 버튼

모든 온라인 전환은 클릭 유도문안(CTA) 버튼, 링크 또는 위젯으로 시작됩니다. 이러한 CTA의 크기, 색상, 문구 및 위치에 따라 전환율이 크게 달라집니다. 예를 들어, CTA 버튼의 특정 색상은 배경과 너무 많이 혼합되거나 부정적인 색상으로 인식하는 항목에 따라 사용자가 무의식적으로 클릭하지 못하게 할 수 있습니다. 링크와 버튼에 사용된 텍스트도 차이를 만듭니다. 예를 들어, 단순히 양식의 "SUBMIT" 버튼을 "SEND"로 변경하면 "submit"이 강력한 단어로 인식되기 때문에 더 나은 결과를 얻을 수 있습니다. VWO.com의 CTA에 대한 궁극적인 가이드에서 이에 대한 자세한 내용을 읽을 수 있습니다.

글꼴 크기

이 거의 테스트되지 않은 요소는 많은 사용자의 접근성에 큰 역할을 합니다. 일부 사용자는 글꼴이 너무 작아서 읽기에 익숙하지 않은 경우 확대/축소 기능을 사용해야 할 수 있지만 모바일 장치에서는 이것이 항상 가능하거나 쉬운 것은 아닙니다. 글꼴 크기가 너무 크면 특히 모바일 친화적 버전의 웹사이트에서 읽기 속도가 느려질 수 있기 때문에 해로울 수 있습니다. imarc.com에서 글꼴 크기에 대한 과학에 대해 자세히 알아보십시오.

글꼴 유형

다시 말하지만 글꼴 스타일은 많은 웹 사이트에서 거의 테스트되지 않으며 개발 초기 디자인 단계에서 결정된 다음 많은 웹 사이트에서 잊어 버리는 것 같습니다. 글꼴 스타일에 따라 가독성 수준이 다릅니다. 또한 일부 글꼴은 특정 장치에서만 사용할 수 있으며 일부 글꼴은 글꼴 래스터화 없이 특정 크기의 특정 장치에서 제대로 표시되지 않습니다. 글꼴 패밀리를 사용하여 좋아하는 것부터 시작하여 모든 장치에 항상 있는 Arial과 같은 더 간단한 글꼴까지 일련의 글꼴을 사용할 수 있습니다. JavaScript 또는 다음과 같은 서비스를 통해 웹사이트에 새 글꼴을 포함할 수 있습니다. 구글 폰트. TypeWolf.com의 이 게시물에서 2016년 상위 10개 웹 글꼴에 대해 자세히 알아볼 수 있습니다.

글꼴 스타일

줄 높이, 밑줄, 굵기, 색상 및 여백과 같은 글꼴 스타일도 접근성 및 가독성에 영향을 줍니다. 링크가 파란색이고 밑줄이 그어진 경우 클릭될 가능성이 더 큽니다. Google과 eBay는 2016년에 검은색 링크를 테스트하기까지 Google과 함께 수년에 걸쳐 세심하게 테스트했습니다. 링크가 웹사이트의 링크로 명확하게 눈에 띄지 않는 경우 , 그런 다음 테스트해야 하며 변경 후 더 큰 참여를 보이는 경우가 많습니다.

배경색

종종 웹사이트는 흰색 배경에 만들어지지만 즐겨 찾는 뉴스 웹사이트나 소셜 미디어 플랫폼을 보면 파란색이나 회색의 약간의 음영이 있는 경우가 많습니다. 배경색은 정보 상자 또는 특별 행사 배너와 같이 웹 페이지의 특정 영역을 눈에 띄게 만드는 데 도움이 될 수 있습니다. 또한 배경색은 표시된 제품의 브랜드 또는 유형을 강화할 수 있으며 이러한 상관 관계는 콘텐츠가 더 관련성이 높아 보이므로 전환율을 향상시킵니다. Jimdo.com의 이 기사에서 웹사이트의 색상 심리학에 대해 자세히 알아보고 주황색과 같은 색상은 좋은 거래를 의미하고(Amazon 생각) 파란색은 중립성과 기술(Facebook 또는 Twitter 생각)을 의미하는지 확인하십시오.

요소 재배치 또는 숨기기

CSS 파일은 웹페이지의 모든 공통 요소에 대한 여백과 패딩을 제어하고 "display:none" 명령을 사용하여 특정 항목을 완전히 제거할 수도 있습니다. 이것을 활용할 수 있는 몇 가지 방법은 수직으로 낭비되는 공간을 줄이고, 불필요한 정보를 제거하고, 중요한 CTA 사이의 간격을 변경하거나, 특정 콘텐츠 블록을 제거하는 실험을 하는 것입니다. 때로는 웹 페이지에서 더 적은 것이 더 낫습니다(단순한 바보 유지 원칙). 전환율을 향상시키면서 웹 페이지에서 얼마나 제거할 수 있는지 확인하는 것이 좋습니다.

사이트 전체에서 CSS 파일 분할 테스트를 위한 플랫폼

각 개별 사용자가 페이지를 이동할 때 웹사이트의 템플릿을 일관되게 유지하는 것은 정말 중요합니다. 한 페이지만 A/B 분할 테스트되고 다른 페이지는 그대로 유지된다면 해로울 수 있습니다(그리고 확실히 좋지 않은 실험).

각 개별 사용자에 대해 페이지 간에 CSS 파일 변경 사항을 일관되게 유지하려면 특수 분할 테스트 소프트웨어가 필요합니다. 불행히도 Google Analytics의 무료 "콘텐츠 실험"은 이러한 유형의 분할 테스트를 지원하지 않습니다. 다음은 사용할 수 있는 몇 가지 도구입니다.

• VWO(Visual Website Optimizer) – vwo.com – 우리는 이것이 구현하기 가장 쉬운 분할 테스트 소프트웨어라는 것을 알게 되었습니다. HTML, CSS 또는 JavaScript에 대한 모든 유형의 분할 테스트를 처리하고 필요한 경우 사용자 히트 맵도 생성합니다. 가격 구조는 여기에서 찾을 수 있습니다
• Optimizely – optimizely.com – 또한 HTML, CSS 또는 JavaScript에 대한 모든 유형의 분할 테스트를 처리하며 필요한 경우 일부 고급 분할 테스트를 수행할 수 있습니다. 가격 정보는 여기에서 찾을 수 있습니다

결론

사이트 전체 CSS 분할 테스트를 설정하는 것은 쉽고 효과적이지만 CSS에 익숙하지 않은 경우 개발자의 도움이 15분 정도 필요할 수 있습니다.

웹사이트에 올바른 글꼴, 스타일 및 CTA가 있으면 웹사이트의 주요 방문 페이지 및 기타 틈새 요소에 집중할 수 있습니다. 이는 전환율을 높이고 추가 트래픽 없이 웹사이트를 훨씬 더 효과적으로 만듭니다.

도움이 필요하시면 주저하지 마시고 저희에게 연락해 주십시오.