الفرق بين Ui و Ux واجهة / وتجربة المستخدم User Interface vs User Experience

الفرق بين UI و UX - واجهة / وتجربة المستخدم User Interface vs User Experience
تجربة المستخدم وواجهة المستخدم مفهومان مختلفان و متكاملان في نفس الوقت
كلاهما يركزان على المستخدم ولكن أحدهما يركز على الواجهة والآخر يركز على التجربة.

Ui إختصار للعبارة User Interface
وتعني واجهة المستخدم وتتلخص في إيجاد قالب جميل لعرض منتجك و خدماتك في أبهى صورة تكون مقبولة لدى المستخدم وتنمي ثقته في بلوغ هدفه

Ux إختصار للعبارة User Experience
وتعني تجربة المستخدم وتأخذ بالحسبان توقعات ورغبات المستخدم للوصول إلى هدفه دون جهد كبير و في بيئة بسيطة

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

تم إبتكار الUI بدل الكونسول و بدل التعامل مع الأكواد ، كون ان الUI هي الواجهة التي سيتحدث بها النظام مع المستخدم ، اما بالنسبة للحواسيب فيمكن تسميتها هي الأخرى بالGUI او الGraphic User Interface وهو مصطلح يطلق كما اخبرناكم سابقا عن التحول الذي شهدته الأجهزة من الكونسول و الأكواد الى الواجهات الرسومية .


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

https://www.rise.company/forum/image.../2017/12/4.png

1- واجهة الإستخدام User Interface؟

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

https://www.rise.company/forum/image.../2017/12/5.png

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

2- تجربة المستخدم User Experience؟

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

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

https://www.rise.company/forum/image.../2017/12/6.png

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

https://www.rise.company/forum/image.../2017/12/7.png

معرفة توقعات المستخدم أمر أساسي في إنجاح تجربة المستخدم إذاً؛ ما الفرق بينهما إذن؟

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

https://www.rise.company/forum/image.../2017/12/8.png

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

الخلاصة

واجهة الإستخدام User Interface

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

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

تجربة المستخدم User Experience

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

1. سهل الوصول: القيام بكل ما يجب لكي يصل المستخدم إلى الموقع بسهولة.
   
2. سهل الولوج: يجب على الموقع أن يكون سهل الولوج من مختلف البرامج الحديثة.
   
3. موثوق و مرغوب فيه: تصميم موقع ينمي ثقة المستخدم و رغبته في ولوجه.
   
4. سهل الاستعمال: يجب على الموقع أن يكون خالياً من كل ما يمكن له أن يعقد أو يصعب التصفح على المستخدم.
   
5. يعكس صورة الجهة المالكة: يجب على المستخدم أن يقتنع بأنه في المكان الصحيح لإيجاد ضالته وأن يطمئن لخدمات الموقع.
   
6. أن يكون فعالا: على المستخدم أن يجد أجوبة على أسئلته بكل سهولة ودون تعقيدات.

من هم الأشخاص القادرين على هذه الصناعة ؟

هم الديزاينرز ، و ايضا الويب ديزاينرز ولكن مصطلح الـweb design أصـلا أتغيـر
لم يعـد هنـاك مـُسمـي وظيفي يسمـي web designer ، أصبـح هنـاك :

• UI&UX designer: المسئـول عـن دراسـة المشـروع و أختيـار الألوان المناسبـة و من ثـم تحـويلهـا الـي تصميـم PSD.
  
• Front-end developer : المسئول الذي يقـوم بتحـويـل التصميـم "PSD" الـي واجهـة أماميـة باستخـدام HTML5,CSS3 JS.
  
• -backend developer : المسئـول عـن دينامكيـة المـوقع والتعامـل مع البيـانات و السيرفر و يستخـدم لغـات PHP , Asp,sql ولغـات أخري علي حسـب المشروع.