9 نصائح مهمة لتصميم CTA للأزرار التي تجعل الناس ينقرون

نشرت: 2022-08-27
وقت القراءة: 10 دقائق

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

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

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

  1. اجعل الزر يبدو قابلاً للنقر
  2. كن وصفيًا بنسختك
  3. الحجم والمساحة بشكل صحيح
  4. تواصل باستخدام الشخص الأول
  5. خلق الاستعجال واستخدام الأفعال القوية
  6. جرب عنوان فرعي
  7. اختلافات اختبار A / B
  8. انتبه إلى إصدار الهاتف المحمول

اجعل زر الحث على الشراء يبدو قابلاً للنقر

يبدو أن جعل الزر يبدو "قابلاً للنقر" أمرًا سخيفًا. لكنك لن تصدق عدد المرات التي أخطأت فيها المواقع. ويتعلق الأمر في الغالب بمخطط الزر ولونه.

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

المرة الوحيدة التي يعمل فيها هذا التصميم عادةً هي زر ثانوي:

زر شبح واحد لأن CTA الرئيسي سيئ. يعد استخدامه كزر ثانوي للزر الرئيسي ممارسة جيدة.

المصدر: UX Movement

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

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

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

تستخدم Netflix توقيعها الأحمر للفت انتباهك. تقريبا مثل علامة توقف:

يستخدم Netflix زر CTA أحمر "البدء" بجوار مربع عنوان البريد الإلكتروني.

يمكن أن يعمل أيضًا للحصول على لون متباين ، لذلك يبرز. مثل ما قامت به منصة التجارة الإلكترونية BigCommerce هنا:

"7 استراتيجيات للبيع بالتجزئة للتغلب على هضبة النمو" بنص أبيض بخلفية بحرية. زر CTA أزرق فاتح بجواره مع نص أبيض يقول "تنزيل الدليل".

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

يمكن أن تعمل التدرجات أيضًا ضمن نفس نظام ألوان العلامة التجارية. يمنحون الأشياء شعورًا عصريًا أكثر شبابًا:

زر CTA متدرج أرجواني إلى أرجواني مع نص أبيض يقول "ابدأ" مقابل خلفية البحرية.

المصدر: الاثنين

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

كن وصفيًا بنسختك

تعد كتابة الإعلانات إحدى أبسط أساليب تحسين معدل التحويل (CRO). ولكن ليس فقط مع أجزاء كبيرة من النص. يعتبر Microcopy بنفس الأهمية ويغطي التفاصيل الأصغر.

عادة ما تراه في نماذج الاتصال وأشرطة تحديث حالة الوسائط الاجتماعية. مثل صفحة Facebook الشهيرة "ما الذي يدور في ذهنك؟" أو "بدء منشور" على LinkedIn.

يمكن أن يساعد الفحص المصغر في:

  • أخبر المستخدمين بما يجب عليهم فعله
  • تقديم الاقتراحات
  • معالجة المخاوف
  • قدم السياق

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

يستخدم هذا ليكون زر IMPACT's CTA. "تنزيل مجاني". ليس مبدعًا جدًا ، إيه؟

المصدر: IMPACT

ولكن بجعلها أكثر وصفية ، زادت التحويلات بنسبة 78.5٪. من الواضح أن عبارة "أرني كيفية جذب المزيد من العملاء" كانت جذابة أكثر:

من المغري أن تكتب "انقر هنا". ولكن هناك العديد من البدائل التي من شأنها إشراك المستخدمين ونأمل أن تكون مصدر إلهام للإجراء المطلوب.

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

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

المصدر: KlientBoost

ثم تحتاج إلى التأكيد على قيمة ما تقدمه. والتعامل مع أي اعتراضات.

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

المصدر: أمثلة تسويقية

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

الحجم المناسب واستخدام المساحات البيضاء

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

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

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

خلفية سوداء مع عنوان أبيض في المنتصف "افتح بابك للاستضافة". أسفل زر حث على الشراء باللون الوردي مكتوب عليه "جرِّب الاستضافة".

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

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

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

