تجربة الجوّال

الواقع: المتجر السعودي جوّال-فيرست أو لا شيء

إحصاءات السوق السعودي ثابتة منذ ٢٠٢١: ٨٢٪ من الزيارات تأتي من الجوّال. هذا أعلى من المتوسط العالمي (٦٠٪). يعني: التصميم على الجوّال ليس 'مستحبّ' — هو ٨٠٪ من المعركة.

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

ثلاث نقاط نفحصها في كل تشخيص

١. وسم viewport

أبسط شيء، وأكثر شيء ينقص بشكل غريب. الـHTML الذي لا يحتوي على هذا السطر:

<meta name="viewport" content="width=device-width, initial-scale=1">

...يفتح على الجوّال بحجم حاسوب مصغّر. النصّ صغير جداً، الصور كبيرة جداً، المستخدم يحتاج للتكبير والتحريك لرؤية أيّ شيء. أكثر من ١٥٪ من المتاجر الصغيرة التي شخّصناها تنقصها هذه السطر.

٢. الـdir="rtl"

لو متجرك بالعربية، الـHTML يجب أن يحتوي على dir="rtl" على عنصر html أو body. هذا يقلب التخطيط بأكمله: الهوامش، الحشو الداخلي، اتجاه القراءة، أشرطة التمرير.

متجر بنصوص عربية لكن بدون dir="rtl" يبدو 'مكسوراً' — العنوان يبدأ من اليسار، الأرقام تختلط مع النص، مسار التنقّل يتجه في عكس اتجاه القراءة. هذه مشكلة سعودية تحديداً، نراها في قوالب أجنبية تُترجم للعربية بدون تطبيق الـdir صحيحاً.

٣. خطوط عربية حقيقية

النصّ العربي بدون خط عربي مخصّص يستخدم الخط البديل للنظام — Arial في Windows، ‏.SF Pro Arabic في iOS، Roboto Arabic في Android. هذه خطوط 'تشتغل' لكنها لا تنقل أيّ شخصية للعلامة.

متجر سعودي جاد يحمّل خطّاً عربياً مخصّصاً: Noto Sans Arabic، IBM Plex Sans Arabic، Tajawal، Cairo، أو Readex Pro. هذا قرار هويّاتي قبل أن يكون تقنياً.

ما لا يكشفه الفحص الآلي

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

• حجم أهداف اللمس — كل زر أو رابط يجب أن يكون أكبر من 44×44 px (معيار Apple). أقل من ذلك = صعب الضغط.
• المسافة بين الروابط — لو رابطان قريبان جداً، الأصبع قد يضغط الخطأ.
• العناصر الثابتة — ترويسة ثابتة أو شريط سفلي يحجز جزءاً من الشاشة. لو كبير جداً، يقلّل المحتوى المرئي.
• نموذج إتمام الطلب — كم خطوة؟ كم حقل؟ كل حقل إضافي = خسارة ٦٪ من المستخدمين.
• اختبار إتمام الطلب بأصبع واحد فعلاً، مو كلتا اليدين.

التوصية: اختبر بنفسك أسبوعياً

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

أكثر اكتشافات تجربة المستخدم تأتي من هذا الاختبار البسيط، لا من تقارير التحليلات.

متجرك ليس ما تراه على شاشتك. هو ما يراه زائرك على شاشته. الفرق بينهما هو الفرق بين متجر يبيع ومتجر يبدو جميلاً.

الخلاصة

تجربة الجوّال ليست رفاهية في السوق السعودي — هي المتجر. الـviewport، الـRTL، الخط العربي ثلاث نقاط أساسية لا يجب أن تنقص. وراءها، تجربة اللمس وإتمام الطلب والعناصر الثابتة تحتاج فحصاً يدوياً.

ابدأ بفتح متجرك على جوّالك الآن. لو شعرت بأيّ احتكاك، الزائر يشعر به أيضاً — لكنه أقلّ صبراً منك.