17 عنصرًا أساسيًا لنموذج صفحة مقصودة عالية التحويل [مثبت]

إلى أي مدى يمكن أن تؤثر نماذج الصفحة المقصودة على صافي أرباحك؟

لنلق نظرة على Expedia: في عام 2010 ، اكتشفت شركة Expedia أن حقل نموذج اختياري بعنوان "الشركة" يكلفهم 12 مليون دولار سنويًا.

ماذا؟!

نعم.

كان الزوار الذين نقروا على زر "احجز الآن" يملأون حقل "الشركة" الاختياري باسم البنك الخاص بهم ، ثم يضيفون عنوان البنك بدلاً من عنوان منزلهم ، مما أدى إلى مئات المعاملات الفاشلة.

بعد أن أزالوا حقل النموذج الإضافي ، ارتفعت المبيعات بين عشية وضحاها.

ييكيس.

عندما يتعلق الأمر بأشكال الصفحات المقصودة ، تساهم الحوادث الصغيرة في حدوث تحويلات ضخمة في كل وقت.

وهذا أحد الأسباب التي تجعل نماذج الصفحات المقصودة من أكثر العناصر التي تمت دراستها في جميع مجالات التسويق.

أخبار سارة: بعد سنوات من تصميم الصفحة المقصودة وتحسين التحويل ، قمنا بتقطير نموذج الصفحة المقصودة المثالي وصولاً إلى 17 عنصرًا مدعومًا بالبيانات. في هذه المقالة ، سنقوم بتفصيل كيفية تحسين كل منها (مع أمثلة).

احصل عليها بشكل صحيح ولديك ذهب تحويل.

إذا فهمتهم بشكل خاطئ ، فقد تجد نفسك تنزف التحويلات مثل Expedia.

أولاً ، قبل الانتقال إلى أفضل الممارسات والأمثلة ، دعنا نوضح أي لبس حول ما إذا كانت جميع الصفحات المقصودة تحتاج إلى نماذج أم لا.

إجابة مختصرة: نعم ولا.

دعني أوضح…

يوجد نوعان من الصفحات المقصودة: صفحات التقاط الرصاص وصفحات النقر.

تتضمن صفحات التقاط العملاء المحتملين (صفحات إنشاء قوائم العملاء المحتملين AKA) نماذج مباشرة على الصفحة المقصودة. بعد كل شيء ، بدون نموذج ، كيف ستحصل على معلومات العملاء المحتملين حتى تتمكن المبيعات من المتابعة؟

على سبيل المثال ، تحتوي الصفحة المقصودة لأتمتة التسويق في Blueshift على نموذج عميل يطلب معلومات الاتصال. بمجرد إرسال العملاء المحتملين لمعلومات الاتصال الخاصة بهم ، سيقوم فريق مبيعات Blueshift بالمتابعة مع العميل المحتمل لجدولة عرض توضيحي. بسيط.

من ناحية أخرى ، لا تتضمن صفحات النقر فوق النماذج الموجودة في الصفحة المقصودة. بدلاً من ذلك ، عندما تنقر على زر الحث على اتخاذ إجراء (CTA) ، فإنه يفتح (أو ينقر للوصول إلى) صفحة تحويل حيث يمكن للعملاء المحتملين إكمال هدف التحويل الخاص بك على الفور (أي لا يلزم وجود معلومات حول العملاء المحتملين).

على سبيل المثال ، يستخدم Norton صفحة مقصودة للنقر لإحماء العملاء المحتملين قبل بيع برنامج مكافحة الفيروسات الخاص بهم. نظرًا لأن العملاء المحتملين يمكنهم الشراء مباشرة من موقع الويب (لا حاجة إلى فريق مبيعات) ، فهم لا يحتاجون إلى نموذج عميل محتمل.

لذلك عندما يتعلق الأمر بالنماذج الموجودة على الصفحات المقصودة ، من الناحية الفنية ، تشتمل صفحات التقاط العملاء المحتملين فقط على النماذج.

ومع ذلك ، حتى إذا كانت صفحة النقر إلى الظهور لا تتضمن نموذجًا على الصفحة المقصودة ، فهناك احتمال كبير أن تنقر للوصول إلى صفحة تعمل ، مثل صفحة إنشاء حساب أو صفحة تسجيل أو صفحة تسجيل خروج.

على سبيل المثال ، حتى صفحة النقر من Norton تتضمن نموذج دفع في النهاية:

فائدة: لا تتضمن جميع الصفحات المقصودة نماذج عليها ، ولكن في مرحلة ما ، يمر كل مسار للتحويل عبر نموذج. لا يمكنك تجنبهم. وعلى أقل تقدير ، يحتاج كل موقع إلى نموذج اتصال. لذا استمع!

بدون مزيد من اللغط ، دعنا نستكشف العناصر السبعة عشر لتصميم نموذج صفحة مقصودة عالي التحويل (بدون ترتيب معين):

1. تخطيط النموذج
2. تقنية مسار التنقل (خطوات متعددة)
3. مؤشرات التقدم
4. عدد الحقول
5. تسميات المجال
6. نص العنصر النائب
7. انقر فوق المشغلات
8. نسخة مصغرة
9. دعوة للعمل (CTA)
10. نافذة منبثقة للنموذج مقابل تضمين
11. الملء التلقائي
12. شكل السيارات
13. دليل اجتماعي
14. مطلوب مقابل اختياري
15. متوافق مع الجوّال
16. المنطق الشرطي
17. أزرار الاختيار مقابل القوائم المنسدلة

عندما يتعلق الأمر بالنماذج ، لديك ثلاثة خيارات للتخطيط: عمود واحد أو عمود مزدوج أو مختلط.

