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

ربما تُصادف المسمَّيَين الوظيفيَّين لمصمم تجربة المستخدم UX ومصمم واجهة المستخدم UI فتعتقد أنهما مترادفان، ورغم وجود بعض التداخل بينهما، إلا أنهما في الواقع مجالان مستقلان عن بعضهما.

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

• ما المقصود بكل من تجربة المستخدم UX وواجهة المستخدم UI في التصميم؟
• ما هي أوجه الاختلاف بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟
• كيف ينسجم العمل بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟
• كيف تختار المسار الوظيفي المناسب لك بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟

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

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

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

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

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

ما هو تصميم واجهة المستخدم UI؟

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

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

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

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

تجربة المستخدم هي التجربة الكلّية والشاملة لجميع التفاصيل، وتتضمن كل ما يراه المستخدم أو يشعر به، بما في ذلك المشكلة التي يحاول المنتج حلها والمكان الذي يُستخدَم فيه المنتج؛ أما واجهة المستخدم فتقتصر على الشاشة والأزرار والعناصر الأخرى التي تشكّل الواجهة.

يوضح الخبيران في تجربة المستخدم دون نورمان Don Norman وجاكوب نيلسن Jakob Nielsen الاختلاف بين تجربة المستخدم وواجهة المستخدم من خلال هذا المثال:

اقتباس

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

من اللحظة التي تخطو بها إلى داخل المتجر إلى اللحظة التي تخرج بها من المتجر حاملًا لمشترياتك، فإنك ضمن تجربة المستخدم الخاصة بك في هذا المتجر، وكلُّ ما تراه مصمَّمٌ بالطريقة التي تراها لغايةٍ ما، من أبعاد الممر إلى ترتيب الرفوف وحتى درجة الحرارة، ويشكّل كل ذلك معًا تجربة المستخدم.

إذا ذهبت للتسوق من المتجر المعتاد، لكنك اخترت الدفع الذاتي بدلًا من الدفع عبر محاسب الزبائن (الكاشيير)، فإن الواجهة التي تستخدمها لتسجيل مشترياتك والدفع هي جزءٌ من واجهة المستخدم.

باختصار، تجربة المستخدم شاملةٌ لواجهة المستخدم، وواجهة المستخدم جزءٌ من تجربة المستخدم.

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

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

تصميم تجربة المستخدم هو المجال المسؤول عن اتخاذ القرار بشأن الميزات التي سيتضمنها التطبيق: هل سيتضمن مثلًا برنامجَ ولاءٍ يُكسِب المستخدمين نقاطًا مقابل كل عملية شراء؟ وهل سيكون المستخدم قادرًا على تتبع النقاط على التطبيق؟ ربما يسمح لك التطبيق بالتسوق عبره أو رؤية العروض الحالية، وكل ذلك يندرج ضمن تجربة المستخدم! من ناحية أخرى، اتخاذ القرارات بشأن كل من نمط الخط والتخطيط والأيقونات والفراغات والأنماط البصرية يقع على عاتق تصميم واجهة المستخدم.

تُعَد تجربة المستخدم أكثر تجرُّدًا، وهي تُعنى ببيئة المستخدم ومزاجه وحالة استخدامه، في حين أن واجهة المستخدم ملموسةٌ أكثر، إذ يتفاعل المستخدم مباشرةً مع الواجهة.

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

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

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

بصورة عامة، يتولى مصممو تجربة المستخدم إنجاز المراحل الأولى من عملية تطوير المنتج، ثم يأتي بعدها دور مصممي واجهة المستخدم؛ فيرسم مصممو تجربة المستخدم الهيكل العام لرحلة المستخدم، ثم يعمل مصممو واجهة المستخدم على إنشاء العناصر البصرية والتفاعلية.

كيف ينسجم العمل بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟

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

لتوضيح كيف ينسجم العمل بين تصميم تجربة المستخدم وتصميم واجهة المستخدم، لنلقِ نظرةً على تطبيق شازام Shazam، وهو تطبيق يتعرف على الموسيقى المشغَّلة في محيطك، وهو بذلك يحل مسألةً مهمة يمكن أن يتعرض لها الناس في حياتهم، فكم من مرة سمعت أغنيةً جميلةً على الراديو أو أثناء التسوق أو في المطعم ولم تتمكن من معرفة اسمها؟ تتولى تجربة المستخدم لهذا التطبيق حل هذه المشكلة بالتحديد.

لا تقتصر مزايا هذا المنتج على التعرف على الأغنية، بل يمكِّنك أيضًا من حفظها من أجل الاستماع إليها لاحقًا، وذلك من خلال ارتباطه مع تطبيقات بث الموسيقى مثل آبل ميوزك Apple Music أو سبوتيفاي Spotify، وإعداد قائمة تشغيل تتضمن جميع المقاطع التي بحثتَ عنها من خلاله. يتمتع شازام بواجهة مستخدم بسيطة وواضحة، لأن هذا ما يحتاج إليه المستخدم.

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

