كيف يمكن اكتشاف صِغر المسافة بين الأزرار عند التحقق من ملاءمة الموقع للهواتف المحمولة؟

إذا نقرت على «إرسال استفسار» من الهاتف، لكنك لمست رمز WhatsApp المجاور، أو نقرت على قسم مجاور عند فتح القائمة، فتحرَّ المشكلة من ثلاثة جوانب: منطقة النقر الفعلية، والمسافة بين المناطق المتجاورة، وتخطيط الصفحة. فوجود مساحة ظاهرة حول الزر لا يعني بالضرورة أن مناطق اللمس منفصلة؛ كما أن الرمز الذي يبدو صغيرًا قد تكون له بالفعل مساحة نقر كبيرة بما يكفي.

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

حدِّد موضع حدوث النقر غير المقصود والحالة التي يحدث فيها

عند فحص مواقع التجارة الخارجية أو الصفحات المقصودة التسويقية، ابدأ بالتفاعلات التي تؤثر مباشرةً في الاستفسارات والمشتريات: شريط التنقل العلوي، ومرشحات المنتجات، وإرسال النماذج، وأزرار التحكم في كمية المنتجات في سلة التسوق، وأزرار الاتصال والدردشة والاستفسار المثبتة أسفل الصفحة. وانتبه بشكل خاص إلى الحالات التي تظهر فيها خدمة العملاء العائمة، وإشعار ملفات تعريف الارتباط، وشريط الإجراءات السفلي في الوقت نفسه، إذ قد تحجب هذه العناصر أزرارًا كان يمكن النقر عليها بشكل طبيعي.

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

عند تسجيل المشكلة، احتفظ على الأقل بعنوان الصفحة، وعرض الشاشة، وخطوات التفاعل، والعنصر الذي تم النقر عليه خطأً. فالوصف «بعد فتح شريط الاستفسار أسفل صفحة تفاصيل المنتج، يسهل أن يؤدي النقر على زر الإغلاق إلى فتح مدخل الدردشة» يساعد المطورين على إعادة المشكلة أكثر من وصف «أزرار الهاتف متقاربة جدًا».

تحقّق من حدود النقر قبل الحكم على ملاءمة الأبعاد

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

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

عند تقييم الأبعاد، يمكنك الاسترشاد بمتطلب «حجم الهدف (الحد الأدنى)» في WCAG 2.2: ينبغي أن يبلغ حجم هدف الإدخال بالمؤشر 24×24 بكسل CSS على الأقل من حيث المبدأ، مع وجود استثناءات تتعلق بالمسافات والروابط المضمنة وغيرها. ويجب تقييم مدى استيفاء الأهداف الأصغر لاستثناء المسافة وفقًا لمنطقة الدائرة المحددة في المعيار؛ فلا يصح فهم ذلك ببساطة على أنه «ترك عدد ثابت من البكسلات بين الزرين يكفي لاستيفاء المتطلب».

بالنسبة إلى الإجراءات المتكررة مثل إرسال استفسار أو إضافة منتج إلى سلة التسوق، يمكن اعتماد أبعاد تقارب 44×44 بكسل CSS أو تبلغها كهدف تصميم، لتوفير مساحة إضافية للنقر بالإصبع. استيفاء الأبعاد للمتطلبات لا يغني عن التحقق من سهولة الاستخدام: كلما زاد احتمال الالتباس بين وظائف الأزرار المتجاورة، ازدادت أهمية الفصل الواضح والتمييز البصري بينها.

عدّل وفقًا للسبب، وتجنّب زيادة الازدحام عند تكبير الأزرار

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

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

من السهل أن يغفل المسؤولون عن التشغيل عن الروابط الصغيرة القريبة من قوائم التنقل وأرقام الصفحات والنماذج. وللروابط المضمنة في فقرات النص شروط تقييم مختلفة، لذا لا يلزم تحويلها كلها إلى أزرار كبيرة؛ لكن ينبغي التحقق من نطاق النقر لكل إجراء مستقل موضوع إلى جانب غيره، مثل «رجوع» و«إرسال» و«مسح».

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

أعِد الاختبار ليشمل التفاعلات الفعلية، ولا تكتفِ بلقطات الشاشة

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

ينبغي أن تشمل إعادة الاختبار الشاشات الضيقة، والهواتف ذات الشاشات الأعرض، وإصدارات اللغات ذات النصوص الأطول. افحص التمرير الأفقي، والتفاف نصوص الأزرار، وتغيير مقياس الصفحة، والتخطيط بعد التبديل بين الاتجاهين العمودي والأفقي. وإذا لم تُضبط قيمة viewport للصفحة بشكل صحيح، أو جرى تصغير العرض ككل لاحتواء مزيد من المحتوى، فعليك معالجة هذه المشكلات الأساسية أولًا؛ وإلا فلن تكفي زيادة المسافات في أجزاء منفردة لتحسين التجربة.

يمكن لتقارير الفحص الآلي المساعدة في اكتشاف بعض مشكلات الأبعاد والتخطيط، لكنها لا تستطيع تقييم تجربة اللمس بالإصبع بالكامل، وقد تفوّت عناصر تحكم لا تظهر إلا بعد التفاعل. وقد توقف تقديم أداة اختبار التوافق مع الأجهزة المحمولة من Google التي ورد ذكرها في الدروس القديمة؛ لذا يمكن الجمع بين أدوات المطور في المتصفح، وأدوات فحص إمكانية الوصول، والاختبار على أجهزة حقيقية عند استكشاف المشكلات.

عند قبول العمل، استبدل عبارة «تم تعديل المسافة بين الأزرار» بنتيجة اختبار قابلة لإعادة الإنتاج: حدّد الصفحات وعروض الشاشة واللغات التي شملها الاختبار، والعمليات التي نُفذت، وما إذا كانت مشكلة النقر غير المقصود قد اختفت. وبالنسبة إلى الصفحات التي تستقبل زيارات الإعلانات أو تساهم في تحويل الاستفسارات، فإن إصلاح العوائق في مسارات الإرسال والتواصل والشراء أولًا يجعل ترتيب التعديلات أقرب إلى حجم الخسائر التجارية.