النموذج أحادي العمود هو نموذج خطي به حقول نموذج منظمة في خط مستقيم من أعلى إلى أسفل. على سبيل المثال ، يتميز نموذج العميل المحتمل هذا من Hellosign بتخطيط عمود واحد:

من ناحية أخرى ، يتميز النموذج ذي الأعمدة المزدوجة بعمودين من حقول النموذج منظمين في صفوف من أعلى إلى أسفل. على سبيل المثال ، يتميز نموذج العميل المحتمل هذا من Hubspot بتخطيط ذو عمودين:

وأخيرًا ، النموذج المختلط هو نموذج به أعمدة مفردة وأعمدة مزدوجة. على سبيل المثال ، يتميز نموذج Oscar هذا بتخطيط مختلط:

لسنوات ، كان يُعتقد أن النماذج ذات العمود الواحد هي أفضل تخطيط نموذج للتحويلات الأعلى.

على سبيل المثال ، ذكر Peep من CXL في الماضي أن نماذج العمود الفردي تعمل بشكل أفضل من النماذج ذات الأعمدة المزدوجة. قام بن لاباي (مصمم UX ومدير التسويق في Speero) بنشر دراسة أعلنت أن الأشكال الخطية أسرع ، وبالتالي أفضل.

لكن لا يتفق الجميع.

على سبيل المثال ، وضع Hubspot نموذج العمود الواحد على المحك واكتشف أن شكل العمود المزدوج تفوق في الأداء على شكل العمود الفردي بنسبة 57٪.

لماذا ا؟ المزيد من حقول النموذج.

يحتوي نموذج Hubspot على 13 حقلاً نموذجيًا ؛ بدا تخطيط العمود الواحد مروعًا وشعرت به. من المحتمل أن يكون السبب وراء تحويل النموذج الأقصر ذي العمود المزدوج إلى أعلى.

فائدة: عندما يتعلق الأمر بتخطيط النموذج ، ضع في اعتبارك عدد حقول النموذج قبل تحديد خيار.

إذا كان لديك ثمانية حقول نموذج أو أقل ، فقد يعمل النموذج أحادي العمود بشكل أفضل. يوجد الكثير من الأدلة التي تثبت أن النماذج الأقصر ذات العمود الواحد أسهل وأسرع في التعبئة لأنها لا تعطل الزخم الرأسي من أعلى إلى أسفل.

إذا كان لديك أكثر من 10 حقول نموذج مثل Hubspot ، فمن المحتمل أن يكون أداء نموذج العمود المزدوج أفضل. في هذه الحالة ، فإن نموذج العمود المزدوج يجعل طول النموذج أقصر وأقل إرهاقًا.

للحصول على أفضل ما في العالمين ، جرب نموذجًا مختلطًا: استخدم بعض صفوف العمود المزدوج لتقصير النموذج ، ولكن بعض الصفوف أحادية العمود للحفاظ على استمرار الزخم.

وإذا كنت تريد حقًا زيادة تحويلات النموذج ، ففكر في نموذج عمود واحد مقسم إلى خطوات متعددة. هذا يقودنا إلى النقطة التالية ...

نموذج متعدد الخطوات (AKA The Breadcrumb Technique) يقسم النماذج الطويلة إلى خطوات متعددة ، كل خطوة لا تزيد عن 3-4 حقول نموذج (يفضل أن يكون ذلك في عمود واحد).

لكن هذا ليس كل شيء.

تستخدم النماذج متعددة الخطوات علم النفس السلوكي لتحويل التوقعات الدقيقة من مرحلة إلى أخرى عن طريق طرح أسئلة سهلة أولاً ، وحفظ الأسئلة المخيفة للأخير.

هاه؟

يخبرنا علم النفس السلوكي أن الناس يحبون إنهاء الأشياء التي بدأوها. سحر تقنية Breadcrumb هو جعلهم يبدؤون بطرح أسئلة الكرة اللينة أولاً.

على سبيل المثال ، يستخدم نموذج العميل المحتمل الخاص بنا نموذجًا متعدد الخطوات مقسمًا إلى أربع خطوات. ولكن بدلاً من طلب عنوان بريد إلكتروني ورقم هاتف أولاً (أمر مخيف للغاية) ، نطلبه أخيرًا. في الواقع ، تطرح الخطوات الثلاث الأولى أسئلة غير مهددة:

نتائج؟ المزيد من التحويلات.

لنلق نظرة على البيانات ...

قمنا بتحويل النموذج الخاص بعميلنا إلى خطوتين (وطلبنا الاسم ، الهاتف ، البريد الإلكتروني الأخير). وبذلك حققنا:

• انخفاض تكلفة الاكتساب من 800 دولار أمريكي إلى 35 دولارًا أمريكيًا
• زيادة حجم التحويل من 6 إلى 135 / شهر
• زيادة معدل التحويل من 1٪ إلى ما يقرب من 20٪

هذا هو النموذج:

وهنا النتائج:

لقد فعلنا الشيء نفسه مع عميل آخر وحققنا زيادة بنسبة 74٪ في التحويلات بالإضافة إلى انخفاض بنسبة 51٪ في تكلفة الاكتساب.

لكننا لسنا الوحيدين الذين يستخدمون نماذج متعددة الخطوات. يستخدم أفضل جيل من العملاء المحتملين وصفحات SaaS المقصودة جميعها أشكالًا متعددة الخطوات أيضًا.

على سبيل المثال ، يستخدم تتبع المركبات Lytx نموذجًا متعدد الخطوات على صفحتهم المقصودة:

ويستخدم ADP نموذجًا متعدد الخطوات على صفحته المقصودة:

