تصميم تجربة المستخدم العربية: دليل عملي لتصميم واجهات RTL

01ما هو تصميم تجربة المستخدم العربية، ولماذا لا يكفي عكس التصميم؟

تصميم تجربة المستخدم العربية يعني بناء المنتج للمستخدم العربي من البداية: تخطيط من اليمين إلى اليسار، وخطوط عربية مناسبة، وصيغ محلية للأرقام والتواريخ والأسماء والعناوين، ونصوص مكتوبة بالعربية لا مترجمة عنها. أما عكس التصميم الإنجليزي فيقلب التخطيط، لكنه يقلب معه عناصر لا يجوز قلبها، ويترك مشكلات الخط والمحتوى كما هي.

في السعودية والخليج، العربية هي لغة القرار عند شريحة واسعة من المستخدمين، والمنتج الذي يبدو «مترجماً» يفقد الثقة بسرعة. يجمع هذا الدليل القواعد التي نطبقها في تصميم واجهات RTL: ما الذي ينعكس وما الذي لا ينعكس، والنص ثنائي الاتجاه، والطباعة العربية، والأرقام والتقويم، والنماذج، ونبرة النصوص، ثم الاختبار.

02قواعد تصميم واجهات RTL: ما الذي ينعكس وما الذي لا ينعكس؟

القاعدة الأساسية: كل ما يعبّر عن اتجاه القراءة أو التنقل أو التقدم ينعكس، وكل ما يمثل شيئاً من العالم الحقيقي أو اتجاهاً ثابتاً عالمياً يبقى كما هو.

على مستوى التنفيذ، اطلب من فريق التطوير ضبط اتجاه الصفحة ولغتها في جذر المستند، واستخدام الخصائص المنطقية في CSS مثل margin-inline-start بدلاً من margin-left، حتى ينقلب التخطيط تلقائياً بين اللغتين دون نسختين منفصلتين من الأنماط.

03النص ثنائي الاتجاه: العربية مع الإنجليزية والأرقام

الواجهات العربية نادراً ما تكون عربية خالصة: أسماء منتجات لاتينية، وأرقام طلبات، وبريد إلكتروني، وروابط، وأرقام جوال. خوارزمية الاتجاه في المتصفح تتعامل مع أغلبها جيداً، لكنها تخطئ في مواضع متوقعة:

• علامات الترقيم في نهاية جملة تنتهي بكلمة لاتينية قد تظهر في الطرف الخطأ.
• القيم المُدرجة ديناميكياً، مثل اسم مستخدم لاتيني داخل جملة عربية، قد تبعثر ترتيب الكلمات المجاورة.
• الأرقام مع الوحدات أو العملات، مثل «250 ر.س» أو «SAR 250»، قد تنفصل عن وحدتها.

الحلول معروفة: اعزل كل قيمة ديناميكية باستخدام عنصر bdi في HTML أو محارف العزل في Unicode، واضبط الاتجاه تلقائياً في الحقول التي قد يكتب فيها المستخدم بأي لغة، واجعل حقول البريد والروابط وأرقام الهاتف من اليسار إلى اليمين دائماً. واستخدم علامات الترقيم العربية «،» و«؛» و«؟» في النص العربي.

04الطباعة العربية: كيف تختار الخط وتضبطه؟

اختر خطاً مصمماً للعربية

لا تعتمد على خط لاتيني يسقط إلى خط عربي افتراضي من النظام؛ فالنتيجة أوزان وأحجام غير متناسقة. اختر عائلة صُممت للعربية ولها رفيق لاتيني متناسق، ووفّر الأوزان التي تحتاجها فعلاً. من الخيارات المفتوحة الترخيص الشائعة: IBM Plex Sans Arabic وNoto Sans Arabic وTajawal وCairo وReadex Pro. قيّمها على نصوصك الفعلية وبأحجام الجوال، لا على عنوان عرض كبير.

اضبط الحجم والمسافات

• الحجم: يبدو النص العربي أصغر من اللاتيني عند الحجم نفسه، لذلك يحتاج غالباً إلى حجم أكبر قليلاً، بنسبة تقارب 10 إلى 20% حسب الخط، والاختبار على الجهاز هو الحكم.
• ارتفاع السطر: الحروف الصاعدة والنازلة والنقاط والتشكيل تحتاج إلى مسافة أكبر؛ ابدأ من 1.6 إلى 1.8 للنص الأساسي.
• لا تباعد بين الحروف: الحروف العربية متصلة، وأي letter-spacing يقطع الاتصال ويشوّه الكلمة.
• لا أحرف كبيرة: العربية لا تعرف الأحرف الكبيرة، فلا تبنِ التسلسل البصري على ذلك؛ استخدم الوزن والحجم واللون.

