قابليتها للاستخدام لالدمى: ما ينبغي أن يكون أزرار على الموقع

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

متى تستخدم الأزرار بدلاً من الروابط

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

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

كيف نميز عمل مهم عن عمل أقل أهمية؟ اسأل نفسك: "هل التأثير المقصود على نشاطي التجاري أو موقعي؟"

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

كيفية استخدام التدرجات بشكل صحيح

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

عند إنشاء أزرار ، تذكر:

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

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

كيفية جعل الزر مقنعا

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

  • استخدم التدرجات والظلال والزوايا الدائرية لجعل الزر واقعيًا.

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

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

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

  • اجعل الزر كبيرًا بدرجة كافية ، لكن ليس ضخمًا بشكل غير طبيعي.

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

  • استخدام كلمات عاجلة

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

  • تليين CTA

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

  • استخدم الأحرف الكبيرة والصغيرة بشكل صحيح.

إذا كانت CTA تتكون من كلمتين ، فاكتب كلاهما بحرف كبير. الحروف الكبيرة تجعل النص يطالب. إذا كانت CTA تتكون من ثلاث كلمات أو أكثر ، فاكتب الكلمة الأولى بحرف كبير ، واكتب الباقي بأحرف صغيرة. في هذه الحالة ، يُنظر إلى النص على أنه حوار. تبدو الصيغ كما يلي: hard CTA = كلمة أو كلمتين + كل كلمة برأس مال ؛ CTA ضعيف = ثلاث كلمات أو أكثر + برأس مال أول فقط.

  • توضيح الدعوات إلى العمل

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

  • استخدام تأثيرات التحويم

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

لماذا أزرار موافق لم تعد موافق

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

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

لماذا يجب وضع أزرار التحويل في أسفل يمين الصفحة.

يمكنك الإجابة على هذا السؤال بعد دراسة مخطط جوتنبرج.

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

لماذا في مربعات الحوار يجب أن يكون زر الإجراء المطلوب على اليمين

في مربعات الحوار ، تعمل أزرار الإجراء المطلوب (Buy ، Checkout ، Yes ، OK ، إلخ.) بشكل أفضل عند تحديد موقعها على اليمين. لاحظ الرسم التوضيحي التالي:

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

عندما يكون زر الإجراء المطلوب على اليمين ، يتم تقصير مسار التحويل بخطوة واحدة:

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

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

كيفية اختيار زر الإجراء المطلوب

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

لتمييز زر التحويل بشكل مرئي ، يمكنك استخدام الطرق التالية:

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

لماذا يجب أن يكون الرموز خلفية شفافة

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

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

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

كيفية استخدام الأسهم والنقاط

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

تشير الأسهم الموجودة في القائمة إلى توفر خيارات إضافية.

تشير النقاط الموجودة على الأزرار وفي القائمة إلى توفر خيارات إضافية وعدم اكتمال الإجراء.

الأسهم والنقاط تجعل الأزرار والقوائم بديهية.

يجب أن تكون الأزرار مرئية ومقنعة.

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

شاهد الفيديو: سبليمنال تقصير الطول . التقليل من حجم القامه للطول المناسب (شهر نوفمبر 2019).

Loading...

ترك تعليقك