A / B اختبار UX للأطر القائمة على المكونات

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

نتيجة لهيكلها والقيود التقنية ، تعد الأطر مثل Vue.js و React.js و Material UI مهمة للمصممين للنظر فيها لأنها تعمل بمثابة لبنات بناء لأنظمة تصميم قوية. علاوة على ذلك ، فإن معرفة كيفية عمل الكود يكون مفيدًا أيضًا عند تسهيل تقنيات التصميم المبنية على البيانات في بيئة التطوير مثل اختبارات A / B.

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

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

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

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

ببساطة ، تحدد مكونات العرض اللغة المرئية للتطبيق ، وتساعد المكونات الوظيفية على إضفاء الحيوية عليها .

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

هل يمكن اختبار الميزات المتطابقة في التخطيطات البديلة بأقل جهد هندسي؟ الإجابة هي "نعم" ، وإذا تم إجراؤها باستخدام طريقة A / B في وقت مبكر من العملية ، فسيتم دمجها في دورة حياة تطوير منتج بسيط. (يعد تطوير المنتجات الخالية من الهدر نتاجًا لمفهوم كايزن الياباني ، وفلسفة العمل المتمثلة في إجراء تحسينات تدريجية على تدفقات العمل والممارسات والتقنيات و- في هذه الحالة- المنتجات.)

يناقش إريك ريس ، رائد الأعمال والمؤلف المتسلسل ، دليلاً عمليًا لدورة حياة تطوير المنتجات الخالية من الهدر في كتابه The Lean Startup . تتبع الطريقة سير عمل بناء المنتجات بفرضية واضحة ، واختبار ما تم بناؤه ، والتكرار بناءً على ما تم تعلمه.

طريقة بدء التشغيل الهزيل

تحديد نهج اختبار A / B

يعد اختبار A / B مكونًا أساسيًا لأي مجموعة أدوات لمحترفي تجربة المستخدم المخضرمين. يتمثل دورها في دورة حياة تطوير البرامج في المساعدة في تحسين قابلية استخدام التطبيقات. بالاقتران مع بيانات الخرائط الحرارية ، يمكن للفرق الحصول على معلومات قيمة عن سلوك المستخدم ، خاصة عندما يتعلق الأمر بنقاط الاحتكاك داخل تدفق التطبيق.

قبل بدء اختبار A / B ، إليك بعض الأسئلة لتركيز العملية:

• كيف يتم استخدام اختبار A / B في UX؟
• ما هي طرق تحليل A / B المتوفرة؟
• لماذا تصميم اختبارات A / B أثناء التخطيط الشبكي؟
• ما الذي نقوم باختباره؟

الطريقة الأكثر شيوعًا لاختبار A / B على نطاق واسع هي اختبار الانقسام الذي يقدم إصدارات مختلفة قليلاً من تطبيق أو موقع ويب للمستخدمين المباشرين. غالبًا ما يكون اختبار الانقسام خارج النطاق و / أو الميزانية لشركة ناشئة أو شركة صغيرة. ومع ذلك ، هناك بدائل للاختبار المقسم على نطاق واسع والتي يمكن الوصول إليها بشكل أكبر وتشمل: المقابلات الشخصية ومجموعات التركيز والخدمات عبر الإنترنت التي تربطك بشبكة من مستخدمي الاختبار.

أ / ب تصميم يحركها الاختبار

أثناء عملية التخطيط الشبكي ، من المهم مراعاة إمكانيات اختبار A / B من منظور التخطيط والتنقل. يمكن للاختلافات البسيطة لمكونات العرض أن تغير كيفية تقديم المعلومات بسهولة. تمنحك الأطر القائمة على المكونات حرية تجربة كيفية تنظيم المحتوى دون الحاجة إلى إعادة هندسة الوظائف الأساسية للمنتج.

مثل أي مسعى للتصميم ، يجب أن يتبع اختبار A / B الفعال منهجية محددة بوضوح. أولاً ، حدد المتغير الذي تختبره. بعد ذلك ، حدد ما يشكل النجاح. قم بالانتهاء من خلال تقييم البيانات وتحديد الخطوة التالية التي يجب أن تكون.

