عندما يتم عرض تصميمك على جهاز محمول، يجب أن تتأكد من أن العناصر التفاعلية مثل الأزرار أو الروابط كبيرة بما يكفي، ولديها مساحة كافية حولها، لتسهيل الضغط عليها بدون أن تتداخل بدون قصد مع عناصر أخرى. يفيد هذا جميع المستخدمين، ولكنه مفيد بشكل خاص لأي شخص يعاني من ضعف الحركة.
الحد الأدنى المقترَح لحجم ناحية اللمس المستهدفة هو 48 وحدة بكسل مستقلة عن الجهاز تقريبًا. على موقع إلكتروني مزوّد بإطار عرض للأجهزة الجوّالة تم ضبطه بشكل صحيح. فعلى سبيل المثال، بينما قد يبلغ عرض الرمز وارتفاعه 24 بكسل فقط، يمكنك استخدام مساحة متروكة إضافية لزيادة حجم هدف النقر إلى 48 بكسل. تتجاوب المساحة 48×48 بكسل مع حوالي 9 ملم، والتي تساوي حجم منطقة لوحة إصبع الشخص.
في العرض التوضيحي، أضفت مساحة متروكة إلى جميع الروابط للتأكد من أنها تلبي الحد الأدنى للحجم.
يجب أيضًا التباعد بين مساحات اللمس المستهدفة بحوالي 8 بكسل، أفقيًا وعموديًا، بحيث لا يلمس الضغط بإصبع المستخدم على هدف نقر آخر بدون قصد هدف نقرة آخر.
اختبار مساحات اللمس
إذا كان هدفك هو النص واستخدمت قيمًا نسبية مثل em أو rem لحجم النص وأي مساحة متروكة،
يمكنك استخدام أدوات مطوّري البرامج للتحقق من أن القيمة المحسوبة لتلك المساحة كبيرة بما يكفي.
في المثال أدناه، أستخدم em للنص والمساحة المتروكة.
يجب فحص a للرابط.
وفي Chrome DevTools بالانتقال إلى الجزء المحسوب، يمكنك فحص الأجزاء المختلفة من المربع
وترى حجم البكسل الذي يتم تحليله.
توجد لوحة تخطيط في Firefox DevTools.
في تلك اللوحة، تحصل على الحجم الفعلي للعنصر الذي تم فحصه.
استخدام الاستعلامات عن الوسائط لاكتشاف استخدام الشاشة التي تعمل باللمس
فبدلاً من الاكتفاء بإجراء اختبار لأبعاد إطار العرض، ثم التخمين أن الأبعاد الصغيرة قد تكون هواتف أو أجهزة لوحية، والتي بدورها استخدام الشاشة التي تعمل باللمس، فهناك الآن طرق أكثر فعالية للتكيّف لتصميمك بناءً على إمكانات الجهاز الفعلية.
إحدى ميزات الوسائط التي يمكننا الآن اختبارها مع الاستعلامات عن الوسائط
هو ما إذا كان الإدخال الأساسي للمستخدم هو شاشة تعمل باللمس (pointer)
ما إذا كان أي من مصادر الإدخال التي تم رصدها حاليًا عبارة عن شاشة تعمل باللمس (any-pointer).
وتعرض الميزتان pointer وany-pointer عرض fine أو coarse.
المؤشر الدقيق هو شخص يستخدم الماوس أو لوحة اللمس،
حتى إذا كان الماوس متصلًا بأحد الهواتف عبر البلوتوث.
يشير مؤشر coarse إلى شاشة تعمل باللمس.
والذي يمكن أن يكون جهازًا جوّالاً ولكنه قد يكون أيضًا شاشة كمبيوتر محمول أو جهازًا لوحيًا كبيرًا.
إذا كنت تضبط CSS ضمن استعلام عن الوسائط لزيادة ناحية اللمس المستهدفة، يتيح لك اختبار المؤشر التقريبي زيادة أهداف النقر لجميع مستخدمي الشاشة التي تعمل باللمس. يوضح ذلك مساحة النقر الأكبر، سواء كان الجهاز هاتفًا أو جهازًا أكبر.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
يمكنك معرفة المزيد عن ميزات وسائط التفاعل مثل المؤشر في مقالة أساسيات تصميم الويب سريع الاستجابة.