تسلسل الأزرار وحالاتها

01أربعة مستويات للأزرار

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

• رئيسي

  تعبئة ممتلئة وأقوى لون. الإجراء الأساسي مثل حفظ.

• ثانوي

  حدود أو تعبئة خفيفة. إجراءات مساندة مثل إلغاء.

• ثالثي أو نصي

  نص فقط. إجراءات منخفضة الأولوية مثل اعرف المزيد.

• مدمّر

  عادة بالأحمر. إجراءات تحذف أو لا يمكن التراجع عنها. أضف خطوة تأكيد.

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

02صمّم كل الحالات

يحتاج كل زر إلى أكثر من شكل افتراضي. عرّف:

• الافتراضي والتمرير والنشاط (الضغط).
• التركيز، بمؤشر مرئي لمستخدمي لوحة المفاتيح. لا تزل الإطار دون بديل.
• المعطّل، بوضوح أقل بروزًا.
• التحميل، بمؤشر دوران أو تسمية متغيرة مثل جارٍ الحفظ، مع منع النقرة الثانية.

قبل اعتماد الشاشة، راجع أزرارها بهذه القائمة. تستغرق دقيقة وتكشف معظم أوجه عدم الاتساق.

1. هل يوجد زر رئيسي واحد بالضبط في العرض؟
2. هل تبدو الأزرار الثانوية والثالثية أقل بروزًا بوضوح؟
3. هل لكل زر نمط تركيز مرئي؟
4. هل الإجراء المدمّر منفصل عن الرئيسي ومؤكَّد؟
5. هل مناطق اللمس 24 × 24 بكسل CSS على الأقل كما تشترط WCAG 2.2، ويفضّل أن تكون أكبر على شاشات اللمس؟
6. هل تبدأ التسميات بفعل واضح؟

استخدم حالة التحميل لمنع الإرسال المزدوج ولإخبار الناس بأن الإجراء قيد التنفيذ.

03احذر الأزرار المعطّلة

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

04الحجم والموضع والدلالة

• حافظ على اتساق الارتفاع والحشوة ونصف قطر الزوايا في المنتج كله.
• ضع الإجراءات بالترتيب نفسه كل مرة، مثل الرئيسي أولًا حسب اتجاه القراءة.
• استخدم عنصر <code>;button<;/code>; للإجراءات التي تفعل شيئًا في الصفحة، ورابطًا (<code>;a<;/code>;) للانتقال إلى مكان آخر.
• اكتب التسميات أفعالًا: حفظ التغييرات، حذف الحساب.

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

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

05المصادر

• W3C. Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
• MDN Web Docs. The button element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button