تصميم واجهة وتجربة المستخدم والتجاوبUI UX and Responsive Web Design

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

قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:

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

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

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

• وضوح مسار التنقل: هل يستطيع الطالب الجديد الوصول إلى الدرس المطلوب بنقرتين واضحتين دون أن يتوه بين قوائم معقدة؟
• تقليل الخطوات والجهد الذهني: هل يطلب نموذج التسجيل البيانات الضرورية بوضوح وسلاسة، أميرهق الزائر بعشرات الحقول الغامضة؟
• التغذية الراجعة الواضحة: عندما ينقر المستخدم على زر «حفظ» أو «إرسال»، هل يظهر له إشعار فوري يطمئنه بنجاح العملية أو يرشده بلطف لمكان الخطأ؟

لا ينجح الموقع إذا امتلك ألواناً جذابة () لكن أزراره معقدة ومربكة ( ضعيفة)، ولا ينجح كذلك إذا كانت خطواته منطقية لكن خطوطه غير مقروءة وألوانه منفرة. قارن بين المفهومين وتكاملهما في الجدول الآتي:

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

1. المرحلة 1 — المخطط الهيكلي الأولي (): رسم تخطيطي بسيط باللونين الأبيض والأسود يتكون من صناديق وخطوط (يشبه المخطط الهندسي للمنزل على الورق) لتحديد مواقع القائمة والعنوان والبطاقات قبل الانشغال بالألوان.
2. المرحلة 2 — التصميم البصري الملون (): يضيف المصمم الألوان النهائية، ونوع الخط العربي والإنجليزي، والصور والأيقونات ليخرج بنموذج مطابق تماماً للشكل المطلوب.
3. المرحلة 3 — البرمجة والتحويل إلى صفحة حية (): يتسلم مطور الواجهة الأمامية هذا التصميم النهائي ويحوله باستخدام و و إلى صفحة حية تعمل داخل المتصفحات.

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

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

تأمل المخطط التوضيحي الآتي ثم جرّب المحاكي التفاعلي لاختبار التجاوب والوصول الرقمي واتجاه اللغة:

تتضمن كل صفحة ويب متجاوبة وسم الأساسي في قسم رأس الصفحة () ليطابق المتصفح عرض شاشة الهاتف الحقيقية:

لا يستخدم جميع زوار موقعك المتصفح نفسه أو الجهاز نفسه؛ فبعضهم يتصفح عبر على ويندوز أو أندرويد، وبعضهم يستخدم على أجهزة آيفون وماك، بينما يفضّل آخرون أو . ويُطلق على ضمان عمل الموقع بكفاءة ومظهر متطابق في كل هذه المتصفحات مصطلح التوافق عبر المتصفحات ():

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

صُممت شبكة الويب لتكون متاحة لكل إنسان دون استثناء. ويُقصد بمصطلح إمكانية الوصول الرقمي (، ويُختصر عالمياً إلى لوجود 11 حرفاً بين أول حرف وآخر حرف في الكلمة الإنجليزية) بناء الواجهة الأمامية بحيث يتمكن ذوو الاحتياجات الخاصة ومستخدمو التقنيات المساعدة من تصفح الموقع والتفاعل معه بسهولة تامة:

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

انظر إلى هذا المثال البسيط الذي يوضح كتابة صورة وزر يدعمان إمكانية الوصول الرقمي:

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

• تحديد اتجاه المستند ( و): بمجرد وضع الخاصية على وسم الصفحة في النسخة العربية، يبدأ المتصفح بترتيب الأعمدة والجداول والنصوص من جهة اليمين تلقائياً.
• عكس القوائم وأسهم التنقل الاتجاهية: في الواجهة العربية ينتقل شعار الموقع إلى أقصى اليمين، وتشير أسهم مسار التنقل () وأزرار «التالي» نحو اليسار تماشياً مع اتجاه القراءة العربي.
• الحفاظ على اتجاه الأكواد والروابط (): حتى داخل الصفحة العربية، تُكتب الأكواد البرمجية والروابط بالإنجليزية من اليسار لليمين؛ ولذلك يعزلها المطور بوسم حتى لا تتداخل علامات الترقيم أو الأقواس مع النص العربي.