تصميم واجهات المستخدم العربية: دليل من الكلمة إلى الاختبار

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

ما يُعكس

• ترتيب الأعمدة والقوائم والتنقل، فيبدأ كل شيء من اليمين.

• أسهم الرجوع والتقدم. سهم الرجوع في الواجهة العربية يشير إلى اليمين، كما تنص إرشادات آبل للواجهات.

• أشرطة التقدم والمنزلقات التي تعبّر عن انتقال من قيمة إلى أخرى، مع تبديل مواضع رموز البداية والنهاية.

• محاذاة النص والمسافات البادئة وتعداد القوائم.

ما يبقى كما هو

• الأرقام نفسها. لا تُقلب أرقام السنة ولا أرقام الهواتف، حتى حين ينعكس ترتيب سلسلة مرقّمة.

• الشعارات والعلامات التجارية.

• أزرار تشغيل الوسائط وشريط تقدمها، لأن اتجاهها يمثل اتجاه الشريط المسجّل لا اتجاه الزمن، بحسب إرشادات ‏Material Design‏.

• الساعات والرسوم البيانية والصور الفوتوغرافية. وإن ارتبط معنى الصورة باتجاه القراءة، فاصنعوا لها نسخة جديدة بدلًا من عكسها، كما توصي إرشادات آبل للواجهات.

• الرموز التي لا اتجاه لها، كالكاميرا وعلامة الصح.

الخط والأرقام

يحتاج الحرف العربي إلى مساحة أكبر من اللاتيني بالحجم الاسمي نفسه، بسبب النقاط والحركات فوق السطر وتحته. وتشير دراسات القراءة على الشاشة إلى أن الأحجام الصغيرة ترفع أخطاء القراءة العربية؛ ففي دراسة على قرّاء بين العاشرة والثانية عشرة كانت أحجام 16 و18 نقطة أسهل قراءة، وسجّل حجم 10 نقاط أكثر الأخطاء.

• ابدؤوا بحجم للعربية أكبر من نظيره اللاتيني، واختبروه على الجوال لا على الشاشة الكبيرة.

• زيدوا ارتفاع السطر للعربية عن اللاتينية.

• لا تضيفوا تباعدًا بين الحروف العربية، فهو يقطع اتصالها.

• لا حروف كبيرة في العربية، فابنوا التسلسل البصري بالوزن والحجم واللون.

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

• اختاروا خطًا صُمّم للعربية، لا خطًا لاتينيًا يترك العربية لخط النظام الاحتياطي.

اختيار خط للواجهة العربية

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

ضبط الاتجاه برمجيًا

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