UX وUI مصطلحان ستصادفهما باستمرار في نقاشات تصميم المواقع، وكثيراً ما يُخلط بينهما أو يُستخدمان بالتبادل رغم أنهما يشيران لأشياء مختلفة. فهم كليهما يساعدك على اتخاذ قرارات أفضل بشأن موقعك والتواصل بشكل أوضح مع المصممين.
ما هو تصميم UX؟
UX اختصار لـ User Experience (تجربة المستخدم). تصميم UX هو ممارسة تصميم المنتجات الرقمية، المواقع والتطبيقات والبرامج، بحيث تكون سهلة الاستخدام ومُرضية. يهتم بالتجربة الإجمالية للشخص عند تفاعله مع المنتج: هل يجد ما يبحث عنه؟ هل التدفق بين الصفحات منطقي؟ هل يُحقق أهدافه بدون إحباط؟
ما هو تصميم UI؟
UI اختصار لـ User Interface (واجهة المستخدم). تصميم UI هو ممارسة تصميم العناصر المرئية للمنتج الرقمي، الألوان والطباعة والأزرار والأيقونات والصور والتخطيطات التي يراها المستخدمون ويتفاعلون معها. إنه الطبقة الجمالية والمرئية التي تجلس فوق هيكل UX.
كيف يعملان معاً
المثال الكلاسيكي: UX هو هندسة المبنى (كيف ترتّب الغرف وأين تذهب الأبواب والممرات وكيف يتدفق الناس خلال المساحة)، وUI هو التصميم الداخلي (الألوان والمواد والأثاث والجماليات التي تجعله جميلاً وممتعاً).
كلاهما يهمان. موقع بـ UI ممتاز وUX رديء يبدو جميلاً لكنه مُحبط في الاستخدام. موقع بـ UX ممتاز وUI رديء يعمل منطقياً لكن يبدو غير احترافي ويفشل في بناء الثقة. أفضل المواقع لديها كليهما، هيكل بديهي وعرض جذاب.
UX وUI في السياق السعودي
لمواقع الأعمال السعودية، اعتبارات UX تشمل: مدى بروز زر واتساب وسهولة إيجاده، مدى طبيعية انتقال الموقع بين النسختين العربية والإنجليزية، وهل المعلومات الرئيسية (الخدمات والموقع والساعات) قابلة للإيجاد في نقرتين من أي مكان في الموقع.
اعتبارات UI للأعمال السعودية تشمل: طباعة عربية تعكس نبرة العلامة التجارية، اختيار ألوان يتوافق مع التفضيلات الثقافية السعودية، وتصميم مرئي يبدو احترافياً وجديراً بالثقة للجمهور السعودي.
للمزيد عما يجعل المواقع فعّالة للأعمال السعودية: ما الذي يجعل الموقع الإلكتروني سهل الاستخدام؟
والاختبار الحقيقي بسيط: أعطِ هاتفك لشخص لا يعرف نشاطك واطلب منه التواصل معك. كل تردد أو سؤال يطرحه هو عيب في التصميم لا في فهمه.
ما يحدث قبل التصميم: البحث
الجزء الذي يُحذف أولاً من مشاريع التصميم هو البحث، وهو الجزء الذي يحدد إن كان التصميم سينجح. البحث هنا ليس دراسة أكاديمية بل أسئلة عملية: من يستخدم هذا، وما الذي يحاول إنجازه، وما الذي يعطله اليوم.
أرخص مصادره متاحة لكل نشاط: مكالمات العملاء ورسائل واتساب الواردة وأسئلة فريق المبيعات المتكررة. هذه المواد تخبرك بلغة العميل الحقيقية وبترتيب أولوياته، وهو ما يقرر ترتيب العناصر في الصفحة لاحقاً.
المصدر الثاني هو بيانات موقعك الحالي إن وُجد: أي الصفحات تُزار، وأين يغادر الناس، وما يبحثون عنه داخل الموقع. الصفحة التي يغادرها الجميع عند نقطة واحدة تحمل مشكلة محددة قابلة للإصلاح لا حاجة إلى إعادة تصميم كاملة.
تصميم يبدأ بلا هذه المعلومات يصبح مسألة ذوق، والنقاش فيه لا ينتهي لأنه بلا مرجع. أما التصميم الذي يبدأ من حاجة موثقة فيمكن الحكم عليه: هل يسهّل تلك الحاجة أم لا؟
من الهيكل إلى النموذج إلى الواجهة
العمل يمر بثلاث مراحل يختصرها كثيرون فيتعثرون. الأولى الهيكل: مخطط بسيط بلا ألوان ولا صور يحدد ما يظهر في الصفحة وبأي ترتيب. غرضه الاتفاق على المحتوى والأولويات قبل إنفاق وقت على الشكل.
الثانية النموذج القابل للنقر: ربط الشاشات ببعضها لتجربة المسار كاملاً. هنا تُكتشف المشكلات المنطقية: خطوة ناقصة، أو مسار يعود إلى نفسه، أو نموذج يطلب معلومة لم يحصل عليها المستخدم بعد.
الثالثة الواجهة: الألوان والخطوط والمسافات والحالات المختلفة للأزرار. هذه المرحلة أسرع بكثير حين تكون المرحلتان السابقتان محسومتين، وهي التي تحول هيكلاً صحيحاً إلى شيء يستخدمه الناس بارتياح.
الخطأ الشائع هو البدء من المرحلة الثالثة: تصميم جميل لصفحة لم يُتفق على محتواها. ثم تأتي المراجعات فيتغير المحتوى، فيُعاد التصميم مرات، وترتفع التكلفة والزمن دون أن تتحسن التجربة.
نظام التصميم بدل صفحات متفرقة
الفرق بين مشروع منظم وآخر مرتبك هو التفكير بالمكونات لا بالصفحات. بدل تصميم عشرين صفحة منفصلة، تُصمم مجموعة عناصر تتكرر: زر، وحقل، وبطاقة خدمة، ورأس صفحة، وقسم أسئلة، ثم تُبنى الصفحات منها.
الفائدة الأولى الاتساق: الزر نفسه في كل مكان، والمسافات نفسها، فلا تبدو الصفحات وكأن كل واحدة من مشروع مختلف. الثانية السرعة: الصفحة الحادية والعشرون تُبنى في دقائق لأن كل ما تحتاجه موجود.
الفائدة الثالثة والأهم أنها تجعل الموقع قابلاً للنمو. إضافة خدمة جديدة بعد سنة لا تحتاج تصميماً جديداً بل تركيب مكونات قائمة، وهذا يخفض تكلفة كل تحديث لاحق ويجعل الموقع يبقى متسقاً مع الوقت.
ولا يحتاج النشاط الصغير نظاماً معقداً. عشرة مكونات موثقة بأحجامها وألوانها وحالاتها تكفي لموقع كامل، والوثيقة القصيرة التي يفهمها أي منفذ لاحق أنفع من ملف تصميم ضخم لا يقرؤه أحد.
الاتجاه من اليمين إلى اليسار مشكلة تجربة لا ترجمة
أكثر مواقع الأعمال السعودية تُبنى بتصميم لاتيني ثم يُقلب اتجاهه. النتيجة أن النص يصبح عربياً والتجربة تبقى غربية: الأيقونات تشير في الاتجاه الخطأ، والأسهم تعني عكس ما يقصدها المستخدم، وترتيب العناصر يخالف حركة العين.
القلب الصحيح يشمل ما هو أكثر من محاذاة النص: موضع القائمة، واتجاه أسهم التالي والسابق، وترتيب خطوات النموذج، وموضع الأزرار الأساسية والثانوية، واتجاه شرائح المحتوى. كل عنصر يحمل اتجاهاً يجب مراجعته.
وهناك عناصر لا تُقلب: الأرقام، وعناوين البريد والنطاقات، وأزرار التشغيل في مشغلات الوسائط، والرموز التي لها اتجاه ثابت متعارف عليه. قلبها يربك المستخدم أكثر مما يوحّد التصميم، والحكم هنا يحتاج خبرة لا قاعدة آلية.
وحين يكون الموقع بلغتين، اختبر النسختين على أجهزة حقيقية لا في ملف التصميم. المشكلات تظهر في الحالات المختلطة: عنوان عربي يحمل رقماً ورمزاً، أو جملة عربية داخلها مصطلح إنجليزي، وهذه الحالات هي الأكثر شيوعاً في المحتوى الفعلي.
العمل مع مصمم: ما تطلبه وما تراجعه
أكثر ما يفسد مشاريع التصميم هو غياب تعريف للنجاح. اتفق قبل البدء على ما يجب أن يتحسن: عدد المحادثات من الموقع، أو نسبة من يصل إلى صفحة التواصل، أو زمن التحميل. بلا هذا يصبح كل نقاش نقاشاً في الذوق.
قدّم للمصمم مادة حقيقية لا افتراضية: نصوصك، وصورك، وأسماء خدماتك الفعلية، وأسئلة عملائك. التصميم المبني على نص وهمي ينهار حين يوضع فيه المحتوى الحقيقي، لأن الأطوال تختلف والأولويات تظهر مختلفة.
راجع على مرحلتين لا على مرحلة واحدة: مراجعة للهيكل والمحتوى قبل أي عمل بصري، ومراجعة للشكل بعد ذلك. الخلط بين المراجعتين ينتج تعليقات على الألوان في وقت يجب أن يكون النقاش فيه عن ترتيب المعلومات.
واطلب ملفات التسليم كاملة مع حق استخدام واضح: ملف التصميم الأصلي، والصور بمقاساتها، والخطوط أو تراخيصها. الموقع الذي لا تملك أصوله يقيّدك عند أي تعديل مستقبلي، وهذه أكثر مشكلة تظهر بعد انتهاء العلاقة مع المنفذ.
مفاهيم شائعة خاطئة
الأول أن التصميم شكل. الشكل جزء منه، لكن القرارات الأهم غير مرئية: ما يظهر أولاً، وما يُحذف، وكم خطوة يحتاج الطلب، وما الذي يُسأل عنه ومتى. هذه قرارات تجربة تسبق أي اختيار للون.
الثاني أن التصميم الجيد يحل مشكلة المحتوى. التصميم يعرض المحتوى بأفضل صورة ولا يخلقه، وصفحة مصممة جيداً لا تقول شيئاً محدداً تبقى بلا أثر. اكتب ما تريد قوله أولاً، ثم صمّم عرضه.
الثالث أن الإبداع في المكان الخطأ ميزة. الاختلاف في موضع القائمة أو شكل الزر أو معنى الأيقونة يجبر المستخدم على التعلم من جديد، وهو تعلم لن يبذله. التميز يكون في المحتوى والعرض والخدمة، لا في مخالفة أنماط يعرفها الناس.
والرابع أن التصميم يُنجز مرة. الموقع الذي يعمل هو الذي يُقاس ويُعدّل: صفحة تفقد الزوار عند نقطة معينة، ونموذج لا يُكمل، وقسم لا يُقرأ. التصميم عملية مستمرة صغيرة التعديلات، لا مشروعاً ينتهي بالتسليم.
من يفعل ماذا في مشروع صغير
في المشاريع الكبيرة تتوزع الأدوار على متخصصين: باحث، ومصمم تجربة، ومصمم واجهة، وكاتب محتوى، ومطور. في النشاط الصغير يجمعها شخص أو اثنان، وهذا مقبول بشرط أن تُنجز المهام لا أن تُحذف لأنها بلا صاحب.
المهمة التي تُحذف أكثر من غيرها هي كتابة المحتوى. يُفترض أن يوفرها العميل ويُفترض أن يصوغها المصمم، فلا يفعلها أحد، وينتهي الموقع بنصوص عامة كُتبت على عجل في آخر يوم. حدّد صاحبها بالاسم قبل البدء.
المهمة الثانية المهملة هي المراجعة على أجهزة حقيقية. التصميم يُعتمد من ملف على شاشة كبيرة، ثم يُكتشف بعد النشر أن العناوين تُقتطع على الجوال. اجعل المراجعة على جهاز جوال شرطاً للاعتماد لا خطوة اختيارية.
وأياً كان حجم الفريق، حدد شخصاً واحداً يقرر عند الخلاف. المشاريع الصغيرة تتعطل عادة لا بسبب نقص المهارة بل بسبب تعدد أصحاب الرأي بلا مرجع يحسم، فتدور المراجعات على تفاصيل بلا نهاية.
