웹사이트에 가장 적합한 클릭 유도문안 버튼 색상에 대한 진실

웹 페이지에서 가장 잘 어울리는 색상에 대해 인터넷에서 많은 말을 했습니다. 그것에 대한 수천 개의 기사를 찾을 수 있습니다. 사용자가 어떤 색상이 더 나은지 묻고 상반된 답변을 받는 것(놀랍죠?)에서 Google이 링크에 대해 여러 파란색 음영으로 수행한 테스트를 설명하는 잘 알려진 기사에 이르기까지.

이 모든 것의 이면에 있는 현실은 아무도 특정 색상을 시도하지 않고 웹사이트에서 특정 색상이 더 좋거나 나쁘게 작동할 것이라고 장담할 수 없다는 것입니다. 그들이 당신에게 다르게 말한다면 그들은 당신에게 거짓말을 하고 있는 것입니다. 그리고 나는 당신이 거짓말을 하는 것을 좋아하지 않을 것이라고 확신합니다.

저 역시 마찬가지입니다. Yahoo!에서 이 기사를 읽고 있을 때였습니다. 버튼에 가장 잘 어울리는 색상은 빨강, 초록, 주황, 노랑이라고 하는 중소기업인데 저희 홈페이지에서 해봐야겠다는 생각이 먼저 들었습니다.

제가 매달 A/B 테스트에 대해 쓴 일련의 기사를 팔로우했다면, 우리 웹사이트에서 가장 중요한 페이지 중 하나가 가격 페이지와 함께 Nelio Content의 랜딩 페이지라는 것을 이미 알고 있을 것입니다. 두 페이지 모두에 클릭 유도문안 버튼은 주황색입니다.

클릭 유도문안 버튼에 대해 우리 웹사이트에서 이미 사용하고 있는 주황색과 비교하여 빨간색 또는 녹색이 더 잘 작동합니까? 이것은 내가 스스로에게 던진 질문이며 방문자의 실제 데이터로 여기에서 대답할 것입니다. 주관적인 의견이 아닙니다. 실제 데이터.

갑시다!

CSS의 A/B 테스트 만들기

페이지의 버튼 색상을 변경하는 가장 쉬운 방법은 몇 가지 추가 CSS 규칙을 추가하여 새 색상을 적용하는 것입니다. 원하는 색상의 버튼에 새로운 background-color 규칙을 적용하면 됩니다. 쉬워요.

Nelio A/B Testing을 사용하면 CSS 스타일의 A/B 테스트를 생성하여 추가 CSS 규칙의 다양한 변형을 테스트할 수 있습니다. 새 테스트를 만들고 테스트 유형 선택기에서 CSS 옵션을 선택하기만 하면 됩니다.

그러면 테스트 편집기로 이동합니다. 여기서 가장 먼저 해야 할 일은 변형을 만드는 것입니다. 이 유형의 테스트에서 첫 번째 변형은 추가 CSS 없이 현재 모양으로 페이지를 표시하는 변형입니다.

그런 다음 우리의 경우 테스트할 추가 색상 각각에 대한 변형을 만듭니다. 하나는 녹색용이고 다른 하나는 빨간색용입니다. 첫 번째 변형은 이미 주황색이므로 이것으로 모든 것이 준비되었습니다.

각 추가 변형에 대해 편집으로 이동하여 버튼 색상을 변경하는 추가 CSS 규칙을 추가할 수 있습니다. 필요한 CSS 규칙은 WordPress에서 사용하는 테마에 따라 다릅니다. Nelio A/B Testing이 제공하는 CSS 편집기에서 새로운 CSS 규칙이 사이트의 모양과 느낌을 어떻게 변경하는지 실시간으로 확인할 수 있습니다. 이렇게 하면 제대로 하고 있는지 확인하는 데 도움이 됩니다.

다음은 설정 중인 A/B 테스트의 각 변형에 대한 CSS 스타일 편집기에서 작업 버튼이 어떻게 보이는지 보여줍니다. 앞서 언급했듯이 먼저 주황색 버튼이 있는 원본 버전이 있습니다. 다른 두 가지 변형에는 버튼을 각각 녹색과 빨간색으로 바꾸는 CSS가 포함됩니다.

변형이 준비되면 측정하려는 전환 목표를 정의해야 합니다. 이 경우 테스트 편집기의 스크린샷에서 볼 수 있듯이 두 가지 목표가 있습니다.

첫 번째 목표는 작업 버튼에 대한 클릭을 측정하는 반면 두 번째 목표에서는 이러한 클릭도 측정하지만 Nelio Content 가격 책정 페이지에서 발생하는 클릭만 측정합니다.