فائدة: الحالات الوحيدة التي لم يتم فيها تحويل النماذج متعددة الخطوات أعلى من النماذج ذات الخطوة الواحدة كانت العروض منخفضة القيمة ومنخفضة الطلب مثل الأدلة أو الأوراق البيضاء أو الكتب الإلكترونية. لكل صفحة مقصودة قياسية أخرى لإنشاء قوائم العملاء المحتملين (أي طلب استشارة مجانية أو عرض توضيحي) ، تقوم النماذج متعددة الخطوات بتحويل أعلى من النماذج ذات الخطوة الواحدة.

إذا اخترت النماذج متعددة الخطوات ، فلا تنس مؤشرات التقدم (خاصة بالنسبة للنماذج الأطول).

مؤشرات التقدم (أو أشرطة التقدم) ، كما يوحي الاسم ، تستخدم العلامات المرئية لتوضيح للزوار مكانهم في النموذج والمدة المتبقية لديهم حتى الاكتمال.

على سبيل المثال ، يشير ADP إلى التقدم عن طريق ترقيم كل خطوة في النموذج وتمييز الخطوة الحالية باللون الأزرق:

هناك نوعان آخران من أشرطة التقدم يشتملان على النسبة المئوية للاكتمال والخطوات المصنفة (بدون أرقام):

النسبة المئوية للاكتمال

عدد الخطوات المتبقية (بدون أرقام)

فائدة: عندما يتعلق الأمر بمؤشرات التقدم ، استخدمها بسخاء. أظهرت الدراسات أن تصور مسار واضح للإنجاز يمكن أن يزيد تحويلات النموذج ويقلل من هجر عربة التسوق. أخيرًا ، لا تنسَ جعل التبديل بين الخطوات أمرًا سهلاً.

سؤال المليون دولار: كم عدد حقول النموذج التي يجب عليّ تضمينها في نماذج الصفحة المقصودة الخاصة بي؟

وفقًا لـ Hubspot ، يتكون الشكل العام النموذجي للرصاص من خمسة حقول نموذجية:

ووفقًا لـ Hubspot مرة أخرى ، فكلما زاد طول النموذج ، انخفضت التحويلات:

يبدو منطقيًا ، أليس كذلك؟

ليس بهذه السرعة.

نعم ، صحيح أن الحقول ذات النموذج الأقصر تؤدي عادةً إلى تحويلات أعلى - ولكن ليس دائمًا.

على سبيل المثال ، في تجربة شهيرة قام بها مايكل أجارد (المعروف سابقًا باسم Unbounce) ، اكتشف أن إزالة ثلاثة حقول نموذجية (من 9 إلى 6) قللت في الواقع التحويلات بنسبة 14٪.

ماذا حدث؟ خلص مايكل إلى أن الحقول الثلاثة التي أزالها كانت في الواقع المجالات الثلاثة التي تشارك فيها أكثر من غيرها. لذلك أضافهم مرة أخرى ، وقام بتحديث النسخة للحد من الاحتكاك بدلاً من ذلك ، وشهد زيادة في التحويلات بنسبة 19٪ فوق النسخة الأصلية.

في مثال آخر ، اكتشفت CXL أنه بمجرد طلب بريد إلكتروني ، كانت التحويلات أقل بنسبة 13.56٪ مما كانت عليه عندما طلبوا أيضًا الاسم والحالة وتجربة القيادة:

عندما يتعلق الأمر بتوليد العملاء المحتملين ، إذا كان كل ما تفعله هو إلغاء حقول النموذج ، فما الذي يتبقى لآفاقك؟

إما لا شيء سوى أسئلة مخيفة مثل الاسم ورقم الهاتف والبريد الإلكتروني. في هذه الحالة ، الخوف وحده يمكن أن يفقدك التحويلات.

أو لا توجد أسئلة كافية لجعل العملاء المحتملين يشعرون وكأنك ستجيب على أسئلتهم بشكل صحيح.

علاوة على ذلك ، قد تؤدي النماذج الأقصر إلى زيادة التحويلات عن طريق تقليل حقول النموذج ولكنها تقلل من جودة العميل المحتمل في نفس الوقت. لا بوينو.

فائدة: يتفق الجميع على أنه يجب عليك حذف حقول النموذج غير الضرورية (أي الأسئلة التي لا تحتاج إلى إجابات عليها). ما إذا كان يجب عليك إضافة المزيد من الحقول أم لا أو حذف الحقول يأتي إلى السياق.

• الحافز: يكون الدافع الأقرب للشراء أكثر ميلًا لملء النماذج الأطول لأن لديهم دافعًا كبيرًا للشراء (أي لن يقف أي شيء في طريقهم). على سبيل المثال ، إذا كنت أريد تقديرًا لقرض الرهن العقاري ، فسأقوم بملء 20 حقلاً نموذجيًا لاستلامه. ليس كثيرا لكتاب الكتروني مجاني.
• هدف التحويل: يتطلب اشتراك البريد الإلكتروني أو التسجيل في ندوة عبر الإنترنت عند الطلب حقولاً أقل بكثير من نموذج إنشاء العملاء المحتملين. هدفان مختلفان ، حجمان مختلفان للشكل. لا حاجة إلى الاشتراك في بريد إلكتروني بسيط متعدد الخطوات.
• جودة العميل المتوقع: إذا كانت جودة العميل المتوقع تهم أكثر من حجم العميل المتوقع ، فأضف المزيد من حقول النموذج واجمع المزيد من المعلومات. ولكن إذا كانت جودة العملاء المحتملين لا تهم أكثر من حجم العملاء المتوقعين (أي أنك تجمع بيانات الطرف الأول لبناء جمهور إعلان مخصص) ، فسيقل عدد حقول النموذج لتحقيق الفوز.
• الهيكل: إذا كنت تقدم طلبًا جادًا ، مثل جدولة عرض توضيحي أو مقابلة مندوب مبيعات ، فإن النموذج متعدد الخطوات يشبه رمز الغش. يمكنك الابتعاد عن طرح المزيد من الأسئلة ببساطة عن طريق تقسيمها إلى خطوات أصغر.

