الواجهة العربية ليست واجهة إنجليزية بنص مترجم؛ فالتصميم من اليمين إلى اليسار يغيّر طريقة قراءة الشاشة، واتجاه الأيقونات، وسلوك النص المختلط بين العربية والإنجليزية. هذه 12 نقطة نطبقها على التطبيقات والمواقع ثنائية اللغة لعملائنا في السعودية.
- حدد الاتجاه من الجذر: استخدم
dir="rtl"وlang="ar"في الويب، ودعم RTL في React Native، أو اتجاه النص في Flutter، بدل محاذاة العناصر يمينًا واحدًا واحدًا. - استخدم المسافات المنطقية: اكتب البداية والنهاية بدل اليسار واليمين للهوامش والمحاذاة، ليعمل تخطيط واحد في الاتجاهين.
- اعكس التنقل والتقدم: أسهم الرجوع وشرائح العرض ومؤشرات الخطوات وأشرطة التقدم وإيماءات السحب تتبع اتجاه القراءة.
- لا تعكس كل شيء: الشعارات وأزرار تشغيل الوسائط والساعات وعلامات الصح وصور الأشياء الحقيقية تبقى غالبًا كما هي.
- قرر طريقة عرض الأرقام: اختر الأرقام الغربية (1، 2، 3) أو الهندية (١، ٢، ٣) وطبّقها بثبات، خاصة في الأسعار والتواريخ.
- أبقِ أرقام الجوال والبريد والرموز من اليسار إلى اليمين: غلّفها كي لا تظهر مقلوبة داخل الجمل العربية.
- اعزل النص المختلط: أسماء العلامات الإنجليزية والأسعار مع العملة ورموز المنتجات داخل النص العربي تحتاج عزلًا ثنائي الاتجاه لتبقى بالترتيب الصحيح.
- اختر خطًا عربيًا حقيقيًا: استخدم خطًا مصممًا للعربية مع ارتفاع سطر أكبر قليلًا، وتجنب تباعد الحروف والأنماط الكبيرة التي تكسر الحرف العربي.
- راعِ طول النص: قد تكون التسميات العربية أقصر أو أطول من الإنجليزية، فصمم أزرارًا وتبويبات تتكيف بدل قص النص.
- تعامل مع التواريخ بعناية: حدد هل يحتاج المستخدم التقويم الميلادي أو الهجري أو كليهما، ونسّق التواريخ لكل لغة.
- اضبط النماذج: اجعل اتجاه الإدخال تلقائيًا للبريد والروابط والأرقام، وضع التسميات ورسائل الخطأ في الجهة الصحيحة، وتحقق من الأسماء العربية بشكل سليم.
- اختبر بمحتوى عربي حقيقي: النص الوهمي يخفي المشكلات. اختبر الشاشات كاملة بالعربية، وبدّل اللغة أثناء الاستخدام، وراجع على آيفون وأندرويد.
لماذا يهم ذلك؟
يتحول كثير من المستخدمين في السعودية إلى العربية فور توفرها في التطبيق. والشاشات ذات الأرقام المقلوبة أو الشعارات المعكوسة أو التسميات المقصوصة تبدو غير مكتملة وتقلل الثقة، خاصة في الدفع والحجز.
مثال: أوفر
في أوفر، تطبيق العروض والكوبونات، صممنا واجهات اليمين إلى اليسار واليسار إلى اليمين معًا بدل ترجمة التصميم الإنجليزي لاحقًا، ليحصل التجار والمتسوقون على الجودة نفسها باللغتين.
تحتاج منتجًا ثنائي اللغة بتصميم صحيح؟ راجع تصميم واجهة وتجربة المستخدم وتطوير تطبيقات الجوال، أو قارن بين الأطر في React Native أم Flutter لتطبيقات السعودية.
