نصيحة تصميم٤ دقائق قراءة
اجعل الزرّ بحجم الإصبع
لماذا توصي أدلة التصميم بأن تكون مساحة اللمس ٤٨ بكسل على الأقل، وكيف تطبّق ذلك دون أن تكبّر كل أيقونة.
تحاول أن تضغط زرّ «إغلاق» صغيرًا في زاوية إعلان، فتفتح الإعلان نفسه. أو تختار التاريخ الخطأ في تقويم ضيّق المسافات. المشكلة هنا ليست في يدك، بل في حجم الهدف.
إصبع لا مؤشّر
صُمّمت الواجهات الأولى للفأرة، ومؤشّر الفأرة دقيق إلى حدّ البكسل الواحد. أمّا الإصبع فعريض، ويغطّي ما يضغط عليه، وغالبًا ما يكون الإبهام هو الذي يضغط بينما اليد الأخرى تحمل كوب قهوة.
لهذا تتّفق أدلة التصميم الكبرى على حدّ أدنى لمساحة اللمس:
- Material Design من Google يوصي بمساحة لا تقلّ عن ٤٨ × ٤٨ وحدة (dp)، أي نحو ٩ مليمترات على الشاشة، مهما كان حجمها.
- إرشادات Apple توصي بما لا يقلّ عن ٤٤ × ٤٤ نقطة.
- معايير الوصول WCAG 2.2 تشترط ٢٤ × ٢٤ بكسل CSS على الأقل في المستوى AA، و٤٤ × ٤٤ في المستوى الأعلى AAA.
لماذا يهمّ الحجم؟
يصف «قانون فيتس» (Fitts’s law)، الذي نشره عالم النفس بول فيتس عام ١٩٥٤، أن الوقت اللازم للوصول إلى هدف يزداد كلما صغر الهدف وابتعد. الهدف الصغير يعني بطئًا أكثر وأخطاء أكثر، وكل خطأ ضغطة إضافية أو تراجع أو مستخدم يغادر.
كيف تطبّق ذلك دون أن تكبّر كل شيء
مساحة اللمس ليست هي حجم الأيقونة. يمكن أن تبقى الأيقونة ٢٤ بكسل، بينما تمتدّ المساحة القابلة للضغط حولها إلى ٤٨ بكسل بالحشو الداخلي (padding).
- اجعل كل زرّ وأيقونة قابلة للضغط في مساحة لا تقلّ عن ٤٨ × ٤٨ بكسل.
- اترك مسافة بين الأهداف المتجاورة؛ يوصي Material Design بثماني وحدات (dp) على الأقل.
- ضع الأفعال الأكثر استخدامًا حيث يصل الإبهام بسهولة.
ما تأخذه معك
جرّب تصميمك على هاتف حقيقي، بإبهام واحد، وأنت تمشي. كل ما يصعب ضغطه هكذا صغير أكثر من اللازم.
المصادر
- معيار WCAG 2.2 رقم 2.5.8: الحدّ الأدنى لحجم الهدف، W3C
- معيار WCAG 2.2 رقم 2.5.5: حجم الهدف المحسّن، W3C
- جعل التطبيقات أسهل في الوصول، مطوّرو أندرويد
- إرشادات إمكانية الوصول، إرشادات Apple للواجهات
- بحث بول فيتس عن السعة المعلوماتية للجهاز الحركي البشري في التحكّم في مدى الحركة، مجلة علم النفس التجريبي، ١٩٥٤
