ما هو الـ UI و الـ UX وما الفرق بينهما في مجال التصميم

إن ذهبت الآن إلى أي موقع توظيف أو أحد مواقع العمل الحر ستجد مئات الوظائف حول الـ UI و الـ UX، وهذه الوظائف في تزايد مستمر.

وعلى الرغم من ذلك تجد الكثير من الناس لا يعرفون ما هو الفرق بين الـ UI و الـ UX، فربما أقصى ما يعرفه أحدهم أن UI هي اختصاراً لـ User Interface وأن UX هي اختصاراً لـ User Experience.

ولو سألتهم عن الفرق بينهما لن يعرفوا الإجابة، لهذا إن كنت:

• شخص مهتم بالتصميم بشكل عام.
• شخص مبتدئ في مجال تصميم الجرافيك.
• شخص يبحث عن طرق الربح من التصميم الجرافيك المختلفة.
• رائد أعمال يريد تنفيذ فكرة مشروعه بشكل احترافي

فأنت في المكان الصحيح، لأنك لن تجد هنا فقط إجابة تفصيلية عن ما هو الفرق بين الـ UI و الـ UX ولكن ستتعلم أيضاً:

• ما هو تصميم واجهة المستخدم ( UI ).
• ما هي المهارات التي يحتاج إليها مصمم واجهات المستخدم.
• ما هو تصميم تجربة المستخدم ( UX ).
• ما هي المهارات التي يحتاج إليها مصمم تجارب المستخدم.
• أهم المصادر التي تحتاج إليها لكي تصبح مصمم UI و UX محترف.

كل هذا بشرح مبسط وعملي، هذه عادتنا في موقع الرابحون … دعنا لا نضيع الوقت ونبدأ مباشرة في صلب الموضوع!

تصميم واجهة المستخدم ( User Interface Design )

هل تعاملت يوماً مع الـ DOS ( تلك النافذة السوداء في أي جهاز كمبيوتر لكتابة بعض الأوامر لكي تجعل الحاسوب يقوم بمهمة معينة مثل فتح الملفات وتعديلها .. إلخ )؟

إن كنت فعلت؛ يا ترى ما هو الفرق بين ذلك النظام وبين الويندوز؟ أعتقد أنك تتفق معي أن الفرق بينهما هو السهولة وجمال التصميم ولا شيء آخر.

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

المقارنة بين الـ DOS والويندوز هو مثال على تطور واجهات المستخدم… بداية من اختراع أول جهاز حاسوب وصولاً إلى يومنا هذا حيث توجد مئات الأنواع من الأجهزة الحاسوبية التي تؤدي مهام مختلفة.

لهذا يمكننا أن نقول أن واجهة المستخدم ( User Interface ) هي: الطريقة التي يتفاعل بها المستخدم مع أي نظام حاسوبي يتطلب بعض المدخلات لتنفيذ مهمة معينة.

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

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

بعد أن تعرفت على ماهية واجهة المستخدم، وعلمت أنها مرتبطة بالطريقة التي نتفاعل بها مع الأجهزة الرقمية ( Digital Devices ) وتطبيقاتها المختلفة، دعنا نقوم بتعريف عملية تصميم واجهة المستخدم.

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

تصميم واجهة المستخدم هي العملية التي يعتمد عليها المصممين من حيث اختيار الطراز والأشكال والألوان والأيقونات لتصميم واجهة مستخدم برنامج أو جهاز حاسوبي معين.

مصممون الـ UI يسعون لبناء واجهات تُمكن المستخدم من استعمال أي تطبيق أو برنامج أو أداة بسهولة، وفي نفس الوقت تجعله يستمتع بوقته أثناء استعمالها.

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

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

أحد أهم وأشهر أنواع واجهات المستخدم هي الواجهات الرسومية  ( Graphical User Interfaces – GUI )، والتي يتعامل فيها المستخدم مع لوحات تحكم مرئية.

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

هناك أنواع أخرى من واجهات المستخدم مثل:

• واجهات المستخدم الصوتية ( Voice-controlled interfaces – VUEs)، والتي يتم التعامل فيها مع التطبيقات المختلفة عن طريق الصوت مثل Siri و Google Assistant.
• واجهات المستخدم التي تعتمد على حركات الجسم والإيماءات ( Gesture-based interfaces ): مثل ألعاب الواقع الإفتراضي وألعاب الـ 3D المختلفة.

ما هي المهارات التي يحتاج إليها مصمم واجهات المستخدم؟

هناك عدة متطلبات ومهام محددة أي UI designer عليه أن يقوم بها حتى يؤدي عمله على أكمل وجه؛ ولكي يفعل ذلك عليه أن يتحلى بالمهارات التالية:

• معرفة أساسيات التصميم ( نظرية الأوان – الكتابة – التباين ).
• معرفة كيفية تصميم هوية العلامة التجارية ( brand identity )، وما يتضمنه ذلك من تصميم الشعارات واختيار الألوان التي تعتمد عليها البراند بشكل دائم.
• التمكن من استخدام برامج التصميم الأساسية ( Photoshop – illustrator )، بالإضافة إلى برامج التصميم الخاصة بواجهة وتجربة المستخدم ( Adobe XD – Figma – Sketch).
• إتقان التصميم المتجاوب ( Responsive Design ) حتى يكون التصميم صالح للاستخدام بغض النظر عن أحجام الأجهزة.
  
• معرفة كيفية التواصل مع باقي فريق العمل وخصوصاً المبرمجين والمطورين، لأن دورهم هو تحويل التصميم إلى تطبيق عملي صالح للاستخدام.
• كيفية البحث في السوق ودراسة المنافسين.
• كيفية عمل نماذج أولية واختبارها وتحليل النتائج.

إن كنت تريد الدخول إلى عالم التصميم وترغب في معرفة أفضل المصادر والمعلومات التي يمكنك الاعتماد عليها فأنصصحك بالاطلاع على الأدلة التالية:

• أفضل دورات تعلم تصميم الجرافيك على منصة يودمي
• أهم المجالات المطلوبة في سوق العمل على الإنترنت
• أفضل مواقع كورسات اون لاين (دليلك لتعلم أي شيء)

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

تصميم تجربة المستخدم ( User Experience Design )

هل شاهدت آخر تحديثات ويندوز 10 التي تم إطلاقها منذ مدة؟ يا ترى ما هو أكثر تحديث لفت انتباهك؟ بالنسبة لي أفضل تحديث كان الطريقة الجديدة لعمل ( Screenshot ).

فعندما تضغط على زر الـ Screenshot في الكيبورد تظهر لك نافذة لتقوم بسحب علامة التحديد لتختار المنطقة التي تريد التقاط صورة لها، وبعد أن تضغط على زر Enter تظهر لك نافذة جديدة بها الصورة التي أخذتها حيث يمكنك التعديل عليها ثم حفظها.

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

تجربة المستخدم هي كل ما يمر أي شخص به في التعامل مع أي منتج أو خدمة معينة … فبداية من الدخول إلى المتجر الإلكتروني ثم تصفح المنتجات المختلفة واختيار ما يناسبك منها …

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

قم بمشاهدة الفيديو التالي، والذي يتحدث فيه Don Norman، وهو أول شخص في العالم قام بإطلاق مصطلح ” تجربة المستخدم ” حينما كان يعمل في شركة Apple في أوائل التسعينات، وقام بتأسيس قسم خاص بتجربة المستخدم في الشركة.

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

اقرأ أيضاً: كيفية تصميم موقع الكتروني (دليل متكامل بكل التفاصيل)

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

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

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

• يا ترى لماذا كل الهواتف المخصصة للألعاب كبيرة الحجم؟
• لماذا الهواتف المخصصة للأعمال الشاقة تجدها مطلية بطبقة من المعدن أو البلاستيك المقوى؟
• لماذا أغلب الهواتف يتم طلائها بطبقة تمنع تعرض الهاتف للضرر بسبب الاحتكاك مع أي نوع من أنواع المعادن؟

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

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

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

