체크아웃 버튼에서 다양한 스타일 테스트하기

오늘은 몇 개월 동안 진행해 온 또 다른 A/B 테스트를 가져왔습니다. 이 시리즈의 월간 기사에서 항상 그렇듯이 개선 가설, 웹 사이트의 페이지 변형을 통한 적용 및 얻은 결과에 대해 자세히 알아볼 것입니다.

얼마 전 우리는 Nelio Content의 메인 페이지에 있는 액션 버튼의 색상을 연구하고 있었습니다. CSS 스타일의 A/B 테스트 덕분에 해당 페이지에 영어를 사용하는 방문자에게 녹색이 어떻게 가장 잘 작동하는지 확인할 수 있었습니다.

우리는 이것이 모든 페이지에 해당될 것이라고 가정할 수 없습니다. 그래서 오늘 우리는 Nelio A/B Testing 구매 페이지에 나타나는 가격표에서 체크아웃 버튼의 색상과 크기를 테스트할 것입니다.

A/B 테스트의 정의

개선을 위한 우리의 가설은 Nelio A/B Testing 가격표에서 체크아웃 버튼의 색상과 크기를 변경하면 이러한 버튼에 대한 클릭이 더 많아지고 결과적으로 더 많은 매출이 발생한다는 것입니다.

Nelio A/B Testing 가격표의 원래 버전은 우리가 판매하는 세 가지 계획을 보여줍니다. 각 계획에는 가격, 세부 정보 및 서비스 구독 버튼이 있습니다. 다음 스크린샷에서 확인할 수 있습니다.

버튼은 다른 2개에 비해 이 계획을 더 강조하기 위해 진한 파란색 버튼이 있는 프로페셔널 플랜을 제외하고는 거의 눈에 띄지 않는 회색 색상입니다.

가장 먼저 확인할 사항은 버튼의 색상을 변경하여 더 눈에 띄게 만드는 것이 더 나은지 여부입니다. 이를 위해 우리가 제안한 대체 버전에는 아래에서 볼 수 있듯이 새로운 색상으로 CSS 스타일 변경이 포함됩니다.

우리는 전문 계획을 강조 표시했지만 이제 다른 계획은 진한 파란색이고 이 중간 계획은 더 눈에 띄는 주황색입니다. 색상 심리학 연구에 따르면 주황색은 작업 버튼에 대한 좋은 선택이므로 전문 계획을 위해 이전 이미지에서 본 주황색을 선택하기로 결정했습니다.

버튼의 크기도 성능에 영향을 미쳐야 한다는 우리의 가설에 따라 이전 변형에서 제안한 색상의 변경 사항을 유지하여 버튼의 크기가 증가된 새로운 색상을 만들었습니다. 다음 스크린샷에서 이 변경 사항을 확인할 수 있습니다.

따라서 Nelio A/B Testing 가격표의 CSS 스타일에는 세 가지 버전이 있습니다.

• 스타일의 변경 없이 원본입니다.
• 버튼에 더 눈에 띄는 색상이 있는 첫 번째 변형입니다.
• 눈에 띄는 색상과 더 큰 버튼 크기를 가진 두 번째 변형.

이 모든 작업이 완료되면 이것을 CSS 스타일의 A/B 테스트로 변환할 수 있습니다. 이를 위해 Nelio A/B Testing을 사용하면 WordPress에서 스타일 변경을 쉽게 테스트할 수 있는 다양한 CSS 스타일의 A/B 테스트를 생성할 수 있습니다.

새로운 CSS A/B 테스트와 그 안에 세 가지 대안을 만듭니다. 사실, 변형의 이전에 본 스크린샷은 Nelio A/B Testing이 대안을 만들기 위해 포함하는 CSS 스타일 편집기의 스크린샷입니다.

위의 스크린샷에서 볼 수 있듯이 테스트 범위를 Nelio A/B Testing 가격 책정 페이지로 제한했으며 테스트 내에서 측정할 5가지 목표를 정의했습니다.

• 모든 계획의 버튼을 클릭합니다.
• 기본 계획의 버튼을 클릭합니다.
• 전문 계획의 버튼을 클릭합니다.
• 엔터프라이즈 플랜의 버튼을 클릭합니다.
• 구매 금액.

