C I S T E A M

UI - UX

Blog Image

UI - UX

 

سمعنا الفترة اللي فاتت عن مجال الـ UI -UX فخلينا نأخذكم في جولة ونكلمكم عنه شوية


◼️️ الـ UI هو اختصار لـ User Interface ومعناها واجهة المستخدم ودي الواجهة اللي بيشوفها المستخدم لما يدخل موقع معين أو تطبيق علي الموبايل على سبيل المثال.


◼️️الـ UX هو اختصار لـ User Experience ومعناها تجربة المستخدم وهي كل ما يخص التجربة اللي بيقوم بيها المستخدم جوا موقع أو تطبيق مثلًا وبتعتمد على تسهيل التجربة الخاصة بيه عن طريق سهولة الوصول للعناصر وجعل التجربة سهلة وسلسة بدون أي تعقيدات.


تعالو ناخد مثال يوضح لنا المفهومين وازاي هما مكملين لبعض


وانت في طريقك للكلية من اتجاه بوابة علوم هتلاقي تفرعين، طريق مخصص للمشاة و تفرعات جانبية ممهدة بالزرع والسؤال هنا هل هتمشي في الطريق الممهد ولا هتمشي بين المزروعات وتقصر عليك الطريق؟

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


كمان اذا كان الطريق جميل وواسع وأرصفته مدهونة بألوان لطيفة وعنوان واضح وسهل الوصول إليه هل هيتحقق الـ UI - UX؟ الإجابة ايوا ولكن لو كان العنوان معقد وصعب الوصول اليه وقتها الـ UX ما بيتحققش .


ودلوقتي خلينا نتكلم عن الـ UI/UX بشكل عملي أكتر

◼️ الـ UX بيهتم بالعمليات اللي الـ User هيعملها .. بمعنى أنا عايز مثلًا App بنطلب منه أوردر قهوة فـ كـ UX هعمل شوية خطوات:

◼️️ اقعد مع المستخدم واعرف منه محتاج إيه في الـ App.

◼️️ ببدأ أحللها وارتبها وأضبط أفكاري.

◼️️ بشوف الـ Apps الموجودة فعلياً بتقدم نفس المنتج، وأفكر ممكن ازود عنهم إيه.

◼️️ برسم على ورقة شوية شخبطة بتوضح شكل بسيط للـ App، وده اسمه Wireframe.

وبعدها بشوف أقصر وأحسن طريق الـ User يطلب منه القهوة ..

يعني لو عندي نوع قهوة فيها مكونات كتير .. مش هينفع الـ User يضيف بنفسه كل المكونات، لكن بوفر له كل نوع ومحتواه وهو يختار بينهم أو يعدل فيهم.

وكمان يحدد الفئة المستهدفة ويضبط الألوان عليها فلو App لقهوة بيعمله من درجات البني ودا اسمه الـ Persona.

بعدها بعمل Prototype أو اسكتش ولو عجب العميل ببعت شغلي للـ UI يكمل عليه.


ودلوقتي جه دور الـ UI..

وببساطة بياخد شغل الـ UX ويحوله لديزاين بشكل فعلي، يعمل الزرار ويضبط الـ icons ويضبط الأشكال الفنية ..

ومن هنا نوصل لتعريف أشمل لواجهة المستخدم (UI) وهي عملية بيستخدمها المصمم عشان يبنى واجهة البرنامج بس بيركز أكتر على المظهر أو النمط اللى هيظهر بيه بحيث إنها تكون سهلة وممتعة.


طب إيه البرامج اللى ممكن استخدمها عشان أقدر أعمل واجهة مستخدم؟

◻️️ برنامج Adobe XD أو Experience Design أو Figma علي Windows OS

◻️ برنامج Sketch علي Mac OS

دول يعتبروا أهم البرامج الموجودة حالياً


وبكدا نكون فهمنا إيه هو الـ UI - UX والفرق بينهم و قد إيه هما بيكملوا بعض.