الصفحة الرئيسية » تصميم المواقع » إرشادات أزرار دعوة إلى العمل وأفضل الممارسات والأمثلة

    إرشادات أزرار دعوة إلى العمل وأفضل الممارسات والأمثلة

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

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

    الغرض من أزرار "دعوة إلى العمل"

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

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

    أنواع أزرار "Call to Action"

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

    1. إضافة إلى أزرار العربة

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

    2. تحميل الأزرار

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

    3. أزرار المحاكمة

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

    4. تعلم المزيد من الأزرار

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

    5. تسجيل أزرار

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

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

    باستخدام الفضاء السلبي على نحو فعال

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

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

    بعض الإرشادات:

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

    الحجم واللون

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

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

    بعض الإرشادات:

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

    لغة

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

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

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

    بعض الإرشادات:

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

    خلق الاستعجال

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

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

    بعض الإرشادات:

    • شجع زوار موقعك على التصرف على الفور
    • لا تعطي زوار موقعك أي سبب للتوقف
    • على الرغم من أهمية الإلحاح ، لا تضلل زوار موقعك بأي شكل من الأشكال

    تقديم معلومات اضافية

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

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

    بعض الإرشادات:

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

    الأولوية

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

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

    أيقونات وصور

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

    بعض الإرشادات:

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

    أمثلة

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

    البث المباشر - يعتبر التمييز بين أزرار "اشتر الآن" (للخيارات المدفوعة) و "التسجيل" (للخيارات المجانية) استراتيجية جيدة.

    ويندوز 7 - زر "Get Windows7" ​​الأخضر الكبير يسهل على الزائرين تحديد موقعه.

    Fileshare المقر - يبرز الزر الأخضر اللامع هنا أمام الخلفية البيضاء.

    سجل السفينة - يؤدي استخدام ألوان مختلفة لأزرار "تنزيل" و "شراء" إلى التمييز بينها ويعطي الأولوية لزر "شراء".

    TasteBook - يستخدم هذا الزر أيقونة كبيرة ويستخدم نصًا غامقًا أكبر لتبرز.

    GoodBarry - آخر دعوة خضراء زاهية للعمل زر.

    الحياة الإبداعية - استمرار نفس المحرف من نسخة الجسم إلى زر الدعوة إلى العمل يخلق شعورا بالتماسك.

    المستأنف - تبرز مكالمة حمراء زاهية للعمل مع نوع غامق مقابل الخلفية الزرقاء.

    Notepod - مثال جيد على تضمين معلومات إضافية في زر "دعوة إلى إجراء".

    Inkd - مثال رائع على تحديد أولويات الأزرار بالحجم.

    ثيمات أنيقة - مثال ممتاز آخر لاستخدام اللون لتبرز دون اشتباك مع عناصر التصميم المحيطة.

    ZenDesk - مثال آخر رائع على صنع زر يبرز باستخدام اللون.

    Storenvy - زر دائري غير متوقع ويبرز ، خاصةً عندما يكون محاطًا بحدود بيضاء.

    Bara'Mail - في بعض الأحيان ، يعمل الزر الذي يمتزج بشكل أفضل في التصميم العام لموقعك ، خاصةً عندما يكون الإجراء أقل إلحاحًا.

    المزيد من الموارد

    • Call to Action Buttons: أمثلة وأفضل الممارسات - من مجلة Smashing
    • دعوة جيدة إلى العمل أزرار - من كشك UX
    • دعوة إلى أزرار العمل: هل يهم الحجم؟ - من الحصول على مرونة
    • 10 تقنيات لفعالة “دعوة للعمل” - من Boagworld
    • 5 نصائح لإنشاء دعوة فعالة إلى زر العمل - من SitePoint