최대 변환 설계를 찾기 위해 웹 플로에서 A/B 테스트를하는 기술.

인생의 실제 문제

당신은 해본 적이 있습니까? 웹 플로우에 랜딩 페이지를 설계하는 데 몇 주가 걸립니다. 모든 것을 아름답게 배치하십시오. "가장 쾅"이라고 생각하는 그림을 선택하십시오. "가장 날카 로워진다"라고 생각하지만 실제로 웹 사이트를 공개 할 때 ... 대신 고객에게 "EH ... 사람들이 주문 버튼을 클릭하는 것을 거부하는 이유는 무엇입니까?"라고 생각해야합니다. 또는 "파란색 버튼의 색상을 오렌지로 변경하면"지금 구매하고 '지금 구매하고'자세한 내용을보십시오 '텍스트의 텍스트는 "확실하지 않은"작업의 느낌과 "개인적 감정"을 기반으로 한 결정이 전부입니다. 이것은 웹 플로우를 사용하는 많은 디자이너와 비즈니스 소유자가 직면하고있는 문제입니다. 트래픽이 웹 사이트로 운행되는 것을 보았지만 원하는대로 판매로 바꿀 수 없었던 것은 고통이었습니다.

삽화를위한 프롬프트 : 웹 사이트 디자이너는 컴퓨터 앞의 사원에 앉아 머리 위에 큰 물음표가있는 두 개의 CTA 버튼 (다른 색상)을 가리키는 화살표가있는 웹 플로 프로그램을 열었습니다.

그 문제가 발생한 이유는 무엇입니까?

이 문제는 디자인에 능숙하지 않기 때문에 태어나지 않습니다. 그러나 결정의 "정보 부족"으로 인해 웹 플로우의 유연성이 매우 높고 자유로 인해 수십만 개의 다른 디자인을 만들 수 있습니다. 옵션이 많을 때 우리는 "본능"또는 "개인 취향"을 기반으로 결정을 내리는 경향이 있기 때문에 B보다 아름다운 메인 디자인 A로서 "개인 취향"을 기반으로 결정을 내리는 경향이 있기 때문에 고객이 우리처럼 생각하는지 아닌지를 지원하기 위해 실제 정보가없는 유형을 선택하는 경향이 있기 때문입니다. 문제의 원인은 "데이터 중심 디자인"대신 "느낌에 의한 디자인"이며, 우리는 "고객을 좋아한다면 실제 세계에서도"라는 함정에 갇히는 경향이 있습니다. 항상 그런 것은 아닙니다.

