يسلّم متجر إلكتروني في مشهد تصميمه الجديد من Figma إلى المبرمج مباشرةً. وبعد ثلاثة أسابيع يتبيّن أن لصفحة الدفع أربع حالات خطأ لم يصمّمها أحد، وأن الأزرار في صفحتين تحمل درجتين مختلفتين من «الأزرق». والغاية من مراحل تصميم UI/UX منع هذا تحديدًا: سبع خطوات متتالية، من أبحاث المستخدمين حتى التسليم إلى فريق التطوير، لكل خطوة منها ناتج محدد يصبح مدخلًا للخطوة التالية. وإذا أسقطت إحداها، فستدفع ثمنها لاحقًا في الكود.
إذا لم يتضح لك الفرق بين UI و UX حتى الآن، فاقرأ عنه أولًا ثم عُد إلى هنا. فهذا المقال يفترض أنك تعرف هذا الحد الفاصل، ويتناول ترتيب العمل.
من أين تبدأ مراحل تصميم UI/UX؟
تبدأ من شيء ليس تصميمًا بعد: من الناس. فالخطوة الأولى هي المقابلات والملاحظة، لا اختيار الألوان. والهدف أن تفهم ما يفعله المستخدم الحقيقي لإنجاز مهمته، وأين يتعثّر، وكيف يتحايل على العقبة اليوم.
المقابلة الجيدة لا تسأل: «هل تعجبك هذه الصفحة؟»، بل تسأل: «آخر مرة أردت فيها حجز موعد في عيادة، ماذا فعلت؟». الإجابات قصص، وللقصص أنماط. وعادةً ما تكشف بضع مقابلات مع أشخاص حقيقيين من جمهور النشاط التجاري نفسه عن مشكلتين أو ثلاث مشكلات متكررة، ما كان أي اجتماع داخلي في الشركة ليكتشفها.
كيف تساعد شخصية المستخدم ورحلته في التصميم؟
شخصية المستخدم (Persona) خلاصة لمجموعة حقيقية من المستخدمين، لا شخصية خيالية أنيقة المظهر مع صورة من بنوك الصور. يكفي أن تكتب هدف هذا المستخدم، وسياق استخدامه (الجوال في طابور الانتظار أو الحاسوب المحمول في المكتب)، وأكبر ما يشغله. أما رحلة المستخدم فتضع هذا الشخص نفسه على خط واحد: من أول تعرّفه على النشاط التجاري حتى إنجاز مهمته، وتسأل عند كل نقطة: بماذا يفكر، وما الذي يزعجه؟
وتظهر قيمة هاتين الأداتين عند اتخاذ القرار: فحين يُطرح سؤال «هل يكون هذا الزر في الأعلى أم في الأسفل؟»، تأتي الإجابة من شخصية المستخدم، لا من ذوق صاحب الصوت الأعلى في الاجتماع.
لماذا تسبق بنية المعلومات والوايرفريم التصميم البصري؟
بنية المعلومات تعني أن تقرر ما الصفحات اللازمة، وكيف تُنظَّم القائمة، وأين يوضع كل محتوى. والوايرفريم (المخطط الهيكلي) ينقل هذه البنية نفسها إلى الشاشة في صورة مخطط رمادي بلا ألوان ولا صور. واللون الرمادي مقصود: فحين يغيب اللون، يبقى النقاش حول مواضع العناصر وترتيب المعلومات.
تعديل كتلة واحدة في الوايرفريم يستغرق بضع دقائق، أما التعديل نفسه بعد كتابة الكود فقد يطال عدة ملفات. ولهذا السبب نعتمد البنية قبل المظهر في مراحل تصميم الموقع أيضًا.
ماذا يقدّم تصميم UI ونظام التصميم بالضبط؟
الآن جاء دور المظهر. يضيف تصميم UI الألوان والتايبوغرافيا والمسافات وحالات المكوّنات فوق البنية المعتمدة. وفي المواقع الناطقة بالفارسية ينبغي مراعاة بضعة أمور منذ هذه المرحلة: التخطيط من اليمين إلى اليسار، وأوزان الخطوط الفارسية التي تبقى مقروءة في الأحجام الصغيرة، وأرقام تنسجم مع النص.
ونظام التصميم هو الموضع الذي يتحوّل فيه التصميم من «بضع صفحات جميلة» إلى «لغة قابلة للتكرار». وتعرّفه Nielsen Norman Group بأنه مجموعة متكاملة من المعايير لإدارة التصميم على نطاق واسع باستخدام مكوّنات وأنماط قابلة لإعادة الاستخدام، وتقول إنه يتكوّن من مستودع (دليل الأسلوب، ومكتبة المكوّنات، ومكتبة الأنماط) ومن الأشخاص الذين يتولّون صيانته. لا تنسَ هؤلاء الأشخاص؛ فنظام التصميم الذي لا مسؤول عنه ينفصل عن الكود بعد بضعة أشهر.
ما مخرجات كل خطوة في العملية؟
استخدم قائمة التحقق هذه عند تسليم كل مرحلة. وإذا لم تستطع أن تُظهر ناتج أحد الصفوف، فتلك الخطوة لم تكتمل بعد.
| الخطوة | السؤال الذي تجيب عنه | المخرجات القابلة للتسليم |
|---|---|---|
| البحث والمقابلات | ماذا يفعل المستخدم الحقيقي، وأين يتعثّر؟ | ملاحظات المقابلات وقائمة المشكلات |
| شخصية المستخدم ورحلته | لمن نصمّم، وفي أي موقف؟ | شخصية المستخدم وخريطة الرحلة |
| بنية المعلومات | ما الصفحات اللازمة، وكيف ترتبط ببعضها؟ | خريطة الموقع وهيكل القائمة |
| الوايرفريم | ما أقسام كل صفحة، وبأي ترتيب؟ | مخططات رمادية للصفحات الرئيسية |
| UI ونظام التصميم | ما مظهر كل مكوّن، وكيف يتصرف؟ | التصميم النهائي، والألوان، والتايبوغرافيا، ومكتبة المكوّنات |
| النموذج الأولي والاختبار | هل ينجز شخص حقيقي مهمته بهذا التصميم؟ | نموذج أولي تفاعلي وتقرير الاختبار |
| التسليم إلى التطوير | هل يعرف المبرمج كل الحالات؟ | مواصفات المكوّنات وحالاتها ورموز التصميم |
كم شخصًا نحتاج لاختبار النموذج الأولي؟
النموذج الأولي تصميم قابل للنقر لم يُكتب له كود بعد. واختباره بسيط: أعطِ المستخدم مهمة محددة («احجز موعدًا للأسبوع القادم»)، ثم اجلس صامتًا ولاحظ أين يتوقف مترددًا. لا تشرح شيئًا؛ فكل شرح تقدّمه يعني أن الصفحة لم تُجب بنفسها.
والعدد المطلوب أقل مما تظن. فبحسب Jakob Nielsen في مقالته «لماذا لا تحتاج إلا إلى اختبار ٥ مستخدمين»، يكشف المشاركون الأوائل معظم المشكلات القابلة للاكتشاف، ومن المستخدم الخامس تقريبًا تبدأ النتائج السابقة بالتكرار. وبدلًا من اختبار واحد كبير، يقترح عدة جولات صغيرة: اختبار، ثم تعديل، ثم اختبار من جديد. وإذا كان للموقع عدة فئات مختلفة تمامًا من المستخدمين، فعليك أن تستقطب مشاركين من كل فئة على حدة.
وانتبه في هذه المرحلة نفسها إلى إمكانية الوصول. فعلى سبيل المثال، ينص اتحاد W3C في المعيار 2.5.8 من WCAG 2.2 على أن حجم أهداف اللمس يجب ألا يقل عن ٢٤ × ٢٤ بكسل CSS، إلا في استثناءات مثل وجود مسافة كافية عن الأهداف المجاورة. وعادةً ما يتعثّر زر قائمة الجوال الصغير عند هذه النقطة بالذات.
ماذا يتطلّب تسليم التصميم إلى المطوّر؟
التسليم ليس مجرد إرسال ملفات. على المبرمج أن يعرف كل حالات كل مكوّن: الحالة العادية، والتحويم (hover)، والتركيز (focus)، والتعطيل، والخطأ، والحالة الفارغة، وحالة التحميل. وصفحة الدفع التي بدأنا بها المقال تعطّلت بسبب هذه الحالات تحديدًا.
وتساعد رموز التصميم (Design Tokens)، أي أسماء الألوان ومقاسات المسافات وأوزان الخطوط، على أن يتحدث التصميم والكود بالمفردات نفسها. فحين يقول المصمم «اللون الأساسي» ويوجد الاسم نفسه في الكود، يجري تغيير هوية العلامة في مكان واحد، لا في مئات الملفات.
ما الأدوات التي نستخدمها لهذه المهام؟
الأدوات مهمة، لكنها ليست أهم من العملية نفسها. يكفي Figma للوايرفريم والتصميم النهائي ومكتبة المكوّنات والنموذج الأولي، وقد أصبح تقريبًا المعيار السائد لدى الفرق. وللمقابلات يكفي دفتر ومكالمة فيديو، ولخريطة الموقع تكفي حتى سبورة بيضاء. وإذا كان فريقك صغيرًا، فابدأ بأقل عدد ممكن من الأدوات، واحتفظ فقط بما يُستخدم فعلًا.
هل يحتاج الموقع الصغير إلى مراحل UI/UX أيضًا؟
نعم، بنسختها المخففة. فالموقع المكوّن من بضع صفحات لا يحتاج إلى مقابلات طويلة ولا إلى نظام تصميم كبير، لكن لا ينبغي الاستغناء عن بحث قصير، ووايرفريم للصفحات الرئيسية، واختبار واحد مع بضعة أشخاص. فعلى سبيل المثال، صفحة الهبوط التي ستستقبل زيارات الإعلانات تُصمَّم غالبًا بالتخمين إذا غابت عنها هذه الأمور الثلاثة.
تجربتي الشخصية في هذا الشأن أمرّ مما أحب أن أعترف به. فأثناء بناء موقع onwebs.ir باستخدام Next.js، صقلتُ أحد الأقسام بصريًا عدة مرات، ثم اكتشفت أن مستخدم الجوال لا يجد طريقه في تلك الصفحة. لم يكن في التصميم عيب من ناحية UI؛ البنية هي التي كانت خاطئة. في البداية ظننت أن المشكلة في المسافات وحجم الخط، وكنت مخطئًا. ومنذ ذلك الحين صارت قاعدتي: وايرفريم رمادي أولًا، ثم اعتماد المسار، ثم الألوان. كما أحرص منذ البداية على توحيد أسماء الألوان والمسافات بين التصميم والكود، حتى لا يتحدث المبرمج والمصمم لغتين مختلفتين. يبدأ العمل بوتيرة أبطأ، لكنه يُغني عن إعادة التصميم في منتصف الطريق.
إذا كان لديك مشروع تريد أن يبدأ تصميمه من البحث، فإن أونوبز في مشهد يتّبع هذا المسار ضمن خدمتَي تصميم UX وتصميم UI. ويمكنك مشاهدة نماذج من الأعمال في معرض الأعمال، وإرسال رسالة عبر صفحة التواصل للحصول على استشارة مجانية وتقدير مجاني للتكلفة.
المصادر
- Design Systems 101 — Nielsen Norman Group
- Why You Only Need to Test with 5 Users — Nielsen Norman Group
- Understanding Success Criterion 2.5.8: Target Size (Minimum) — W3C Web Accessibility Initiative