إذا كنت عرضة للصداع النصفي ، فابحث الآن. إليك مثال على كيفية عدم القيام بذلك:

صفحة مقصودة مزدحمة للغاية تحتوي على نصوص وأزرار في كل مكان حول مقارنات الرحلات البحرية.

المصدر: Justinmind

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

في المقابل ، ما هو أول شيء تراه على صفحة Spotify المقصودة؟

زر "Go Premium" الضخم ، أليس كذلك؟ هذه هي كيفية تصميم مسار مستخدم واضح.

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

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

المصدر: CleverTap

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

تواصل باستخدام الشخص الأول

يمكن أن يكون تصميم CTA الأفضل على بعد قرص واحد. احيانا كلمة واحدة

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

اكتشف Unbounce أن تغيير النسخة الموجودة على صفحتها المقصودة من "بدء الإصدار التجريبي المجاني لمدة 30 يومًا" إلى "بدء الإصدار التجريبي المجاني لمدة 30 يومًا" أدى إلى زيادة معدلات النقر إلى الظهور بنسبة 90٪.

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

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

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

بالإضافة إلى ذلك ، يمكن أن تظهر أنهم سيحصلون على قيمة فورية. مثل على الصفحة الرئيسية ل Crazy Egg:

"اعرض لي خريطة التمثيل اللوني"

المصدر: Crazy Egg

1-800 جهات الاتصال هو أكبر متجر للعدسات اللاصقة في العالم. لكنهم يفعلون نفس الشيء. يتأكدون من أن أزرار الحث على الشراء تستهدف شخصًا واحدًا فقط:

"البحث عن جهات الاتصال الخاصة بي / إعادة ترتيب جهات الاتصال الخاصة بي"

المصدر: 1-800 جهة اتصال

لا تستخدم الكثير من الشركات هذه التقنية. مما يعني أنها تبرز عندما تراها. لذا ، لماذا لا تجربها؟

اخلق إحساسًا بالإلحاح واستخدم أفعالًا قوية

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

"اشتر الآن" هو كلاسيكي. ولكن يمكننا أن نفعل ما هو أفضل من ذلك من خلال تصميم CTA الخاص بنا.

"ابدأ في رؤية النتائج اليوم! ابدأ الآن"

المصدر: GoSquared

يمكنك تجربة صياغة مثل:

  • "دلل نفسك اليوم"
  • "فتح الخصم الآن"
  • "تنزيل مجاني لمرة واحدة"

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

فيما يلي بعض الأمثلة لما أعنيه:

جرب هذا: بدلاً من هؤلاء:
يكتشف يسجل
الاتصال يُقدِّم
مطالبة يدفع
انضم مكتمل
بداية إرسال
يحفظ يستثمر
يكتشف اتصال
اكتشف الدعم

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

يمكنك أن تكون مبدعًا حقًا أيضًا. مثل هذا الإصدار من الصفحة الرئيسية لـ Huemor:

زر حث على اتخاذ إجراء مكتوب تحته "تشغيل" و "لا تضغط".

المصدر: FastCapital360

أو الصفحة المقصودة القديمة لمقاطعة هامبولت والتي تضفي عليها لمسة غامضة:

رسم لأرنب أبيض مكتوب عليه "اتبع السحر"

المصدر: ConEmprendimiento

تبادل الأفكار مع فريقك. مهما كانت سخيفة. ستندهش مما ستأتي به وينتهي بك الأمر باستخدامه. ولكن مهما كانت الصياغة التي تختارها ، لا تنسَ الوفاء بوعدك على الطرف الآخر.

جرب عنوانًا فرعيًا بجوار زر الحث على اتخاذ إجراء

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

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

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

"لماذا لا؟ إنه مجاني إلى الأبد"

المصدر: CoSchedule

يفهم CoSchedule أن المستخدمين قد يعتقدون أنها مجرد نسخة تجريبية مجانية. اذا لما لا؟ إنه مجاني إلى الأبد ".