على سبيل المثال ، في حالة واحدة ، تم اختبار التسلسل الهرمي للمخطط. يتكون المخطط A من شبكة من عمودين تحتوي على مكون قائمة المرضى على يسار الشاشة ومكون ملف تعريف المريض على اليمين. يحتوي التخطيط B على قائمة مرضى ذات عمود واحد من شأنها النقر للوصول إلى مكون ملف تعريف المريض.

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

"نموذج صندوق المكونات"

بالنسبة لتطبيق الويب هذا ، استخدمنا React ، وهو إطار عمل يعتمد على مفاهيم إدارة الحالة والمكونات المعيارية. React هي مكتبة JavaScript تعريفية وفعالة ومرنة لبناء واجهات المستخدم. يتيح لك إنشاء واجهات مستخدم معقدة من أجزاء صغيرة ومعزولة من التعليمات البرمجية تسمى "المكونات". تُترجم هذه النمطية إلى المرونة عند العمل على منتج يشمل المطورين والمصممين على حدٍ سواء.

لقد فهمت إطار العمل هذا بإلهام من نموذج مربع HTML + CSS. يقدم نموذج صندوق المكونات طريقة تنظيمية يمكن من خلالها إنشاء اللبنات الأساسية لأحد التطبيقات. إنها مناسبة بشكل خاص لتطوير نظام تصميم للمشاريع سريعة التطور.

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

• المبدأ الأول: تجميع السياقات والأفعال المتشابهة .
• المبدأ الثاني: دع معمارية المعلومات تساعد في تبسيط تدفق "الحالة" بين المكونات.
• المبدأ الثالث: تصميم أنظمة بصرية قابلة للتطوير لتبسيط كيفية فهم المطورين للتصميمات وتنفيذها.

تجميع السياقات المتشابهة

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

تبسيط تدفق تفاعل "الحالة"

في React ، يشير تدفق "الحالة" إلى كيفية تحرك المعلومات عبر التطبيق ، وكيف تساعد المكونات في تنظيم البيانات وكيفية عرضها. بشكل نموذجي ، تتدفق الحالة إلى مكونات العرض من المكونات الوظيفية التي تعمل كحاويات. يمكن للمصممين التحضير لاختبارات A / B من خلال تحديد كيفية قيام المكونات الوظيفية بشكل استباقي بتغيير تخطيط أحد التطبيقات عن طريق تغيير كيفية تقييم مكونات العرض.

تطوير أنظمة تصميم قوية

يساعد استخدام مكونات العرض لتطوير معايير للعناصر المرئية مثل الطباعة والأزرار والمدخلات والوسائط والبطاقات في توفير اللبنات الأساسية للغة تصميم موحدة. تتمتع الأنظمة المرئية القوية بالمرونة لإبقاء مصممي ومطوري UX على نفس الصفحة حول المكونات المشار إليها في الإطارات السلكية.

ملخص

يرتبط نجاح التصميم القائم على اختبار A / B بالتآزر بين فرق المنتج والفرق الفنية. يجب أن يكون المصممون الذين يتطلعون إلى اعتماد هذه الطريقة دقيقين بشأن مكان وكيفية الاختبار. اقض وقتًا في تطوير فرضية وتحديد ما تأمل في اكتشافه. لا تشتت انتباهك. التزم بها - من السهل جدًا الابتعاد عن طريقتك.

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

المكونات ، مثل أنظمة التصميم ، تتعلق بالنمطية وإعادة استخدام الأنماط ، ولا تتعلق بالتخطيط أو النمط. من وجهة نظر المصمم ، يمكن أن تساعد المرونة في اختبار المنتجات وتنقيحها وتحسينها باستخدام اختبار A / B في تطوير منتجات تركز بشكل أكبر على المستخدم ، مما يؤدي في النهاية إلى نجاح أكبر.

•••

مزيد من القراءة على مدونة Toptal Design:

• الاستفادة من النماذج العقلية في تصميم تجربة المستخدم
• اختبار UX للجماهير: اجعلها بسيطة وفعالة من حيث التكلفة
• الدليل الأساسي لاستخدام الهاتف المحمول
• قيمة أبحاث المستخدم
• فهم أنظمة وأنماط التصميم