تندرج كل من المؤثرات الحركية والأيقونة والنص ضمن تصميم واجهة المستخدم، وهي تؤثر إيجابيًا على تجربة المستخدم. يوضح هذا المثال كيف يجب أن ينسجم العمل بين تجربة المستخدم وواجهة المستخدم.

كيف تختار المسار الوظيفي المناسب لك بين تصميم تجربة المستخدم وتصميم واجهة المستخدم؟

نظرًا لوجود تداخل بين هذين المجالين، فإن الكثير من إعلانات التوظيف تطلب مصممي UX/UI، أي كلا المجالين معًا، فإذا كنت تعمل بالأصل مصممًا لتجربة المستخدم، فمن المفيد لك أن تتعلم بعض مهارات تصميم واجهة المستخدم، خصوصًا من أجل المشاريع المحدودة بالوقت والموارد؛ لكن من المفترض في الحالة المثالية أن يكون هذان العملان منفصلَين، مع وجود تعاون بين مصمم تجربة المستخدم ومصمم واجهة المستخدم.

لا شك بأن التمتع بمهارات كل من تصميم تجربة المستخدم UX وتصميم واجهة المستخدم UI أمرٌ مفيد، لكن ليس عليك أن تحترف المجالين معًا. اتخِذ قرارًا بشأن المسار الذي ترغب بسلوكه، وركز على بناء مهارات وتجارب تتعلق بهذا المسار، ومن المرجح أن تكتسب أثناء ذلك بعض مهارات المسار الآخر نظرًا لتداخلهما. يُعَد كل من تصميم تجربة المستخدم وتصميم واجهة المستخدم من الوظائف عالية الطلب، كما أنها عادةً عالية الأجور، لذلك فهي مسارات وظيفية تستحق التفكير بها.

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

المهارات الناعمة اللازمة لكل من المجالين هي نفسها تقريبًا، وهي مفيدة في كلتَي الوظيفتين على حدٍّ سواء، أما المهارات الصلبة فهي أكثر اختلافًا بينهما.

اقتباس

هذه القائمة ليست شاملة، لكنها تسلط الضوء على بعض المهارات الناعمة والصلبة الأساسية لتصميم تجربة المستخدم وواجهة المستخدم.

تصميم تجربة المستخدم UX

تصميم واجهة المستخدم UI

مما يجعل تصميم تجربة المستخدم وواجهة المستخدم وظيفتَين جذابتَين للغاية هو أنهما تنطويان على الكثير من المهارات المشتركة مع الوظائف الأخرى، ومنها:

• تصميم الرسوميات.
• إدارة المشاريع.
• إجراء الأبحاث.
• التسويق.
• خدمة العملاء.

ماذا يفعل مصمم تجربة المستخدم UX في الواقع؟

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

ماذا يفعل مصمم واجهة المستخدم UI في الواقع؟

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

أي من المجالين ذو أجر أعلى؟

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

بصورة عامة، يحصل مصمم تجربة المستخدم UX ومصمم واجهة المستخدم UI على أجور متقاربة، لذا يبقى القرار معتمدًا على المجال الذي تفضله، وكما ذكرنا سابقًا، قد تصادف وظائف لمصمم UX/UI معًا، وبالتالي من الممكن أن تجد نفسك تؤدي الوظيفتين معًا في الوقت نفسه.

الخلاصة

تصميم تجربة المستخدم وتصميم واجهة المستخدم متلازمان في العمل رغم أنهما تخصصان مستقلان. تتعلق واجهة المستخدم بالعناصر التفاعلية في مستوى المظهر الخارجي، في حين تشمل تجربة المستخدم جميع جوانب المنتج أو الخدمة أو التجربة.

ومع أن هناك تداخلًا بين عمل مصممي تجربة المستخدم ومصممي واجهة المستخدم، إلا أنهما يتطلبان مهارات ومهام ومسؤوليات مختلفة، وتتحدد المهام والمهارات التي يتعين عليك إنجازُها في النهاية وفقًا للمتطلبات الخاصة للعمل، لذا تذكر أن تقرأ توصيف العمل بعناية.

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

ترجمة -وبتصرّف- للمقال ?UX vs UI: What’s the Difference لصاحبته Molly Fitz-Patrick.

اقرأ أيضًا

• تصميم واجهة المستخدم وتجربة المستخدم UI / UX
• التوعية بأهمية تصميم تجربة المستخدم
• دليلك الشامل لفهم المسارات المهنية لمجال تجربة المستخدم
• مبادئ تصميم واجهة المستخدم UI الجيدة
• الدليل إلى تهيئة واجهة المستخدم UI