أخيرًا ، تواصلنا مع Oli Gardner ، الرئيس التنفيذي ومؤسس Unbounce ، للحصول على ملاحظاته حول طول النموذج. هذا ما قاله:

"لقد بدأت بنفس العقلية التي يمتلكها معظم الناس ، وهي أن عددًا أقل من الحقول النموذجية تؤدي بشكل أفضل.

من وجهة نظر التحويل ، لا يزال هذا صحيحًا. لكنك ستندهش من كيفية تأثير إضافة المزيد من الحقول على النتائج.

أحيانًا لا يُحدث طول النموذج فرقًا كبيرًا ، وإذا كنت مهتمًا بالجودة على الكمية ، فقد يكون الاحتكاك الإضافي أمرًا جيدًا.

لكن اختر هذه الحقول بعناية ، أو سيؤدي الاحتكاك إلى إنشاء بيانات خاطئة.

على سبيل المثال ، رأيت نموذجًا يقدم تقريرًا حول تقنية دفع برقاقة إلكترونية جديدة ورقم التعريف الشخصي. احتوى النموذج على حقل زر اختيار بجوار عبارة الحث على اتخاذ إجراء التي تسأل عما إذا كنت صاحب عمل أو باحث عن عمل ، ولم يكن لأي منهما أي صلة بالعرض - وكان حقلاً مطلوبًا!

الأسئلة غير الضرورية ستجعل بعض الأشخاص يهربون ، والباقي ببساطة ينقرون بشكل عشوائي لتجاوز السؤال ، مما يؤدي إلى تلويث البيانات وجعلها عديمة القيمة ".

تشير تسميات الحقول إلى الصورة المصغرة أعلاه أو الجانب أو داخل حقل النموذج الذي يشير إلى اسم كل حقل نموذج ذي صلة.

على سبيل المثال ، في النموذج أدناه ، تُقرأ علامتا الحقل "البريد الإلكتروني" و "كلمة المرور" (يتم وضعهما أعلى حقول النموذج):

عندما يتعلق الأمر بوضع الملصقات ، لديك ثلاثة خيارات رئيسية:

• في الأعلى (بمحاذاة إلى اليسار)
• مضمنة (محاذاة إلى اليسار)
• يسار الحقل (محاذاة إلى اليمين)

دعونا نراجع كل منها.

في الأعلى (بمحاذاة إلى اليسار)

يتم وضع الملصق فوق مربع حقل النموذج ويتم دفعه لليسار.

على سبيل المثال ، نموذج إنشاء حساب SEMRush الذي عرضناه للتو (أعلاه) يضع تسميات النموذج أعلى الحقول ، محاذاة إلى اليسار.

عندما يتعلق الأمر بالتحويلات ، تظهر الأبحاث أن التسميات المحاذية لليسار أعلى حقل النموذج تحول أعلى مستوى. لماذا ا؟ لأنها الأسهل والأسرع لملءها.

على سبيل المثال ، باستخدام برنامج تتبع العين ، يمكنك أن ترى أن التسميات المحاذية لليسار أعلى حقل النموذج تجعل أعين الزائر مركزة على حقول النموذج والتسميات ذات الحمل المعرفي المحدود:

مضمنة أو "تحت الأرض" (محاذاة إلى اليسار)

يتم وضع الملصق داخل مربع حقل النموذج ويتم دفعه لليسار.

على سبيل المثال ، يضع نموذج Bob HR أدناه تسميات الحقول داخل مربع الحقل:

تعمل تسميات الحقول المضمنة بشكل جيد مع نماذج قصيرة مثل هذه ، خاصةً إذا كنت تطلب فقط معلومات أساسية مثل الاسم أو رقم الهاتف.

ولكن بالنسبة للنماذج الأطول التي تحتوي على حقول نموذج أكثر تعقيدًا ، فإن النماذج المضمنة تخلق كابوسًا لتجربة المستخدم ، خاصة على الهاتف المحمول.

لماذا ا؟

بمجرد النقر فوق مربع ، تختفي التسمية. إذا نسيت ما قاله الملصق ، فإن الطريقة الوحيدة لمعرفة ذلك مرة أخرى هي حذف الإدخال بالكامل والبدء من جديد. ييكيس.

يسار الحقل (محاذاة إلى اليمين)

يتم وضع التسمية على يسار مربع الحقل (خارجه).

على الرغم من أنها ليست فعالة مثل الملصقات الموضوعة أعلى حقول النموذج (لأن الزائرين يحتاجون إلى تحريك أعينهم من اليسار إلى اليمين ، لأعلى ولأسفل) ، فإن الملصقات الموضوعة على يسار حقول النموذج تتطلب حملًا معرفيًا محدودًا أيضًا.

فائدة: ضع ملصقات الحقول أعلى حقول النموذج (بمحاذاة إلى اليسار) للحصول على أفضل النتائج. وإذا كنت تريد أفضل ما في العالمين ، فجرب تسميات النماذج المضمنة التي تنتقل إلى أعلى حقل النموذج بمجرد أن يبدأ شخص ما في الكتابة ، مثل هذا:

