무엇을 변경해야 할지 모르겠다면 웹사이트의 색상을 변경해 보세요.

웹사이트의 성능을 개선할 때 가장 큰 문제 중 하나는 무엇을 변경해야 할지 모르는 것입니다. 이것은 어느 시점에서 우리 모두에게 일어났습니다. 이러한 경우 가장 중요한 웹 부분에 집중하는 것이 좋습니다. 이것은 귀하의 비즈니스 모델에서 가장 주목을 받거나 가장 중요한 페이지 섹션을 의미합니다.

예를 들어, 웹사이트를 방문하는 사람들이 결국 양식을 채우는 것이 목표인 경우 양식 자체에 집중하십시오. 양식을 더 눈에 띄게 만들고 작성하고 제출하기 쉽도록 최대한 단순화하십시오. 내가 전에 말했듯이, 변경될 때 방문자에게 더 큰 영향을 미칠 수 있는 요소를 먼저 찾으십시오. 그러면 흥미로운 결과를 더 빨리 얻을 수 있습니다.

여전히 무엇을 변경해야 할지 모르겠다면 결코 실망시키지 않고 시도하기 매우 쉬운 방법은 웹 페이지의 색상에 변경 사항을 적용하는 것입니다. 시각 장애인을 내버려 둘 생각이 없다면 웹 사이트의 색상이 매우 중요하다는 것이 분명합니다. 상상할 수 있는 것보다 훨씬 더 많습니다.

색 이론과 우리 인간이 그것을 인식하는 방식에 대한 여러 연구가 있습니다. 우리의 시각 시스템(눈, 시신경, 뇌)에 포착된 다양한 파장에 대한 해석으로 보일 수 있는 것이 엄청난 심리적 배경을 숨깁니다.

이러한 이유로 웹 페이지(또는 웹 페이지 내에서 영향력이 큰 일부 요소)의 색상을 변경하고 이러한 변경에 직면하여 방문자의 상호 작용이 어떻게 발전하는지 연구하는 것이 좋습니다. 이것이 바로 오늘 우리가 이 웹사이트에서 테스트한 완전하고 실제적인 예를 들어 설명할 것입니다.

A/B 테스트의 정의

웹사이트의 변경 사항을 테스트하려면 A/B 테스트를 사용해야 합니다. 이렇게 하면 실제 데이터를 사용하여 적용된 변경 사항이 현재 버전보다 더 잘 작동하는지(또는 그렇지 않은지) 과학적 방법에 따라 보장할 수 있습니다.

오늘의 예에서 우리가 할 일은 Nelio A/B Testing의 가격 페이지의 첫 번째 폴드의 색상 변화를 테스트하는 것입니다. 이 첫 번째 접기는 플러그인을 구매할 때 방문자가 결국 고객이 되는 가격 테이블을 표시하는 역할을 하기 때문에 비즈니스에 큰 영향을 미칩니다.

다음 비교에서 첫 번째 접기의 원본 버전(왼쪽)과 다른 색상의 단추와 여백, 새 배경 이미지가 있는 대체 버전(오른쪽)을 볼 수 있습니다.

변경 사항을 테스트하기 위해 Nelio A/B Testing을 참조 A/B 테스트 플러그인으로 사용했습니다. 우리가 할 첫 번째 일은 우리가 테스트할 요소인 페이지의 새로운 A/B 테스트를 만드는 것입니다.

WordPress 페이지 편집기 자체를 통해 색상을 변경할 수 있기 때문에 이 작업을 수행합니다. 색상이 테마 템플릿을 통해 또는 덜 정통적인 방식으로 제공되기 때문에 그렇게 할 수 없다면 – 경험에 따르면 색상 스타일은 WordPress에서 여러 가지 방법으로 정의될 수 있음 – 항상 작동하는 또 다른 옵션은 다음과 같습니다. 변형에 새로운 CSS 스타일 규칙을 추가하여 새로운 색상을 적용할 수 있는 CSS 스타일의 A/B 테스트를 사용합니다.

