تصميم الواجهات من اليمين إلى اليسار كما ينبغي: دليل عملي لتجربة المستخدم العربية
عكس التخطيط هو الجزء السهل. يتناول هذا الدليل ما يُعكس وما لا يُعكس، والطباعة العربية، والأرقام، والنصوص مختلطة الاتجاه، والنماذج، وكيف تبني دعم الاتجاه في نظام التصميم من البداية.
كثير من الواجهات العربية ليست سوى واجهات إنجليزية تغيّر فيها اتجاه النص. هي تعمل من الناحية التقنية، لكن المستخدم العربي يلاحظ الخلل فورًا: سهم يشير إلى الاتجاه الخطأ، ورقم هاتف مقطّع الأجزاء، وشريط تقدم يمتلئ من الجهة المعاكسة، وخط يبدو مضغوطًا بجوار نظيره اللاتيني. كل مشكلة صغيرة بمفردها، لكنها مجتمعة تقول للمستخدم إن المنتج لم يُصنع له.
ضبط الاتجاه من اليمين إلى اليسار ليس صعبًا، لكنه يحتاج إلى قرارات مقصودة. يجمع هذا الدليل أهمها من واقع التطبيق العملي.
العكس: المبدأ الأساسي
في الواجهة التي تُقرأ من اليمين إلى اليسار، تبدأ القراءة من أعلى اليمين. والعناصر التي تعبّر عن ترتيب أو اتجاه يجب أن تُعكس ليبقى معناها كما هو: فالقائمة الجانبية تنفتح من اليمين، وزر الرجوع يشير إلى اليمين، ومسار التنقل يسير من اليمين إلى اليسار، والعمود الأول في الجدول يكون على اليمين.
في تطوير الويب الحديث، أفضل طريقة لتحقيق ذلك هي استخدام الخصائص المنطقية بدلًا من الفيزيائية، مثل margin-inline-start بدلًا من margin-left، وtext-align: start بدلًا من left. ومع تحديد خاصية dir على العنصر الجذري، ينعكس معظم التخطيط تلقائيًا. وتوفر Flutter وSwiftUI وAndroid مفاهيم مماثلة للبداية والنهاية بدلًا من اليمين واليسار.
ما لا ينبغي عكسه
عكس كل شيء خطأ لا يقل عن عدم عكس أي شيء. فبعض العناصر تمثل أشياء من الواقع أو أعرافًا عالمية ويجب أن تحافظ على اتجاهها.
- أزرار تشغيل الوسائط: التشغيل والتقديم والإرجاع تتبع اتجاه الشريط لا اتجاه القراءة
- الساعات ومؤشرات التقدم الدائرية التي تمثل الزمن
- الشعارات والعلامات التجارية والصور الفوتوغرافية
- الرسوم البيانية ذات المحور الزمني، التي تبقى غالبًا من اليسار إلى اليمين في السياقات المالية والتجارية العربية، وإن اختارت بعض المنتجات غير ذلك؛ المهم الثبات على خيار واحد
- أيقونات الأشياء التي لا اتجاه لها، كعدسة البحث وعلامة الصح
- مقاطع الكود والروابط وعناوين البريد الإلكتروني
الأيقونات تحتاج إلى مراجعة لا إلى قلب
راجع مجموعة الأيقونات وصنّف كل أيقونة في واحدة من ثلاث فئات: تُعكس (الأسهم، والإرسال، والرد، والتراجع، وإزاحة القوائم)، ولا تُعكس (البحث، والإعدادات، والكاميرا، والقلب)، ويُعاد رسمها (كل ما يحتوي على نص أو يد، كقلم يكتب أو إصبع يشير). واحفظ هذه القائمة في نظام التصميم حتى لا يضطر المطورون إلى التخمين.
الطباعة العربية
تتصل الحروف العربية ببعضها وتتغير أشكالها بحسب موقعها في الكلمة، وللخط العربي صواعد ونوازل تختلف عن الحروف اللاتينية. لذلك قد يبدو الخط المتوازن بالإنجليزية صغيرًا أو مزدحمًا بالعربية عند الحجم نفسه.
- اختر خطًا عربيًا مصممًا للشاشات، وزاوجه مع خط لاتيني بوزن وطابع قريبين
- توقع أن تحتاج العربية إلى حجم أكبر قليلًا أو تباعد أسطر أوسع لتبدو مكافئة
- لا تضف تباعدًا بين الحروف في النص العربي، فهو يكسر الاتصال بينها
- لا تنتظر من العربية أن تحاكي أنماط الأحرف الكبيرة في التصميم الإنجليزي؛ فالعربية بلا أحرف كبيرة، فاستخدم الوزن أو الحجم للتأكيد
- اختبر بمحتوى حقيقي، يشمل الكلمات الطويلة والتشكيل حيث يُستخدم
الأرقام والتواريخ
يشيع نظامان للأرقام: الأرقام العربية الغربية (0123456789) والأرقام المشرقية (٠١٢٣٤٥٦٧٨٩). ويختلف الاستخدام بحسب البلد والجمهور والسياق؛ فكثير من تطبيقات الخليج تعتمد الأرقام الغربية في كل مكان لتتسق مع أنظمة الدفع والوثائق الرسمية، بينما يفضّل بعض المحتوى التحريري والحكومي الأرقام المشرقية. اتخذ القرار عن قصد، وطبّقه باتساق، وتأكد أن أرقام الهواتف وأرقام الطلبات والرموز لا تتقطع ولا يتغير ترتيبها بفعل خوارزمية النص ثنائي الاتجاه.
وتحتاج التواريخ إلى العناية نفسها. قرر هل تعرض التاريخ الميلادي أم الهجري أم كليهما، واستخدم أدوات التنسيق المحلية في المنصة بدلًا من تركيب التواريخ يدويًا. ويجب أن تظهر الوحدات وصيغ الأرقام بالطريقة التي يتوقعها المستخدم المحلي؛ اختبر ذلك مع مستخدمين حقيقيين ولا تعتمد على الإعدادات الافتراضية.
النص مختلط الاتجاه
المحتوى العربي الحقيقي مليء بالكلمات الإنجليزية: أسماء العلامات التجارية، ورموز المنتجات، وعناوين البريد، والمصطلحات التقنية. تتعامل خوارزمية Unicode ثنائية الاتجاه مع معظم هذه الحالات، لكنها تخفق في مواضع متوقعة، كجملة تنتهي بكلمة إنجليزية تتبعها علامة ترقيم، أو عنصر قائمة يبدأ برقم.
- استخدم خاصية dir أو عنصر العزل bdi في HTML حول المحتوى الذي يكتبه المستخدمون ولا تعرف اتجاهه
- اجعل حقول البريد الإلكتروني والروابط وأرقام الهواتف من اليسار إلى اليمين حتى داخل نموذج عربي
- راجع النصوص المختصرة: يجب أن تظهر علامة الحذف في نهاية اتجاه القراءة
تكتمل الواجهة العربية حين يكف المستخدم العربي عن ملاحظة أنها مترجمة.
النماذج وحقول الإدخال
النماذج هي الموضع الذي تكلّف فيه مشكلات الاتجاه خسارة حقيقية في التحويل. يجب أن تُحاذى العناوين والنصوص المساعدة إلى اليمين، مع بقاء حقول بعينها من اليسار إلى اليمين. وينبغي أن تُكتب رسائل التحقق بعربية طبيعية لا مترجمة كلمة بكلمة. ويجب أن تقبل حقول الاسم الحروف العربية وأن تراعي الأسماء التي لا تنقسم بسهولة إلى اسم أول واسم عائلة. كما يجب أن تعكس حقول العنوان الواقع المحلي؛ ففي مناطق كثيرة من الخليج يكون اسم المبنى أو المَعلم القريب أو موقع الخريطة أنفع من رقم الشارع.
الحركة والإيماءات
يجب أن تتبع الانتقالات اتجاه القراءة. ففي الواجهة العربية يدخل المحتوى من اليسار عند التقدم في الخطوات، ويكون السحب للرجوع نحو اليمين. وتبدأ شرائح العرض من اليمين، وتمتلئ مؤشرات الخطوات من اليمين إلى اليسار. ويسهل إغفال هذه التفاصيل لأنها لا تظهر إلا في التطبيق أثناء التشغيل، لا في التصاميم الثابتة.
ابنِ دعم الاتجاه في نظام التصميم
أسهل لحظة وأقلها تكلفة لدعم الاتجاه من اليمين إلى اليسار هي ما قبل تصميم أول شاشة. وهذا يعني عمليًا:
- عرّف المسافات والمحاذاة بالبداية والنهاية لا باليمين واليسار
- احتفظ بقائمة اتجاه الأيقونات جزءًا من النظام
- صمم الشاشات الرئيسية بالاتجاهين منذ الجولة الأولى من التصاميم
- اختر خطوط النصين معًا، وحدد مقياسًا طباعيًا منفصلًا عند الحاجة
- أضف محتوى عربيًا تجريبيًا إلى كل مكوّن في أداة التصميم
- أدرج لقطات الواجهة العربية في قائمة المراجعة والاختبارات البصرية الآلية
اختبر مع من سيستخدمون المنتج
تكشف الفحوص الآلية أخطاء التخطيط، لكن القارئ العربي وحده يكشف النبرة والصياغة الركيكة والأعراف التي قد تختلف مثلًا بين المستخدم السعودي والإماراتي. وجولة اختبار قصيرة مع خمسة أو ستة أشخاص من جمهورك تكشف عادة أهم المشكلات.
في فيغا للبرمجيات نصمم العربية والإنجليزية معًا منذ أول مخطط أولي، في Figma وفي الكود. وإذا كانت التجربة العربية في منتجك تبدو أمرًا ثانويًا، فإن مراجعة مركزة للاتجاه من اليمين إلى اليسار طريقة سريعة غالبًا لاكتشاف المشكلات التي يلاحظها المستخدمون أولًا وإصلاحها.
