ما المقصود بــ UI/UX Design ؟

أولا لمعرفة الفرق بينهما أنصحك بقراءة المقال التالي وستفهم منه ما أوجه الفرق المختلفة بين UI و UX :

وإليك المقال التالي لتعلم الخطوات اللازمة لتصميم واجهة المستخدم وتجربة المستخدم :

وأنصحك بقراءة الإجابات التالية على السؤال التالي لمعرفة كيف تصبح مصمم UI و UX:

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

وتجربة المستخدم تعني كيف يشعر المستخدم أثناء تصفحه للموقع؟ هل هو تائه؟ هل هو محبط؟ أم أن الأمور تجري بسلاسة؟ وللتسهيل إليك قائمة بأمور عملية عامة تستطيع برمجتها وتطبيقها لتحسين التجربة:

• زر الصعود للأعلى Scroll to Top كما ذكرت أنت، ذلك مثال ممتاز، ففي الصفحات الطويلة، يوفر على المستخدم عناء التمرير العكسي الطويل.
• فتات الخبز Breadcrumbs بمعنى روابط التوجيه الرئيسية > المنتجات > إلكترونيات تساعد المستخدم معرفة مكانه والعودة خطوة للخلف بسهولة.
• القائمة الثابتة Sticky Header، أي عند النزول للأسفل، بقاء القائمة العلوية ظاهرة يسهل التنقل دون الحاجة للصعود لأعلى الصفحة.
• التحميل الكسول Lazy Loading فلا تقم بتحميل كل الصور في الصفحة دفعة واحدة بل اجعل الصور تظهر فقط عندما يصل المستخدم إليها وذاك يسرع الموقع، والسرعة هي جزء أساسي من UX.
• تحسين معرض الصور Lightbox عند النقر على صورة منتج، يجب أن تفتح في نافذة منبثقة Modal مع خلفية معتمة وإمكانية التكبير والتنقل بين الصور بأسهم لوحة المفاتيح.
• Skeleton Screens بدلاً من عرض شاشة بيضاء أو دائرة تدور أثناء تحميل البيانات، اعرض هيكل رمادي يشبه شكل المحتوى القادم مثل فيسبوك ويوتيوب، الأمر الذي يخدع الدماغ بأن الموقع أسرع.

وأمور أخرى مثل Real-time Validation، Button Feedback، Auto-focus وTouch Target تستطيع البحث عنهم.

وبخصوص الـ UI فهي ليست فقط عبارة عن ألوان جميلة، بل اللغة البصرية التي توجه المستخدم، وأهم مفاهيم UI يجب أن تراعيها في الكود هي:

• التسلسل الهرمي البصري Visual Hierarchy
• المساحات البيضاء Whitespace وNegative Space
• التناسق Consistency

وعندما يطلب العميل تحسين UX/UI، فهو لا يريد منك إعادة تصميم اللوجو، بل يريد منك كمطور واجهات أن يكون الموقع متجاوب مع الجوال، أن تكون التفاعلات Animations ناعمة وغير مزعجة، أن يكون الموقع سريع، وأن تكون النصوص مقروءة بوضوح أي تباين الألوان.