A/B 테스트의 편집 화면에서 테스트할 기본 페이지(가격 페이지)를 선택하고 나중에 편집할 새 변형을 만듭니다.

강조해야 할 또 다른 중요한 측면은 A/B 테스트 도구가 나중에 두 버전 중 어느 것이 더 잘 작동하는지 찾기 위해 추적할 메트릭을 정의하는 것입니다. 위의 스크린샷에서 볼 수 있듯이 전환 목표 및 액션 섹션에서 이를 정의합니다.

우리의 경우 동일한 A/B 테스트에 대해 5개의 다른 결과를 제공하는 5개의 목표를 정의했습니다. 먼저 가격표에 있는 모든 계획의 구매 버튼 클릭 수를 측정하는 목표를 정의합니다. 그런 다음 각 계획의 클릭을 개별적으로 측정하는 3개의 추가 목표가 있습니다. 마지막으로 테스트 중인 페이지의 각 버전을 본 후 실제 구매 수를 측정하는 목표가 있습니다.

마지막으로 페이지의 대체 버전을 편집합니다. 그러면 다음 스크린샷에서 볼 수 있듯이 사용 중인 WordPress 페이지 편집기(이 경우 블록 편집기)로 이동합니다.

여기서 우리는 세 열 각각의 작업 버튼과 상단 여백을 만드는 데 사용하는 요소의 색상만 변경하면 됩니다. 또한 WordPress 미디어 라이브러리에 업로드한 다른 이미지의 배경 이미지도 변경했습니다.

테스트하려는 변경 사항이 있는 대체 페이지가 준비되면 A/B 테스트 편집 화면으로 돌아가 시작할 때입니다. 이렇게 하면 가격 책정 페이지에 대한 트래픽이 자동으로 둘로 나뉩니다. 방문자의 절반은 원본 버전과 상호 작용하고 나머지 절반은 변형을 보게 됩니다.

이러한 방식으로 5가지 전환 목표에 대해 더 잘 작동하는 페이지 버전을 확인할 수 있습니다. 이제 우리는 결과가 우리가 찾는 정보를 제공할 때까지 기다리기만 하면 됩니다.

테스트 결과 분석

결국 한 변형이 다른 변형보다 낫다면 A/B 테스트 도구 자체에서 그렇게 알려줍니다. 앞서 설명한 A/B 테스트에서는 결과가 명확했습니다. 새로운 색상을 가진 버전은 우리가 이미 가지고 있는 것보다 더 나쁩니다. 다음 갤러리에서 테스트에 정의된 5가지 목표 각각에 대한 결과의 세부 정보를 볼 수 있습니다.

이 변형은 액션 버튼 클릭을 줄였을 뿐만 아니라 판매도 줄였습니다(거의 22% 감소).

이것은 어리석은 것처럼 보일 수 있지만 A/B 테스트로 변경 사항을 테스트하는 대신 이전에 테스트하지 않고 웹 사이트에서 직접 변경하면 더 나빠질 수 있는 변경 사항이 도입될 위험이 있습니다. 우리가 만들고자 하는 변경 사항이 예상한 대로 작동하지 않았기 때문에 이것은 우리의 경우일 수 있습니다.

새로운 색상이 더 마음에 들기 때문에 주어진 시간에 색상을 변경하는 것이 좋은 해결책이라는 것을 알 수 있습니다. 문체의 관점에서 훨씬 더 낫다고 생각하는 새로운 색상 팔레트를 발견하고 직접 사용하기로 선택했습니다. 그러나 이것은 큰 실수입니다. 한 색상을 다른 색상보다 더 좋아한다는 사실은 중요하지 않습니다. 중요한 것은 이것이 실제로 청중과 방문자에게 해당되는지 주의 깊게 확인하는 것입니다. 그리고 A/B 테스트를 통해 통제된 환경에서 그렇게 할 수 있습니다.

Unsplash에서 Jeremy Thomas의 추천 이미지.