بغض النظر عن الخيار الذي تختاره ، انتبه لما يلي:

• استخدم تسميات النص العادي: قد تبدو الملصقات الغامقة جذابة ، لكن قراءتها أصعب
• مسافة بيضاء: تأكد من وجود مساحة بيضاء كافية بين حقول النموذج والتسميات
• محاذاة النص: لتقليل الحمل المعرفي ، قم بمحاذاة النص إلى اليمين عند وضع تسميات الحقول على يسار الحقول ، ومحاذاة النص إلى اليسار عند وضع تسميات الحقول في الأعلى أو في السطر
• القرب: مهما فعلت ، احتفظ بالعلامات القريبة من حقول النموذج الخاصة بها

نص العنصر النائب هو تلميح أو وصف أو مثال يتم وضعه داخل حقل النموذج (عادةً ما يكون باللون الرمادي الفاتح) ويختفي بمجرد أن يبدأ شخص ما في الكتابة. نص العنصر النائب هو تمامًا مثل التسمية المضمنة ، فقط بدلاً من اسم التصنيف ، إنه مثال على إرسال فعلي.

على سبيل المثال ، يستخدم Oscar نصًا نائبًا داخل كل حقل من حقول نموذج التقاط العميل المتوقع:

تؤكد الدراسة بعد الدراسة أن استخدام نص العنصر النائب المضمّن يخلق تجربة مستخدم سيئة ويقلل من تحويلات النموذج.

لماذا ا؟ إنه عبء غير ضروري حقًا.

• مثل التسميات المضمنة ، يختفي نص العنصر النائب بمجرد بدء الكتابة ، مما يجبر الزائرين على حذف إدخالهم إذا نسوا نص تلميح العنصر النائب
• إذا ظهرت رسالة خطأ ، فإن الزائرين لا يعرفون كيفية إصلاح المشكلة
• العناصر النائبة المضمنة تجعل الحقول الفارغة أقل وضوحًا. أظهرت برامج تتبع العين أن عيون الناس تنجذب إلى الصناديق الفارغة ، وليس الصناديق المملوءة
• يؤدي تباين الألوان الضعيف إلى صعوبة قراءتها ، خاصةً لضعاف البصر

ماذا تفعل بدلا من ذلك؟

إذا كنت تشعر بالحاجة إلى تقديم إرشادات لكل نموذج (مما قد يكون منطقيًا تمامًا) ، فضع الإرشادات أسفل تسميات الحقول ولكن في أعلى حقل النموذج. علي سبيل المثال:

مشغل النقر هو عبارة عن قطعة قصيرة من نسخة جذابة موضوعة تحت أو حول نموذج الحث على اتخاذ إجراء أو زر الإرسال المصمم للقضاء على الشك وحث الزائرين على التحويل.

على سبيل المثال ، تستخدم صفحة Lusha المقصودة تقييمها بالنجوم وإجمالي عدد المراجعات ، جنبًا إلى جنب مع "لا توجد بطاقة ائتمان مطلوبة" لتذكير الزائرين لماذا يجب عليهم الضغط على الزر "ابدأ مجانًا".

أو هذا المثال الأقدم من ContentVerve شهد زيادة بنسبة 87٪ في اشتراكات الرسائل الإخبارية عبر البريد الإلكتروني عن طريق إضافة بعض النقاط ذات الصلة بالمزايا إلى نموذج الاشتراك الخاص بهم:

فائدة: استخدم مشغلات النقر لتوقع ومعالجة اعتراضات العميل المحتمل حول ما هو موجود على الجانب الآخر من النموذج الخاص بك.

Microcopy هو مصطلح واسع يشير إلى المقتطفات الصغيرة من النسخة الموجودة في النموذج الخاص بك والمستخدمة لإرشاد الزائرين أو إعلامهم.

من الناحية الفنية ، تعد مشغلات النقر وتسميات الحقول والعناصر النائبة أمثلة على النسخ المصغرة للنماذج ، ولكن في هذه الحالة ، نتحدث على وجه التحديد عن النسخ المصغر الذي يساعد في تقليل الاحتكاك من خلال إخبار الزائرين لماذا تحتاج إلى أجزاء معينة من المعلومات أو كيف تريد استخدمه.

بالرغم من ضآلة وجوده ، إلا أن الفحص المصغر يمكن أن يكون له تأثير كبير على تحويلات النموذج.

على سبيل المثال ، يوجد أدناه مثال لنسخة مصغرة للنموذج تخبر الزائرين عن سبب حاجتهم إلى رقم هاتف لإكمال عملية شراء التجارة الإلكترونية (نظرًا لأن الكثيرين قد يجدون هذه المعلومات غير ضرورية ويتخلى عنها):

نوع آخر شائع من النسخ المصغر يتكون من رسائل خطأ مثل الرسالة أدناه:

هل microcopy تحويل؟ تتحدى.

على سبيل المثال ، نظرًا لأن التكلفة هي السبب الأول لتخلي الأشخاص عن عربات التسوق ، فقد أضاف Yoast عبارة "لن تكون هناك تكاليف إضافية" إلى نموذج الدفع وزاد التحويلات بنسبة 11.30٪.

أو هذا المثال من مصمم UX سابق لـ Hubspot اكتشف أن المعاملات لم تكتمل لأن الأشخاص كانوا يدخلون عناوين خاطئة. من خلال إضافة سطر واحد من النسخ المصغرة ، أدى إلى زيادة تحويلات النماذج بشكل كبير (وخفض تكاليف دعم العملاء).

