مبادئ تصميم تجربة المستخدم للمواقع الإلكترونية العربية
مبادئ أساسية في تصميم تجربة المستخدم للمواقع الإلكترونية العربية، تشمل التخطيط من اليمين إلى اليسار، والطباعة، وأنماط التنقل، وتصميم النماذج، وإنشاء تجارب ثنائية اللغة سلسة.
فهم تصميم RTL ما وراء اتجاه النص
يتطلب التصميم للمستخدمين الناطقين بالعربية ما هو أبعد بكثير من قلب التخطيط من اليسار إلى اليمين. العربية لغة تُكتب من اليمين إلى اليسار (RTL)، لكن تصميم RTL يشمل أنماط القراءة، والتسلسل الهرمي البصري، وتوقعات التنقل، والطباعة، وتصميم التفاعل. الإتقان في هذه التفاصيل هو الفارق بين موقع يبدو طبيعيًا للمستخدمين العرب وموقع يبدو كترجمة مُتسرّعة.
هذه المقالة جزء من دليلنا الشامل لتصميم المواقع لشركات الإمارات. نركّز هنا تحديدًا على مبادئ تجربة المستخدم التي تضمن تقديم مواقع عربية لتجارب استثنائية.
هندسة تخطيط RTL
حين يُبدّل المستخدم إلى العربية، يجب أن ينعكس المنطق المكاني الكامل لواجهتك. لا يتعلق الأمر بمحاذاة النص فحسب — بل بالتدفق الاتجاهي لكل عنصر في الصفحة.
ما يجب أن ينعكس
- ترتيب التنقل: ينبغي قراءة عناصر القائمة من اليمين إلى اليسار. ينتقل الشعار عادةً إلى الجانب الأيمن من الرأس، ويتدفق التنقل الرئيسي نحو اليسار.
- تدفق المحتوى: ينبغي أن تبدأ شبكات البطاقات، وقوائم المنتجات، وعناصر الجداول الزمنية من اليمين. تخطيط ثلاثي الأعمدة يُقرأ 1-2-3 من اليسار بالإنجليزية ينبغي قراءته 1-2-3 من اليمين بالعربية.
- اتجاه الأيقونات: أسهم التقدم تشير إلى اليسار، وأسهم الرجوع تشير إلى اليمين. تمتلئ مؤشرات التقدم من اليمين إلى اليسار. تعكس أدوات التحكم في العرض مواضعها.
- تخطيط النموذج: تتمحور التسميات إلى اليمين، وتتدفق حقول الإدخال من اليمين إلى اليسار، وتظهر رسائل التحقق في الجانب المناسب.
- الأشرطة الجانبية والألواح: ينبغي أن ينتقل شريط جانبي على اليسار بالإنجليزية إلى اليمين بالعربية. ينبغي لأدراج الانزلاق عكس اتجاه حركتها.
ما لا ينبغي أن ينعكس
لا ينعكس كل شيء في وضع RTL. فهم الاستثناءات بالقدر ذاته من الأهمية:
- أرقام الهاتف والبيانات الرقمية: تُكتب الأرقام بالعربية من اليسار إلى اليمين حتى داخل النص RTL. تأكد من أن تخطيطك يتعامل مع الاتجاهية المختلطة بصحة.
- أدوات التحكم في تشغيل الوسائط: تحافظ أدوات التشغيل والإيقاف المؤقت وأشرطة البحث على اتجاهها القياسي LTR بغض النظر عن اللغة.
- شعارات العلامات التجارية: لا ينبغي انعكاس الشعارات أبدًا. تظل في اتجاهها الأصلي.
- الأيقونات غير الاتجاهية: أيقونات مثل البحث (العدسة المكبرة)، والإعدادات (الترس)، والملف الشخصي (الشخص) لا تحتاج إلى انعكاس.
تطبيق CSS
النهج الأكثر قابلية للصيانة في تنسيق RTL يستخدم خصائص CSS المنطقية:
- استبدل
margin-leftبـmargin-inline-startوmargin-rightبـmargin-inline-end. - استبدل
padding-left/rightبـpadding-inline-start/end. - استبدل
text-align: leftبـtext-align: start. - استخدم
float: inline-startبدلًا منfloat: left. - عيّن السمة
dir="rtl"على عنصر<html>للصفحات العربية. تدعم أطر CSS الحديثة كـ Tailwind CSS متغيّرrtl:للتجاوزات الخاصة بـ RTL.
أفضل ممارسات الطباعة العربية
الطباعة هي المجال الذي تنقصر فيه كثير من المواقع العربية. للخط العربي خصائص تتطلب قرارات طباعية متعمّدة.
اختيار الخط
اختر خطوطًا مصممة تحديدًا لإمكانية القراءة على الشاشة بالعربية. من الخيارات الموصى بها:
- Dubai: خط طُلب من قِبَل حكومة دبي، مصمم للخطين العربي واللاتيني بوزن بصري متسق.
- Noto Sans Arabic: جزء من عائلة Noto من Google، يوفر تغطية لغوية واسعة وعرضًا ممتازًا على الشاشة.
- IBM Plex Arabic: خط مهني حديث يتناسق جيدًا مع نظيره اللاتيني للمواقع ثنائية اللغة.
- Almarai: خط عربي نظيف ومعاصر متاح على Google Fonts، يعمل بشكل جيد لنص الجسم والعناوين.
حجم النص والمسافات
- ارتفاع السطر: يتطلب الخط العربي ارتفاعات أسطر أكثر سخاءً من النص اللاتيني — عادةً 1.8 إلى 2.0 (مقارنة بـ 1.5-1.6 للإنجليزية). تشمل الأحرف العربية نقاطًا وعلامات تشكيل وحركات رابطة تحتاج مسافة رأسية.
- حجم الخط: يبدو النص العربي عمومًا أصغر قليلًا من النص اللاتيني بقيمة font-size ذاتها نظرًا لنسب الخط. قد تحتاج إلى زيادة حجم الخط الأساسي بمقدار 1-2 بكسل للعربية لتحقيق قابلية قراءة مماثلة.
- تباعد الأحرف: لا تضف تباعد أحرف أبدًا للنص العربي. العربية خط مدمج تتصل فيه الأحرف، وإضافة التباعد يكسر هذه الوصلات ويجعل النص غير مقروء.
- عرض الفقرة: حافظ على أطوال سطر بين 50-70 حرفًا (ما يقارب 400-600 بكسل) لقراءة مريحة في كلا الخطين.
أنماط التنقل للمستخدمين العرب
يجب أن يأخذ تصميم التنقل للمواقع العربية في الحسبان تدفق القراءة RTL مع الحفاظ على اتفاقيات قابلية الاستخدام التي يتوقعها المستخدمون من تجربتهم الأوسع على الإنترنت.
تصميم الرأس
في تخطيط الرأس العربي، يجلس الشعار على اليمين، ويشغل التنقل الرئيسي منطقة الوسط-اليسار، وتكون روابط المرافق (مُبدّل اللغة، والبحث، والحساب) على أقصى اليسار. ينبغي أن يكون مُبدّل اللغة مرئيًا بوضوح ومُسمّى بوضوح — عادةً يُظهر "English" أو "EN" حين يكون الموقع في وضع العربية.
مسارات التنقل ومؤشرات التسلسل الهرمي
مسارات التنقل بالعربية تُقرأ من اليمين إلى اليسار: الرئيسية > التصنيف > التصنيف الفرعي تصبح: التصنيف الفرعي < التصنيف < الرئيسية (مع عكس أسهم الفاصل). تأكد من وضوح مؤشر الصفحة النشطة والتسلسل الهرمي البصري لمسار التنقل في كلا الاتجاهين.
وظيفة البحث
يجب أن يتعامل بحثك مع الإدخال العربي، بما يشمل:
- التشكيل العربي — قد يُدرج المستخدمون هذه العلامات أو يتجاهلونها، وينبغي للبحث إعادة النتائج بغض النظر.
- أنماط الإدخال الشائعة بلوحة المفاتيح العربية، بما فيها استخدام الهمزة وأشكال الألف المتبادلة بكثرة.
- البحثات المُدوَّنة بالحروف اللاتينية — قد يبحث مستخدم عن اسم علامة تجارية بأحرف عربية حتى لو كان الاسم مخزنًا بالإنجليزية.
تصميم النماذج للمستخدمين العرب
النماذج نقاط تفاعل عالية الاحتكاك، وإتقانها بالعربية يتطلب اهتمامًا خاصًا:
- موضع التسمية: تسميات محاذاة لليمين مع حقول إدخال محاذاة لليمين. تعمل التسميات العائمة بشكل جيد في النماذج ثنائية اللغة لأنها تتكيف بصورة طبيعية مع اتجاه النص.
- نص العنصر النائب: قدّم نص عنصر نائب عربيًا يُقرأ بصورة طبيعية — لا تكتفِ بترجمة العناصر النائبة الإنجليزية حرفيًا.
- رسائل التحقق: ينبغي ظهور رسائل الخطأ والنجاح على الجانب inline-end (الجانب الأيسر في RTL). استخدم لغة واضحة ومناسبة ثقافيًا — تجنب رسائل الخطأ التقنية المفرطة.
- إدخال الهاتف: ملّئ مسبقًا رمز الدولة (+971 للإمارات) واستخدم قناع إدخال يستوعب تنسيقات أرقام الهاتف المحلية.
- تنسيق التاريخ: ادعم نظامَي التقويم الميلادي والهجري. رغم أن معظم المعاملات التجارية تستخدم التواريخ الميلادية، يُفضّل بعض المستخدمين التواريخ الهجرية، وقد تستوجبها النماذج المتعلقة بالحكومة.
إنشاء تجارب ثنائية اللغة سلسة
أصعب جانب في تصميم تجربة المستخدم العربية هو إنشاء تجربة سلسة للمستخدمين الذين يتبدّلون بين اللغتين أو يستهلكون المحتوى بهما معًا.
سلوك تبديل اللغة
- الحفاظ على السياق: حين يُبدّل مستخدم اللغة، ينبغي وصوله إلى الصفحة ذاتها باللغة الجديدة، لا توجيهه إلى الصفحة الرئيسية. يتطلب ذلك توجيه اللغة المستند إلى URL (مثل
/ar/products/item-123و/en/products/item-123). - تذكر التفضيلات: خزّن تفضيل اللغة في ملف تعريف ارتباط أو localStorage وطبّقه في الزيارات التالية. ينبغي للزوار لأول مرة رؤية اللغة مُكتشَفة تلقائيًا من إعدادات متصفحهم، مع خيار تجاوز سهل.
- هوية بصرية متسقة: ينبغي أن تبدو علامتك التجارية متطابقة في كلتا اللغتين. ينبغي بقاء الألوان والصور والمساحات البيضاء والإيقاع البصري متسقة حتى مع تغيّر اتجاه التخطيط.
المحتوى المختلط اللغات
كثيرًا ما تحتوي مواقع دول مجلس التعاون الخليجي على محتوى مختلط اللغات — قد تتضمن فقرة عربية أسماء علامات تجارية إنجليزية أو مصطلحات تقنية أو رموز منتجات. تعامل مع هذا بـ:
- عنصر
<bdi>(العزل ثنائي الاتجاه) لمنع النص الإنجليزي من اضطراب تدفق النص العربي. - قواعد تنسيق متسقة للنص الأجنبي المُدمَج (فكّر في استخدام وزن خط أو نمط مختلف قليلًا لتمييزه بصريًا).
- الاختبار الموسّع بمحتوى ثنائي اللغة حقيقي، لا نص مكان عنصر نائب.
إمكانية الوصول في تجربة المستخدم العربية
تشمل إمكانية الوصول للمواقع العربية جميع اعتبارات WCAG القياسية إضافةً إلى متطلبات خاصة بـ RTL:
- اختبار قارئ الشاشة: اختبر مع قارئات شاشة تدعم العربية. يدعم VoiceOver العربية جيدًا على iOS وmacOS. على Windows، يوفر NVDA مع حزم اللغة العربية تغطية جيدة.
- التنقل بلوحة المفاتيح: تأكد من أن ترتيب الجدولة يتبع تدفق القراءة RTL. ينبغي أن تكون مؤشرات التركيز مرئية ومموضعة بصحة في وضع RTL.
- تسميات ARIA: قدّم تسميات ARIA عربية للعناصر التفاعلية، لا مجرد نص alt مُترجَم.
- تباين الألوان: قد تستلزم الخطوط الخطية العربية ذات الحروف الرفيعة نسب تباين أعلى للحفاظ على القراءة، لا سيما في أحجام أصغر.
تجميع كل شيء معًا
تجربة المستخدم العربية الممتازة ليست إضافة لاحقة — بل هي تخصص تصميم جوهري يتطلب التخطيط من أول إطار سلكي. حين تُعامَل تجربة المستخدم العربية كفكرة لاحقة، تكون النتيجة دائمًا واضحة للناطقين الأصليين: تخطيطات مكسورة، ومسافات غير طبيعية، ولغة غير سلسة، وشعور منقوص بالثقة.
حين يُنجز بصورة صحيحة، يُحسّ المستخدمون العرب بأن الموقع بُني لهم — وهذا الإحساس يترجم مباشرةً إلى تفاعل وثقة وتحويل.
في Santa Media، التصميم ثنائي اللغة جوهري في عملية تصميم المواقع لدينا. كما ندمج مبادئ تجربة المستخدم العربية في عمل هوية العلامة التجارية والتسويق الرقمي لضمان تجربة متسقة عبر كل نقطة تواصل.