المصمم يعمل على شاشة 27 بوصة، والزائر يتصفّح على شاشة 6 بوصات بيد واحدة في مواصلات مهتزّة. هذه الفجوة سبب معظم مشاكل تجربة الاستخدام.
لماذا الجوال أولاً؟
هو الأغلبية
في معظم القطاعات، أغلب الزيارات تأتي من الجوال — وفي القطاعات الاستهلاكية تتجاوز النسبة ثلاثة أرباع الزوار.
جوجل يعتمده أساساً
جوجل يفهرس ويقيّم نسخة الجوال من موقعك بشكل أساسي. أي أن نسخة سطح المكتب المتقنة لا تنقذك إن كانت نسخة الجوال ضعيفة.
التصميم من الصغير للكبير أسهل
الشاشة الصغيرة تجبرك على تحديد الأولويات. ما ينجو من هذا التصفية هو الجوهري فعلاً، والتوسيع لشاشة أكبر عملية إضافة سهلة.
العكس أصعب بكثير: ضغط تصميم مليء بالعناصر في شاشة ضيقة يُنتج فوضى أو حذفاً عشوائياً.
قواعد عملية للجوال
أحجام اللمس
- الزر لا يقل عن 44 × 44 بكسل
- مسافة كافية بين العناصر القابلة للنقر
- الأزرار المهمة في متناول الإبهام (النصف السفلي من الشاشة)
النصوص
- حجم النص الأساسي 16 بكسل على الأقل
- سطور أقصر — الفقرة الطويلة على شاشة ضيقة مرهقة
- تباين عالٍ للقراءة تحت ضوء الشمس
الصور
- أحجام مناسبة للشاشة الصغيرة، لا صور سطح المكتب مصغّرة
- تحميل كسول لما هو خارج الشاشة الأولى
- أبعاد محجوزة مسبقاً حتى لا يقفز المحتوى عند التحميل
النماذج
- حقول أقل ما يمكن
- نوع لوحة مفاتيح مناسب لكل حقل: رقمية للهاتف، بريدية للإيميل
- تجنّب القوائم المنسدلة الطويلة
أخطاء شائعة على الجوال
- نوافذ منبثقة تغطي الشاشة — جوجل يعاقب عليها صراحةً
- روابط متلاصقة يصعب النقر على المطلوب منها
- جداول عريضة تسبب تمريراً أفقياً للصفحة كلها
- نص صغير يتطلب تكبيراً لقراءته
- فيديو يعمل تلقائياً بصوت — يزعج ويستهلك البيانات
اختبر على جهاز حقيقي
محاكي المتصفح مفيد لكنه لا يكفي. افتح موقعك على جوال فعلي و:
- تصفّحه بيد واحدة
- جرّبه على شبكة بطيئة لا على واي فاي
- املأ النموذج كاملاً حتى الإرسال
- اقرأه في ضوء ساطع
الخلاصة
صمّم للشاشة الصغيرة أولاً، احترم أحجام اللمس والنصوص، تجنّب النوافذ المنبثقة، واختبر على جهاز حقيقي بشبكة بطيئة. هذا يخدم أغلبية زوارك وترتيبك في جوجل معاً.