أغلب مشاكل التطبيقات العربية لا تأتي من ترجمة سيئة، بل من واجهة صُممت بالإنجليزية ثم قُلبت. وفي تصميم التطبيقات من اليمين لليسار، عكس اتجاه التخطيط هو الجزء السهل، أما ما ينكسر فهو كل ما حوله: الأيقونات، والأرقام، والنصوص المختلطة باللغتين، والخطوط، والتواريخ، والإيماءات، والرسوم البيانية.
فيما يلي عشرة أخطاء في تصميم التطبيقات من اليمين لليسار نراجعها في كل تطبيق يُبنى للعربية أولًا، ومع كل خطأ طريقة تجنبه. إذا كنت تخطط لتطبيق موجه للمستخدم السعودي، فناقش هذه النقاط مع فريق برمجة تطبيقات الجوال قبل أن يبدأ التصميم، لا أثناء الاختبار، لأن تصحيحها مبكرًا رخيص وتصحيحها متأخرًا مكلف.
1. عكس التخطيط مع قلب الأيقونات الخطأ
في الواجهات من اليمين لليسار (RTL) تنعكس الشاشة كلها: التنقل والقوائم والتقدم وترتيب القراءة كلها تبدأ من اليمين. الأيقونات التي تدل على اتجاه يجب أن تنعكس معها: أسهم الرجوع والتقدم، والأسهم الصغيرة في القوائم، وأزرار "التالي"، والتراجع والإعادة، وأيقونات الإرسال.
أما الأيقونات التي تمثل أشياء من الواقع أو أعرافًا ثابتة فلا تُقلب: الساعة، وعلامة الصح، والكاميرا، وسماعة الهاتف، وعدسة البحث، والشعارات، وأزرار تشغيل الوسائط مثل التشغيل والتقديم السريع، لأنها تتبع اتجاه الوسائط لا اتجاه النص. اعمل قائمة بكل أيقونة في نظام التصميم وحدد أمام كل منها "تنعكس" أو "تبقى". المبرمج لا يستطيع أن يخمّن هذا.
2. الأرقام العربية والإنجليزية مختلطة بلا قاعدة
للعربية أرقامها الخاصة (٠١٢٣) إلى جانب الأرقام الغربية (0123) المستخدمة في الإنجليزية، والنوعان حاضران في السعودية. الخطأ ليس في اختيار أحدهما، بل في خلطهما في الشاشة نفسها: سعر بأرقام عربية بجانب رقم طلب بأرقام غربية.
- اختر نمط أرقام واحدًا للواجهة العربية وطبّقه في كل مكان.
- اقبل النمطين في حقول الإدخال ووحّدهما قبل الحفظ، فالعميل الذي يكتب رقم جواله بأرقام عربية لا يجب أن تظهر له رسالة خطأ.
- حافظ على أرقام الجوال والبطاقات والرموز بترتيب ثابت من اليسار لليمين حتى داخل الشاشات العربية.
- راجع موضع رمز العملة بالنسبة للمبلغ في كل لغة.
3. النص ثنائي الاتجاه: أسماء العلامات والروابط والرموز داخل العربية
الجملة العربية كثيرًا ما تحتوي على إنجليزية: أسماء علامات تجارية، ورموز منتجات، وعناوين بريد، وروابط، وأسماء مستخدمين. محرك النص يحاول تخمين اتجاه كل جزء، وكثيرًا ما يخطئ عند علامات الترقيم والأقواس والأرقام، فتظهر النقطة في الجهة الخطأ أو ينقسم رقم الجوال إلى نصفين.
حدّد هذه المقاطع صراحة على أنها من اليسار لليمين في الكود، باستخدام خصائص اتجاه النص والعزل التي توفرها المنصة، واختبر كل شاشة يظهر فيها محتوى مختلط أو يكتبه المستخدم: الأسماء، والعناوين، ونتائج البحث، والمحادثات.
4. الخطوط وارتفاع السطر وقصّ النص
الحروف العربية أطول صعودًا وأعمق نزولًا من اللاتينية، وفيها نقاط وحركات فوق الحروف وتحتها. ارتفاع السطر المناسب للإنجليزية سيقصّ العربية أو يزحمها.
- اختر خطًا عربيًا مصممًا للشاشات ومتناسقًا مع خطك اللاتيني، بدل الاعتماد على الخط الافتراضي للنظام.
- أعطِ العربية مساحة رأسية أكبر، وتجنب صناديق النص ثابتة الارتفاع.
- لا تضف تباعدًا بين الحروف العربية أبدًا، فهو يكسر اتصال الحروف ببعضها.
- انتبه لقصّ النص. علامة الحذف (...) التي تقطع كلمة عربية في منتصفها قد تغيّر المعنى أو تخفيه. اسمح بسطرين حيث تكون العناوين مهمة.
5. تمدد النص وانكماشه بين اللغتين
الرسالة نفسها قد تكون أقصر بكثير أو أطول بكثير بالعربية منها بالإنجليزية، ويتغير ذلك أيضًا في الأزرار والتبويبات والإشعارات. التصاميم المبنية على أطوال النصوص الإنجليزية تنكسر بالعربية: أزرار يفيض نصها، وتبويبات تلتف عناوينها، وعناوين تدفع المحتوى خارج الشاشة.
صمّم بعروض مرنة، واختبر بأطول النصوص الحقيقية في اللغتين، وتجنب وضع النص داخل الصور حيث لا يمكن تكييفه.
6. لوحات المفاتيح وأنواع الإدخال
النماذج هي المكان الذي تبدو فيه التطبيقات العربية أكثر انكسارًا.
- استخدم أنواع الإدخال الصحيحة حتى تظهر لوحة المفاتيح المناسبة: أرقام لرقم الجوال والمبالغ، وبريد إلكتروني لحقول البريد.
- حقول البريد والروابط وكلمات المرور والرموز يجب أن تكون من اليسار لليمين حتى في الواجهة العربية، أما حقول الاسم والعنوان فتتبع اللغة التي يكتب بها المستخدم.
- اجعل محاذاة النص التوضيحي والعناوين ورسائل الخطأ متسقة مع الحقل.
- اختبر البحث بكلمات عربية، مع اختلافات الإملاء، وبالحركات وبدونها.
7. التواريخ والتقويم الهجري
كثير من المستخدمين في السعودية يتعاملون مع التقويمين الميلادي والهجري. وحسب طبيعة التطبيق، مثل الخدمات المرتبطة بالجهات الحكومية أو الموارد البشرية أو الحجوزات في رمضان والحج، قد يتوقع المستخدم التاريخ الهجري أو الميلادي أو كليهما.
- حدّد أي تقويم تعرضه كل شاشة، وهل يستطيع المستخدم الاختيار.
- استخدم دعم التقويم واللغة الذي توفره المنصة بدل التحويل اليدوي.
- اعرض أسماء الأشهر بالعربية في الواجهة العربية، وراجع سلوك أداة اختيار التاريخ في الاتجاه من اليمين لليسار.
- تذكّر أن أيام العمل والإجازة الأسبوعية في السعودية تختلف عن الإعدادات الغربية الافتراضية عند تصميم الجداول ومواعيد التوصيل.
8. الرسوم البيانية وأشرطة التقدم وأشرطة التمرير
أشرطة التقدم ومؤشرات الخطوات وأشرطة التمرير يجب في الغالب أن تتحرك من اليمين لليسار بالعربية، لأنها تمثل ترتيب القراءة. أما الرسوم البيانية فالأمر فيها أقل وضوحًا: بعض الفرق تعكس محور الزمن، وبعضها يبقيه من اليسار لليمين لأن المستخدمين اعتادوا قراءة الرسوم بهذه الطريقة. كلا الخيارين قد ينجح، أما الذي يفشل فهو خلطهما في تطبيق واحد. ضع قاعدة، وطبّقها على كل رسم بياني وكل عنصر تقدم، واختبرها مع المستخدمين.
9. إيماءات السحب واتجاه التنقل
الإيماءات لها اتجاه أيضًا. في الواجهة العربية، الشاشة التي جاء منها المستخدم تكون على اليمين، لذلك يجب أن تنعكس إيماءة الرجوع وانتقالات الصفحات. الشرائح المتحركة، وشاشات التعريف بالتطبيق، ومعارض الصور، وسحب العنصر لحذفه، كلها تحتاج قرارًا مقصودًا.
الخطأ الشائع تخطيط معكوس بينما السحب ما زال يتحرك في الاتجاه "الخطأ"، فتنزلق الخطوة التالية من الجهة التي قرأها المستخدم للتو. اختبر كل إيماءة بالعربية على أجهزة حقيقية، في iOS وأندرويد.
10. الاختبار بمحتوى عربي حقيقي، وصفحة متجر بالعربية
النص الوهمي (Lorem ipsum) يخفي كل المشاكل السابقة. صمّم واختبر بنصوص عربية حقيقية، وأسماء وعناوين سعودية حقيقية، وأسماء منتجات حقيقية، بنسخ طويلة وقصيرة من كل منها. وأضف محتوى مختلطًا بين العربية والإنجليزية، لأن مستخدميك سيكتبونه.
ثم أكمل العمل في المتاجر. متجر App Store وGoogle Play كلاهما يتيح لك توطين اسم التطبيق ووصفه ولقطات الشاشة. التطبيق المبني للعربية أولًا بلقطات متجر إنجليزية فقط يقول للعميل السعودي إنه لم يُبنَ له. اكتب صفحة المتجر بالعربية أصلًا، والتقط الصور من الواجهة العربية.
من أين تأتي أخطاء تصميم التطبيقات من اليمين لليسار؟
الأخطاء العشرة كلها تقريبًا تأتي من قرار واحد: معاملة العربية كخطوة ترجمة في النهاية. وسواء بنيت التطبيق بشكل أصلي (Native) أو متعدد المنصات، وهذا ما نناقشه في مقارنة تطوير التطبيقات الأصلية ومتعددة المنصات في السعودية، يجب أن يكون دعم الاتجاه من اليمين لليسار جزءًا من نظام التصميم من أول شاشة، إلى جانب إرشادات العلامة التجارية ثنائية اللغة.
اعمل معنا: نصمم ونبرمج تطبيقات iOS وأندرويد للمنشآت السعودية بالعربية أولًا. تعرّف على خدمة تصميم تطبيقات الجوال، أو اقرأ التطبيقات الأصلية أم متعددة المنصات: أيهما تختار؟
أسئلة شائعة
هل يدعم Flutter وReact Native الاتجاه من اليمين لليسار؟ نعم، كلاهما يدعم التخطيط من اليمين لليسار. لكن دعم إطار العمل يغطي الأساسيات فقط، أما اختيار الأيقونات والأرقام والخطوط والإيماءات والرسوم البيانية فتبقى قرارات تصميم على فريقك أن يتخذها.
هل يستخدم التطبيق العربي الأرقام العربية أم الغربية؟ كلاهما قد ينجح. المهم أن تختار نمطًا واحدًا للواجهة، وتستخدمه باتساق، وتقبل النمطين في حقول الإدخال.
هل نصمم بالإنجليزية أولًا ثم العربية؟ إذا كان أغلب مستخدميك يتحدثون العربية، فصمّم بالعربية أولًا ثم كيّف للإنجليزية. وعلى الأقل، صمّم اللغتين جنبًا إلى جنب من البداية.
كيف نختبر الاتجاه من اليمين لليسار بشكل صحيح؟ استخدم محتوى عربيًا حقيقيًا على أجهزة iOS وأندرويد حقيقية، وأضف نصوصًا مختلطة اللغة، واجعل متحدثين أصليين بالعربية يمرّون على كل المسارات الرئيسية في التطبيق.