تجربة المستخدم العربية: قائمة مراجعة تتجاوز عكس الشاشة

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

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

حدّد المهمة التي يجب أن ينجزها المستخدم بالعربية

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

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

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

اضبط الاتجاه داخل التنفيذ

توصي إرشادات W3C بضبط الاتجاه الأساسي لصفحة HTML العربية باستخدام dir="rtl"، وتحديد اللغة باستخدام lang="ar". اللغة والاتجاه خاصيتان مستقلتان. وتتيح خصائص CSS المنطقية مثل padding-inline-start أن تتبع المسافات اتجاه القراءة. إرشادات W3C لاتجاه البنية

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

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

اختبر النصوص المختلطة مع علامات الترقيم

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

سلّم المطوّر قيمًا تحتوي علامات ترقيم في مواقع مختلفة. الأمثلة التالية حقول مستقلة، ولا يُطلب عكس ترتيب حروفها:

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

مرّ بخطأ في النموذج ثم أصلحه

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

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

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

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

قرّر ما الذي يتغيّر اتجاهه

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

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

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

امنح النص العربي مساحة كافية

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

اختبر تكبير النص إلى جانب الشاشة الضيقة. يشترط معيار تكبير النص في WCAG 2.2 دعم التكبير حتى 200% دون فقد المحتوى أو الوظيفة، مع استثناءات محدّدة. ويعالج معيار إعادة التدفق المحتوى ذي التمرير الرأسي عند عرض يعادل 320 بكسل CSS، مع استثناءات لما يحتاج إلى تخطيط ثنائي الأبعاد. هذان فحصان مختلفان. W3C: تكبير النص، W3C: إعادة التدفق

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

استخدم جدول قبول للنسختين

الجدول التالي صيغة تقترحها تكنوستاك للتسليم. أضف صفًا لكل حالة مهمة، وحدّد مسؤولًا وأرفق دليلًا من المنتج العامل. أبقِ الحالات غير المحسومة مفتوحة إلى أن تُراجع في التنفيذ.

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

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