فائدة: لا يعرف الزوار دائمًا سبب حاجتك إلى المعلومات ، أو كيف ستستخدم المعلومات ، أو أهمية إدخال المعلومات الصحيحة ما لم تخبرهم بذلك. قم بإدخال النسخ المصغر كجزء من واجهة النموذج للتحوط ضد التوقعات المحيرة أو المتخوفة.

لا يوجد نموذج كامل بدون عبارة CTA مقنعة ومغرية تحفز على اتخاذ إجراء.

عندما يتعلق الأمر بتشكيل أزرار الحث على اتخاذ إجراء ، هناك شيئان مهمان فوق كل شيء آخر: النسخ والتباين.

أولاً ، عبارات CTA العامة مثل الإرسال أو الإرسال أو البدء أو الدفع أو التنشيط هي ما نسميه "أزرار الجهد" ؛ تجعل الزائرين يشعرون وكأن شيئًا شاقًا ينتظرنا. تجنب بأي ثمن.

بدلاً من ذلك ، اختر الأزرار القائمة على القيمة مثل الاستلام أو الحصول عليها أو الاستمتاع بها أو عرضها أو اكتشافها ، وكل ذلك يجعل الزائرين يشعرون وكأنهم مكافأة (وليس مجهودًا) تنتظر على الجانب الآخر من النموذج.

على سبيل المثال ، يقدم جارفيس CTA واضحة ومقنعة وعملية المنحى لا يسعك إلا النقر فوقها:

هل أنت مهتم بالمزيد؟ لدينا 61 فكرة إضافية للأزرار القائمة على القيمة.

وثانيًا ، زيادة تحويلات النموذج لا علاقة لها بلون الزر وتتعلق أكثر بتباين ألوان الزر والخلفية.

على سبيل المثال ، في دراسة الحالة هذه من عميلنا Darwin Homes ، ساعد اختبار A / B على لون زر CTA في تقليل تكلفة الاكتساب بنسبة 45٪ وزيادة معدل التحويل بنسبة 22٪.

نصيحة: أضف فائدة واضحة إلى نسخة CTA لزر النموذج (وتجنب عبارات CTA العامة تمامًا) ، وتأكد من أن الزر يلفت الانتباه عن طريق تباينه مع الخلفية.

هل تتذكر عندما تحدثنا عن النماذج متعددة الخطوات وكيف تقوم بتحويل الزوار من مرحلة إلى أخرى عن طريق تسهيل بدء النموذج؟

الأمر نفسه ينطبق على زر النموذج الخاص بك.

بدلاً من تضمين نموذج داخل صفحتك المقصودة ، جرب وضع زر CTA في مكانه ، ثم فتح النموذج في مربع ضوئي منبثق أو إرسال حركة المرور إلى صفحة التحويل بمجرد النقر فوقها.

في دراسة Aweber ، اكتشفوا أن وضع شكلهم خلف زر منبثق بدلاً من تضمينه على الصفحة المقصودة أدى إلى زيادة التحويلات بنسبة هائلة بلغت 1،375٪.

في دراسة Hubspot ، اكتشفوا أن استبدال النموذج الخاص بهم بزر حث على اتخاذ إجراء أدى إلى صفحة مخصصة للاشتراك أدى إلى زيادة معدلات التحويل بنسبة 0.4٪ (من 2.4٪ إلى 2.8٪). قد لا يبدو هذا كثيرًا ، ولكن على مدار آلاف الزيارات ، يصل هذا إلى مئات التحويلات الإضافية.

على سبيل المثال ، يضع كل من Intercom و AllHands (أدناه) نموذج الصفحة المقصودة خلف زر منبثق:

الوجبات الجاهزة : كما هو الحال دائمًا ، اختبر كل شيء. لكن إخفاء شكل مخيف خلف زر سيجعل من السهل على الزائرين اتخاذ الخطوة الأولى. وبمجرد أن نتخذ الخطوة الأولى ، يكون لدينا نزعة أعلى لاتخاذ الخطوة التالية .

تشير نماذج الملء التلقائي إلى النماذج التي تستخدم بيانات متصفح الزائرين لملء الحقول تلقائيًا (أو الإكمال التلقائي) مثل الاسم ورقم الهاتف ومعلومات بطاقة الائتمان والعنوان ، بدلاً من إجبار الزوار على ملئها بأنفسهم.

وفقًا لـ Google ، يمكن أن يؤدي الملء التلقائي إلى ملء النماذج الخاصة بك بسرعة تصل إلى 30٪ ، وبالتالي زيادة التحويلات على طول الطريق.

فائدة: لا أحد يحب ملء نموذج ويب ، خاصةً على الأجهزة المحمولة. استخدم الملء التلقائي لتقليل الاحتكاك وزيادة التحويلات.

هل سبق لك أن ملأت نموذجًا لتكتشف أنك نسيت وضع أقواس حول رمز منطقتك أو أنك أضفت مسافات كثيرة جدًا بين أرقام بطاقات الائتمان - إذن كان عليك البدء من جديد؟

نفس.

لتسهيل ملء النماذج (ولتقليل الحمل المعرفي والحد من أخطاء التنسيق) ، لا تجعل العملاء المحتملين يخمنون ما إذا كانوا بحاجة إلى إضافة شرطة أو أقواس أو فاصلة أو شرطة مائلة أو لا شيء: تنسيق تلقائي للحقول بحيث لا بغض النظر عن كيفية كتابة الزوار للمعلومات ، فإن التنسيق يصحح نفسه من تلقاء نفسه.

على سبيل المثال ، يقوم حقل النموذج هذا تلقائيًا بتنسيق القيمة بالدولار عند إضافة المزيد من الأرقام:

