الإجابة المختصرة: أغلب أعطال الجوال لا تُكتشف لأن أحدًا لا يختبر على جهاز حقيقي. تصغير نافذة المتصفح على الحاسوب يُظهر التخطيط ولا يُظهر ما يهمّ فعلًا: الأصابع بدل المؤشر، ولوحة مفاتيح تغطي نصف الشاشة، وعناصر عائمة تحجب أزرارًا، وشبكة بطيئة. والعطل الأخطر هو ما يجعل جزءًا من الصفحة غير قابل للضغط بلا أي رسالة خطأ.
العطل الذي كلّفنا ثلث الشاشة
نبدأ بواقعة من موقعنا نحن، لأنها تشرح طبيعة هذه الأعطال.
أضفنا ويدجت مساعد ذكي، وفيه إعداد يفتح نافذة المحادثة تلقائيًا عند دخول الزائر. فعّلناه. وعلى الحاسوب كان كل شيء طبيعيًا.
على الجوال، النافذة المفتوحة كانت تجعل بقية الصفحة معطَّلة عن التفاعل — سلوك موثّق في المتصفح يُستخدم لمنع التفاعل خلف النوافذ المنبثقة. النتيجة أن الزائر يرى الصفحة كاملة ويضغط الروابط فلا يحدث شيء.
والأخطر: الاختبارات الآلية مرّت بنجاح. الصفحة تُحمَّل، والعناصر موجودة، والكونسول نظيف. ولم يظهر العطل إلا بفتح الموقع على هاتف حقيقي والضغط بالإصبع.
والدرس: اختبار الجوال البصري ليس ترفًا — بعض الأعطال لا تُكتشف بأي طريقة أخرى.
1. عناصر عائمة تحجب المهم
ويدجت محادثة، وزر عودة للأعلى، وشريط قبول الكوكيز، وإعلان لاصق. كل واحد منها مقبول وحده، ومجتمعة تغطي ربع الشاشة.
وأخطر موضع هو الزاوية السفلية — حيث توضع هذه العناصر عادةً، وحيث يوضع زر الإرسال في النماذج.
الفحص: افتح صفحة النموذج على هاتفك وانظر: هل يغطي شيء زر الإرسال؟ افعلها بعد فتح لوحة المفاتيح أيضًا.
2. لوحة المفاتيح تخفي الحقل
الزائر يضغط حقلًا في أسفل النموذج، فتفتح لوحة المفاتيح وتغطي الحقل نفسه. يكتب بلا أن يرى ما يكتب.
العلاج: أن تُمرَّر الصفحة تلقائيًا ليبقى الحقل النشط مرئيًا فوق لوحة المفاتيح.
وفحصه لا يكون إلا على جهاز حقيقي — محاكي المتصفح لا يفتح لوحة مفاتيح.
3. مناطق ضغط أصغر من الإصبع
رابط بحجم نص صغير قابل للضغط بالمؤشر بدقة بكسل، وغير قابل للضغط بالإصبع.
القاعدة: كل عنصر تفاعلي بمساحة ضغط لا تقل عن نحو 44 بكسل في كل اتجاه، ومسافة كافية بين العناصر المتجاورة.
الأسوأ: روابط متجاورة في سطر واحد — الزائر يضغط الخطأ منها ويعود ويحاول ثم يمل.
4. pointer-events على الابن لا يمنع الأب
خطأ تقني يستحق ذكره لأنه يتكرر: تعطيل التفاعل على عنصر داخلي لا يعطّله على الحاوية التي تحيط به. الحاوية الشفافة الممتدة تبقى تلتقط الضغطات، فتبتلع نقرات ما تحتها.
النتيجة: منطقة تبدو فارغة وتمنع الضغط على ما خلفها. تُكتشف بالإصبع لا بالكود.
5. النص يتجاوز عرض الشاشة
كلمة إنجليزية طويلة، أو رابط غير مقطوع، أو جدول عريض — كلها تجبر الصفحة على التمدد أفقيًا. والنتيجة موقع يتحرك يمينًا ويسارًا مع كل تمرير.
العلاج: كسر الكلمات الطويلة، وجعل الجداول قابلة للتمرير داخل حاويتها لا دفع الصفحة كلها.
الفحص السريع: مرّر الصفحة أفقيًا بإصبعك. إن تحرّكت، لديك عنصر متجاوز.
6. الصور تقفز والمحتوى يتزحزح
الصورة تُحمَّل متأخرة فتدفع ما تحتها، والزائر يضغط في اللحظة الخطأ فيفتح شيئًا آخر.
العلاج: حدّد أبعاد كل صورة وإطار في الشيفرة، واحجز مساحة كل عنصر يُحمَّل لاحقًا.
7. الحركة تُتعب على الجوال
الحركات التي تبدو أنيقة على الحاسوب قد تصير ثقيلة على هاتف متوسط: تأثيرات التمرير، والعناصر التي تتحرك مع السكرول، والفيديو الخلفي.
العلاج: قلّل الحركة على الشاشات الصغيرة، واحترم إعداد النظام الذي يطلب تقليل الحركة — فبعض المستخدمين يفعّلونه لأسباب صحية.
8. الشبكة البطيئة تكشف كل شيء
الاختبار على واي فاي المكتب يخفي المشكلة الأكبر. جرّب على بيانات الجوال وفي مكان ضعيف التغطية:
هل تظهر الصفحة أم تبقى بيضاء؟ هل يظهر النص قبل الخط المخصص؟ هل تظهر أماكن الصور محجوزة أم يقفز كل شيء؟ وهل يعرف الزائر أن شيئًا يُحمَّل؟
النماذج على الجوال: مشاكل خاصة بها
النموذج أكثر ما يتعطّل على الهاتف، ولأسباب لا توجد على الحاسوب:
نوع لوحة المفاتيح. حقل الجوال يجب أن يفتح لوحة أرقام، وحقل البريد لوحة فيها الرمز @. والخطأ هنا يجبر المستخدم على التبديل يدويًا في كل حقل.
الإكمال التلقائي. حين تُسمّى الحقول بأسمائها المعيارية، يملأ المتصفح الاسم والبريد والعنوان بضغطة. وهذا يرفع إتمام النماذج بوضوح — وتعطيله عمدًا خطأ شائع.
التحقق أثناء الكتابة لا بعد الإرسال. الخطأ الذي يظهر بعد الضغط يجبر المستخدم على البحث عن الحقل الخاطئ في نموذج طويل. أظهر الخطأ بجانب حقله فور مغادرته.
فقدان المدخلات. إن أعاد المتصفح تحميل الصفحة — لضعف الذاكرة أو تبديل التطبيقات — يجب ألا يخسر المستخدم ما كتبه. حفظ محلي بسيط يحلّها.
القوائم المنسدلة الطويلة. قائمة بمئتي خيار كابوس على الجوال. استبدلها بحقل بحث يرشّح أثناء الكتابة.
زر الإرسال المكرر. الضغط المزدوج غير المقصود شائع بالإصبع. عطّل الزر بعد أول ضغطة وأظهر مؤشر انتظار، وإلا وصلتك الرسالة مرتين.
كيف تختبر بشكل صحيح؟
على جهاز حقيقي أولًا. محاكي المتصفح يكشف مشاكل التخطيط وحدها.
بأصابعك لا بالفأرة. الضغط بالإصبع يكشف ما لا تكشفه النقرة الدقيقة.
بجهاز متوسط لا بالأحدث. الهاتف الرائد يخفي مشاكل الأداء التي يعانيها أغلب زوارك.
أتمم مهمة كاملة. لا تتصفح — اطلب، احجز، أرسل نموذجًا. الأعطال تظهر في منتصف المسار لا في الصفحة الأولى.
بشاشة ضيقة أيضًا. جرّب على عرض 360 بكسل — كثير من الأجهزة المستخدمة فعلًا بهذا العرض أو أقل.
قائمة فحص سريعة
| الفحص | ما تبحث عنه | |—|—| | تمرير أفقي | الصفحة لا تتحرك يمينًا ويسارًا | | زر الإرسال | لا يغطيه عنصر عائم | | لوحة المفاتيح | الحقل النشط يبقى مرئيًا | | حجم الأزرار | يمكن ضغطها بالإبهام بلا تكبير | | ثبات التخطيط | لا يقفز شيء أثناء التحميل | | القوائم | تفتح وتُغلق ولا تحجب المحتوى | | النماذج | تُملأ وتُرسَل من الهاتف فعلًا | | الشبكة البطيئة | الصفحة تُستخدم لا تنتظر |
أسئلة شائعة
هل «التصميم المتجاوب» يعني أن الموقع يعمل على الجوال؟
لا. المتجاوب يعني أن التخطيط يتكيّف مع العرض. وهذا لا يضمن أن الأزرار قابلة للضغط، ولا أن النموذج يعمل، ولا أن الصفحة سريعة. التجاوب شرط لازم غير كافٍ.
كم جهازًا يجب أن أختبر عليه؟
جهاز أندرويد متوسط وجهاز آيفون يغطيان أغلب الحالات. والأهم من العدد أن يكونا حقيقيين وأن تُتمّ عليهما مهمة كاملة.
متى أختبر؟
قبل كل إطلاق، وبعد أي إضافة تُدخل عنصرًا عائمًا — ويدجت محادثة، شريط إشعارات، نافذة عرض. هذه بالذات هي التي تسبب الأعطال الصامتة.
كيف أكتشف أن جزءًا من موقعي غير قابل للضغط؟
افتح الموقع على هاتفك وحاول الضغط على كل رابط في الشاشة الأولى. إن لم يستجب شيء، افحص العناصر العائمة والنوافذ المفتوحة تلقائيًا — هذا هو المتهم الأول دائمًا.
أدوات تساعد — وحدودها
محاكي المتصفح يكشف مشاكل التخطيط والعرض بسرعة، ولا يكشف مشاكل اللمس ولا لوحة المفاتيح ولا الأداء الحقيقي.
خنق الشبكة والمعالج في أدوات المطور يقرّبك من تجربة الجهاز المتوسط، وهو أفضل بديل متاح حين لا تملك أجهزة كثيرة.
فحص ملاءمة الجوال في أدوات مشرفي المواقع يخبرك بما يراه المحرك: نص صغير، وعناصر متقاربة، ومحتوى أعرض من الشاشة.
تسجيل جلسات المستخدمين يكشف ما لا يكشفه أي اختبار: أين يضغط الناس مرارًا بلا نتيجة، وأين يتوقفون فجأة.
وحدّها المشترك: لا شيء يعوّض فتح موقعك على هاتفك وإتمام مهمة كاملة بأصابعك.
أسئلة شائعة إضافية
كم عرضًا يجب أن أدعم؟
ابدأ من 360 بكسل صعودًا. الأجهزة الأضيق موجودة لكنها قليلة، والتصميم الذي يعمل عند 360 يعمل غالبًا عند ما فوقه.
هل أبني نسخة منفصلة للجوال؟
لا في الغالب. النسخة المنفصلة تعني محتوى مزدوجًا وصيانة مضاعفة ومشاكل فهرسة. التصميم المتجاوب الواحد أسلم وأسهل.
كيف أعرف نسبة زواري من الجوال؟
من تقارير التحليلات مقسّمة حسب نوع الجهاز. والأفيد أن تقسّمها حسب الصفحة أيضًا — قد تجد صفحة يزورها الجوال بنسبة أعلى بكثير، وهي التي تستحق العناية أولًا.
متى يستحق الأمر تطبيقًا بدل موقع؟
كثير من مشاكل الجوال تدفع أصحاب المواقع للتفكير في تطبيق. وهذا حل مكلف لمشكلة غالبًا أرخص:
الموقع يكفي إن كان: الاستخدام متقطعًا (مرة كل أسابيع) · والوصول يأتي من البحث أو من روابط مشارَكة · والوظائف لا تحتاج قدرات الجهاز.
التطبيق يستحق إن كان: الاستخدام متكررًا (يوميًا أو أسبوعيًا) · والإشعارات جزءًا من القيمة · وتحتاج عملًا بلا إنترنت أو وصولًا للكاميرا أو الموقع بدقة.
والخطأ الشائع: بناء تطبيق هربًا من موقع سيئ على الجوال. التطبيق لن يُحمَّل أصلًا إن لم يكن هناك سبب — وستبقى بموقع سيئ وتطبيق مهجور.
والقاعدة: أصلح تجربة الجوال في الموقع أولًا وقِس. إن بقي المستخدمون يعودون بانتظام، فذلك مبرّر التطبيق. وإن لم يعودوا، فالتطبيق لن يغيّر شيئًا.
كم يكلّف اختبار الجوال؟
ساعة عمل وجهازين. وهذه أرخص خطوة جودة يمكن أن تنفّذها، وأكثرها اكتشافًا للأعطال المكلفة — لأن كل عطل تجده هنا كان سيكلّفك زائرًا يغادر صامتًا.
ما أكثر عطل جوال يتكرر في المواقع العربية؟
التمرير الأفقي غير المقصود، بسبب عنصر أعرض من الشاشة — جدول، أو صورة بعرض ثابت، أو رابط طويل غير مقطوع. ويظهر أكثر في الواجهات العربية لأن الاتجاه المعكوس يكشف تجاوزات لا تظهر في التخطيط الأصلي.
كيف أختبر بلا أجهزة كثيرة؟
جهازك الشخصي + خنق الشبكة والمعالج في أدوات المطور + فحص ملاءمة الجوال في أدوات مشرفي المواقع. هذه الثلاثة تغطي أغلب ما يهم. وإن أمكن، اطلب من شخصين بأجهزة مختلفة أن يتمّا مهمة ويصوّرا ما واجهوه.
هل أعطّل الحركات على الجوال؟
قلّلها لا تلغِها. الحركة الخفيفة تساعد على فهم ما يحدث. والذي يُلغى هو ما يعمل مع كل تمرير أو يشغّل حسابًا مستمرًا — وهذه تُستبدل ببدائل أخف أو تُوقَف تحت عرض معيّن.
هل التصميم للجوال أولًا أفضل؟
نعم عمليًا. البدء بالشاشة الصغيرة يجبرك على ترتيب أولويات الواجهة: ما الذي يجب أن يظهر أولًا؟ ثم تتوسّع للشاشات الأكبر. والعكس — تصميم للحاسوب ثم ضغطه — ينتج واجهة مزدحمة تحاول أن تحشر كل شيء في مساحة لا تتّسع.
ما الذي أفحصه بعد كل تحديث؟
المسار الأساسي كاملًا على جهاز حقيقي: من الدخول حتى إتمام الإجراء الأهم. خمس دقائق تكشف أغلب ما يكسره التحديث. والأعطال التي تظهر بعد التحديثات أكثر من التي تظهر عند الإطلاق، لأن أحدًا لا يعيد الفحص.
كيف أختبر الموقع على شبكة ضعيفة فعلًا؟
أغلق الواي فاي واستخدم بيانات الجوال في مكان ضعيف التغطية، أو استعمل خنق الشبكة في أدوات المطور بإعداد شبكة بطيئة. والفرق بين الاختبارين حقيقي: الخنق ينقص التذبذب الذي يكشف أعطالًا لا تظهر بشبكة بطيئة مستقرة.
هل أختبر على المتصفحات كلها؟
ركّز على الأشيع في جمهورك: متصفح أندرويد الافتراضي ومتصفح آيفون يغطيان الأغلبية. والاختلافات بينهما حقيقية خصوصًا في النماذج والفيديو والخطوط، ولا يكشفها اختبار على متصفح واحد.
أغلب زوارك على الجوال، وأغلب اختباراتك على الحاسوب. هذه الفجوة هي التي تجعل أعطالًا كاملة تعيش شهورًا بلا أن يبلّغ عنها أحد — لأن من واجهها غادر ولم يخبرك.