تجنّب الغامق والمائل المصطنعين

إذا لم يُحمَّل الوزن الغامق الحقيقي للخط، يولّد المتصفح غامقاً مصطنعاً يطمس الحروف الصغيرة والنقاط. حمّل الأوزان الحقيقية، واطلب من المطورين منع التوليد الآلي للأوزان. أما الإمالة فلا تقليد راسخ لها في الطباعة العربية الرقمية، والميل المصطنع يبدو مكسوراً؛ عبّر عن التأكيد بالوزن أو اللون. وتجنّب ضبط النص على الجانبين في الفقرات الطويلة على الويب، فالمحاذاة إلى بداية السطر أكثر أماناً.

05الأرقام والتواريخ والتقويم الهجري

الأرقام الغربية أم الهندية؟

في السعودية يُستخدم النوعان: الأرقام الغربية (0-9) شائعة في المنتجات الرقمية والتعاملات التجارية، والأرقام الهندية (٠-٩) حاضرة في سياقات تقليدية ورسمية. القرار الأهم ليس أيهما، بل الاتساق: اختر نوعاً واحداً للعرض في الأسعار والتواريخ ورموز التحقق والجداول، واقبل النوعين عند الإدخال ثم وحّدهما في الخلفية. وانتبه إلى أن الأرقام الفارسية لها محارف مختلفة في Unicode، فعالجها أيضاً عند التوحيد.

التواريخ والتقويم

• التقويم الهجري الرسمي في السعودية هو تقويم أم القرى، ويُستخدم في كثير من الخدمات الحكومية والمناسبات الدينية، بينما يغلب الميلادي في التعاملات التجارية. اعرض الهجري إلى جانب الميلادي حيث يهم المستخدم.
• لا تحسب التحويل بين التقويمين يدوياً؛ استخدم مكتبة موثوقة أو واجهات التدويل في المنصة التي تدعم تقويم أم القرى. وتذكّر أن بداية رمضان والعيد تُعلن رسمياً وقد تختلف بيوم عن التاريخ المحسوب.
• الأسبوع في السعودية يبدأ يوم الأحد، وعطلة نهاية الأسبوع الجمعة والسبت؛ اضبط منتقي التاريخ وجداول المواعيد على ذلك.
• استخدم ترتيب يوم/شهر/سنة، و«ص» و«م» للوقت في الواجهة العربية.

06نماذج تناسب المستخدم السعودي: الأسماء والجوال والعنوان الوطني

• الأسماء: اقبل الحروف العربية واللاتينية، والمسافة في «عبد الله»، والهمزات بأشكالها. وإذا كنت تحتاج إلى مطابقة وثيقة رسمية فاطلب الاسم بالصيغة المطلوبة صراحة، كالاسم الرباعي أو الاسم كما في جواز السفر، بدلاً من فرض «الاسم الأول والأخير» على الطريقة الغربية.
• رقم الجوال: أرقام الجوال السعودية تبدأ بـ 5 بعد رمز الدولة +966، ويكتبها الناس بأشكال مختلفة (05، أو 5، أو +9665، أو 009665). اقبلها كلها ووحّدها إلى الصيغة الدولية.
• العنوان الوطني: يتكون من رقم المبنى واسم الشارع والحي والمدينة والرمز البريدي والرقم الإضافي، وله عنوان مختصر من 4 حروف و4 أرقام. اسمح بإدخال العنوان المختصر أو تحديد الموقع على الخريطة، وتحقق من المتطلبات الحالية لدى سُبل إذا كان عملك يعتمد عليه.
• الهوية: رقم الهوية الوطنية ورقم الإقامة من 10 أرقام؛ يبدأ الأول بـ 1 والثاني بـ 2، ويمكنك التحقق من الطول والبادئة فوراً.

ولا تطلب من البيانات إلا ما تحتاجه فعلاً؛ فذلك أسهل على المستخدم وأقل عبئاً عليك وفق نظام حماية البيانات الشخصية. كما أن النماذج القصيرة التي تقبل الصيغ المحلية من أقوى روافع تصميم المواقع التي تحقق مبيعات.

