تصميم تجربة المستخدم للمواقع العربية: الجوال أولًا واتجاه RTL بشكل صحيح

كثير من المواقع العربية تُبنى على قوالب أجنبية ثم "تُعرّب" بعكس النص فقط. النتيجة أيقونات في الاتجاه الخطأ، وأرقام هواتف مقلوبة، ونماذج مربكة. التصميم العربي الجيد يبدأ من فهم المستخدم العربي وجهازه.

الجوال أولًا

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

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

RTL بشكل صحيح

اتجاه اليمين لليسار يشمل:

• ترتيب العناصر: الشعار يمينًا، والتنقل يتدفق من اليمين.
• الأيقونات الاتجاهية: سهم "التالي" يشير لليسار، وسهم الرجوع لليمين.
• الأيقونات غير الاتجاهية لا تُعكس: علامة التشغيل، والساعة، وشعارات العلامات التجارية.
• النصوص المختلطة: كلمات إنجليزية وأرقام داخل الجمل العربية تحتاج عزلًا صحيحًا حتى لا تنقلب، مثل أرقام الهواتف والبريد.
• الخصائص المنطقية في CSS: استخدام margin-inline-start بدل margin-left يجعل التصميم يتكيف تلقائيًا مع الاتجاه.

الخطوط العربية

• اختر خطًا مصممًا للشاشات وواضحًا في الأحجام الصغيرة، مثل Cairo أو IBM Plex Sans Arabic أو Tajawal.
• حجم مريح: النص العربي يحتاج حجمًا أكبر قليلًا من اللاتيني بنفس الوضوح، و16 إلى 18 بكسل حجم أساسي مناسب.
• ارتفاع سطر كافٍ لأن الحروف العربية لها صواعد ونوازل وتشكيل.
• لا تستخدم تباعد الحروف (letter-spacing) مع العربي، فهو يكسر اتصال الحروف.
• حمّل الأوزان التي تحتاجها فقط للحفاظ على السرعة.

الأرقام

• قرر بين الأرقام العربية (1 2 3) والهندية (١ ٢ ٣) والتزم بها في كل الموقع.
• الأسعار والكميات وأرقام الطلبات يجب أن تكون واضحة وغير منقلبة.
• حقول إدخال الأرقام يجب أن تقبل الأرقام بالصيغتين، فبعض لوحات المفاتيح تكتب بالهندية.

النماذج

• عناوين الحقول فوق الحقل، لا داخله فقط.
• حقل الجوال يقبل 05 أو +966 ويتعامل مع الصيغتين.
• لوحة المفاتيح المناسبة على الجوال: رقمية للهاتف، وبريد للإيميل.
• رسائل الخطأ واضحة بالعربي وبجانب الحقل.

إمكانية الوصول

• تباين ألوان كافٍ بين النص والخلفية.
• نص بديل للصور يصف محتواها.
• إمكانية التنقل بلوحة المفاتيح مع مؤشر تركيز ظاهر.
• سمة اللغة والاتجاه في الصفحة: lang="ar" وdir="rtl"، وهي مهمة لقارئات الشاشة ومحركات البحث.
• احترام إعداد تقليل الحركة لمن يفضّل ذلك.

الخلاصة

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

الأسئلة الشائعة