تصميم واجهات عربية من اليمين إلى اليسار: قائمة تحقق من 25 نقطة
قائمة من 25 نقطة لتصميم واجهات عربية من اليمين إلى اليسار في المنتجات ثنائية اللغة: عكس الاتجاه، والخطوط، والأرقام، والنصوص ثنائية الاتجاه، والنماذج، والاختبار.
تصميم تجربة المستخدم العربية من اليمين إلى اليسار (RTL) ليس نسخة معكوسة من واجهة إنجليزية. إنه نسخة ثانية من المنتج لا تقل مكانة عن الأولى، لها نظام خطوطها، وأعرافها في كتابة الأرقام، وترتيب قراءتها، ونبرتها الخاصة، وتُحسم قراراتها في مرحلة المخطط الهيكلي لا بقلب الواجهة في اللحظة الأخيرة. تعرض هذه القائمة القرارات الخمسة والعشرين التي نتخذها في كل منتج ثنائي اللغة بالعربية والإنجليزية نصممه للمملكة العربية السعودية والإمارات ودول الخليج عمومًا.
لماذا يتفوق نهج «العربية أولًا» على «العربية أخيرًا»؟
صُمّمت معظم المنتجات ثنائية اللغة في الخليج بالإنجليزية أولًا ثم عُرّبت لاحقًا. ويظهر ذلك في التفاصيل: تسميات مقتطعة، وأيقونات تشير إلى الاتجاه الخطأ، وأرقام يتغير نظامها من شاشة إلى أخرى، ورسائل خطأ تبدو كأنها ترجمة آلية. كل واحدة منها صغيرة، لكنها مجتمعة تقول للمستخدمين الناطقين بالعربية إن المنتج لم يُبنَ لهم حقًا.
البديل هو تصميم النسخة العربية أولًا، أو بالتوازي على الأقل، بحيث يُختبر كل مكوّن في الاتجاهين قبل إطلاقه. وحين صممنا منصة بث تضع العربية أولًا على الجوال والتلفاز والويب لصالح شاشا (Shasha)، كان التخطيط من اليمين إلى اليسار هو التصميم الأساسي، ما اضطرنا إلى حسم القرارات الصعبة المتعلقة بالخطوط والأرقام والتنقل مبكرًا، حين كانت كلفتها زهيدة.
استخدم المجموعات التالية قائمةَ مراجعة لأي تطبيق ثنائي اللغة بالعربية والإنجليزية، سواء كنت تبدأ من الصفر أو تدقق منتجًا قائمًا.
التخطيط وعكس الاتجاه
- اعكس البنية، لا النص وحده. تنتقل قوائم التنقل ومؤشرات التقدم والإجراءات الأساسية وأزرار الرجوع والتقدم وترتيب القراءة كلها إلى الجهة المقابلة. ابنِ الواجهة بالخصائص المنطقية (البداية والنهاية) بدلًا من اليسار واليمين، ليكون التبديل مجرد سمة واحدة في الشيفرة، لا ملف تنسيقات ثانيًا.
- حدّد ما لا يُعكس، ودوّنه. تبقى عادةً من اليسار إلى اليمين عناصر التحكم في تشغيل الوسائط، وأشرطة التقديم الزمني، وأرقام الهواتف، والساعات، والرسوم البيانية ذات المحور الزمني. وثّق هذه الاستثناءات في نظام التصميم حتى لا يُعاد الجدل حولها في كل مرة.
- راجع كل مكوّن مختلط من جديد. البطاقات التي تضم صورة في جهة ونصًا في الأخرى، وصفوف القوائم التي تنتهي بسهم جانبي، والشارات الملحقة بالصور الرمزية، والنصوص المقتطعة، كلها تحتاج إلى أن تقع علامة الحذف والشارة والسهم على الحافة الصحيحة.
- راجع كل نقطة توقف (Breakpoint) في الاتجاهين. شبكة سطح المكتب تنعكس بسلاسة، أما اللوحة السفلية المنزلقة ذات إيماءة السحب على الجوال، أو القائمة الجانبية، أو الشرائح الدوّارة (Carousel) فكثيرًا ما لا تنعكس كذلك.
الخطوط والطباعة
- اختر أزواج الخطوط عن قصد. اختر خطًا عربيًا صُمّم ليرافق خطك اللاتيني، أو اجمع بين خطين متقاربين في الوزن والإيقاع والتباين. كثير من الخطوط الافتراضية في الأنظمة يبدو جيدًا منفردًا، وغير متناسق إلى جانب نظيره اللاتيني.
- امنح النص العربي حجمًا أكبر وتباعد أسطر أوسع. عند الحجم نفسه يبدو الخط العربي أصغر، وتتفاوت امتدادات حروفه الصاعدة والهابطة أكثر، لذا اجعله أكبر بدرجة واحدة مع تباعد أسطر سخي. واختبر أنماط الفقرات والتسميات كلًّا على حدة.
- لا تصطنع التأكيد. تباعد الأحرف (Letter-spacing) يفكك الحروف العربية المتصلة، والمائل المصطنع يشوّهها. استخدم الوزن واللون والحجم لبناء التسلسل الهرمي بدلًا من ذلك.
- صمّم للطولين معًا. نادرًا ما يتطابق عرض النصوص العربية والإنجليزية. تحتاج الأزرار وعلامات التبويب وعناوين الجداول وتسميات التنقل إلى مساحة تتسع للأطول منهما، وإلى قواعد اقتطاع تعمل في اللغتين.
الأرقام والتواريخ والعملات
- اختر نظام أرقام لكل إعداد محلي (Locale) والتزم به. الأرقام المشرقية (المعروفة شائعًا بالأرقام الهندية) والأرقام الغربية كلاهما مستخدم يوميًا في الخليج، ويختلف التفضيل بحسب البلد والجمهور والسياق. دع أبحاث تجربة المستخدم مع مستخدميك الفعليين تحسم الأمر، ثم طبّق القرار في كل مكان، بما في ذلك الرسوم البيانية والإشعارات.
- ادعم التقويم الهجري إلى جانب الميلادي حيث يلزم. تتوقع السياقات الحكومية والقانونية وبعض السياقات المصرفية في السعودية التقويمين معًا. ينبغي أن تعرض منتقيات التاريخ والكشوف والمواعيد النهائية التقويم الذي يتوقعه المستخدم، مع إتاحة الآخر. وتذكّر أن عطلة نهاية الأسبوع هي الجمعة والسبت.
- حافظ على وضوح المبالغ. ضع رموز العملات وعلاماتها وفق الإعداد المحلي، وأبقِ الأرقام نفسها من اليسار إلى اليمين، وتأكد من أن إشارة السالب والفاصلة العشرية وفواصل الآلاف لا تنفصل عن أرقامها عند انقلاب الاتجاه.
النصوص ثنائية الاتجاه
- اعزل النصوص اللاتينية المضمّنة. أسماء المنتجات وعناوين البريد الإلكتروني والروابط ورموز الخصم وأرقام الطرازات داخل الجمل العربية تحتاج إلى عزل ثنائي الاتجاه (Bidi Isolation) كي تقع علامات الترقيم المحيطة بها حيث يتوقعها القارئ.
- دع محتوى المستخدم يحدد اتجاهه بنفسه. ينبغي أن تكتشف حقول الإدخال والتعليقات ورسائل المحادثة واستعلامات البحث الاتجاه تلقائيًا. فالرسالة الإنجليزية داخل محادثة عربية يجب أن تُحاذى إلى اليسار.
- اختبر علامات الترقيم عند الأطراف. علامات الاستفهام والفواصل والأقواس وعلامات التنصيص تنعكس في العربية. والنصوص التي تنتهي بكلمة لاتينية تليها علامة ترقيم هي عادةً الموضع الذي ينكسر فيه التخطيط.
الأيقونات والحركة
- اعكس كل ما يوحي باتجاه. أسهم الرجوع، والأسهم الجانبية، وأيقونات الإرسال، والتراجع والإعادة، وعناصر الانتقال إلى الخطوة التالية، ومؤشرات التقدم، كلها تنقلب. أما أيقونات البحث والساعة وعلامة الصح والإعدادات والشعارات وأيقونات التشغيل فلا تنقلب.
- اعكس الحركة أيضًا. يجب أن تتحرك انتقالات الصفحات والشرائح الدوّارة والسحب للإغلاق ومؤشرات التقدم في شاشات التعريف من اليمين إلى اليسار. فالحركة التي تسير في الاتجاه الخطأ تبدو معطوبة حتى لو كان التخطيط صحيحًا.
- راجع ترتيب القراءة في الرسوم التوضيحية. الرسم التوضيحي المكوّن من ثلاث لوحات أو المخطط المرقّم يُقرأ في العربية من اليمين إلى اليسار. وإن تعذّرت إعادة بنائه، فهو يحتاج إلى تكوين مختلف.
النماذج
- حاذِ كل شيء إلى حافة البداية. التسميات وحقول الإدخال والنصوص المساعدة ورسائل الخطأ والأيقونات داخل الحقول تتبع اتجاه القراءة. أما أرقام الهواتف وأرقام البطاقات وأرقام الآيبان (IBAN) ورموز التحقق لمرة واحدة فتبقى من اليسار إلى اليمين داخل نموذج يسير من اليمين إلى اليسار.
- تحقّق من المدخلات العربية بالطريقة الصحيحة. يجب أن تجتاز عملية التحقق الأسماء المكتوبة بالحروف العربية، وأرقام الهوية الوطنية والإقامة، وصيغ الهوية الإماراتية، والعناوين التي تمزج بين العربية واللاتينية. وانتبه للأشكال المختلفة للحرف الواحد، مثل صور الألف (ا، أ، إ، آ) والياء (ي، ى)، ولا ترفض الأحرف العربية أبدًا بحجة أنها غير صالحة.
- رتّب الحقول بما يناسب التخطيط المعكوس. يتبع ترتيب التركيز، وترتيب التنقل بمفتاح Tab، والتنقل بلوحة المفاتيح ترتيبَ القراءة. ويجب أن تسرد ملخصات الأخطاء الحقول بالترتيب الذي يراها به المستخدم.
المحتوى ونبرة الخطاب
- اكتب بالعربية، ولا تترجم من الإنجليزية. يجب أن يصوغ نصوص الواجهة كاتب يعمل بالعربية، بأسلوب يناسب الجمهور الخليجي. وحدّد مبكرًا كيف سيخاطب المنتج المستخدم، فالعربية تميّز بين المذكر والمؤنث، وهذا الاختيار ينعكس على كل نص في الواجهة.
- ضمّن نظام التصميم مسردًا ثنائي اللغة. يجب أن يكون لكل مصطلح (الحساب، المحفظة، طلب الشراء، الطلب، التابع) مقابل عربي واحد متفق عليه يستخدمه فريق المنتج والتسويق والدعم على حد سواء. ونظام التصميم الذي يتضمن هذا المسرد يمنع تباعد المصطلحات بين الفرق.
الاختبار
- اختبر مع متحدثين أصليين بالعربية، لا مع زملاء ثنائيي اللغة. استقطب مستخدمين لغتهم الأولى العربية في السعودية والإمارات، وأجهزتهم مضبوطة على العربية. فأعضاء الفريق ثنائيو اللغة اعتادوا التغاضي عمّا لن يتقبّله المستخدمون الجدد.
- اختبر ونظام التشغيل مضبوط على العربية. نوافذ النظام ولوحات المفاتيح وقوائم المشاركة والإشعارات وطلبات الأذونات كلها تتغير حين تكون لغة الجهاز العربية، وتتفاعل مع تخطيطك بطرق لن يكشفها أبدًا زر تبديل اللغة داخل التطبيق.
- أتمِت فحص الاتجاه. وثّق كل مكوّن في الاتجاهين، وأضف حالات الاتجاه من اليمين إلى اليسار إلى اختبارات الانحدار البصري (Visual Regression)، واجعل تبديل الاتجاه سطرًا واحدًا في مكتبة المكونات، حتى لا يصدر أي إصدار بتخطيط عربي لم يُختبر.
الأسئلة الشائعة
هل تصميم تجربة المستخدم العربية مجرد عكس لتخطيط إنجليزي؟
لا. عكس الاتجاه يعالج البنية، لكن الخطوط والأرقام والتقاويم والنصوص ثنائية الاتجاه ونبرة المحتوى والاختبار كلها تتطلب قرارات مستقلة. والمنتج الذي يكتفي بعكس الاتجاه يبدو صحيحًا للوهلة الأولى، لكنه يبدو غريبًا عند الاستخدام.
هل يستخدم التطبيق ثنائي اللغة الأرقام المشرقية أم الغربية؟
كلاهما شائع في دول الخليج، والاختيار الصحيح يعتمد على البلد والجمهور والسياق. ادرس المسألة مع مستخدميك، ثم طبّق القرار باتساق في كل شاشة ورسم بياني وإشعار.
متى يجب أن يبدأ تصميم الواجهات من اليمين إلى اليسار في المشروع؟
منذ المخطط الهيكلي الأول. حسم الاتجاه والخطوط والأرقام مبكرًا لا يكلف شيئًا تقريبًا. أما إدخالها لاحقًا على منتج إنجليزي مكتمل فيمسّ كل مكوّن، وغالبًا ما يترك النسخة العربية في مرتبة ثانية بشكل واضح.
إن كنت تخطط لمنتج ثنائي اللغة بالعربية والإنجليزية أو تدقق منتجًا قائمًا، تحدث إلينا لنحدد معًا من أين تبدأ.
