أساسيات تصميم واجهات المستخدم وتجربة المستخدم

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

الفرق بين واجهة المستخدم وتجربة المستخدم

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

مراحل العمل باختصار

1. البحث: فهم المستخدم والمشكلة.
2. بنية المعلومات: تنظيم المحتوى وتسميته.
3. الإطارات السلكية: تخطيط كل شاشة دون تفاصيل بصرية.
4. النموذج الأولي: ربط الشاشات لمحاكاة الاستخدام.
5. الاختبار: مراقبة مستخدمين حقيقيين يؤدون مهام محددة.
6. التصميم النهائي ونظام التصميم.
7. التسليم للمطورين ثم القياس والتحسين.

هذه المراحل دورة لا خط مستقيم؛ فنتيجة الاختبار قد تعيدك إلى بنية المعلومات، والقياس بعد الإطلاق يبدأ دورة جديدة.

بحث المستخدم (User Research)

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

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

اسأل عن السلوك الماضي لا عن التوقعات. سؤال مثل «هل ستستخدم هذه الميزة؟» يعطيك مجاملة، أما «آخر مرة حجزت موعدًا، كيف فعلت ذلك؟» فيعطيك حقيقة.

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

بنية المعلومات (Information Architecture)

بنية المعلومات هي تنظيم المحتوى وتسميته بحيث يجد المستخدم ما يبحث عنه. خطواتها:

1. جرد المحتوى: كل ما سيظهر في المنتج من صفحات ووظائف.
2. التجميع: وضع العناصر المتقاربة معًا.
3. التسمية بلغة المستخدم: المستخدم يبحث عن «العروض» لا عن «الحملات الترويجية».
4. خريطة الموقع أو التطبيق ثم قائمة التنقل.

من الأدوات المفيدة فرز البطاقات (Card Sorting): تكتب عناوين المحتوى على بطاقات وتطلب من المستخدمين تجميعها وتسمية المجموعات، فتكتشف كيف يفكرون هم لا كيف يفكر فريقك. وفي المنتجات ثنائية اللغة لا تكون التسميات ترجمة حرفية، بل تُختار لكل لغة ويُختبر كل منها. وتجنب العناوين الجامعة الغامضة مثل «خدمات أخرى»، فهي علامة على تجميع لم يكتمل.

الإطارات السلكية (Wireframes)

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

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

النماذج الأولية (Prototypes)

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

لا تبالغ في تلميع النموذج قبل اختباره، وابنِ فقط المسارات التي ستختبرها. والحركة بين الشاشات تساعد المستخدم على فهم العلاقة بينها، وتفاصيلها في الحركة في واجهات المواقع والتطبيقات.

اختبار قابلية الاستخدام (Usability Testing)

1. حدد ثلاث إلى خمس مهام واقعية، مثل: «اطلب عبوتين من القهوة وادفع عند الاستلام».
2. اختر مشاركين يشبهون مستخدميك الفعليين، لا زملاءك في الفريق.
3. اطلب منهم التفكير بصوت مرتفع أثناء الأداء، ولا تساعدهم ولا توجههم.
4. سجّل مواضع التردد والأخطاء، وصنّف كل مشكلة: تمنع إتمام المهمة، أو تزعج، أو شكلية.
5. أصلح الأخطر أولًا ثم اختبر من جديد.

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

أنظمة التصميم (Design Systems)

نظام التصميم مجموعة قرارات قابلة لإعادة الاستخدام:

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

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

أساسيات إمكانية الوصول

• التباين: يتطلب مستوى AA في إرشادات WCAG نسبة تباين لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير.
• مساحة اللمس: توصي إرشادات المنصات بأهداف لمس لا تقل عن نحو 44 نقطة في iOS و48 وحدة في Android لكل جانب.
• لا تعتمد على اللون وحده: حالة الخطأ تحتاج أيقونة ورسالة إلى جانب اللون الأحمر.
• عناوين ظاهرة للحقول: النص الإرشادي داخل الحقل يختفي عند الكتابة ولا يغني عن العنوان.
• تركيز مرئي لمن يستخدم لوحة المفاتيح، وترتيب منطقي للتنقل.
• نص قابل للتكبير دون أن ينكسر التخطيط، ونص بديل للصور ذات المعنى.

هذه الأساسيات تخدم الجميع لا ذوي الإعاقة وحدهم، والتفاصيل التقنية في إمكانية الوصول في المواقع.

الواجهات من اليمين إلى اليسار

الواجهة العربية ليست نسخة معكوسة آليًا من الإنجليزية:

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

صمّم بالمحتوى العربي من البداية، واختبر مع مستخدمين عرب، ولا تكتفِ بقلب التصميم الإنجليزي في النهاية. ولبناء الموقع نفسه بلغتين راجع بناء موقع ثنائي اللغة.

أخطاء شائعة

• البدء بالألوان والأشكال قبل فهم مهام المستخدم.
• التصميم للذات أو الاختبار مع الزملاء فقط.
• نسيان حالات الشاشة الفارغة والخطأ والتحميل.
• مكوّنات متشابهة بأشكال مختلفة في كل شاشة.
• قلب التصميم الإنجليزي إلى العربية دون مراجعة المحتوى والاتجاه.

خطوات عملية للبدء

1. اختر منتجًا صغيرًا حقيقيًا، مثل صفحة حجز لصالون أو مطعم محلي.
2. قابل ثلاثة إلى خمسة أشخاص من جمهوره واسألهم عن آخر تجربة حجز لهم.
3. اكتب المهام الرئيسية ورتبها، ثم ارسم بنية المعلومات.
4. ارسم إطارات سلكية للهاتف أولًا، ثم اربطها في نموذج أولي.
5. اختبر النموذج مع ثلاثة مستخدمين على الأقل، وأصلح أخطر مشكلتين.
6. حوّل التصميم النهائي إلى مكوّنات موثقة، وتحقق من التباين ومساحات اللمس والاتجاه العربي.

أما اختيار الأداة المناسبة لهذا العمل فتجده في مقارنة برامج التصميم.