마지막으로 CSS의 A/B 테스트는 웹사이트의 모든 페이지에 영향을 미칩니다. Nelio A/B Testing에서 이 동작을 제한하기 위해 A/B 테스트 편집기의 오른쪽 사이드바에서 테스트 범위를 제한하는 옵션이 있습니다. Nelio Content의 메인 페이지와 가격 페이지에만 영향을 미치도록 했습니다.

테스트를 시작할 모든 준비가 완료되었습니다. 일단 그렇게 하면 Nelio A/B Testing은 이 두 페이지를 방문하는 트래픽을 분할하고 다양한 색상 변형을 표시하고 전환(버튼 클릭)을 추적하는 일을 담당합니다.

방문자가 결과를 보기 시작하기 위해 해당 페이지를 통과할 때까지 기다리기만 하면 됩니다.

결과 분석

우리는 한 달 반 동안 스페인어 웹사이트에서, 거의 한 달 동안 영어 웹사이트에서 버튼 색상에 대한 A/B 테스트를 웹사이트에서 진행했습니다. 영어 버전에서는 높은 신뢰도 값으로 더 빠르게 통계적으로 유의한 결과를 얻었기 때문에 더 일찍 중지했습니다.

그러나 웹에서 스페인어로 된 테스트 결과부터 시작하겠습니다.

위의 스크린샷에서 볼 수 있듯이 두 페이지의 클릭수를 측정하기 위해 버튼의 녹색 및 빨간색 변형이 원래 주황색 버전보다 약간 더 나은 성능을 보이는 것 같습니다. 그러나 통계에 따르면 개선 사항이 크지 않으므로 이러한 색상이 주황색보다 낫다고 말할 수는 없습니다.

Nelio Content 가격 책정 페이지에서 클릭수만 측정한 두 번째 목표의 경우에도 명확한 승리 색상이 없음을 알 수 있습니다. 여기서 녹색이 주황색보다 성능이 더 떨어지는 것을 관찰할 수도 있습니다. Nelio A/B Testing이 방문자로부터 수집한 데이터로 강력한 결론을 도출할 수는 없지만:

이제 영어 버전의 페이지에서 테스트 결과를 확인하러 가보겠습니다. 여기 Nelio Content의 두 페이지 중 하나에서 클릭을 측정한 첫 번째 목표에서 녹색과 빨간색이 더 나은 클릭률을 생성하는 색상임을 알 수 있습니다.

또한 여기에서 녹색이 테스트의 승리 색상임을 확인할 수 있습니다. 결과는 99% 이상의 신뢰도로 통계적으로 유의합니다. 녹색은 Nelio 콘텐츠 페이지의 버튼에 대해 당사 웹사이트에서 영어로 사용할 수 있는 최고의 색상입니다.

Nelio Content 가격 책정 페이지(테스트의 두 번째 목표)의 클릭 수만 보면 테스트의 첫 번째 목표와 결과가 일치함을 알 수 있습니다.

이를 보면 녹색이 Nelio 콘텐츠 페이지에서 영어 청중에게 가장 잘 맞는 색상이라고 말할 수 있습니다. 그러나 스페인 청중의 경우 우리가 이미 가지고 있는 것보다 더 잘 작동하는 색상을 찾지 못했습니다.

결론

여기에서는 웹 사이트에서 가장 관련성이 높은 두 페이지를 탐색한 방문자의 실제 데이터로 A/B 테스트 결과를 보여주었습니다. 그리고 특정 청중에게 가장 효과적인 것이 다른 청중에게 가장 효과적일 필요는 없다는 것을 확인할 수 있었습니다.

녹색 버튼은 영어를 사용하는 방문자에게 가장 적합합니다. 하지만 그렇다고 해서 다른 방문객들도 마찬가지인 것은 아닙니다. 이러한 이유로 이 페이지의 영어 버전에서는 Nelio 콘텐츠 페이지의 작업 버튼 색상만 녹색으로 변경했습니다. 스페인어로 된 것들은 주황색으로 남아 있습니다.

페이지에 녹색을 사용해야 한다고 말하면 어리석은 일입니다. 아무도 당신에게 그것을 말해선 안됩니다. 나, 아무도. 녹색이 당신에게 효과가 있을지 모르겠습니다.

이러한 이유로 인터넷에서 찾을 수 있는 많은 전문가에게 주의를 기울이기 전에 직접 테스트를 수행하십시오. A/B 테스트를 만드는 것은 매우 쉽습니다. 웹사이트에서 무엇이 더 잘 작동하는지(또는 그렇지 않은지) 발견할 수 있는 유일한 방법입니다. 실제 청중과 함께.

Unsplash에 대한 Robert Katzki의 추천 이미지.