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

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

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

لماذا لا يكفي قلب الواجهة الإنجليزية لتصبح عربية؟

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

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

ما الذي ينعكس في الواجهة العربية وما الذي يبقى كما هو؟

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

كيف ينفذ المطور ذلك دون مضاعفة العمل؟

• اضبط لغة الصفحة واتجاهها في الجذر: lang="ar" وdir="rtl".
• استخدم الخصائص المنطقية مثل «البداية» و«النهاية» بدل «اليسار» و«اليمين» في التنسيق، فينعكس التخطيط تلقائيًا مع اللغة.
• جهّز نسخة معكوسة من كل أيقونة اتجاه في مكتبة الأيقونات، ولا تعكس الصور بالتنسيق.

كيف تختار الخط العربي وتضبطه للقراءة على الشاشة؟

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

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

كيف تتعامل مع الأرقام والتواريخ في واجهة ثنائية الاتجاه؟

الأرقام تُكتب من اليسار إلى اليمين حتى داخل الجملة العربية، وهذا مصدر معظم الأخطاء التي يراها المستخدم. وتذكر W3C أن الأرقام الهندية (٠١٢٣) مستخدمة في السعودية، بينما ترى الأرقام الغربية (0123) في كثير من الواجهات أيضًا. لذلك قرّر نظام الأرقام لكل منتج والتزم به في كل شاشة.

الأرقام وأرقام الجوال والمبالغ

• رقم الجوال: اعزله باتجاه من اليسار إلى اليمين، وإلا قد تقفز علامة «+» في 966+ إلى طرف الرقم الآخر.
• حقول الإدخال: حقل الجوال أو البطاقة أو الآيبان يُكتب من اليسار إلى اليمين، حتى في نموذج عربي.
• رمز الريال: أضاف الإصدار 17.0 من معيار Unicode محرف «رمز الريال السعودي» (U+20C1). تأكد أن خطك يدعمه قبل استخدامه نصًا، وإلا ظهر مربعًا فارغًا.

التواريخ: الهجري والميلادي

حدّد التقويم صراحة في كل شاشة، ولا تتركه لإعدادات الجهاز. وفي اختبار أجريناه على Node.js 22، أعطى رمز اللغة ar-SA التاريخ «٢٩ أكتوبر ٢٠٢٦» بأرقام هندية، وأعطى الرمز ar «29 أكتوبر 2026» بأرقام غربية، وأعطى تقويم أم القرى «١٨ جمادى الأولى ١٤٤٨ هـ». ثلاث صيغ لليوم نفسه، والفرق كله في سطر واحد من الإعدادات.

إن كان مستخدموك يتعاملون مع مستندات بتواريخ هجرية، فاعرض التقويمين معًا في الحقول المهمة، واكتب اسم الشهر بدل رقمه لتجنب اللبس.

كيف تبني بحث المستخدمين على المستخدم السعودي الحقيقي؟

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

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

لماذا تختبر النموذج التفاعلي قبل البرمجة؟

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

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

وسجّل في كل جلسة أربعة أشياء بسيطة:

• هل أكمل المستخدم المهمة دون مساعدة؟
• أين توقف أو تردد، وكم مرة رجع خطوة إلى الخلف؟
• ما الكلمات التي استخدمها لوصف ما يبحث عنه؟
• هل قرأ الأرقام والتواريخ والأسعار كما قصدتها؟

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

كيف تجعل الواجهة العربية سهلة الوصول للجميع؟

المرجع العالمي هنا إرشادات WCAG 2.2، التي أصبحت معيارًا دوليًا باسم ISO/IEC 40500:2025 وفق إعلان W3C. ومن متطلباتها التي تهم الواجهة العربية:

• لغة الصفحة: تحديد العربية برمجيًا ليقرأها قارئ الشاشة بنطق صحيح.
• التباين: نسبة 4.5 إلى 1 على الأقل بين النص العادي وخلفيته.
• حجم الأهداف: مساحة 24 × 24 بكسل على الأقل لكل زر أو رابط يُلمس، أو مسافة كافية حوله.
• التركيز الظاهر: مؤشر واضح لمن يتنقل بلوحة المفاتيح، لا يغطيه شريط ثابت.
• لا تعتمد على اللون وحده: رسالة الخطأ نص واضح بجانب اللون الأحمر.
• نص بديل بالعربية لكل صورة تحمل معلومة.

ما نظام التصميم، ومتى تحتاجه منشأتك؟

نظام التصميم مكتبة واحدة من الألوان والخطوط والمسافات والمكونات، موثقة ومشتركة بين المصممين والمطورين. تحتاجه حين يكون لديك أكثر من منتج أو فريق، أو حين تلاحظ أن الزر نفسه يظهر بخمسة أشكال في خمس شاشات.

• رموز التصميم (Design tokens): قيم مسماة للألوان وأحجام الخط والمسافات، بقيم عربية مستقلة حين يلزم.
• مكونات تدعم الاتجاهين: كل مكون يُصمم ويُختبر بالعربية والإنجليزية.
• توثيق الاستخدام: متى يُستخدم كل مكون، ومتى لا يُستخدم.

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

كم تكلفة خدمة تصميم الواجهات وتجربة الاستخدام لدى مانزوميا؟

تبدأ خدمة تصميم واجهات وتجربة المستخدم لدى مانزوميا من 6,900 ريال لمرة واحدة قبل ضريبة القيمة المضافة 15%، أي 7,935 ريالًا شاملة الضريبة. ويحدد العرض المكتوب النطاق وعدد الشاشات والمدة.

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

هل تريد واجهة يفهمها عميلك من أول نظرة؟

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

ابدأ بطلب عرض سعر لمراجعة تجربة سريعة أو تصميم كامل، أو احجز استشارة مجانية مدتها 30 دقيقة ونراجع معك أهم رحلة في منتجك.