دليل تصميم الأزرار: كيفية تصميم الأزرار التي يتم تحويلها

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

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

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

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

هل هذا الموضوع ضغط الزر الخاص بك؟ ثم واصل القراءة.

قبل أن نبدأ ، كلمة سريعة في اختبار A / B

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

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

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

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

كيفية تصميم الأزرار التي ينقر عليها المستخدمون بالفعل

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

صممها لتناسب علامتك التجارية أو موقعك

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

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

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

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

اجعل الأزرار تشبه الأزرار

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

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

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

المصدر: Wikipedia Used بإذن من Microsoft

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

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

صورة Ienjoyeverytime / shutterstock.com.

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

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

المصدر: Material.io

توفير تسميات واضحة

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

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

الصورة بواسطة Prixel Creative / shutterstock.com.

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

فيما يلي بعض الإرشادات الخاصة بالتسميات الواضحة:

• كن وصفيًا ومحددًا
• استخدم أفعال العمل ، مثل Sign Me Up و Submit Form و Create Account
• خاطب المستخدم مباشرة
• خلق إحساسًا بالإلحاح باستخدام كلمات مثل Now أو Today
• اجعلها بسيطة وواضحة

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

نعم ، يمكن أن تكون هذه قوة كلمة واحدة.

ضع الأزرار حيث يمكن للمستخدمين العثور عليها

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

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

المصدر: Netflix

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

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

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

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

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

انتبه إلى الحجم والتباعد

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

المصدر: أبل

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

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

تقديم التغذية الراجعة

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

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

المصدر: Material.io

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

استفد من التباين جيدًا

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

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

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

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

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

المصدر: Prezi

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

هل تختبر الحول #CTA الخاص بك؟ إنها أفضل طريقة لمعرفة ما إذا كانت عبارة الحث على اتخاذ إجراء مميزة. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- Design Pickle (designpickle) 25 يوليو 2015

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

المصدر: Quicksprout

تلخيص لما سبق

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

لهذا السبب ، لا ينبغي الاستخفاف بموضوع تصميم الزر وموضعه. للتلخيص ، من أجل إنشاء أزرار فعالة:

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

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

ما هي تجربتك مع تصميم الزر؟ أي شيء مهم لإضافته إلى ما سبق؟ يرجى إعلامنا في قسم التعليقات أدناه!

الصورة المصغرة للمادة من BerryCat / shutterstock.com