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