الإجابة على السؤال الأساسي أولاً
عند التكيف مع الأجهزة المحمولة، تشمل المحتويات التي يجب تجهيزها لأزرار الصفحة: حجم منطقة اللمس (يُوصى بـ 44×44 بكسل على الأقل)، التباعد بين الأزرار (يُوصى بـ 8 بكسل على الأقل)، التغذية الراجعة عند النقر أو اللمس (مثل تغيير اللون أو تأثيرات الحركة الدقيقة)، حجم النص وتباين الألوان، وأنماط حالة التحميل أو التعطيل. تضمن هذه التجهيزات سهولة النقر على الأزرار في الهواتف، وتجنب النقر الخاطئ، وتوفير تغذية راجعة واضحة، مما يحسن تجربة المستخدم.
لماذا يعتبر تجهيز الأزرار مهمًا
شاشات الأجهزة المحمولة صغيرة، ويعمل المستخدمون بأصابعهم، مما يجعل الدقة أقل بكثير من الماوس. إذا لم يتم تجهيز الأزرار بشكل كافٍ، فقد تظهر مشاكل مثل عدم الدقة في النقر، النقر الخاطئ، أو عدم وجود تغذية راجعة، مما يؤدي إلى تكرار العمليات أو مغادرة المستخدم. يساعد التكيف المسبق للأزرار في تقليل فقدان المستخدمين وزيادة معدلات التحويل.
حجم منطقة اللمس للأزرار
منطقة اللمس هي المنطقة القابلة للنقر في الزر، ويُوصى ألا تقل عن 44×44 بكسل (حسب إرشادات واجهة المستخدم البشرية من Apple)، والأفضل أن تكون 48×48 بكسل. إذا كان الحجم البصري للزر صغيرًا (مثل أزرار الأيقونات)، يجب توسيع منطقة اللمس باستخدام padding أو مساحة شفافة. لاحظ أن كثافة الشاشة تختلف بين الأجهزة، لذا يُوصى باستخدام وحدات نسبية (مثل rem أو vw) مع حد أدنى للحجم.
التباعد والتخطيط بين الأزرار
يجب أن يكون التباعد بين الأزرار 8 بكسل على الأقل لتجنب النقر المتزامن على الأزرار المجاورة. في النماذج، يجب فصل زر الإرسال عن زر الإلغاء، وزر الإجراء عن زر العودة، ويُوصى بتخطيط "زر الإجراء على اليمين، زر الإلغاء على اليسار". يجب ترك مسافة أمان بين الأزرار الثابتة في الأسفل (مثل "اشتر الآن") وحافة الشاشة لمنع النقر الخاطئ من إيماءات النظام (مثل العودة أو تعدد المهام).
التغذية الراجعة التفاعلية
بعد نقر المستخدم على الزر، يجب توفير تغذية راجعة فورية:
- التغذية البصرية: تغيير لون الزر إلى أغمق، إضافة ظل أو تأثير تكبير للإشارة إلى التنشيط.
- التغذية اللمسية: تدعم بعض الأجهزة الاهتزاز لتعزيز الإحساس بالتأكيد.
- تغيير الحالة: عرض أيقونة دوران أثناء التحميل مع تعطيل النقر المتكرر، وعرض نتيجة النجاح أو الفشل بعد ذلك.
النص وقابلية القراءة
يُوصى ألا يقل حجم نص الزر عن 14 بكسل، وللأزرار الأساسية يُوصى بـ 16 بكسل أو أكثر. يجب أن يكون تباين الألوان بين النص والخلفية 4.5:1 على الأقل (معيار WCAG AA)، ويجب مراعاة المستخدمين المصابين بعمى الألوان بعدم الاعتماد فقط على اللون (مثل استخدام اللون الأحمر للحذف مع إضافة أيقونة أو شرح نصي).
تجهيز الحالات الخاصة
بالإضافة إلى الحالة العادية، يجب تجهيز أنماط الحالات التالية:
- حالة التعطيل: لون رمادي، غير قابل للنقر، مع إشارة بصرية للمستخدم بأنه غير متاح مؤقتًا (مثل تعطيل زر الإرسال عند عدم اكتمال الحقول الإلزامية).
- حالة التحميل: عرض أيقونة تحميل داخل الزر مع تعطيل النقر المتكرر.
- حالة الخطأ: في حالة فشل إرسال النموذج، يمكن عرض "إعادة المحاولة" أو "إعادة الإرسال" مع رسالة خطأ.
أسئلة شائعة وملاحظات
س: ما هو حجم الخط المناسب للأزرار؟
بشكل عام، حجم الخط للأزرار الرئيسية 16 بكسل، وللأزرار المساعدة 14 بكسل، ولا يجب أن يقل عن 12 بكسل.
س: كيف نتجنب حجب الأزرار السفلية بواسطة شريط التنقل في النظام؟
استخدم متغيرات المنطقة الآمنة (safe area) مع ترك مسافة لا تقل عن 34 بكسل في الأسفل.
س: ماذا لو لم يستجب الزر بعد النقر؟
تحقق من ربط الحدث الصحيح، وما إذا كان الزر محجوبًا بعناصر علوية. يُوصى باستخدام حدث touch بدلاً من click (حيث يوجد تأخير 300 مللي ثانية في الأجهزة المحمولة)، أو استخدام مكتبة fastclick.
توصيات
قبل التطوير، قم بإعداد قائمة بالأزرار بناءً على التصميم، مع تحديد حجم منطقة اللمس، التباعد، تأثيرات التغذية الراجعة، وأنماط الحالات لكل زر. بعد الانتهاء من التطوير، قم بإجراء اختبارات اللمس المتعدد، اختبارات النقر السريع المتتالي، واختبارات التكيف مع أحجام الشاشات المختلفة على أجهزة حقيقية. تساعد هذه التجهيزات في تجنب مشاكل قابلية استخدام الأزرار بعد الإطلاق.
