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

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

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

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

حدد اللغة واتجاه الصفحة بصورة مستقلة

توصي إرشادات W3C لاتجاه النص باستخدام الخاصية dir على عنصر HTML عندما يكون الاتجاه العام من اليمين إلى اليسار. أما lang فتصف لغة المحتوى؛ ولا يكفي تحديد العربية فيها لضبط الاتجاه. يمكن أن يبدأ المستند العربي مثلًا بالصيغة التالية:

<html lang="ar" dir="rtl">

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

اختبر العربية مع الأرقام والإنجليزية

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

يمكن للمطور عزل جزء معلوم الاتجاه أو استخدام عنصر bdi عندما يكون اتجاه النص المدرج غير معلوم. يشرح دليل W3C للنصوص المختلطة داخل السطر التعامل مع هذه الحالات باستخدام ترميز HTML. اختر المعالجة بحسب نوع القيمة، ثم اختبر العرض والنسخ؛ فلا توجد معالجة واحدة تناسب كل جملة مختلطة.

راجع التنقل والأيقونات والتخطيط

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

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

صمم باستخدام محتوى عربي حقيقي

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

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

اجعل النماذج ورسائل الخطأ مفهومة

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

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

خطة اختبار عملية قبل الإطلاق

يمكن لفريقك البدء بمراجعة عروض شاشة قدرها 360 و768 و1280 بكسل بوصفها نقاط اختبار مختارة، ثم إضافة المقاسات والأجهزة المناسبة لجمهور المشروع. هذه القيم ليست قاعدة شاملة لكل الأجهزة. اختبر أيضًا التكبير والتمرير، مع عنوان طويل وقائمة خدمات ومحتوى مختلط حتى تظهر المشكلات التي يخفيها النص القصير.

1. اقرأ الصفحة من بدايتها وحدد الخدمة والخطوة المطلوبة دون مساعدة.
2. افتح القوائم وانتقل بين الخدمة والمقال ونموذج التواصل.
3. انسخ رقم الهاتف والبريد ورمز المنتج وقارنها بالقيم الأصلية.
4. أرسل بيانات غير مكتملة ثم صححها وتأكد من وضوح الرسائل.
5. راجع الهاتف فعليًا، وسجل صورة للمشكلة والمقاس والمتصفح المستخدم.

تحتاج عملية تطوير الموقع إلى هذه المراجعة قبل النشر وبعد أي تغيير مؤثر في القوالب. أما تهيئة المحتوى لمحركات البحث فتشمل وضوح العنوان والوصف والروابط والنصوص المقروءة؛ واتجاه RTL وحده لا يضمن ترتيبًا أفضل في البحث.

أسئلة شائعة عن تصميم المواقع العربية

هل يكفي قلب التصميم الإنجليزي؟

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

هل أكتب أرقام الهاتف من اليمين إلى اليسار؟

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

كيف أختبر ترجمة الواجهة؟

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

ابدأ من تجربة العميل

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