يمكنك أيضًا استخدامها لإضافة بعض الأدلة الاجتماعية:

"تم تسجيل 2691 شركة في الأسبوع وحده!"

المصدر: Basecamp

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

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

"بالإضافة إلى ذلك ، احصل على جولة مجانية مع أخصائي تحسين محركات البحث"

المصدر: Moz

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

"احصل على 17+ فكرة تسويقية جديدة أفضل مما لديك"

المصدر: KlientBoost

يمكنك أيضًا أن تكون محددًا بشأن ما سيحدث بالضبط بعد نقر الأشخاص. اخبرهم:

  • ما الذي سيحصلون عليه (أفكار تسويقية جديدة)
  • كم عدد (17+)
  • ولماذا يجب أن يهتموا (هم أفضل مما لديك)

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

لا تنس اختبار أ / ب

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

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

بعد ذلك ، يمكن أن يكون للتغييرات الطفيفة في تصميم الزر تأثير كبير. لذا ، قارن بين أنواع مختلفة من أزرار الحث على الشراء. ثم اختبر A / B اختلافات من:

  • لون الزر
  • نسخة CTA
  • الخط
  • التنسيب في تصميم الصفحة
  • تظهر ظهور مفاجئ
  • نماذج الاتصال
أدى تغيير لون الزر "جرب الآن" من الأزرق إلى البرتقالي إلى زيادة نسبة النقر إلى الظهور من 25٪ إلى 38٪.

المصدر: Snov

كما ناقشت سابقًا ، قد يؤدي تغيير كلمة واحدة في بعض الأحيان إلى زيادة معدل التحويل أو نسبة النقر إلى الظهور. ولكن قبل أن تبدأ ، عليك أن تفهم كيف يتنقل الزوار في موقعك.

تريد اكتشاف أشياء مثل:

  1. ما هي العناصر التي يحاولون التفاعل معها
  2. من أين أتى هؤلاء
  3. رحلة المستخدم / مسار الشراء لموقعك
  4. دافع الناس لوجودهم هناك

المصدر: GIPHY

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

عادة ما يكون من الأسهل مقارنة إصدار A و B بتصميم CTA. ولكن يمكنك زيادة هذا ومحاولة اختبار متعدد المتغيرات. عادة ما يكون الأبسط أفضل في البداية. بهذه الطريقة ، سيكون لديك فائز واضح.

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

انتبه إلى إصدار الهاتف المحمول

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

أصبح كل شيء قمنا بتغطيته أكثر انتشارًا في إصدار هاتفك المحمول. يجب أن تبرز الألوان المتباينة أكثر:

الصفحة المقصودة لـ Spotify للجوّال - خلفية متدرجة أرجوانية مع زر "تسجيل" أخضر.

يجب أن تكون المساحة السلبية أولوية:

يستخدم Airbnb مساحة سلبية للمساعدة في إبراز زر "اكتشاف المزيد"

وحتى العنوان الفرعي الخاص بك قد يكون في مكان مختلف. نظرًا لأن مستخدمي الجوال قد لا ينتقلون لأسفل بدرجة كافية لرؤيته في الأسفل:

يوجد "Go Premium وفتح المزيد من الميزات الآن" فوق "زر مزيد من المعلومات" في الصفحة المقصودة للجوال في Pocket.

صرخ إلى CleverTap لتلك الرسومات

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

استنتاج

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

اختبار A / B هو الطريقة الوحيدة التي ستعرفها. ولا تحتاج حتى إلى أداة CRO باهظة الثمن للقيام بذلك. فقط تتبع تحويلاتك. اصنع فرق. ومعرفة ما إذا كانت هناك زيادة أو نقصان عن الرقم المعتاد.

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

هل رأيت أي تصميمات CTA أصلية مؤخرًا؟ هل أجريت تغييرًا بسيطًا أدى إلى زيادة التحويلات؟ اسمحوا لنا أن نعرف في التعليقات أدناه.