انترنت

تصميم واجهة وتجربة المستخدم : UI&Ux Designer

تصميم واجهة وتجربة المستخدم UI&Ux Designer
شارك هذا

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

تصميم واجهة المستخدم  user interface design

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

مثالا عن واجهة المستخدم وما تحتويه:

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

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

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

التصميم الجميل سوف يبعث على الرضا و الارتياح لدى المستخدم أثناء تصفح هذا التطبيق، ويدفعه إلى زيارته في المرات القادمة، على عكس التصميم السيء الذي يبعث على النفور، علاوة على ذلك، الواجهة المرئية بالفعل تعكس صورة الجهة المالكة لهذا النشاط أو التطبيق.[1]https://www.usability.gov/what-and-why/user-interface-design.html

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

تصميم فيسبوك القديم

تصميم فيسبوك القديم

 

تصميم فيسبوك الجديد

 

تصميم تجربة المستخدم  user experience design

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

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

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

مثال آخر: في الكثير من مواقع الويب، يستمر المستخدم بالتصفح نزولا إلى الأسفل، حيث وبعد مسافة معينة يظهر زر الرجوع إلى الأعلى، الذي يوفر على المستخدم جهد ووقت التمرير بزر الفأرة أو التمرير باللمس وصولا إلى الأعلى، في حالة كانت صفحة الويب هذه طويلة نوعا ما.[2]https://www.interaction-design.org/literature/topics/ux-design

التصميم ليس عبارة عما تبدو عليه الأشياء ، التصميم هو كيف تعمل هذه الأشياء __ ستيف جوبز

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

  • واجهة المستخدم تتضمن كل الأزرار وعناصر التحكم والتصميم للموقع أو التطبيق، بينما تتضمن تجربة المستخدم الطريقة التي يتفاعل بها المستخدم مع التصميم والوظيفة العامة للموقع أو التطبيق.
  • تصميم واجهة المستخدم يحتوي على مكونات ذات لمسة فنية، بينما تصميم تجربة المستخدم يركز على وظائف التصميم والغرض منه.
  • مصممو واجهة المستخدم يركزون على أسلوب و مظهر التصميم، بينما مصممو تجربة المستخدم يركزون على الأشخاص الذين سيستخدمون هذا التصميم.
  • مصممو واجهة المستخدم يقومون بإنشاء تصاميم ونماذج نهائية، بينما مصممو تجربة المستخدم يقومون بإنشاء نماذج أولية قابلة للاختبار.
  • مصممو واجهة المستخدم يركزون على إنشاء تصاميم جذابة، بينما مصممو تجربة المستخدم يركزون على حل المشاكل.[3]https://www.interaction-design.org/literature/article/what-is-the-difference-between-interaction-design-and-ux-design

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

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

برنامج Adobe XD: من تطوير شركة Adobe، برنامج خفيف وسهل التعامل ومجاني أيضا، يتيح لنا إمكانية تصميم صفحات الموقع أو التطبيق، وربط هذه الصفحات ببعضها البعض، وإنشاء الـ animations  وتصدير هذه التصاميم بصيغ مختلفة.

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

بعد تشكيل الواجهات واختبارها ينتهي دور الـ UI/UX designer.

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

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

مصادر وكتب لتعلم ال UI&UX Design

يجب الاطلاع بشكل دائم على المواقع التي تعرض أعمال التصميم مثل pinterest ،dribble ،behance، ويوجد العديد من الدورات التعليمية على يوتيوب لتعليم التعامل مع برامج adpbe XD و figma .

المراجع    [ + ]
السابق
الموت راحة للمؤمن ونقمة على غيره
التالي
طريقة عمل كريب النوتيلا