تصميم UI UX

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

وفي المقابل يُعنى تصميم تجربة المستخدم - User Experience بكيفية تفاعل مستخدمي التطبيق أو موقع الويب مع النظام فيهتم بأمور التنقل المنطقي بين عناصر النظام ومدى سلاسة التجربة التي يخوضها المستخدم في أثناء استخدامه النظام.

تتلخص أهمية اتصاف الموقع أو التطبيق بتصميم واجهة مستخدم وتجربة مستخدم احترافيتين بالنقاط التالية:

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

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

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

وعندما تتأكد من أنك انتهيت من تعبئة النموذج بالنحو المطلوب، اضغط على زر "انشر الآن".

بعد نشر مشروعك الخاص بتصميم UI UX على موقع مستقل، سيبدأ المتخصصون في التقدم بعروضهم لتنفيذ مشروعك. ولاختيار أنسبهم له ننصحك بما يلي:

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

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

تتعدد الأساسيات التي ينبغي وضعها في الحسبان خلال تصميم UI UX، منها:

1. تلبية احتياجات العملاء من التطبيق أو الموقع بسلاسة ودون خلل.
2. هرمية النظام: وهي طريقة تنظيم المحتوى والمعلومات في سائر أجزاء الموقع أو التطبيق، مثل ترتيب ظهور الشاشات وتحديد المعلومات التي يجب أن تعطى اهتمامًا أكبر من غيرها. فالهرمية تتحكم في الترتيب الذي يُتعاطى به مع المعلومات وتُعالجُ، فالتصميم الذي يتمتع بهرمية واضحة يساعد المستخدم على أن يمسح أجزاء المنتج بسهولة بحثًا عن المعلومات التي يريدها ويباشر المهام بسلاسة.
3. عرض تغذية راجعة: بعد كل إجراء يتخذه المستخدم يجب أن تظهر تغذية راجعة توضح له ما يجري الآن لكي يتيقن أن التطبيق يعمل فعلًا، مثل إظهار النسبة المئوية المتبقية لتحميل ملف. أو الوقت الكافي للانتهاء من تحميل البرنامج، وبهذا لا يبقى المستخدم في حالة انتظار مجهولة.
4. استخدم اللغة الدارجة الواضحة للمستخدمين وتجنب استخدام المصطلحات الفنية. ويجب أن تدل الأيقونات على وظائفها مثل أيقونة سلة المحذوفات تدل على المحذوف من الملفات مثلًا.
5. منح التحكم للمستخدمين: مثل أن يتاح لهم حذف وتراجع والتكرار وغير ذلك كما هو الحال في غوغل دوكس مثلًا.
6. الوصول: وهو أن تمكن أكبر شريحة ممكنة من الوصول إلى التطبيق أو الموقع مثل تمكين من يعاني من إعاقة بصرية بأن يكون هناك تباين عالٍ في الخلفية بين النص، وتجنب استخدام ألوان لا يمكن للجميع رؤيتها.
7. الاطّراد والانتظام: فينبغي للمنتج أن يستخدم أسلوبًا موحدًا في كامل التطبيق أو الموقع فلا يكون هناك عبء تعلم كبير على المستخدم. مثال ذلك: حزمة برامج أوفيس، لاحظ الانتظام في تصميمها في وورد وإكسل وأكسس فهناك مظهر عام وشعور عام تتشاركه هذه التطبيقات. فإذا تعلّمت استخدام وورد، سهُل عليك الانتقال إلى إكسل مثلًا.