07نبرة النصوص للمستخدم السعودي والتبديل بين اللغتين

اكتب النصوص بالعربية أولاً ثم اشتق منها الإنجليزية، لا العكس. والنبرة التي تنجح عادة: فصحى واضحة ودافئة ومباشرة، بلا رسمية حكومية ثقيلة ولا لهجة عامية كثيفة في عناصر الواجهة الأساسية.

• استخدم مفردات السوق المحلي: «جوال» لا «موبايل»، و«ريال» أو «ر.س» للعملة. وإذا أردت استخدام رمز الريال السعودي الجديد الذي أُعلن عام 2025، فتحقق أولاً من دعمه في خطوطك وعلى أجهزة مستخدميك.
• تجنّب مخاطبة المذكر افتراضياً حيث يمكن؛ فصيغة المصدر مثل «تسجيل الدخول» و«إدخال الرمز» محايدة وواضحة.
• اكتب رسائل خطأ تشرح الحل، مثل «رقم الجوال يجب أن يبدأ بـ 5»، لا «إدخال غير صالح».

وفي التبديل بين اللغتين: ضع زر اللغة في مكان ثابت ظاهر، واكتبه بلغته الهدف («English» في الواجهة العربية و«العربية» في الإنجليزية) بدلاً من الأعلام، وأبقِ المستخدم في الصفحة نفسها بعد التبديل، واحفظ اختياره. وللمواقع، اجعل لكل لغة رابطاً مستقلاً يمكن أرشفته، كما نشرح في دليل تحسين محركات البحث للشركات السعودية.

08إمكانية الوصول والاختبار بمحتوى ومستخدمين حقيقيين

إمكانية الوصول في الواجهة العربية تبدأ بأساسيات يسهل إهمالها: تعريف لغة الصفحة بشكل صحيح حتى تقرأها قارئات الشاشة بصوت عربي، ووسم العبارات الإنجليزية داخل النص العربي بلغتها، وترتيب تنقل بلوحة المفاتيح يتبع الترتيب البصري من اليمين إلى اليسار، وتباين ألوان كافٍ، خاصة أن الأوزان الرفيعة للخطوط العربية تضعف بسرعة في الأحجام الصغيرة. ولا تضع نصاً عربياً داخل الصور.

أما الاختبار فهو حيث تنكشف معظم المشكلات:

1. محتوى حقيقي من اليوم الأول — صمّم بنصوص عربية فعلية وأسماء طويلة وقيم مختلطة، لا بنص تجريبي أو ترجمة آلية.
2. أجهزة بلغة عربية — اختبر على أجهزة لغة نظامها العربية ولوحة مفاتيحها عربية، وعلى جوال متوسط لا على أحدث جهاز فقط.
3. مستخدمون سعوديون — جولات قصيرة مع عدد محدود من المستخدمين من الجمهور المستهدف تكشف مشكلات الصياغة والتوقعات التي لا يلاحظها الفريق.
4. مراجعة قبل الإطلاق — ضمّن حالات RTL والنص المختلط والأرقام في خطة اختبار البرمجيات، لا في ملاحظات عشوائية بعد الإطلاق.

لا يجب أن يشعر المستخدم العربي أبداً أنه يستخدم نسخة مترجمة.

09قائمة تحقق لتجربة مستخدم عربية سليمة

• الاتجاه واللغة مضبوطان في جذر الصفحة، والتنسيق مبني على الخصائص المنطقية.
• الأسهم ومؤشرات التقدم منعكسة، وأزرار الوسائط والساعات والشعارات والأرقام غير منعكسة.
• القيم الديناميكية والنص اللاتيني معزولة عن النص العربي.
• خط عربي حقيقي بأوزانه الفعلية، دون تباعد حروف أو إمالة مصطنعة.
• نوع أرقام واحد في العرض، والنوعان مقبولان في الإدخال.
• التقويم وبداية الأسبوع وصيغ التاريخ والوقت مناسبة للمستخدم السعودي.
• حقول الاسم والجوال والعنوان تقبل الصيغ المحلية.
• النصوص مكتوبة بالعربية أولاً، ومختبرة مع مستخدمين حقيقيين.

إذا كنت تبني منتجاً رقمياً لجمهور عربي أو تريد مراجعة واجهة حالية، فاطّلع على خدمات التصميم لدينا، أو تواصل معنا لنراجع معك أهم الشاشات ونحدد ما يحتاج إلى إصلاح أولاً.