الواجهات العربية: ما الذي ينقلب فعلاً وما الذي يجب ألا ينقلب؟
القاعدة في الواجهات العربية: ينقلب ما يرتبط باتجاه القراءة، ولا ينقلب ما يحمل معنى ثابتاً كالأرقام والشعارات وأيقونة التشغيل. أغلب الواجهات تُبنى إنجليزياً ثم تُعكس بسطر CSS واحد، فتبدو عربية وتتصرف إنجليزياً.
direction: rtl سطر واحد، وتنفيذه يستغرق ثانية. ولهذا يظن كثيرون أن دعم اللغة العربية مسألة محسومة بمجرد كتابته.
المشكلة أن هذا السطر يعكس التخطيط، ولا يعالج شيئاً مما يجعل الواجهة العربية مقروءة فعلاً: لا الخط، ولا ارتفاع السطر، ولا اتجاه الأرقام، ولا الأيقونات التي لا يصح عكسها أصلاً.
هذا الدليل عن الفرق بين الاثنين، لكل فريق يبني منتجاً عربياً أو ثنائي اللغة لمستخدمين في السعودية والخليج.
الفرق بين «معكوس» و«عربي أولاً»
الفرق يُختصر في جملة واحدة: تصميم عربي أولاً يعني أن القرارات البصرية تُتخذ على نص عربي حقيقي منذ اليوم الأول، أما الواجهة المعكوسة فتبدأ تصميماً إنجليزياً ثم تُطبّق التصميم من اليمين لليسار على ما بُني أصلاً للاتجاه الآخر.
معكوس يعني أن التصميم وُلد إنجليزياً ثم قُلب. تظهر آثار ذلك في تفاصيل صغيرة يشعر بها المستخدم في الرياض أو دبي دون أن يسمّيها: مسافات غير متوازنة، ونص متلاصق، وسطر طويل يتعب العين.
عربي أولاً يعني أن القرارات البصرية اتُّخذت والنص العربي أمامك: حجم الخط اختير على نص عربي، وارتفاع السطر ضُبط على حروف عربية، وطول السطر حُدّد بكلمات عربية.
الفرق ليس فلسفياً. النص العربي يشغل مساحة مختلفة عن الإنجليزي بالحجم نفسه، وله ارتفاع مختلف، وشكل حروفه يتغيّر بحسب موقعها في الكلمة. تصميم لم يُختبر عليه سيبدو مضغوطاً أو مفكّكاً.
ما الذي ينقلب: وما الذي يجب ألا ينقلب
هذا الجدول وحده يمنع أكثر الأخطاء تكراراً:
| العنصر | ينقلب؟ |
|---|---|
| ترتيب الأعمدة والتخطيط العام | نعم |
| محاذاة النص | نعم |
| أسهم التنقّل (التالي/السابق) | نعم |
| القوائم المنسدلة والتنبيهات | نعم |
| الأرقام | لا: تُقرأ من اليسار لليمين دائماً |
| الشيفرة البرمجية وعناوين URL | لا |
| أيقونة التشغيل ▶ ومؤشرات الوسائط | لا: مرتبطة باتجاه الزمن لا اللغة |
| علامة الصح ✓ | لا: رمز لا اتجاه له |
| الشعارات والعلامات التجارية | لا |
| الرسوم البيانية الزمنية | غالباً لا: الزمن يمضي لليمين |
القاعدة العامة: ينقلب ما يرتبط باتجاه القراءة، ولا ينقلب ما يرتبط بمعنى ثابت. ساعة تشير لليمين تبقى كذلك بالعربية، لأن الزمن لا يتغيّر باللغة.
الخطأ الأشهر هنا عكس أيقونة التشغيل، فتصبح إشارة «رجوع للخلف» في ذهن المستخدم. والثاني عكس اتجاه شريط التقدّم، فيبدو المستخدم متراجعاً بينما هو يتقدّم.
الأرقام: أكثر ما يُخطئ فيه
الأرقام تُكتب وتُقرأ من اليسار إلى اليمين حتى داخل نص عربي كامل، سواء كانت أرقاماً غربية (123) أو أرقاماً هندية (١٢٣). المتصفح يعرف ذلك، لكن المشاكل تظهر في الحالات المختلطة:
• رقم هاتف بجانب نص عربي: قد ينكسر ترتيبه بصرياً عند وجود رموز مثل + أو -. • نطاق سعري مثل «من 500 إلى 2,000 ريال»، الترتيب قد ينقلب إن لم تُعزل الأرقام. • تواريخ ونسب داخل جملة عربية. • اسم علامة إنجليزي وسط جملة عربية.
الحل التقني ليس تجريبياً: اعزل الجزء الإنجليزي أو الرقمي في عنصر مستقل بـ dir="ltr"، أو استخدم عناصر العزل الثنائي التي يوفّرها HTML. لا تعالج الأمر بمسافات إضافية أو بترتيب الكلمات، سيبدو صحيحاً على جهازك ومكسوراً على غيره.
واختبر دائماً بأسوأ حالة: جملة عربية فيها رقم، ورمز عملة، واسم علامة لاتيني، وعلامة ترقيم في آخرها.
الطباعة في الواجهات العربية: حيث تُربح المقروئية
الأخطاء الثلاثة الأكثر تكراراً في الواجهات العربية كلها تخصّ الطباعة:
1. حجم خط صغير. الحروف العربية متصلة وفيها نقاط وتفاصيل تحتها وفوقها. الحجم الذي يصلح للإنجليزية يبدو مزدحماً بالعربية. القاعدة العملية: ابدأ أكبر بدرجة واحدة على الأقل مما كنت ستستخدمه بالإنجليزية.
2. ارتفاع سطر ضيق. هذا أكثرها أثراً. الحروف العربية تمتد فوق السطر وتحته، وارتفاع سطر مضبوط للإنجليزية يجعل الأسطر تتلامس. زد ارتفاع السطر بوضوح، الفرق في المقروئية فوري وملموس.
3. تباعد الحروف. في الإنجليزية أداة تصميمية مقبولة. في العربية تكسر اتصال الحروف وتحوّل الكلمة إلى حروف متناثرة. لا تستخدمه على النص العربي مطلقاً.
وأضف إليها: الخط العريض في العربية لا يعمل كما في اللاتينية. كثير من الخطوط العربية لها وزنان أو ثلاثة فقط، والقفز بينها قد يكون حاداً. اختر خطاً له تدرّج أوزان حقيقي إن كنت تعتمد على التمييز بالوزن.
والمائل لا وجود له في العربية أصلاً. إمالة النص العربي تشويه لا تنسيق. للتأكيد استخدم الوزن أو اللون أو الحجم.
الموقع ثنائي اللغة: المشكلة التي لا تظهر إلا بعد الإطلاق
موقع بلغتين ليس تصميماً واحداً بنصّين. أهم فرق عملي: طول النص يتغيّر.
الترجمة العربية للجملة الإنجليزية قد تكون أقصر أو أطول بفارق ملموس. وهذا يكسر:
• الأزرار المصمّمة على عرض ثابت، النص إما يفيض أو يترك فراغاً غريباً. • بطاقات متساوية الارتفاع في شبكة، تختلف أطوالها بين اللغتين. • العناوين المصمّمة على سطرين: تصبح ثلاثة أسطر فتزيح ما تحتها.
الحل: صمّم بمرونة لا بعرض ثابت، واختبر باللغتين على العنصر نفسه قبل الإطلاق لا بعده.
ولا تنسَ أن مبدّل اللغة نفسه جزء من التجربة: يجب أن يكون واضحاً، وأن ينقل المستخدم إلى الصفحة المقابلة لا إلى الصفحة الرئيسية. إرسال من كان يقرأ مقالاً إلى الصفحة الرئيسية لأنه بدّل اللغة خسارة مباشرة.
وهناك تفصيل يخطئ فيه كثيرون في مبدّل اللغة نفسه: اكتب اسم اللغة بلغتها. الزر الذي ينقل إلى الإنجليزية يجب أن يقول «English» لا «الإنجليزية»، لأن من يبحث عنه لا يقرأ العربية أصلاً. والعكس صحيح.
وأخيراً، احذر الافتراض بأن كل من يفتح الموقع من السعودية يريد العربية. كثير من المستخدمين في الخليج يفضّلون الإنجليزية في السياقات التقنية. لا تفرض اللغة بناءً على الموقع الجغرافي؛ اقترحها واترك القرار للمستخدم، واحفظ اختياره بعدها حتى لا يعيده في كل زيارة. التحويل الإجباري بناءً على عنوان IP يسبب مشكلة إضافية: قد يمنع محركات البحث من الوصول إلى النسخة التي تحاول أرشفتها.
النماذج والحقول: التفصيل الذي يُنسى دائماً
الواجهات العربية تُختبر عادةً بالقراءة، ونادراً بالكتابة. والنماذج هي حيث يدفع المستخدم أو يتوقف.
اتجاه الإدخال. المؤشر يجب أن يبدأ من اليمين في الحقول العربية. لكن بعض الحقول يجب أن تبقى من اليسار لليمين مهما كانت لغة الواجهة: البريد الإلكتروني، وكلمة المرور، والروابط، وأرقام البطاقات. حقل بريد إلكتروني بمحاذاة يمين يربك المستخدم لأن ما يكتبه لاتيني.
النص المساعد. يرث محاذاة الحقل، وكثيراً ما يُنسى فيبدو معلّقاً في الجهة الخطأ.
رسائل الخطأ. يجب أن تظهر في الجهة نفسها التي يتوقعها المستخدم، تحت الحقل ومحاذية معه، لا في طرف الشاشة المقابل.
الحقول الرقمية. رقم الجوال ورمز التحقق والمبالغ: اجعلها ltr صراحة، واختبر النسخ واللصق فيها لا الكتابة فقط.
ترتيب الأزرار. في الواجهات العربية يتقدّم الزر الأساسي عادةً إلى اليمين. والأهم من القاعدة أن تكون متسقاً في الموقع كله، لأن التنقّل بين ترتيبين مختلفين أسوأ من ترتيب واحد غير مثالي.
اختبر النموذج كاملاً بالعربية: املأه، وأخطئ عمداً، وأرسله، واقرأ رسالة النجاح. الرحلة كاملة لا الحقل الأول. واطلب من شخص لم يشارك في بناء الموقع أن يجرّبها أمامك دون أن توجّهه: ستكتشف في دقيقتين ما لن تكتشفه أنت في ساعة، لأنك تعرف مسبقاً أين تضغط.
قائمة اختبار قبل الإطلاق
نفّذها على جوال حقيقي لا على معاينة المتصفح:
1. افتح كل صفحة رئيسية وابحث عن نص متلاصق أو أسطر متلامسة. 2. اكتب في كل حقل إدخال: هل يبدأ المؤشر من اليمين؟ وهل النص المساعد محاذٍ بشكل صحيح؟ 3. أدخل رقم هاتف في حقل عربي وتحقّق من ترتيبه بعد الحفظ والعرض. 4. راجع كل أيقونة اتجاهية: هل انقلبت وهي لا يجب أن تنقلب؟ 5. بدّل اللغة من صفحة داخلية عميقة: أين ذهبت؟ 6. افتح صفحة فيها جدول أو رسم بياني: هل ما زال مفهوماً؟ 7. اقرأ فقرة كاملة من جوالك. إن أجهدت عينك، فالمشكلة في ارتفاع السطر غالباً.
ما علاقة هذا بمحركات البحث؟
مباشرة أقل مما يُقال، وغير مباشرة أكثر مما يُظن.
لا يوجد عامل ترتيب اسمه «جودة الواجهة العربية». لكن:
• معدل الارتداد يرتفع حين يكون النص مجهداً للقراءة، وسلوك المستخدم يُقاس. • lang وdir الصحيحان يساعدان محركات البحث على تحديد لغة الصفحة بدقة، وهو أساس عمل hreflang في المواقع ثنائية اللغة. • النص كنص لا كصورة. أكثر من موقع عربي يضع عناوينه صوراً هرباً من مشاكل الخطوط، وهذا يخفي المحتوى تماماً عن محركات البحث. • الاستقرار البصري يتأثر بالخطوط التي تُحمّل متأخرة فتقفز الصفحة، وهذا مقيس فعلاً.
فالمكسب حقيقي، لكنه يمرّ عبر التجربة لا عبر إشارة مباشرة.
مواضيع ذات صلة: وكالة تصميم تجربة المستخدم، تجربة المستخدم.
للمزيد عن الاقتصاد الرقمي السعودي: بوابة رؤية 2030 — التحول الرقمي.
مقالات ذات صلة
عرض كل المقالات
الأسئلة الشائعة
لا. يعكس التخطيط ولا يعالج الخط ولا ارتفاع السطر ولا الأرقام ولا الأيقونات. هو أول خطوة لا آخرها.
ارتفاع السطر. الحروف العربية تمتد فوق السطر وتحته، وزيادة ارتفاع السطر تعطي فرقاً فورياً يلاحظه القارئ حتى لو لم يعرف سببه.
يفضَّل خط عربي مصمّم للعربية، وخط لاتيني منسجم معه بصرياً في الوزن والارتفاع. بعض عائلات الخطوط توفّر النسختين مضبوطتين معاً، وهذا يوفّر عليك عمل الموازنة يدوياً.
اعزل الأرقام والنصوص اللاتينية في عناصر بـ dir="ltr" بدل محاولة إصلاح الترتيب بالمسافات. الحل اليدوي يبدو سليماً على جهاز واحد ويُكسر على غيره.
لا. اعكس ما يرتبط باتجاه القراءة (أسهم التنقّل)، ولا تعكس ما يرتبط بمعنى ثابت (التشغيل، الصح، الشعارات، مؤشرات الزمن).
لا لكليهما. المائل تشويه للحرف العربي، والتباعد يكسر اتصال الحروف. استخدم الوزن أو اللون أو الحجم للتمييز.
يعتمد على بنيته. موقع مبني على نظام تصميم مرن يحتاج ضبط قيم الطباعة والاتجاه ومراجعة الأيقونات. أما موقع مبني على أعراض ثابتة ومسافات مكتوبة يدوياً فقد تكون إعادة بناء الصفحات أسرع من ترقيعها.
لا تختلف في الأساسيات. قواعد الاتجاه والخط والأرقام واحدة، والمستخدم في الرياض وجدة ودبي وأبوظبي يحمل التوقعات نفسها من الواجهة العربية. الفروق الحقيقية في التفاصيل المحلية: صياغة بعض العبارات، والعملة (ريال أو درهم)، وتنسيق التواريخ. عدّل هذه التفاصيل في طبقة المحتوى، وأبقِ التخطيط والقواعد التقنية موحّدة.