جميعنا يقوم باستخدام مواقع الأنترنت و تطبيقات الهواتف المحمولة وتطبيقات سطح المكتب ، حيث هذه التطبيقات و المواقع هي عبارة عن واجهات رسومية تعرض محتوى عن طريق العديد من العناصر والمكونات ، قد نتساءل من الذي قام بتصميم هذه الواجهات ، ما الأساس الذي اعتمد عليه في اختيار الألوان والخطوط وحجوم العناصر وغيرها .
مصطلح تصميم واجهة المستخدم “user interface design “
يمكننا تعريف تصميم واجهة المستخدم على أنها عملية إنشاء واجهات مرئية للتطبيقات بمختلف أنواعها مع التركيز على مظهر هذه الواجهات وكيف تبدو ، يهدف المصممون إلى إنشاء واجهات جذابة كي يتعامل معها المستخدمون بسهولة ومتعة .
لنأخذ مثالا عن واجهة المستخدم وما تحتويه :
تحتوي واجهة المستخدم على العديد من العناصر والمكونات كالأزرار والقوائم ومربعات الاختيار والصور والنصوص وشريط التقدم وحقول الإدخال وحقل البحث والكثير من العناصر الأخرى .
الأمر الأكثر أهمية في عملية تصميم واجهة المستخدم هو أن نضع ونرتب هذه العناصر بحذر و بتناسق جميل .
في مواقع الويب أو تطبيقات الهواتف المحمولة التي نستخدمها يوميا ، بشكل طبيعي فإن التصميم الجميل يقوم بشد انتباه المستخدم ، من تناسق ألوان النصوص مع ألوان الخلفيات وأماكن توضع الأزرار و الصور والنصوص و المسافات البيضاء وغيرها من المكونات و خصائصها التي نراها في هذه التطبيقات .
التصميم الجميل سوف يبعث على الرضا و الارتياح لدى المستخدم أثناء تصفح هذا التطبيق ويدفعه إلى زيارته في المرات القادمة على عكس التصميم السيء الذي يبعث على النفور ، علاوة على ذلك ، الواجهة المرئية بالفعل تعكس صورة الجهة المالكة لهذا النشاط أو التطبيق .
في الصورتين التاليتين مقارنة بين التصميمين القديم والجديد لموقع الفيسبوك ، ويمكن ملاحظة أن التصميم الجديد يتفوق بشكل كبير على التصميم القديم .
التصميم القديم :
التصميم الجديد :
مصطلح تصميم تجربة المستخدم “user experience design“
تشير تجربة المستخدم UX إلى أي تفاعل بين المستخدم ومنتج ما أو خدمة ما ، يجب الاخذ بعين الاعتبار كل عنصر يشكل هذه التجربة ، بالتالي عند تصميم هذه التجربة يجب النظر بالدرجة الأولى إلى رغبات المستخدم وسلوكياته وحاجاته ، و إيجاد حلول فعالة تضمن تلبية هذه الحاجات .
لنعرض مثالا عن تصميم تجربة المستخدم :
لنفرض ان مستخدم ما يتصفح متجرا إلكترونيا ويريد شراء أحد المنتجات عن طريق وسيلة دفع إلكترونية ، كلما تمت عملية الوصول إلى المنتج والدفع بخطوات اقل وبشكل بسيط كلما كانت هذه الخدمة تلبي رغبة المستخدم بشكل فعال .
مثال آخر : في الكثير من مواقع الويب يستمر المستخدم بالتصفح نزولا إلى الأسفل حيث وبعد مسافة معينة يظهر زر الرجوع إلى الأعلى ، الذي يوفر على المستخدم جهد ووقت التمرير بزر الفأرة أو التمرير باللمس وصولا إلى الأعلى ، في حالة كانت صفحة الويب هذه طويلة نوعا ما .
يقول رائد الأعمال الأمريكي الشهير ستيف جوبز :
” التصميم ليس عبارة عما تبدو عليه الأشياء ، التصميم هو كيف تعمل هذه الأشياء”
لتوضيح المفهومين السابقين عن طريق إجراء المقارنات بينهما :
- واجهة المستخدم تتضمن كل الأزرار وعناصر التحكم والتصميم للموقع أو التطبيق ، بينما تتضمن تجربة المستخدم الطريقة التي يتفاعل بها المستخدم مع التصميم والوظيفة العامة للموقع أو التطبيق .
- تصميم واجهة المستخدم يحتوي على مكونات ذات لمسة فنية بينما تصميم تجربة المستخدم يركز على وظائف التصميم والغرض منه .
- مصممو واجهة المستخدم يركزون على أسلوب و مظهر التصميم ، بينما مصممو تجربة المستخدم يركزون على الأشخاص الذين سيستخدمون هذا التصميم .
- مصممو واجهة المستخدم يقومون بإنشاء تصاميم ونماذج نهائية بينما مصممو تجربة المستخدم يقومون بإنشاء نماذج أولية قابلة للاختبار .
- مصممو واجهة المستخدم يركزون على إنشاء تصاميم جذابة بينما مصممو تجربة المستخدم يركزون على حل المشاكل .
سأستعرض تجربتي الشخصية كمستخدم لموقع محرك البحث السوري “شمرا” وبالتحديد الصفحة الرئيسية للموقع .
نلاحظ في رأس الموقع – القسم العلوي – ما يسمى ب navigation bar يملك خاصية ثابت “fixed” مهما قمت بالتمرير للأسفل سيرافقني هذا الجزء ، بالتأكيد هذا الأمر سيساعدني كمستخدم على الانتقال بسهولة إلى أقسام الموقع الأخرى .
كما أن توضع شعار الموقع “logo” على اليمين ومحاذاة روابط الانتقال من اليمين إلى اليسار أمر مريح للناظر الذي يتصفح موقع ذو محتوى باللغة العربية ، وأيضا لون خلفية ال navigation bar باللون الأخضر مناسب جدا مع لون النصوص التي يحتويها باللون بالأبيض ، في علم النفس يعد اللون الأخضر من الألوان المهدئة والمريحة للاعصاب ، إنه لون الطبيعة .
الخط المستخدم في الموقع هو Droid-Arabic-Kufi من الخطوط الجميلة والواضحة .
حقل البحث في منتصف المحتوى الرئيسي للموقع و واضح بشدة ، وجود ما يسمى ب placeholder ضمن الحقل ” ابحث في شمرا ويب” يجعل المستخدم يركز في هذا الحقل إذ يساعده على فهم ما يشير إله هذا الحقل وما الغرض الأساسي منه ، كون الموقع هو محرك بحث وهذا ما يهم المستخدم “البحث عن ضالته” .
كيف أبدأ بصناعة واجهات مستخدم جميلة وجذابة :
في البدابة يجب الاطلاع على القواعد الأساسية للتصميم ، ونظرية الألوان و التغذية البصرية المستمرة ، ثم هناك العديد من الأدوات والتقنيات التي تساعدنا في تشكيل واجهات المستخدم وصناعة نماذج أولية قابلة للاختبار ثم تحويلها إلى واجهات حقيقة مكتوبة بكود برمجي ، نذكر بعض من هذه الأدوات .
برنامج Adobe XD : من تطوير شركة Adobe ، برنامج خفيف وسهل التعامل ومجاني أيضا ، يتيح لنا إمكانية تصميم صفحات الموقع أو التطبيق ، وربط هذه الصفحات ببعضها البعض ، وإنشاء ال animations وتصدير هذه التصاميم بصيغ مختلفة .
برنامج figma : أداة تستخدم في إنشاء تصاميم تفاعلية لواجهات المواقع والتطبيقات ، يشبه إلى حد كبير برنامج Adobe XD وله شعبية كبيرة .
بعد تشكيل الواجهات واختبارها ينتهي دور ال UI/UX designer .
في مواقع الويب هناك العديد من أطر العمل التي تساعد ال front-end developer على تحويل النماذج و التصاميم السابقة إلى واجهة مرئية حقيقية وتفاعلية ، نذكر البعض من أطر العمل :
– إطار عمل boostrap
– إطار عمل tailwind css
– إطار عمل semantic ui
بالنسبة إلى مطوري التطبيقات ف تحتوي لغات برمجة هذه التطبيقات على مكونات واجهة مستخدم مبنية ضمنها ، ويوجد أيضا أطر عمل لتطوير واجهات المستخدم ، مثل إطار العمل flutter المبني بلغة البرمجة dart لتطوير تطبيقات الهواتف الذكية ، ومثال اخر حزمة pyqt5 لتطوير واجهات تطبيقات سطح المكتب باستخدام لغة البرمجة بايثون .
مصادر وكتب لتعلم ال UI&UX Design:
– كتاب The Element of User Experience -By jesse James garrett
– كتاب A project Guide To UX Design -By Russ Unger & Carolyn Chandler
– كتاب مدخل إلى تجربة المستخدم –محمد فواز عرابي
يجب الاطلاع بشكل دائم على المواقع التي تعرض أعمال التصميم مثل pinterest , dribble , behance ، ويوجد العديد من الدورات التعليمية على يوتيوب لتعليم التعامل مع برامج adpbe XD و figma .