لماذا المنتج الرقمي أصعب من صفحة الموقع
الصفحة التسويقية بالعربية في أغلبها نص وصور تتتابع من أعلى الشاشة إلى أسفلها. أما المنتج فمزدحم بعناصر الواجهة: أشرطة تنقل جانبية، وأشرطة أدوات، ونماذج فيها عشرات الحقول، وجداول بيانات، ورسوم بيانية، ونوافذ حوار، ومؤشرات خطوات، ومنزلقات، وإشعارات. ولكل عنصر منها اتجاه مبني فيه، كثيراً ما لم يفكر فيه أحد، لأن مصمميه يقرؤون من اليسار إلى اليمين.
حين تُضاف العربية في مرحلة متأخرة، تكون الطريقة المعتادة أن تُقلب الواجهة كلها بإعداد واحد، ثم يُصلَح ما تعطّل. وما يتعطل كثير، وبعضه لا يظهر إلا مع البيانات الحقيقية: رقم هاتف يُعرض معكوساً، وجدول انعكست أعمدته ولم تصطف أرقامه، ورسم بياني يسير في الاتجاه الخاطئ. لذلك رتّبنا هذه القائمة بحيث تحسب حساب هذه الحالات في التصميم، بدل أن تكتشفها لاحقاً. وإن كان مشروعك موقعاً إلكترونياً، فالأنسب أن تبدأ بدليلنا عن تخطيط موقع باللغتين العربية والإنجليزية.
التخطيط والتنقل
| العنصر | في واجهة من اليمين إلى اليسار | انتبه إلى |
|---|---|---|
| التنقل الجانبي | ينتقل إلى الحافة اليمنى | أسهم الطي والتوسيع حين تشير إلى الاتجاه الخاطئ |
| الأشرطة العلوية | الشعار إلى اليمين، والحساب والإجراءات إلى اليسار | حقول بحث ولوحات إشعارات تنفتح خارج حدود الشاشة |
| مسار التنقل ومؤشرات الخطوات | تسير من اليمين إلى اليسار | فواصل وأسهم ربط بقيت دون عكس |
| علامات التبويب | أول علامة تبويب على اليمين | مؤشر التبويب النشط حين يتحرك في الاتجاه القديم |
| نوافذ الحوار | موضع الزر الرئيسي يعكس القاعدة التي تتبعها في الواجهة من اليسار إلى اليمين | أزرار إغلاق بقيت في مكانها القديم |
| الأدراج واللوحات الجانبية | تنزلق من الجهة المقابلة | إيماءات سحب ما زالت تتوقع الجهة القديمة |
| الرجوع في الهواتف | يشير زر الرجوع وتسير إيماءته في الاتجاه الآخر، تبعاً لنظام التشغيل | إيماءات مخصصة تتعارض مع إيماءات النظام نفسه |
| أشرطة التقدم والمنزلقات | تمتلئ من اليمين إلى اليسار | منزلقات ما زالت قيمتها الدنيا على اليسار |
اطلب من المطورين أن يستخدموا في كل مكوّن خصائص محايدة الاتجاه، أي «البداية» و«النهاية» بدل «اليسار» و«اليمين». عندها تكفي سمة واحدة على الصفحة لعكس التخطيط كما ينبغي، وتأتي الشاشات الجديدة صحيحة تلقائياً.
الأيقونات: ما تعكسه وما تتركه كما هو
اعكس هذه
- أسهم الرجوع والتقدم والتالي والسابق
- أسهم الشيفرون الصغيرة التي تفتح القوائم أو توسّع الصفوف إلى الجانب
- أيقونات اتجاه النص والقوائم والمسافة البادئة
- أسهم الإرسال والرد والتراجع والإعادة
- أيقونات التقدم واتجاه الحركة
اترك هذه كما هي
- الشعارات والعلامات التجارية
- أزرار التشغيل والإيقاف المؤقت والخط الزمني للوسائط
- الساعات وكل ما يُظهر دوراناً في اتجاه عقارب الساعة
- علامات الصح وعلامات الجمع وعدسات البحث
- أيقونات الأشياء الحقيقية، مثل الكاميرا أو الهاتف
صنّف كل أيقونة في مكتبتك مرة واحدة: تُعكس أم تبقى ثابتة، حتى لا يُتخذ القرار من جديد في كل شاشة. أما الأيقونات التي تحمل نصاً أو علامة استفهام فتحتاج إلى مراجعة مستقلة، لأن علامة الاستفهام العربية (؟) تتجه إلى الجهة المعاكسة.
النماذج وإدخال البيانات
- 01
ضع تسميات الحقول والحقول نفسها على اليمين
ومعها علامات الحقول الإلزامية والنصوص الإرشادية ورسائل الخطأ، في الجهة التي تبدأ منها القراءة.
- 02
اجعل اتجاه كل حقل تابعاً لمحتواه
الاسم المكتوب بالعربية يبدأ من اليمين، أما البريد الإلكتروني وعنوان الموقع وكلمة المرور ورمز المنتج في النموذج نفسه فتُكتب من اليسار. لذلك اضبط هذه الحقول صراحةً على الاتجاه من اليسار إلى اليمين.
- 03
تعامل مع الأرقام بقرار واضح
أرقام الهواتف والمبالغ وأرقام الهوية تُقرأ من اليسار إلى اليمين حتى داخل النص العربي. قرّر أي الأرقام يعتمدها المنتج ويعرضها: الغربية أم العربية المشرقية (الهندية)، واقبل النوعين عند الإدخال.
- 04
افتح لوحة المفاتيح المناسبة
لوحة الأرقام للأرقام، ولوحة الحروف اللاتينية للبريد الإلكتروني، والعربية للأسماء، حيثما تسمح المنصة بذلك.
- 05
اعكس عناصر التحكم المركّبة
الحقول التي تحمل أيقونة أو وحدة قياس في أحد طرفيها، وأزرار الزيادة والنقصان، ونطاقات التاريخ بخانتي «من» و«إلى»، ومفاتيح التبديل.
- 06
راجع التقويمات
يختلف يوم بداية الأسبوع وأيام العطلة الأسبوعية من بلد إلى آخر، وبعض المستخدمين يتوقعون التقويم الهجري إلى جانب الميلادي. اسأل جمهورك.
- 07
اختبر قواعد التحقق بالعربية
يجب أن تقبل قواعد التحقق الأسماء المكتوبة بحروف عربية، بما فيها من مسافات وأدوات مثل «بن» و«أبو» و«آل»، وأن تأتي رسائل الخطأ مترجمة ومحددة.
الجداول والأرقام والرسوم البيانية
- 01
ترتيب الأعمدة
ما تحتاج إلى حسمهالعمود الأول، وهو في العادة العمود الذي يعرّف السجل، يأتي على اليمين. تأكد أن الأعمدة المثبتة وإجراءات الصفوف ومربعات التحديد انتقلت معه.
- 02
محاذاة الأرقام
ما تحتاج إلى حسمهينبغي أن تبقى أرقام العمود الواحد مصطفّة بحسب خاناتها لتسهل مقارنتها، أياً كانت الجهة التي تنتهي إليها. واختبر ذلك بأرقام حقيقية.
- 03
العملات والوحدات
ما تحتاج إلى حسمهموضع الرمز أو الاختصار من الرقم في النص العربي، وهل تفصل بينهما مسافة.
- 04
التواريخ والأوقات
ما تحتاج إلى حسمهالصيغة، ونوع الأرقام، وأسماء الأشهر، وترتيب أجزاء التاريخ، على نحو موحّد في المنتج كله.
- 05
الرسوم البيانية الزمنية
ما تحتاج إلى حسمهكثير من لوحات البيانات العربية تُبقي الزمن يسير من اليسار إلى اليمين كما في الرسوم البيانية العالمية، وبعضها يعكسه. اتفق مع مستخدميك على عُرف واحد، وطبّقه في كل مكان.
- 06
الفرز والبحث
ما تحتاج إلى حسمهالترتيب الأبجدي العربي، وبحث يتجاهل التشكيل ويعامل الأشكال المختلفة للحرف الواحد، مثل أ وإ وا، على أنها حرف واحد.
- 07
الملفات المصدَّرة
ما تحتاج إلى حسمهجداول البيانات وملفات PDF والتقارير المطبوعة التي يُخرجها المنتج تحتاج إلى معالجة الاتجاه والخطوط والأرقام نفسها التي تراها على الشاشة.
النص ثنائي الاتجاه
المحتوى العربي الحقيقي مليء بمقاطع تُكتب من اليسار إلى اليمين: أسماء العلامات التجارية، ورموز المنتجات، وعناوين البريد الإلكتروني، والقياسات، والمصطلحات التقنية الإنجليزية. وتتبع البرمجيات مجموعة قواعد قياسية لترتيب هذه المقاطع داخل السطر، لكن هذه القواعد تعطي نتائج مفاجئة حيث يلتقي الاتجاهان. فالجملة التي تنتهي بكلمة إنجليزية تليها نقطة قد تظهر فيها النقطة في الجهة الخاطئة، والرمز الذي يحتوي على شرطة قد يظهر وقد تبادل نصفاه موقعيهما.
- اعزل القيم المُدرجة. حين يوضع اسم مستخدم أو رقم طلب أو اسم ملف داخل جملة، اجعله مقطعاً مستقلاً حتى لا يربك النص من حوله. وتوفّر المنصات طريقة قياسية لذلك.
- حدّد الاتجاه لكل عنصر في القوائم. في قائمة من محتوى يكتبه المستخدمون، ينبغي أن يأخذ كل عنصر اتجاهه من أول حرف له اتجاه محدد فيه.
- راجع علامات الترقيم والأقواس. الأقواس والنقطتان والشرطات المائلة حول النص المختلط هي أول ما يتضرر عادةً.
- اختبر اقتطاع النص. النص المختصر بنقاط الحذف يجب أن يُقتطع من جهة نهاية القراءة، وأن يعرض تلميح الأداة القيمة الكاملة بشكل صحيح.
- لا تبنِ الجمل من أجزاء أبداً. ضمّ القطع المترجمة بعضها إلى بعض داخل الشيفرة ينتج ترتيباً خاطئاً للكلمات. استخدم جملاً كاملة قابلة للترجمة، فيها خانات تُملأ بالقيم.
مثال تطبيقي
إضافة العربية إلى لوحة توزيع طلبات التوصيل
هذا مثال افتراضي يوضح نوع الأخطاء التي لا تكشفها إلا البيانات الحقيقية. شركة توصيل تضيف العربية إلى لوحة التحكم التي يعمل عليها منسقو التوصيل طوال اليوم.
- الطريقةتُحوَّل المكوّنات إلى مسافات محايدة الاتجاه، وتُصنَّف أيقونات المكتبة: 38 أيقونة تُعكس، و112 تبقى ثابتة.
- الاختبار الأولبنص عربي تجريبي تبدو الشاشات سليمة. لكن مع نسخة من البيانات الحقيقية، يكتشف المنسقون أن أرقام هواتف السائقين تُعرض بمجموعات معكوسة، وأن مراجع الطلبات مثل AB-1042 تظهر وقد تبادل نصفاها موقعيهما.
- الإصلاحتُضبط أرقام الهواتف والمراجع وأرقام لوحات المركبات على الاتجاه من اليسار إلى اليمين، وتُعزل في كل موضع تُدرج فيه داخل نص عربي.
- الجداولينعكس ترتيب أعمدة جدول الطلبات، لكن عمود المبالغ يفقد اصطفاف خاناته، فتُعاد محاذاته، وتُنقل قائمة إجراءات الصف إلى الطرف الذي صار نهاية الصف.
- الرسم البيانييُسأل المنسقون عن الرسم البياني لعدد الطلبات في كل ساعة، فيفضّلون أن يسير الزمن من اليسار إلى اليمين، كما في التقارير التي تصلهم من الشركاء. لذلك يبقى الرسم دون عكس، ويُدوَّن القرار.
في الاختبار الثاني، يعمل منسقان لغتهما الأم العربية على المنتج طوال نوبة كاملة، فلا يجدان إلا تعديلات في الصياغة. ولو أُطلق المنتج بعد الاختبار الأول، لتسببت المراجع المعكوسة في أخطاء حقيقية على الطريق.
الخطوط، والاختبار مع مستخدمين لغتهم الأم العربية
تحتاج العربية في المنتج إلى إعدادات طباعية خاصة بها، كما في الصفحة تماماً. اختر خطاً صُمّم للواجهات، تبقى حروفه واضحة في الأحجام الصغيرة، وامنحه حجماً وارتفاع سطر أكبر قليلاً من الخط اللاتيني المقابل، لأن الجداول المزدحمة وتسميات الحقول أكثر ما يتضرر. ألغِ تباعد الأحرف، وتجنّب الخط المائل، ولا تعتمد على الأحرف الكبيرة للتأكيد، فالعربية لا تعرفها. وراجع الأوزان العريضة في الأحجام الصغيرة، حيث قد تنطمس الفراغات داخل الحروف.
ثم اختبر المنتج مع أشخاص يقرؤون العربية كل يوم ويؤدون العمل الذي يخدمه المنتج. أعطهم مهام حقيقية وبيانات حقيقية، على الأجهزة التي يستخدمونها. سيلاحظون الترجمة المتكلفة، والأيقونة التي تشير إلى الاتجاه الخاطئ، والنموذج الذي يعاند لوحة مفاتيحهم، ولن يرى شيئاً من ذلك فريق لا يقرأ اللغة. وكرّر الاختبار بعد كل إصدار مهم، لأن الأخطاء القديمة تعود عادةً مع الشاشات الجديدة.
قائمة التحقق لتصميم المنتج من اليمين إلى اليسار
قائمة التحقق لتصميم المنتجات الرقمية بالعربية (RTL)
0 من 11 منجزةماذا تفعل الآن
حوّل شاشة واحدة مزدحمة من منتجك إلى الاتجاه من اليمين إلى اليسار، واملأها بسجلات حقيقية فيها أسماء وأرقام هواتف ورموز مرجعية. ما تراه من أخطاء في عشر دقائق سيخبرك بحجم العمل الذي ينتظرك، وبالمواضع التي تحتاج فيها المكوّنات إلى تغيير.
تشرح صفحة تصميم واجهات وتجربة المستخدم كيف نصمم المنتجات، أما نظام التصميم فهو المكان الصحيح لتجعل الاتجاه خاصية في كل مكوّن. أرنا المنتج الذي تريده بالعربية.
أسئلة شائعة
هل يمكن إضافة العربية بقلب الواجهة تلقائياً؟
قلب التخطيط بإعداد اتجاه واحد هو الآلية الصحيحة، وينجح جيداً حين تكون المكوّنات مبنية بمسافات محايدة الاتجاه. لكنه لا يكفي وحده: فالأيقونات والنص المختلط والأرقام والجداول والرسوم البيانية والإيماءات يحتاج كل منها إلى قرارات، وللخطوط إعداداتها الخاصة. وتوقّع بعد القلب أن تراجع كل شاشة ببيانات حقيقية.
هل تُقرأ الأرقام من اليمين إلى اليسار في العربية؟
لا. تُقرأ الأرقام من اليسار إلى اليمين حتى داخل نص يسير من اليمين إلى اليسار، سواء كُتبت بالأرقام الغربية أو بالأرقام العربية المشرقية. لهذا تحتاج أرقام الهواتف والمبالغ والرموز والتواريخ إلى عناية: فالنص المحيط بها يسير في اتجاه، والأرقام في الاتجاه الآخر. وتتعامل البرمجيات مع ذلك وفق قواعد ثابتة، وينبغي عزل القيم المُدرجة كي تبقى سليمة.
هل ينبغي عكس الرسوم البيانية للمستخدمين العرب؟
تختلف الأعراف. فبعض المستخدمين يتوقعون أن يسير محور الزمن من اليمين إلى اليسار، بينما اعتاد كثيرون الرسوم البيانية العالمية التي تسير من اليسار إلى اليمين، خصوصاً في المالية والتحليلات. اسأل مستخدميك، واختر عُرفاً واحداً، وطبّقه على كل رسم بياني في المنتج. فما يجب تجنبه هو أن تجتمع أعراف مختلفة في منتج واحد.
أي خط عربي نستخدم في التطبيق؟
اختر خطاً صُمّم للشاشات، بأشكال مفتوحة تبقى مقروءة في الأحجام الصغيرة، وبعدة أوزان. واجمعه مع خط لاتيني قريب منه في الوزن والنسب، أو استخدم عائلة خطوط تضم الكتابتين معاً. ثم اختبره في أكثر شاشاتك ازدحاماً، وبأصغر حجم تستخدمه، على هواتف عادية.
كيف نختبر الواجهة العربية إن كان فريقنا لا يقرأ العربية؟
تحتاج إلى أشخاص لغتهم الأم العربية، والأفضل أن يكونوا ممن يؤدون العمل الذي يخدمه منتجك. اطلب منهم أن ينجزوا مهام حقيقية ببيانات حقيقية، وأن يصفوا ما يبدو لهم غير سليم. تستطيع الفحوص الآلية أن تلتقط النصوص غير المترجمة والعناصر التي تخرج عن حدودها، لكنها لا تستطيع الحكم على الصياغة أو النبرة، ولا على ما إذا كانت القيمة المختلطة الاتجاه تُقرأ بشكل صحيح، وفي هذه المواضع بالذات تضيع الثقة.