والأفضل من ذلك ، يمكنك استخدام ميزة تسمى "إخفاء النص" والتي لن تقوم فقط بتنسيق القيم تلقائيًا بشكل صحيح ولكنها ستوفر أيضًا عناصر نائبة مضمنة تخبرك بالمقدار الذي تحتاج إلى إدخاله.

الوجبات الجاهزة: استخدم التنسيق التلقائي للتواريخ أو أرقام الهواتف أو أرقام بطاقات الائتمان أو أي قيمة عددية أخرى (مثل السعر والدخل) التي قد تتطلب تنسيقًا معينًا. لن يؤدي فقط إلى تقليل أخطاء التنسيق وزيادة التحويلات ، ولكنه سيضمن أيضًا أن بيانات إرسال النموذج ستبدو كما هي.

يشير الدليل الاجتماعي إلى مراجعات الجهات الخارجية أو الشهادات أو تقييمات النجوم أو أي شارة أخرى ذات مصداقية تشير إلى نجاح أشخاص آخرين في منتجاتك أو خدماتك.

لماذا الدليل الاجتماعي مهم؟ يقول 66٪ من العملاء أن وجود دليل اجتماعي زاد من احتمالية شرائهم.

لماذا يعمل الدليل الاجتماعي بشكل جيد؟ لأنه عندما يكون لدى الناس شكوك حول الالتزام أو عدم اليقين بشأن الاختيار ، فإنهم يبحثون عن الإلهام من الأشخاص الذين اتخذوا نفس الاختيار بالفعل. وفي أغلب الأحيان ، يختارون ما يختاره الآخرون.

إذا كنت تعتقد أنك بحاجة إلى دليل اجتماعي فقط على صفحتك المقصودة الفعلية ، ففكر مرة أخرى.

ضع دليلًا اجتماعيًا مثل تقييمات النجوم أو الشهادات أو شعارات العميل بالقرب من النماذج الخاصة بك أو حولها لتذكير الأشخاص بأنهم يتخذون القرار الصحيح.

بالنسبة لصفحات النقر على وجه الخصوص (أي الصفحات المقصودة التي تقوم بالنقر للوصول إلى صفحة التحويل مثل صفحة الخروج أو صفحة إنشاء الحساب) ، ضع دليلًا اجتماعيًا بجوار النموذج أيضًا.

على سبيل المثال ، يضع جارفيس عدد العملاء وشعارات العميل بجوار نموذج إنشاء الحساب الخاص بهم:

يتميز InvisionApp أيضًا بإثبات اجتماعي بجوار النموذج ، وهذه المرة في شكل شهادة من أحد عملائه (Uber):

الوجبات الجاهزة: دليل اجتماعي من Pepper حول النموذج الخاص بك أو بالقرب منه لتذكير الزائرين لماذا يجب عليهم الاستمرار.

إذا لم يكن حقل النموذج مطلوبًا ، فاسأل نفسك ما إذا كنت تحتاجه بالفعل أم لا ، لتبدأ به. إذا لم تقم بذلك ، فقم بإزالة الحقول غير الضرورية تمامًا.

ومع ذلك ، إذا كنت ترى أن الحقل الاختياري ضروريًا وتحتاج إلى وضعه جنبًا إلى جنب مع الحقول المطلوبة ، فاتبع أفضل الممارسات التالية:

• قم بتسمية الحقول المطلوبة بعلامة النجمة الحمراء: هل يجب أن تكون علامة النجمة حمراء؟ لا. ولكن علامة النجمة الحمراء هي المعيار للحقول المطلوبة ، وسيتوقعها المستخدمون.
• ضع العلامات النجمية على يسار الملصقات: بوضع العلامات النجمية قبل الملصقات ، يسهل على الزائرين مسح الجانب الأيسر من النموذج ، من أعلى إلى أسفل ، بحثًا عن الحقول المطلوبة.
• ضع في اعتبارك تسمية "مطلوبة": إذا كنت ترغب في إضافة تسمية "مطلوب" بالإضافة إلى علامة النجمة ، فمن الأفضل وضع النص خارج الحقل (أي أعلى حقل النموذج) بدلاً من تضمينه.
• قم بتسمية الحقول الاختيارية أيضًا: يمكن أن يساعد وضع العلامات على الحقول الاختيارية أيضًا في تقليل الحمل المعرفي لأن الزوار لن يحتاجوا إلى استنتاج الاختيارية ؛ بدلاً من ذلك ، سيخبرهم النموذج صراحةً. ليس ضروريًا ، ولكنه مكافأة لطيفة.
• تجنب عدم تسمية الحقول المطلوبة: في حالات معينة ، قد تعتقد أنه من غير الضروري تسمية الحقول المطلوبة. لا تفعل ذلك. دائما تسمية الحقول المطلوبة.

فائدة: لا يوجد شيء مثير في ما يتعلق بملصقات الحقول المطلوبة - ولهذا السبب بالتحديد لا يجب أن تكون لطيفًا معهم. وفقًا لقانون Jakob ، نظرًا لأن زوار موقعك على الويب يقضون معظم وقتهم على مواقع الويب الأخرى ، فإنهم يتوقعون أن يتبع موقع الويب الخاص بك نفس المبادئ الأساسية لتجربة المستخدم مثل أي شخص آخر. أي انحراف وأنت ترمي مفتاح الربط في نموذجهم العقلي.

يجب أن يذهب هذا دون قول ، ولكن نظرًا لأن أكثر من 50 ٪ من حركة المرور على الإنترنت تحدث الآن من جهاز محمول ، إذا لم يتم تحسين النموذج الخاص بك لشاشة أصغر (تستجيب للجوال) ، فمن المحتمل أنك تقوم بنزيف التحويلات.

