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

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

  • "ابدأ تجربة"
  • "تنزيل التطبيق / الكتاب / الدليل"
  • "اشترك للحصول على التحديثات"
  • "احصل على استشارة"

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

1. بصريا ضرب زر

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

استخدام الألوان المتناقضة

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

image13

زر Firefox CTA أخضر ساطع ويبرز جيدًا على خلفية زرقاء داكنة

يمكن العثور على زر CTA آخر لافتة للنظر على الصفحة الرئيسية لـ Hipmunk. يضفي الزر البرتقالي اللامع اهتمام المستخدم ويحدد الإجراء التالي المحتمل.

image7

الفضاء السلبي

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

image11

2. نص موجه للعمل

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

تبدأ مع الفعل

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

image18

ابدأ بفعل مثل "ابدأ" أو "الحصول على" أو "الانضمام"

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

image15

استخدام موجز وسهل فهم النص لأزرار

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

أضف قيمة الاقتراح

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

  • حر
  • علاوة
  • فورا

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

image10

خلق شعور من الإلحاح

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

نص مفيد

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

3. جعلها مرئية دون التمرير

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

4. زر كبير مع زوايا مدورة

نفكر في كيفية تصميم يتطلع تحملها. كيف يفهم المستخدمون العنصر كزر؟ استخدم الشكل والحجم لجعل العنصر يبدو كزر.

اجعلها كبيرة بما فيه الكفاية

يجب أن يكون CTA كبيرًا بما يكفي لرؤيته من مسافة بعيدة ، ولكن ليس كبيرًا بقدر ما يقلل الانتباه من المحتوى الرئيسي في الصفحة

أزرار المستخدم مع زوايا مدورة

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

image8

5. أقل هو أكثر عندما يتعلق الأمر باختيارات

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

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

image16

استنتاج

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

image14

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