삽화를위한 프롬프트 : 간단한 인포 그래픽 이미지는 왼쪽 반구 (논리, ​​데이터 및 창의성 (창의성) (창의성)을 보여주고, 오른쪽에서 "웹 사이트 디자인"이라는 단어를 가리키고 크로스 마크가 있으며, 두 반구에서 "고음 디자인"이라는 단어로 가리키는 녹색 화살표가 있습니다.

남은 경우 어떤 영향을 미칩니 까?

"추측"에 디자인의 디자인을 지속적으로 남겨두면 예상보다 심각한 부작용이 생깁니다. 첫 번째는 매일 웹 사이트가 가장 효과적이지 않다는 "영업 기회 손실"입니다. 당신은 당신의 고객과 소득을 잃고 있습니다. 두 번째는 "폐기물 마케팅 예산"입니다. 사람들을 웹에 끌어 들이기 위해 많은 돈을 버릴 수 있습니다. 그러나 웹 페이지가 방문자를 고객으로 바꿀 수 없다면 해당 돈은 모래에 물을 붓는 것과 같습니다. 그리고 가장 중요한 것은 "경쟁자들이 당신을 추월 할 것"입니다. 경쟁 업체는 A/B 테스트의 정보를 사용하여 매일 웹 사이트를 개선하여 마지막으로 웹 사이트가 아름다운 웹 사이트가됩니다. 당신의 목표는 광대 한 바다이지만,이 문제를 발표하는 사람은 아무도이 문제를 발표하는 것과 다르지 않습니다.

그림의 프롬프트 : "귀하의 웹 사이트"라는 첫 번째 줄과 비교 한 2 개의 그래프 이미지는 수평 그래프이며 일정한 변환율을 나타냅니다. "경쟁사 웹 사이트"는 "A/B 테스트로 최적화 된"표시로 점차 상승하는 그래프입니다.

해결책이 있습니까? 그리고 어디에서 시작해야합니까?

"Debayment"주기의 솔루션에는 이름이 하나뿐입니다. "A/B 테스트". 마케팅 및 디자인에 적용되는 과학적 과정입니다. "2 가지 버전의 디자인 (또는 그 이상)을 생성하고 실제 사용자와 테스트하여 어떤 버전의 변환이 더 나은지 확인하십시오." 팀에서 논쟁하는 대신, 어떤 컬러 버튼이 우리가 심판으로 "정보"를 제공하는 것보다 더 아름답습니다.

그리고 어디서부터 시작해야합니까? 항상 "최고 충격"(높은 영향 요소)부터 항상 시작하십시오.

• 헤드 라인 : 헤드 라인은 사람들이 가장 먼저 보는 것입니다. 다른 각도로 전달되는 메시지를 테스트하십시오.
• CANTION (CALLY-ACTION (CTA) : CTA 버튼의 모든 것을 테스트합니다 (예 : "무료로 가입"vs "사용 시작"). 크기와 위치. 좋은 CTA 샘플을 사용하여 영감을 얻으십시오.
• 그림 또는 비디오 (영웅 섹션) : 주요 그림은 감정과 엄청난 결정에 영향을 미칩니다. 제품을 반영하는 이미지로 결과를 전달하는 이미지를 변경해보십시오.
• 레이아웃 및 얼굴 구조 : 고객 리뷰를 상단으로 이동하는 것과 같은 웹 페이지 구조를 조정하십시오
• 제안 : 아마도 문제는 디자인이 아닐 수도 있습니다. 그러나 제안은 "20%할인"과 "무료 배송"사이의 시험을 시도해보십시오.

에 필요한 많은 도구 . 그러나 가장 인기있는 사람은 Google Optimize (서비스 발표에도 불구하고 원칙은 동일하게 유지됨) 및 VWO 또는 Optimizly와 같은 다른 도구이며 웹 플로우 웹 사이트에 연결할 수있는 것은 어렵지 않습니다.

그림을위한 프롬프트 : 각 주제와 함께 A/B 테스트 (헤드 라인, CTA, 영웅 이미지, 레이아웃, 제안)를 만들어야하는 5 가지 주요 구성 요소를 보여주는 인포 그래픽 이미지.

성공했던 실제의 예

더 명확 해지려면 웹 플로로 생성 된 전자 상거래 상점의 해상도 케이스를 들어 올리고 싶습니다. 유기농 스킨 케어를 판매하십시오. 그들은 아름다운 방문 페이지를 가지고 있지만 전환율은 1.5%로 이동하지 않습니다. 처음 두 CTA 버튼 (버전 A)은 항상 사용되는 "지금 쇼핑"이있는 녹색 버튼이며 B 버전 (버전 B)입니다. 그들이 더 좋을 것이라고 가정한다는 것은 텍스트를 "14 일 안에 맑은 피부를 드러내는 것"으로 텍스트를 변경합니다.

따라서 웹 페이지에 50% 트래픽을 사용하여 A/B 테스트를 수행하여 버전 A와 50%를 확인하여 버전 B를보고 어떤 버튼을 클릭하고 주문을보다 성공적으로 이끌어 내는지 측정했습니다. 캠페인을 2 주 동안 운영 한 후 결과는 매우 놀랍습니다!

"14 일 만에 명확한 피부를 드러내는 것"이라는 메시지를 사용하는 버전 B는 버전 A보다 35%보다 클릭률 (CTR)을 생성 할 수 있으며, 가장 중요한 것은 전체 변환 속도가 1.5%에서 2.5%로 증가합니다! 이것은 테스트의 정보를 바탕으로 "몇 가지 메시지"만 변경하는 힘입니다. 이것은 간단한 원칙으로 방문 페이지로 변환을 추가하는

그림을위한 프롬프트 : "전환율 +66%"와 같은 명확한 결과를 가진 두 개의 CTA 버튼 ( "지금 쇼핑", B : "14 일 만에 명확한 피부를 드러내는 것")을 보여주는 BEERE/SMART 스크린의 비교 이미지.

따르고 싶다면 어떻게해야합니까? (즉시 사용할 수 있음)

데이터 수집으로 변경할 준비가 되었습니까? 이것은 웹 플로우 웹에서 A/B 테스트를하는 과정입니다. 즉시 시작할 수 있습니다.

1. 목표와 가설 설정 (목표 및 가설) : 측정 할 내용 (예 : 버튼 클릭, 양식 작성 등)을 지정하고 "CTA의 색상을 파란색에서 주황색으로 변경하면 오렌지색이 뛰어나고 결정을 더 잘 자극하기 때문에 클릭 수가 15%까지 증가 할 것이라고 생각합니다."
2. 선택 : 초보자를 위해 선택하십시오 . 기술 전문가에게는 명확한 인터페이스가 있기 때문에 Google Optimize, VWO 또는 Optimizly와 같은 도구를 사용하는 것이 가장 쉬운 일입니다. JavaScript를 사용하여 다른 결과에서 논리를 만들 수 있습니다.
3. 웹 플로에서 버전 B를 작성하십시오 (변형 생성) : 가장 쉬운 방법은 "중복"입니다. 웹 플로에서 테스트하고 싶습니다. 그리고 /Landing-Page-B와 같은 이름을 명확하게 한 다음 중복 페이지를 테스트하려는 요소를 편집하여 헤드 라인 변경, 버튼 색상 변경)를 편집하십시오.
4. A/B 테스트 도구에 연결 및 설정 : 툴 (예 : VWO)에서 스 니펫 코드를 웹 플로우의 사용자 정의 코드 (헤드)에 넣으십시오. (대부분 50/50에서 시작합니다)
5. 테스트를 실행하고 대기 (실행 및 분석) : 클릭하여 테스트 및 "인내심. 대기"를 시작하십시오! 이틀 만에 결과를 긴급히 요약하지 마십시오. 충분하고 통계적으로 유의 한 방문자 수 (샘플 크기)까지 기다려야합니다. 대부분의 도구가 말할 수 있습니다.
6. 결과를 실제 사용 (구현 당첨자)으로 가져옵니다. 결과가 명확한 경우 어떤 버전이 원인지 확인하십시오. 그런 다음 웹 플로로 돌아가 버전 A (원본)를 테스트에서이기는 버전과 동일하게 편집하십시오. 그런 다음 A/B 테스트 캠페인을 중지하십시오

초보자의 경우 전자 상거래에 대한 A/B 테스트를 작성하여 더 많은 아이디어를 찾으십시오.

그림의 프롬프트 : Flowchart 이미지 6 단계 목표> 도구> 만들기> 만들기> 설정> 런> 각 단계마다 이해하는 아이콘으로 구현됩니다.

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

Q1 : A/B 테스트를 수행하려면 트래픽이 얼마나 많은 트래픽이 있어야합니까?
A : 이것은 고전적인 질문입니다. 고정 답변은 없지만 원칙은 신뢰할 수있는 결과를 얻기 위해 매주 충분한 "전환"(버전 당 20-30 개 이상)을 갖는 것입니다. 웹 사이트에 트래픽이 매우 적지 만 트래픽이 많지만 전환율이 매우 낮은 경우 . 이것을 매우 상세하게 설명하십시오.

Q2 : 웹 플로우에는 A/B 테스트 기능이 구축되어 있습니까?
A : 현재 (2025 년 6 월) 웹 플로에는 내장 A/B 테스트 기능이 없습니다. 우리는 전 세계 마케팅 담당자가 사용하는 표준 방법 인 타사를 사용하여 도와야합니다. 문제없이 웹 플로에 연결할 수 있습니다

Q3 : 매번 얼마나 오래 달려야합니까?
A : 권장 시간은 최소 1-2 주 또는 1 비즈니스주기 (예 : 고객이 주말을 구매하는 경향이있는 경우, 휴일을 포괄 해야하는 경우) 매일 사용자의 행동의 불일치를 피하기 위해 도구가 95% 이상 "통계적 의미"라는 사실을 알릴 때까지 기다리는 것입니다.

Q4 : A/B 테스트가 SEO에 부정적인 영향을 미칩니 까?
A : 단점이 없습니다. 올바르게 수행하면 Google은 사용자 경험을 개발하기 위해 A/B 테스트를 이해하고 지원합니다. 당신이해야 할 일은 사용하는 것입니다. 버전 B 페이지의 "Rel = Canonical"태그는 Google에 메인 페이지인지를 Google에 알리는 페이지 A 버전 A를 가리 킵니다. 대부분의 A/B 테스트 도구가이를 관리합니다

삽화를위한 프롬프트 : 첫 4 개의 만화 캐릭터는 트래픽 그래프를보고 있고, 두 번째는 물음표가있는 웹 플로우 로고를보고 있고, 세 번째는 캘린더를보고 있으며, 네 번째는 녹색 마크가있는 Google 로고를보고 있습니다.

이해하기 쉬운 요약 + 노력하고 싶어

A/B 테스트 웹 플로가 먼 또는 복잡한 것이 아님을 알기를 바랍니다 디자인을 "추측"에서 "이해"로 변경하는 도구입니다. 믿을 수 없을 정도로 훌륭한 비즈니스 결과를 생성 할 수있는 데이터를 기반으로 약간 수정했습니다.

당신이 잘 만들려고하는 웹 플로우 웹 사이트를 잘 보지 마십시오. 더 이상 잠재력을 최대한 발휘해서는 안됩니다. 열쇠는 "시작"하는 것입니다. 모든 것이 완벽해질 때까지 기다리지 마십시오. 작은 요소를 선택해보십시오. 당신이 가장 의심스럽고 가정하고 오늘 첫 번째 테스트를 시작하는 한 가지. 실제 정보로부터 배우는 것은 항상 아름다운 예측보다 항상 더 가치가 있습니다.

가장 효과적인 제품과 함께 작동하는 돈을 벌기 위해 웹 사이트를 변경해야합니다! 전환율 최적화를 원하거나 높은 전환이있는 방문 페이지, 특히 우리 팀이 모든 단계에서 상담하고 도와 줄 준비가 되려면

삽화를위한 프롬프트 : 하늘로 돌진 한 전환율 그래프. "A/B Testing"이 표시된 로켓을 사용하면 큰 메시지 "중지 추측, 테스트 시작!"

‍