تفتح تطبيقًا بتصميم أنيق، فتجد زر الحجز بسهولة. لكنك بعد إدخال بياناتك لا تعرف إن كان الطلب تأكد، ولا كيف تعدل الموعد أو تتواصل مع الجهة المسؤولة. الواجهة قد تكون واضحة في موضع محدد، بينما تبقى الرحلة كلها مربكة.
يساعد الفصل بين واجهة المستخدم وتجربته على فهم هذا النوع من المشكلات. لا نحتاج إلى تحويل المصطلحين إلى منافسة بين الجمال والمنفعة؛ المطلوب معرفة السؤال الذي يجيب عنه كل جانب، وكيف نختبر النتيجة مع من سيستخدم المنتج.
ما واجهة المستخدم؟ وما تجربة المستخدم؟
تشمل الواجهة UI العناصر التي يتعامل معها المستخدم، مثل الأزرار والحقول والقوائم وما تعرضه من معلومات. أما UX فتتناول التجربة الأوسع للتفاعل مع المنتج والخدمة والجهة التي تقدمها. يوضح دون نورمان وياكوب نيلسن أن تصميم الواجهة جزء مهم من التجربة، لكنه لا يستوعبها كلها. التعريف الأصلي لدى Nielsen Norman Group.
وفي مثال الحجز، ترتيب الحقول ووضوح الزر مسائل واجهة. أما معرفة المستخدم إن كان الموعد مناسبًا، وما يحدث بعد الطلب، وكيف يصحح خطأ، فتدخل في تقييم الرحلة الأوسع. يتعاون الجانبان في المنتج نفسه، وقد يعمل عليهما أشخاص بأدوار متداخلة.
ابدأ بالمهمة التي يريد الشخص إنجازها
إذا قلت إن هدف الصفحة «عرض خدماتنا»، فقد تتجه إلى إضافة كل ما تعرفه عن المؤسسة. جرب بدل ذلك وصف المهمة بلغة المستخدم: «أريد معرفة إن كانت الخدمة تناسب حالتي، ثم حجز موعد». هذا الوصف يفتح أسئلة مختلفة عن المعلومات والترتيب والخطوة التالية.
الأمثلة التالية من إعدادنا لتوضيح طريقة العمل. لا تمثل قالبًا واحدًا يناسب كل منتج، ولا تضمن نتائج قبل الاختبار. اختر مستخدمًا وسياقًا ومهمة محددة، واترك المجال لاكتشاف أن افتراضك الأول عن احتياجه كان ناقصًا.
ارسم الرحلة قبل زخرفة الشاشة
لنفترض أنك تصمم صفحة لورشة تعليمية. اكتب مراحلها: الوصول، وفهم الموضوع والمستوى، ومعرفة الموعد والمتطلبات، والتسجيل، ثم استلام التأكيد. عند كل مرحلة اسأل ما المعلومة التي يحتاجها الشخص حتى ينتقل إلى التالية بثقة.
قد تكتشف أن صورة الغلاف ليست المشكلة الأهم، وأن المتطلب المسبق مخفي أو أن رسالة التأكيد لا تذكر مكان الحضور. تعديل هذه التفاصيل لا يلغي قيمة التصميم البصري، لكنه يربطه بما يساعد على إتمام المهمة.
نظّم المعلومات وفق السؤال الذي تجيب عنه
قد تجمع صفحة واحدة معلومات كثيرة، لكن تجاورها لا يجعلها واضحة. جرب تقسيم المحتوى إلى مجموعات لها عناوين مفهومة: لمن هذه الورشة؟ ماذا ستتعلم؟ متى وأين؟ ماذا تحتاج؟ وكيف تسجل؟
بعدها راجع كلمات الأزرار. قد تكون عبارة «إرسال طلب التسجيل» أوضح من «ابدأ الآن» إذا كان الضغط يرسل طلبًا يحتاج إلى موافقة. لا تجعل النص يعد بنتيجة تختلف عما يحدث فعلًا. دقة الكلمات جزء من التصميم، لأنها تفسر الفعل وتوقعاته.
ماذا تضيف إمكانية الوصول؟
توصي إرشادات W3C لتصميم واجهات أكثر إتاحة بالاهتمام بالتباين، وعدم استخدام اللون وحده لنقل المعنى، ووضوح العناصر التفاعلية، وتسميات الحقول، والتنقل، والتغذية الراجعة، وتجميع المحتوى، وتنوع أحجام العرض وبدائل الوسائط.
يمكن أن تبدأ مراجعة نموذج التسجيل بسؤالين: هل يعرف المستخدم اسم كل حقل دون الاعتماد على نص يختفي عند الكتابة؟ وهل يفهم الخطأ من رسالة محددة، حتى إن لم يميز اللون المستخدم؟ لا تغني هذه البداية عن تقييم كامل وفق المتطلبات المناسبة، لكنها تكشف قرارات تصميم يمكن تحسينها مبكرًا.
اختبر المهمة، لا رأي الشخص في شكل الشاشة فقط
بدل سؤال «هل أعجبك التصميم؟»، اطلب من مشارك مناسب أن يجد موعد الورشة ويشرح ما يتوقع حدوثه بعد التسجيل. راقب أين يتردد، وما المصطلح الذي يفهمه على غير المقصود، وما المعلومة التي يبحث عنها.
لا تلقنه الطريق كلما توقف، وإلا ستختبر قدرته على اتباع تعليماتك أكثر مما تختبر وضوح المنتج. وبعد المحاولة اسأله عما توقعه، واكتب الملاحظة كما حدثت قبل أن تختار تفسيرًا لها. قد يكون التردد بسبب نص أو ترتيب أو نقص معلومة، ولكل سبب تعديل مختلف.
حول الملاحظة إلى تعديل يمكن تقييمه
ملاحظة «الصفحة مربكة» واسعة. حاول وصفها بصورة أدق: «بحث المشارك عن السعر بعد الوصول إلى نهاية الصفحة، ثم عاد إلى الأعلى ولم يجده». يمكنك حينها مراجعة موضع السعر وتسميته وعلاقته بزر التسجيل.
اختر تعديلًا يخدم هذه المشكلة، ثم أعد تجربة المهمة المناسبة. إذا غيرت النص والألوان والترتيب والخطوات جميعًا، فقد يصعب عليك معرفة ما الذي ساعد. أحيانًا يكون التغيير الواسع ضروريًا، لكن اذكر سببه وما تحتاج إلى التحقق منه لاحقًا.
لماذا لا تكفي نسخة جميلة من منتج مشهور؟
قد تستعير شكل بطاقة أو قائمة من تطبيق تعرفه، لكن المستخدمين والمحتوى والقيود قد تختلف. زر مناسب لشراء سلعة متاحة فورًا قد لا يكون مناسبًا لطلب خدمة يحتاج إلى مراجعة. ابدأ بفهم الغرض من النمط، ثم تحقق من ملاءمته بدل تقليد مظهره وحده.
وينطبق ذلك على الإضافات الجديدة أيضًا. وجود ميزة في منتجات كثيرة لا يثبت أنها تحل مشكلة لدى جمهورك. اسأل عن الحاجة، وكيف يتعامل المستخدم معها الآن، وما الذي ستضيفه الميزة إلى الرحلة أو تعقده فيها.
تمرين لبداية مشروع صغير
اختر صفحة واحدة ومهمة واحدة. اكتب المستخدم المقصود وما يريد فعله، ثم ارسم الخطوات على الورق. حدد المعلومة المطلوبة في كل خطوة، واكتب النصوص الأساسية قبل التفاصيل الزخرفية. اعرض المسار على شخص مناسب، وسجل ثلاثة مواضع احتاجت إلى توضيح.
بعد ذلك اختر ما ستعدله أولًا ولماذا. يمكن أن تصبح هذه الملاحظات بداية ملف عمل يوضح قراراتك وأسبابها، بدل أن يقتصر على صور للشاشات النهائية.
الخلاصة
الواجهة الجيدة تساعد الشخص على فهم ما يراه وما يستطيع فعله. والتجربة الجيدة تتطلب أن يخدم هذا التفاعل رحلته واحتياجه. اجمع بين العناية بالشكل والمحتوى والخطوات، ثم اختبر المهمة التي جاء من أجلها المستخدم.
الخلاصة في سطر: الواجهة UI ما تراه وتلمسه، والتجربة UX رحلتك كلها لإنجاز المهمة؛ والواجهة الجميلة لا تكفي إن تعثرت الرحلة.
المصادر
Norman, D., & Nielsen, J. The Definition of User Experience.
W3C WAI. Designing for Web Accessibility. أمثلة الورشة والحجز وخطوات المراجعة من إعداد جادالحق.
تفضّل المشاهدة على القراءة؟
أفكار مشابهة بشرح سريع في فيديوهات قصيرة على مصفوفة النجاح — يوتيوب، تيك توك، وتليجرام.
