المطورون الواعون بتجربة المستخدم (User-centered front end developers) يحظون بطلبٍ متزايدٍ في سوق العمل اليوم. تُعد تجربة المستخدم (User Experience - UX) لغة الأعمال. وكما خلص تقرير User Testing السنوي لعام 2015: “في السنوات القادمة، ستستثمر الشركات بشكلٍ أكبر في إنشاء منتجات وتجارب مبنية على التغذية الراجعة المستمرة من عملائها، وستصبح تجربة العميل مسؤولية مشتركة بين جميع الفرق في المؤسسة.”
لتميز أي مشروع، يجب أن يلبي احتياجات المستخدمين “بالقدر المناسب تماماً”. في العديد من المشاريع، يقع دور مصمم تجربة المستخدم (UX designer) على عاتق مطور الواجهة الأمامية (front end developer). علم النفس وقابلية الاستخدام (usability) يكملان javascript. بالتأكيد يمكنك الاكتفاء بمستوى الكود، لكن المتعة والفوائد تتضاعف إذا تجاوزت حدود المسميات الوظيفية التقليدية هذه. بالنسبة لعملائك ومستخدميهم، الكود هو أداة، وليس هدفاً بحد ذاته.
قد تفتقر الفرق التي ستعمل معها إلى مصمم UX، أو باحثين، أو مصمم جرافيك. لا أحد يطالبك بأن تصبح مصمم واجهة مرئية (visual designer) أو تفاعلية (interaction designer)، ونأمل أن تتعاون ضمن فريق يضم مصممين وباحثين متميزين. ومع ذلك، إذا كنت ترغب في إنجاح المشاريع التي تشارك فيها، فمن الأفضل أن تهتم على الأقل ببعض أساسيات UX. المشاريع والفرق المثالية ليست متوفرة في كل مكان.
التجربة الرائعة تعني مستخدمين سعداء. المستخدمون السعداء يؤدون إلى الاحتفاظ بهم. وهذا يزيد من فرص تحقيق إيرادات أعلى. وهذا يجلب الدخل. وهذا يجعل الجميع سعداء، ويُستخدم الكود الخاص بك حقاً من قبل الملايين من الناس. حينها تبدأ في الشعور بالفخر المتزايد بما تكتبه من كود لأنه يحل مشاكل حقيقية للمستخدمين. بالتأكيد، مستوى الكود مهم للغاية؛ فإذا كان المنتج مليئاً بالأخطاء (buggy)، فلن يرغب أحد في استخدامه. ومع ذلك، قد يجتاز الكود كل اختبار تجريه، ولكن إذا لم يرق للمستخدمين، فلن يكون له مستقبل طويل في عالم الأعمال.
دعني أقدم لك بعض أساسيات تجربة المستخدم لزيادة فرص نجاح تطبيقاتك. إليك 5 قواعد موجزة لتبدأ بها:
1. المنتج مُصمم للمستخدمين
إذا لم يحل المنتج مشاكل المستخدمين، فسيوقف مالك المنتج (product owner) الاستثمار فيه عاجلاً أم آجلاً. تعرف على الأشخاص الذين يشكلون الفئة المستهدفة. على الأقل، افهم الأساسيات. يجب أن يكون الفريق بأكمله على دراية بما يجب بناؤه ولمن. اسأل باستمرار، اختبر باستمرار، كرر (iterate).
ما المشكلة التي يريدون حلها؟ ما هو هدفهم؟ ما الذي يقلقهم؟ هل هي فتاة مراهقة، أم رجل مسن (كن حذراً مع التعميمات)؟ هل هو مطور backend أم مصفف شعر؟ متى سيتفاعلون مع المنتج، وماذا يحتاجون للعثور عليه أولاً؟ كيف يمكنك تسهيل الأمر عليهم؟ إلى أين يجب أن ينتقلوا بعد ذلك؟ ما هو الحد الأدنى من المعلومات التي تحتاجها منهم لمساعدتهم في حل المشكلة؟
اجعل مستخدميك يشعرون وكأنهم في منزلهم. استفد من الاتفاقيات (conventions) وأفضل الممارسات (best practices). قليل من المعرفة بالمجال (domain knowledge) لا يضر، بل هو ميزة إضافية لكونك مطوراً. كل مشروع يعلمك عالماً جديداً، أليس هذا رائعاً؟ استفد من ذلك وراقب العالم من حولك. قد يساعدك كثيراً في إنشاء منتجات يحبها المستخدمون.
2. لا تجعلني أفكر: القاعدة الأولى لقابلية الاستخدام
ننصحك بقراءة كتاب Don’t Make Me Think للمؤلف Steve Krug إذا أردت تطوير مهاراتك في قابلية الاستخدام (usability). إنه بمثابة الإنجيل المكثف لقابلية الاستخدام.
المنتج الرائع يتميز بالوضوح، والاستفادة من الاتفاقيات (conventions)، وتوفير واجهة (interface) مناسبة تماماً للوقت والمكان. الواجهة الأمامية (front end) ليست مجرد javascript خلف الإجراءات التي يتخذها المستخدمون. الثبات (consistency)، التسلسل الهرمي البصري (visual hierarchy)، التخلص من التشويش البصري (visual noise)، وكتابة تنبيهات (alerts) وتسميات إدخال (input labels) مفهومة للمستخدم، كلها أمور مهمة لقابلية استخدام المنتج.
المستخدمون يمسحون الصفحات بحثاً عن المعلومات، فاجعل الأمر سهلاً عليهم من خلال المظهر. استخدم عناوين مناسبة (headings)، أحجام خطوط (font sizes)، أزراراً واضحة (affordable buttons)، تسميات ذات معنى (meaningful labels)، إلخ. إذا كان لديك أي تأثير على المحتوى النصي (copy)، فتذكر أن الكلام المفرط والمجرد من المعنى مزعج. عند كتابة التنبيهات (alerts)، استخدم اللغة التي يتحدث بها المستخدمون. كن إعلامياً ومفيداً.
تأكد من أن التنقل (navigation) واضح، غير مثقل، ومنطقي للمستخدم. يمكنك أيضاً استخدام مسارات التنقل (breadcrumbs) كمؤشرات لإظهار مكان المستخدمين إذا كان الموقع معقداً حقاً. تعمل breadcrumbs بشكل أفضل إذا كانت في أعلى الصفحة، ووضع علامة > بين المستويات، وجعل العنصر الأخير بخط عريض (bolded). إذا كانت القائمة مرئية للمستخدم، فإن التفاعل يكون أكبر بكثير مما لو كانت مخفية خلف أيقونة الهامبرغر (hamburger bar). كن حذراً ولا تبالغ في عدد العناصر والمستويات في القائمة. ليس على المستخدم أن يرى كل شيء دفعة واحدة. يمكنك تقديم العناصر التالية في اللحظة التي يكون فيها المستخدم في المستوى الصحيح ويحتاج إليها حقاً.
3. الجوّال ليس نسخة سطح مكتب مصغّرة
تخيل أنك تقوم بتطبيق نسخة جوال لتطبيق حيث يمكنك تحديد التخطيط (layout). ليس لديك تصاميم جاهزة ويُطلب منك بناؤها باستخدام مكونات Bootstrap. ابدأ بمنهجية mobile first. هذا يجعلك تركز على أهم العناصر والتفاعلات أولاً. يمكنك بناء نموذج أولي (prototype)، أو مخطط هيكلي (wireframe)، أو على الأقل رسم تخطيطي (sketch) أولاً. أسهل ما يمكنك فعله هو استخدام القلم والورق.
يمكنك الاستعانة بـ Sketch، أو Experience Design، أو ببساطة البحث في Google عن أي أداة أخرى لتخطيط الهياكل (wireframe) أو النماذج الأولية (prototyping tool). إذا لم تكن مصمم واجهة مرئية (visual designer) ولكن لا يزال عليك القيام بعمل النماذج الأولية، فاستخدم أدوات النماذج الأولية مثل Proto.io حيث تتوفر لديك عناصر مكتبة واجهة المستخدم (UI library elements) جاهزة للاستخدام.
الجوّال يعني الراحة للنقر السريع (tap)، أو السحب (slide)، أو التحديد (tick). لذا، إذا أردت إنشاء نموذج، استخدم أدوات التحكم المتدرجة (steppers)، أو أشرطة التمرير (sliders)، أو مجموعات الأزرار الدائرية (radio groups)، أو المفاتيح التبديلية (switchers) بدلاً من حقول إدخال النص التقليدية لسطح المكتب (desktop text inputs). الجوّال يعتمد على اللمس أولاً. الجوّال يعني الاتجاه الأفقي والعمودي. يُستخدم الجوّال عادة بيد واحدة بحجم الإبهام. وهذا يعني أيضاً أن منطقة اللمس الأكثر ملاءمة تقع في أسفل الشاشة.
يستفيد الجوّال من مجموعة متنوعة من إمكانيات الجهاز المدمجة، مثل الوصول إلى المعرض (gallery access)، الكاميرا (camera)، مستشعرات الحركة (movement sensors)، الميكروفون (microphone)، أو نظام تحديد المواقع العالمي (GPS). استفد من ذلك. عندما يتعلق الأمر بالجوّال وتجربة المستخدم (UX)، دعني أتركك مع Luke Wroblewski. يمكنك تعلم الكثير منه.
4. الكود الخاص بك يضع القواعد، فتأكد من صحتها
لا تطلب من المستخدمين مقاس أحذيتهم خلال زيارتهم الأولى ما لم تكن متجراً للأحذية. حتى لو كنت تنشئ متجراً للأحذية، يمكنك توفير معلومات حول نطاق الأرقام المتاحة، ودع المستخدمين يتفاعلون أولاً مع الألوان، الأنماط، أو المناسبات. الكثير من التطبيقات تبدأ بجدار التسجيل (sign up wall)، مما يجعل معدل التخلي (drop offs) هو المقياس الأكثر وضوحاً. يمكنك الاطلاع على مقال حول تصميم النماذج التفاعلية.
سواء كنت تطبق حلاً لعميل أو تبني منتجك الخاص، فكر في فوائد بناء علاقة. امنح مستخدميك فرصة لتجربة المنتج قبل أن تطلب منهم إدخال معلومات بطاقة الائتمان أثناء التسجيل لتجربة مجانية. لا تبنِ جدراناً. أنت ترغب في أن يستخدم مستخدموك ما قمت ببرمجته، أليس كذلك؟ دعهم يجربون. المشاركة التدريجية (Gradual engagement) والتدهور اللطيف (graceful degradation) هما مفتاحاك.
تأكد من تحسين صورك (optimized). استخدم نسخاً مصغرة (minified versions) من الكود الخاص بك عند دفعه إلى الإنتاج (production). قم بتشغيل اختبار صفحات Google للتحسين. اختبر على اتصال إنترنت بطيء. اعتنِ بمن يهتم بكل بايت من نقل البيانات. اجعل منتجك قابلاً للاستخدام على كل من النطاق العريض (broadband) و GPRS.
5. زمن “الكمال البكسلي” والرسوم المتحركة المعقدة قد ولى
تجربة المنتج الرائعة تستند إلى قابلية الاستخدام (usability) والفوائد. إنها ليست لعبة إطلاق بكسلات. لقد ولى عصر الكمالية البكسلية (pixel perfectionism) مع شاشات سطح المكتب فقط. من الرائع أن تتمكن من اللعب بـ CSS المعقدة… لكن لا تُضف ضوضاء رسوم متحركة (animation noise) إضافية لمجرد استعراض مهاراتك. إذا أردت الاستعراض، تدرب على CodePen، واحتفظ به لمحفظة أعمالك (portfolio). الرسوم المتحركة (animation) تكون مثالية عندما تكون ذات معنى. UX هي أكثر من ذلك بكثير.
كانت هذه مجرد مقدمة للمبتدئين في هذا الموضوع. إذا أعجبك المقال، شاركه مع الآخرين. إذا كنت ترغب في معرفة المزيد عن قابلية الاستخدام (usability)، تصميم التفاعل مع المستخدم (user interaction design)، أبحاث المستخدم (user research)، النماذج الأولية (prototyping)، إلخ، فأخبرنا في التعليقات. برمجة سعيدة تتمحور حول المستخدم!
💡 الخلاصة التقنية
تُعد تجربة المستخدم (UX) عنصراً حيوياً لنجاح أي منتج رقمي، وهي ليست حكراً على المصممين فحسب، بل تمثل مسؤولية أساسية لمطوري الواجهة الأمامية (front end developers). من خلال التركيز على المستخدم، تبسيط التفاعلات، تبني منهجية mobile first، وكتابة كود يخدم أهداف المستخدمين، يمكن للمطورين المساهمة بشكل فعال في بناء منتجات محبوبة ومستدامة. تذكر دائماً أن الكود هو وسيلة لتحقيق تجربة مستخدم ممتازة، وليس غاية في حد ذاته، وأن البساطة والوضوح والتركيز على الفائدة هي مفاتيح النجاح الحقيقي.