이 모든 것이 생성되면 10분 이상 걸리지 않을 것이며 테스트를 시작하고 결과가 나올 때까지 기다립니다. 이제 Nelio A/B Testing이 작업을 수행할 차례입니다. 우리 플러그인은 들어오는 트래픽을 서로 다른 변형 간에 분할하고 A/B 테스트에 정의된 각 목표에서 전환을 계산하는 역할을 합니다.

A/B 테스트 결과 분석

이 A/B 테스트는 당사 웹사이트에서 3개월간 진행됩니다. 결과는 아래에서 볼 수 있습니다. 우리는 이 테스트에서 도출한 결론을 이해하기 위해 각 목표를 자세히 분석할 것입니다.

첫 번째 목표는 가격표에 있는 계획의 모든 버튼에서 발생한 클릭을 측정하는 것이었습니다. 이 경우 결과는 색상이 변경된 변형이 17.2% 더 많은 클릭을 달성함을 보여줍니다. 반면 색상과 크기가 변경된 변형은 페이지의 원본 버전보다 15% 더 나쁩니다.

그러나 이 수치 중 어느 것도 이 목표에 대한 승리 버전을 명확하게 식별할 수 있는 충분한 수준의 통계적 신뢰도를 얻지 못했습니다.

두 번째 목표는 기본 계획의 버튼만 클릭으로 계산했습니다. 이 경우 결과는 이전 목표와 유사합니다. 우리는 세 가지 중 가장 좋은 것으로 색상이 변경된 버전과 가장 나쁜 색상과 크기를 가진 버전이 있습니다.

유사하게, 통계는 새로운 색상이 있는 버전을 충분한 확신을 가지고 확실한 승자로 식별할 수 없습니다.

전문 플랜에서 클릭수를 측정하는 세 번째 목표의 경우는 조금 다릅니다. 이전과 마찬가지로 색상이 있는 버전이 더 좋고 색상과 크기가 결합된 버전이 더 나쁩니다. 그러나 이제 통계에 따르면 우승한 버전에는 충분한 자신감이 있음이 분명합니다.

더 눈에 띄는 색상을 사용하면 더 많은 클릭이 발생한다고 말할 수 있습니다. 주황색 버튼은 이전에 사용했던 파란색 버튼보다 더 잘 작동합니다.

엔터프라이즈 계획에서 클릭의 경우 여기에서 처음 두 목표와 동일한 상태로 돌아갑니다. 그러나 여기에서 원래 변형과 변경된 색상이 있는 변형 간의 차이는 무시할 수 있습니다. 훨씬 나빠 보이는 버전은 색상과 크기가 변경된 버전입니다.

이 모든 클릭 항목은 괜찮습니다. 그러나 앞의 결과만 본다면 우리는 현실에 대한 부분적인 시각을 갖게 될 것입니다.

이러한 이유로 각 변형에 의해 달성된 구매 수를 측정하는 마지막 목표를 추가했습니다. 더 많은 클릭을 얻는 변형을 얻을 수 있지만 더 많은 판매를 얻을 수 없다면 거짓 승자를 선택하게 됩니다.

다음 결과에서 이것이 정확히 발생함을 알 수 있습니다. 새로운 색상이 적용된 버전은 24.5% 적은 매출을 달성했으며 색상과 크기를 결합한 버전은 현재 페이지(변경 사항이 없는 버전)보다 16.6% 적은 매출을 달성했습니다.

이러한 결과를 통해 볼 수 있는 것은 전환 유입경로가 복잡하고 종종 단계를 나누고 미시 전환을 계산하지만 전체 그림을 놓쳐서는 안 된다는 것입니다.

다중 목표 A/B 테스트를 만드는 것의 장점은 우리 웹사이트가 얼마나 잘(또는 나쁘게) 수행되고 있는지에 대한 완전한 그림을 얻기 위해 원하는 모든 관점을 가질 수 있다는 것입니다. 이렇게 해야만 A/B 테스트 결과 데이터를 보고 안심하고 승자를 선택할 수 있다는 확신을 가질 수 있습니다.

Unsplash에서 Grooveland Designs의 추천 이미지.