تصميم تجربة المستخدم للواجهات العربية: دليل عملي

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

العناصر المرتبطة بالترتيب المكاني، مثل الخطوط الزمنية والمنزلقات والرسوم البيانية، تحتاج قرارًا لكل منها. كثير من المنتجات العربية تعكس المحور الزمني في الرسوم وبعضها يُبقيه، وكلاهما ممكن إذا كان ثابتًا ومُختبرًا مع مستخدمين حقيقيين.

اعكس كل ما يعبّر عن اتجاه أو تسلسل:

• أسهم الرجوع والتقدم والأقواس الزاوية وفواصل مسار التنقل
• أشرطة التقدم والخطوات ومسارات التهيئة
• القوائم الجانبية والأدراج التي تنزلق من الحافة
• محاذاة النص ونقاط القوائم ومواضع تسميات النماذج

وغالبًا أبقِ، أو قرّر حسب الحالة، ما لا يحمل معنى اتجاهيًا:

• الشعارات والعلامات التجارية
• الساعات وعلامات الصح ولوحات أرقام الهاتف
• أيقونات تشغيل الوسائط لأنها تصف الزمن لا اتجاه القراءة
• أرقام الهواتف والأكواد، وتبقى من اليسار لليمين داخل النص العربي

اتبع إرشادات المنصة إن وُجدت، واكتب القاعدة في نظام التصميم حتى لا يخمّن المطورون.

الحروف العربية تتصل وتتغير بحسب موضعها، لذلك تختلف قواعد الطباعة عن اللاتينية:

• لا تضف تباعدًا بين الحروف، فهو يقطع الاتصال
• تجنّب الخط المائل والغامق الصناعي، واختر عائلة فيها أوزان حقيقية
• امنح العربية ارتفاع سطر أكبر من اللاتينية، غالبًا من 1.5 إلى 1.8
• قد تحتاج العربية حجمًا أكبر قليلًا لنفس الوزن البصري، فاختبرها على أجهزة حقيقية
• تجنّب النص المضبوط من الجانبين ولا تقطع الكلمة من منتصفها

اختر عائلة مصممة للواجهات مثل IBM Plex Sans Arabic أو Noto Sans Arabic أو Cairo أو Tajawal، وزاوجها بخط لاتيني قريب في الارتفاع والوزن ليبدو النص المختلط بصوت واحد.

تُستخدم الأرقام الغربية (0 إلى 9) والأرقام العربية الهندية، والاختيار يعتمد على السوق والمنتج. اختر نظامًا واحدًا وطبّقه في كل مكان، بما فيه الإشعارات والبريد، وأتح خيارًا للمستخدم عند الحاجة.

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

الواجهات العربية تحتوي دائمًا على لاتيني: أسماء علامات وبريد وروابط وأكواد. وخوارزمية الاتجاه قد تنقل علامات الترقيم إلى الجهة الخاطئة من هذه المقاطع.

• اضبط lang وdir على الحاويات لا على الصفحة فقط
• استخدم dir="auto" لمحتوى المستخدم و<bdi> حول الأسماء المُدرجة
• اختبر علامات الترقيم في نهاية السطر وبجوار الأرقام
• أبقِ حقول البريد والهاتف والروابط من اليسار لليمين حتى داخل نموذج عربي

الفصحى والمصرية والخليجية والشامية تُقرأ بشكل مختلف. حدّد نبرة المنتج وجمهوره، واكتب بها مباشرة بدل الترجمة من الإنجليزية، واجعل متحدثًا أصليًا يراجع كل رحلة.

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

حاذِ التسميات والحقول لليمين، وأبقِ النص التوضيحي ورسائل التحقق في اتجاه الحقل نفسه، واضبط لوحة المفاتيح للأرقام. قد يُكتب الاسم بالعربية أو اللاتينية فلا تتحقق منه بأبجدية واحدة. وصيغ العناوين والهواتف تتبع السوق لا القالب.

• استخدم خصائص CSS المنطقية مثل margin-inline-start وpadding-inline بدل left وright
• اضبط dir على الجذر ودع المكوّنات ترثه
• اعكس الأيقونات الاتجاهية بقاعدة واضحة لكل أيقونة
• عرّف مجموعة خطوط بعائلة عربية وبديل، واختبر تحميل الخط
• اختبر الاتجاهين بمحتوى حقيقي وسلاسل طويلة ونص مختلط، ويفضّل ضمن اختبارات الانحدار البصري

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