عندما نزور معظم مواقع الويب ، غالبًا ما نضع في الاعتبار هدفًا. للوصول إلى هذا الهدف ، عادة ما تكون هناك سلسلة من الخطوات التي نحتاج إلى اتخاذها وتبدأ الخطوة الأولى بالنقر على زر CTA (عبارة تحث على اتخاذ إجراء). فكّر في آخر مرة اشتركت فيها للحصول على خدمة أو نزّلت تطبيقًا ، ومن المحتمل أن تتضمن العملية تفاعلًا مع زر الحث على اتخاذ إجراء.
أزرار CTA هي الأزرار التي تستخدمها في موقعك على الويب لتوجيه المستخدمين نحو تحويل هدفك. يتمثل الهدف الكامل من CTA في توجيه زوار موقعك إلى مسار العمل المطلوب. تتضمن بعض الأمثلة الشائعة لاتفاقيات CTA ما يلي:
سنناقش اليوم 5 أفضل الممارسات لتصميم أزرار CTA مع أفضل الأمثلة في العالم الحقيقي لمساعدتك في الحصول على أكبر عدد ممكن من النقرات من صفحتك المقصودة.
لون الزر الخاص بك مهم. في الواقع ، إذا كنت ستأخذ نصيحة واحدة فقط من هذه المقالة ، فيجب أن يكون هذا واحدًا: "ضع في اعتبارك لون الزر CTA". باستخدام الألوان ، يمكنك تمييز أزرار معينة أكثر من غيرها من خلال منحها مزيدًا من الأهمية البصرية.
تعمل الألوان المتناقضة بشكل أفضل مع أزرار CTA ، باستخدام ألوان متناقضة ، فمن الممكن إنشاء أزرار مذهلة تبرز. يجب عليك تحديد لون متباين من نظام ألوان صفحة الويب ، بينما لا يزال يتلاءم مع التصميم العام. ضع في اعتبارك مثال فايرفوكس أدناه. اللون الأخضر لزر الحث على صفحة فايرفوكس يقفز من الصفحة ويلفت انتباه المستخدم على الفور.
زر Firefox CTA أخضر ساطع ويبرز جيدًا على خلفية زرقاء داكنة
يمكن العثور على زر CTA آخر لافتة للنظر على الصفحة الرئيسية لـ Hipmunk. يضفي الزر البرتقالي اللامع اهتمام المستخدم ويحدد الإجراء التالي المحتمل.
ليس فقط اللون مهم لـ CTA ، ولكن أيضًا حجم المساحة حوله. تعمل المساحة البيضاء (أو المساحة السلبية) على إنشاء غرفة التنفس الأساسية وتفصل أزرار CTA عن العناصر الأخرى في واجهة المستخدم الخاصة بك. كانت صفحة Dropbox القديمة مثالًا جيدًا على استخدام المساحة السلبية لجعل البوب الرئيسي للـ CTA. تبرز عبارة CTA الزرقاء "اشترك مجانًا" على ضوء الخلفية في الخلفية.
كتابة نص للزر الذي يحث المستخدم على اتخاذ إجراء والتي ستجبر الزائرين على اتخاذ الإجراء الصحيح ليست مهمة سهلة. لحسن الحظ ، هناك بعض الأشياء التي يمكن أن تساعدك على القيام بذلك:
يجب تجنب الكلمات الغامضة والمملة مثل "أدخل لمزيد من المعلومات" لأزرار CTA الخاصة بك ، واستبدالها بأكثر من الكلمات ذات المنحى العملي مثل "ابدأ الإصدار التجريبي المجاني" أو "احصل على خصم الآن". يحتوي Evernote على واحدة من أكثر الأنواع شيوعًا ، ولكن لا تزال تعمل نصوصًا عملية المنحى لزر CTA.
ابدأ بفعل مثل "ابدأ" أو "الحصول على" أو "الانضمام"
يمكن العثور على مثال أكثر إثارة للاهتمام على الصفحة الرئيسية لموقع Treehouse. موقع CTA على موقع Treehouse لا يقول فقط "بدء تجربة مجانية" ؛ وهي تقول "المطالبة بفترة تجريبية مجانية". قد يبدو الاختلاف في الصياغة دقيقًا ، ولكن يبدو أن "المطالبة بتجربتك المجانية" أكثر شخصية.
تأكد من تحديد ما سيحصل عليه الزائر بالضبط إذا نقروا على CTA. من الناحية المثالية ، ترغب في الاحتفاظ بنص الزر بين كلمتين وخمس كلمات.
على الأغلب كنت قد لاحظت أن العديد من الأزرار لها كلمات مثل "مجاني" في نسختها وليس ذلك من قبيل المصادفة ، فإن استخدام هذه الكلمات في نسخة الأزرار يؤكد على قيمة عرضك. وبالتالي ، عند كتابة CTA ، حاول إيجاد طريقة لدمج كلمة مقنعة واحدة (أو جميعها) 3:
دعوني أعطيكم مثالاً على ذلك: هناك خوف كبير لدى المستخدمين قبل الالتزام بالاشتراك في شيء ما ، هو أنه سيكون من الألم إلغاء اشتراكهم إذا لم يعجبهم الخدمة. يخفف Netflix من هذا الخوف مستخدمًا الوعد "Cancel anytime" المجاور لعبارة "الانضمام مجانًا لمدة شهر".
يمكن أن يؤدي إنشاء إحساس بالإلحاح في أزرار CTA إلى بعض معدلات النقر إلى الظهور الرائعة. على سبيل المثال ، يمكنك استخدام نص زر مثل "اشترك واحصل على 25٪ خصم على اليوم فقط!" مما يحد من الوقت الذي يجب على الشخص اتخاذ قرار يجعل الناس يرغبون في المطالبة بعرضهم في حين يمكنهم ذلك.
قد ترغب أحيانًا في إضافة سطر إضافي من المعلومات داخل نص الزر. هذه الممارسة شائعة مع أزرار تجريبية مجانية. على سبيل المثال ، قد يقول زر الإصدار التجريبي المجاني "إصدار تجريبي لمدة 30 يومًا ، بدون بطاقة ائتمان" في نص أصغر أسفل زر CTA مع النص "بدء تجريبي المجاني". يجب أن يسهل هذا النص الإضافي عملية اتخاذ القرار.
يُعد وضع أزرار الحث على الشراء بنفس أهمية اللون والرسالة. يجب وضع زر CTA في مكان يسهل العثور عليه يتبع بشكل عضوي من تدفق صفحة الويب. يجب أن تحاول الحفاظ على زر CTA في الجزء المرئي من الصفحة بحيث لا يفوت المستخدمين مطلقًا. من الناحية المثالية ، يجب أن يكون زر CTA من بين الأشياء الأولى التي يراها المستخدم على الصفحة عند الوصول إليها. يجب أن تظل المعلومات الإضافية في الجزء السفلي غير المرئي من الصفحة ، حيث تظل متاحة ولكن لا يمكن تشتيتها.
نفكر في كيفية تصميم يتطلع تحملها. كيف يفهم المستخدمون العنصر كزر؟ استخدم الشكل والحجم لجعل العنصر يبدو كزر.
يجب أن يكون CTA كبيرًا بما يكفي لرؤيته من مسافة بعيدة ، ولكن ليس كبيرًا بقدر ما يقلل الانتباه من المحتوى الرئيسي في الصفحة
شكل زر يمكن أن تلعب دورا كبيرا. انه حقيقة مؤكدة هذه الزوايا الدائرية أسهل على العيون. في اختبار ContentVerve ، كان الزر الأخضر المستدير أفضل من المستطيل الأزرق.
ضع في اعتبارك أنه إذا كنت تريد أن يتخذ عملاؤك إجراءات ، فعليك مساعدتهم ، عن طريق إزالة جميع العقبات المحتملة من طريقهم. عندما يعطى المستخدمون الكثير من الخيارات ، فإنهم يميلون إلى الخلط. لذا ، من الأفضل أن تقدم للعملاء المحتملين خيارًا واحدًا فقط.
إذا كنت لا تزال ترغب في تضمين عدة اختيارات للأزرار ، فقم بإعطاء وزن لأحد الخيارات على الآخرين للمساعدة في توجيه المستخدمين نحو مسار محدد. أحد الأمثلة الجيدة هو Evernote: بمجرد وصولك إلى الجزء السفلي من الصفحة الرئيسية لـ Evernote ، من الواضح أن الخيار المفضل هو "الاشتراك مجانًا" ، في حين أن CTA للمستخدمين لمقارنة الخطط هو ثانوي جدًا.
لتحقيق تصميم CTA فعال ، تحتاج إلى النظر أكثر من مجرد الزر نفسه. من المهم أيضًا التفكير في لون الخلفية ، والصور المحيطة ، والنص المحيط والعديد من العناصر الأخرى. يفهم فريق Basecamp أهمية هذه العناصر وصمم تخطيطًا مثاليًا لصفحاتهم المقصودة. حتى الميكروسكوبي الذي يستخدمونه تحت زر CTA ("4،714 شركة وقعت هذا الأسبوع!") يعزز ثقة العملاء المحتملين.
أتمنى أن تساعدك النصائح المذكورة في هذه المقالة على إنشاء زر أفضل للحث على اتخاذ إجراء لموقعك على الويب. اللحظة الأخيرة هي أهمية الاختبار - إذا قررت إعادة إنشاء CTA على موقعك ، تذكر أن تختبر لمعرفة ما إذا كان يعمل لجمهورك.