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

١. ابدأ بمهمة المستخدم قبل قلب الشاشة

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

٢. افصل بين لغة المحتوى واتجاهه

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

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

.card {
  padding-inline: 1.5rem;
  border-inline-start: 2px solid currentColor;
  text-align: start;
}

٣. اختبر الجمل التي تجمع العربية والإنجليزية

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

<p dir="rtl">
  رقم الطلب: <bdi dir="ltr">SB-2048</bdi>
</p>

٤. صمم الحقول بحسب نوع المعلومة

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

٥. راجع الأرقام بوصفها معلومات لاتخاذ القرار

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

٦. حدد ما يتغير اتجاهه وما يحتفظ بمعناه

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

٧. اختبر محتوى عربيًا حقيقيًا وحالات فعلية

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

٨. سلّم القواعد وافحص الرحلة بعد التنفيذ

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

أمثلة من أعمالي

هذه روابط لأعمال منشورة توضح سياق القرارات. ليست تجارب معملية تثبت أثر كل بند في القائمة بمفرده.

قائمة فحص قبل الإطلاق

حدد البنود التي راجعتها أثناء هذه الجلسة. لا تُرسل اختياراتك إلى الخادم ولا تُحفظ بعد تحديث الصفحة.

تحميل قائمة الفحص بالعربية والإنجليزية

مراجع للتنفيذ والتحقق

هل تحتاج إلى مراجعة رحلة عربية أو تصميم منتج ثنائي اللغة؟ تصميم المنتجات وUI/UX · تدقيق تجربة المستخدم