كيف يبدو النموذج المحسن للجوال؟ ماذا عن أربع نقرات وانتقاد لحجز فندق؟

عندما يتعلق الأمر بتحسين النماذج للجوال ، تنطبق نفس القواعد التي أوضحناها للتو في هذه المقالة ، فقط تأثيرها يكون أكبر.

على سبيل المثال ، لا يتحلى الناس بصبر كبير على الملصقات الميدانية التي توضع بشكل سيئ على سطح المكتب ، لكنهم سيقطعونك فاصلًا لأنه من السهل معرفة ذلك والتنقل فيه على شاشة أكبر.

ومع ذلك ، عندما يتعلق الأمر بالجهاز المحمول ، يكون لدى الأشخاص قدر أقل بكثير من التسامح مع احتكاك قابلية الاستخدام نظرًا لأن الإبهام غير الملائم والشكل الصغير يجعل تجربة غير سارة بالفعل.

عند تصميم النماذج الخاصة بك للجوال ، قم بتطبيق نفس أفضل الممارسات التي أوضحناها بالفعل في هذه المقالة ، إلى جانب ما يلي:

• نص أكبر
• زر CTA أكبر
• مساحة بيضاء أكبر بين الحقول وحول الأزرار (بحيث يسهل لمسها)
• لا توجد قوائم منسدلة ، اختر أزرار الاختيار بدلاً من ذلك (تستغرق القوائم المنسدلة وقتًا أطول لملءها على الهاتف المحمول)
• اختر نموذجًا مضمنًا أو صفحة نموذج منفصلة فوق نافذة منبثقة

فائدة: تخطيطات العمود الواحد ، الخطوات المتعددة ، أشرطة التقدم ، الملء التلقائي ، تسميات الحقول ... كل هذا ينطبق على الهاتف المحمول أيضًا ، فقط على شاشة أصغر.

يسمح لك المنطق الشرطي بتخصيص تجربة النموذج بشكل ديناميكي بناءً على إجابات الزوار.

على الرغم من أن كل شخص سيبدأ النموذج على نفس السؤال ، اعتمادًا على كيفية إجابته ، فقد ينتهي الأمر عند نقطتين مختلفتين تمامًا.

يزيد المنطق الشرطي من التحويلات عن طريق تقصير النماذج وتقليل عدد الاختيارات لكل سؤال (أي استبعاد الخطوات غير الضرورية) وإنشاء تجربة نموذج أكثر تخصيصًا.

فائدة : لن يستفيد نموذج جنرال الرصاص الأساسي من المنطق الشرطي لأنه لا يتطلب معلومات شخصية كافية. ولكن بالنسبة للأشكال الأطول ، أو نماذج الطلبات ، أو النماذج المؤهلة الرئيسية ، يمكن للمنطق الشرطي أن يحول كابوسًا من النموذج إلى تجربة ممتعة.

كلما قل حاجة الزائرين إلى العمل لملء النموذج الخاص بك ، زادت احتمالية قيام المزيد منهم بملئه. فترة.

وفقًا لـ CXL ، بعد إجراء اختبار لمعرفة ما إذا كان ملء أزرار الاختيار أو القوائم المنسدلة أسهل أم لا ، اكتشفوا أن المستجيبين ملأوا أزرار الاختيار 2.5 ثانية أسرع من القوائم المنسدلة.

مثل أزرار الاختيار ، من السهل أيضًا ملء مربعات الاختيار.

ماهو الفرق؟ تستخدم أزرار الاختيار عندما تكون الخيارات المتعددة حصرية بشكل متبادل (على سبيل المثال ، يمكنك تحديد خيار واحد فقط) ، وتكون مربعات الاختيار عندما يمكنك تحديد أكثر من خيار واحد.

اعتدنا أيضًا على استخدام القوائم المنسدلة في نموذجنا متعدد الخطوات ، ثم استبدلنا القوائم بخانات الاختيار. الآن ، ليس من الأسهل والأسرع ملء النموذج (خاصة على الهاتف المحمول) فحسب ، بل نحصل أيضًا على المزيد من التحويلات.

الوجبات الجاهزة: في معظم الحالات ، اختر أزرار الاختيار أو مربعات الاختيار على القوائم المنسدلة. ومع ذلك ، مارس الفطرة السليمة. إذا كان لديك العشرات من الخيارات ، مثل ، على سبيل المثال ، تحديد ولاية أو دولة ، فليس من المنطقي تضمين أكثر من 50 زر اختيار (وهذا لا يقلل العبء المعرفي لأي شخص). بدلاً من ذلك ، اختر القائمة المنسدلة.

على الرغم من مجموعة الأدلة التي تدعم العناصر المذكورة أعلاه لنموذج صفحة مقصودة عالية التحويل ، لا يزال يتعين عليك اختبارها بنفسك.

لتسهيل الحياة ، من المفيد تكوين تحليلات أيضًا.

هذا صحيح ، التحليلات الفعلية التي يمكن أن تقيس سلوك المستخدم أثناء اجتياز النموذج متعدد الخطوات.

بعض أدوات تحليل النماذج المفضلة لدينا:

• MouseFlow
• زوكو
• هوتجار
• MonsterInsights (ملحق WP)

قم بإنشاء قالب نموذج الصفحة المقصودة باستخدام أفضل الممارسات التي حددناها في هذه المقالة. ثم اعتمد على تحليلات النموذج لفضح أي تسريبات. ثم اختبر رقع مختلفة. هاهو.

ومهما فعلت ، احتفظ بهذه الحقول الاختيارية خارج النموذج الخاص بك ما لم تكن بحاجة إليها حقًا (بالنظر إليك ، Expedia).