باختصار شديد أي تصميم لتجربة المستخدم يجب أن يجيب على الثلاث أسئلة التالية:

• لماذا يريد العميل استخدام هذا المنتج ( الدوافع – الأهداف – المشكلات )؟
• ماذا يريد العميل من المنتج تحديداً ( الاستخدامات – المميزات )؟
• كيف يمكن للعميل استخدام المنتج ( الواجهة – الأوان – سهولة الخطوات التي عليه اتباعها )؟

لهذا تُعد عملية تصميم تجربة المستخدم هي الخطوة الأولى لبناء أي منتج أو خدمة في وقتنا الحالي، ولهذا السبب أصبح مصطلح مصمم UX واسع الاستخدام وأصبحت وظيفة مطلوبة بكثرة في سوق العمل.

ما هي المهارات التي يحتاج إليها مصمم تجارب المستخدم؟

مصمم تجربة المستخدم يجب أن يكون على دراية بالعديد من الأمور حتى يؤدي مهامه على أكمل وجه؛ مثل:

• معرفة واسعة بدراسة سلوك المستهلك، وما الذي يجعل أي شخص يقوم بشراء أي شيء.
• معرفة شاملة بكيفية صناعة شخصيات للعملاء ( Buyer Persona ).
• كيفية عمل استراتيجية كاملة للمنتجات والخدمات المختلفة.
• كيفية عمل إطارات ( Wireframes ) أولية لأي تصميم.
• كيفية بناء نماذج أولية ( Prototypes ) لتقييم التصميمات الأولية واختيار الأنسب منها.
• كيفية جمع وترتيب ردود الأفعال المختلفة على التصميمات الأولية لتعديلها.
• كيفية التعاون مع باقي أعضاء فريق التصميم.
• التواصل مع أقسام التسويق والتطوير بشكل فعّال.

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

اقرأ أيضاً: كتب عن التصميم الجرافيكي (قائمة موثوقة بأفضل الكتب العالمية)

ما هو الفرق بين تصميم الـ Ui و الـ UX؟

عملية تصميم واجهة المستخدم ( UI ) هي أحد مراحل عملية تصميم تجربة المستخدم ( UX )، لأنه بعد دراسة سلوك العملاء والأهداف التي يسعون إليها يتم تحويل ذلك إلى تصميم أولي ( Prototype ).

وبعد ذلك يُطلب من مصمم الـ UI استخدام مهارته وإبداعه لتحويل التصميم الأولي إلى تصميم فعلي، وبعد ذلك يُكمل مصمم تجربة المستخدم رحلته في تصميم ما وراء الواجهة… ثم تجربة كل الخطوات التي يقوم بها العميل حتى يحقق أهدافه.

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

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

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

دعنا نضرب مثالاً آخر … هل تعاملت في يوم من الأيام مع Windows XP أو أي إصدار ويندوز أقدم من ذلك؟ لو سألتك اليوم ما هو الفرق بين ذلك الإصدار وبين إصدار Windows 10 الأخير … ما الذي ستقوله؟

ربما ستقول أن:

• شكل الأيقونات أصبح أفضل.
• الألوان أصبحت أدق وأجمل.
• ترتيب الملفات أصبح أكثر كفاءة.
• تم جمع وترتيب الأوامر المتشابهة في مكان واحد وهو windows Settings.
• عملية نقل الملفات أصبحت أسرع.
• تم تطوير أغلب البرامج الأساسية للويندوز.

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

أنظر إلى الإنفوجرافيك التالي من موقع careerfoundry الشهير، والذي يوضح ببساطة الفرق بين تصميم الـ UI والـ UX:

يمكننا أن نلخص كل ما سبق في النقاط التالية:

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

الخلاصة

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

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

فكل يوم هناك جهاز أو تطبيق أو برنامج جديد يسعى إلى الحصول على انتباه العملاء.

أتمنى لك التوفيق، وإلى لقاءٍ قريب!