نسخة الموقع للجوال: 10 قواعد مع أمثلة قبل وبعد

يصل معظم زوار المتجر الإلكتروني من الهاتف، وهناك يقررون الشراء. إليك 10 قواعد لنسخة الموقع على الجوال مع أمثلة قبل وبعد، والمقاسات الدقيقة للأزرار والخطوط وفق توصيات Apple وGoogle وWCAG.

لماذا ليست نسخة الجوال موقعًا «مصغّرًا»؟

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

10 قواعد مع أمثلة

1. اجعل الأزرار كبيرة

يضغط المستخدم بإصبعه لا بالمؤشر. توصي Apple بمساحة لمس لا تقل عن 44 × 44 pt، وAndroid بـ48 × 48 dp، ويحدد معيار الإتاحة WCAG 2.2 حدًا أدنى قدره 24 × 24 px.

2. كبّر الخط

ما يبدو مناسبًا على الحاسوب لا يُقرأ على الهاتف. يكون النص الأساسي عادةً 16 px أو أكثر حتى لا يضطر أحد إلى التكبير، وكانت أداة Lighthouse من Google تنبّه إلى الصفحات التي يقل فيها أكثر من 40% من النص عن 12 px.

3. انتبه للمسافات

حين تلتصق الكتل يبدو الشاشة مزدحمة ورخيصة. تحتاج إلى مساحة فارغة أكثر مما تظن.

4. ضع الأزرار بعضها تحت بعض

زرّان متجاوران يصبحان ضيقين على الهاتف. الأزرار بعرض الشاشة وواحد تحت الآخر أسهل في الضغط وتقلل الضغطات الخاطئة.

5. أظهر أن المحتوى قابل للتمرير

إذا كانت البطاقات تُمرَّر فيجب أن يظهر ذلك: حافة البطاقة التالية أو النقاط أو الأسهم تدل على وجود المزيد.

6. صغّر القائمة

يجب ألا يشغل الترويس نصف الشاشة. ترويس مختصر بشعار وزر قائمة يترك مكانًا للأهم.

7. أخفِ الثانوي

لا حاجة إلى عرض كل شيء دفعة واحدة على الهاتف: الأكورديون والتبويبات و«عرض المزيد» تجعل الصفحة أنظف. أخفِ ولا تحذف، فـGoogle يفهرس نسخة الجوال ويجب أن يطابق المحتوى نسخة الحاسوب.

8. اجعل بيانات التواصل قابلة للنقر

يجب أن يُفتح رقم الهاتف والبريد بلمسة واحدة، ولهذا وُجدت روابط tel: وmailto:. وزر «اتصل» أبسط من ذلك.

9. لا تُثقل الشاشة الأولى

المساحة في الأعلى قليلة: عنوان واحد وشرح قصير وإجراء رئيسي واحد. اللافتات والخصومات والاشتراكات في الأسفل.

10. لا تنسخ نسخة الحاسوب كما هي

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

يُظهر Metriverra كيف يتحوّل زوار الهاتف والحاسوب إلى مشترين، فيسهل التحقق مما إذا كانت تحسينات نسخة الجوال قد جلبت مبيعات.

باختصار

• الأزرار لا تقل عن 44 × 44 pt (Apple) أو 48 × 48 dp (Android)، والحد الأدنى في WCAG 24 × 24 px.
• النص الأساسي من 16 px فأكثر، مع مسافات بين الكتل.
• أزرار بعرض الشاشة بعضها تحت بعض، وبيانات تواصل قابلة للنقر.
• الشاشة الأولى: إجراء رئيسي واحد، والثانوي في الأكورديون.
• الجوال إعادة بناء لا موقع مصغّر، والمحتوى مطابق لنسخة الحاسوب.

المصادر: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing