مقال اليوم عن الفرق بين تجربة المستخدم و واجهة المستخدم ui/ux. وما هي الأدوات والخطوات المطلوب منك معرفتها للوصول لمستوي تصميم ويب (موقع الكتروني) خاص بك أو حتي لعمل Portfolio (معرض اعمال خاص بك).

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

” UI ” اختصار ” User Interface ” وتعني واجهة المستخدم. واجهة المستخدم هي الواجهة أو التصميم الخاص بالمحتوى سواء كان (موقع الكتروني .. تطبيق اندرويد…الخ ) واجهة المستخدم تُعبر عن نفسها فهي كل ما هو مرئي للمستخدم بمعنى أخر المحتوى الذي تم تصميمه بطريقة تجعلك منجذب له وسهل علي العين بصريا. المحتوى هنا من الممكن أن يكون الموقع الخاص او معرض الأعمال الخاص بي. وبالطبع واجهة المستخدم يجب أن تُعبر عن المحتوى ولو بنسبة تصل إلى 20%. واجهة المستخدم تشمل (صور, الوان, خطوط, عناصر, تنسيقات, كل ما هو متعلق بصري).

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

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

هنا يأتي دور المرحلة الثانية وهي UX اختصار User Experience وتعني تجربة المستخدم.

ما هي تجربة المستخدم UX Design ؟! 

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

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

مرحلة أخري من الأساسيات وهي تعلم اكواد البرمجة والتصميم مثل Html..css..js..php وهنا يقوم دور كل لغة في مهمة معينة علي سبيل المثال Html وهي جسم الموقع أو اللغة الأساسية لتصميم المواقع وبعدها css لاختيار الالوان والتنسيقات بعدها الجافا سكريبت المسؤولة عن ديناميكية العناصر والموقع ككل. تمكنك من خلالها بعمل شئ شبيه بالذكاء الاصطناعي للويب سايت وهي جزء كبير جدا من تجربة المستخدم.

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

وهنا نأتي بالمختصر المفيد وهي أن تجربة المستخدم وواجهة المستخدم هما وجهان لعملة واحدة ، واجهة المستخدم هي المرحلة الأولى لجذب المستخدم إلى المحتوى الخاص بك أو كما في مثالنا الموقع الخاص بك وأما تجربة المستخدم في الطريق الذي ترسمه للمستخدم للوصول الي الهدف الخاص بك ( Call to action ).

ما الذي تحتاجه لتصميم موقع إلكتروني أو معرض أعمال؟

ببساطة سوف تحتاج الي تعلم ما يلي:

* أساسيات التصميم.

* الألوان.

* الخطوط.

* التصميمات.

* تغذية بصرية بصورة مستمرة. ( إليك مواقع بها الكثير من الإلهام: Behance | dribbble | pinterest )

* تعلم أساسيات البرمجة بداية مع (HTML – CSS).

* الديناميكية تتمثل في (Javascript).

* تجاوب الموقع مع الأجهزة المختلفة (Bootstrap).

* بالنسبة لمصدر برمجة عربي نرشح لك : El Zero WEb school… مسار تعليمي.

إن كنت تفكر جديا في هذا المجال إليك كورس مجاني للبداية في مجال UI/UX ( رابط الكورس) من موقع Skill share.

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

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