أشياء يمكن توقعها من ورشة عمل تحطيم: دروس متقدمة في تصميم النماذج

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

كانت ورشة عمل لمدة 4 أيام مقسمة إلى جزأين مدة كل منهما 45 دقيقة ، مع فترات راحة لمدة 15 دقيقة تليها أسئلة وأجوبة لمدة 30 دقيقة مع واجبات منزلية اختيارية بين الأيام. كل يوم شرعنا في حل مشكلة واحدة كبيرة. قدم هذا طريقة للتعامل مع المشكلة كما نفعل في الحياة الواقعية: من خلال تحليل ومناقشة الخيارات قبل الوصول إلى حل جيد.

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

بعض النقاط البارزة في كل يوم

إليك ملخص سريع لكل يوم بما في ذلك بعض النقاط البارزة.

اليوم الأول: إبراز أساسيات تصميم النموذج

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

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

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

اليوم الثاني: التحقق من صحة النموذج وكتابة رسائل خطأ جيدة

في اليوم الثاني ، أخذنا نموذج التسجيل المصمم جيدًا وبحثنا في كيفية مساعدة المستخدمين على التعافي من الأخطاء بطريقتين:

1. قررنا متى يتم التحقق من صحة النماذج وكيفية عرض رسائل الخطأ ؛
2. لقد تعلمنا كيفية كتابة رسائل خطأ واضحة وموجزة ومتسقة ومحددة تساعد المستخدمين على العودة إلى المسار الصحيح بسرعة.

كان أبرز ما لدي في هذه الجلسة هو التمرين لإعادة تصميم رسائل الخطأ في نموذج الاشتراك في عضوية مجلة Smashing Magazine.

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

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

اليوم الثالث: إعادة تصميم نموذج الخروج من العالم الحقيقي

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

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

وقمنا بإعادة تصميمها في نموذج به أزرار اختيار:

وهذا كشف مشكلة أنه في الحياة الواقعية ، نادراً ما تكون الخيارات ثنائية. لذا سألت المجموعة عن الخيار المفقود وقالوا بحق: "ماذا لو لم يتذكر المستخدم؟"

لذلك على الرغم من أننا نظرنا إلى هذا في الأساس على أنه مشكلة تصميم تفاعل ، فقد أصبح مشكلة تصميم المحتوى والخدمة.

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

اليوم الرابع: استخدام صيغة الاختزال وتصميم أشكال طويلة ومعقدة

تم تقسيم اليوم الرابع إلى جزأين وسأناقشهما بترتيب عكسي.

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

في الجزء الأول ، قمنا بإعادة تصميم نموذج تسجيل مجلة Smashing باستخدام صيغة الاختزال.

كان أبرز ما لدي في هذه الجلسة هو أن Vitaly ، Mr. Smashing Magazine نفسه ، جاء ليكون صاحب المصلحة في أعمالنا. طرحت المجموعة عليه أسئلة لمعرفة سبب تصميم النموذج بالطريقة التي كان عليها والسؤال عن سبب طرح أسئلة معينة.

وفيما يلي بعض الأمثلة على ذلك:

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

انطباعي العام

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

على سبيل المثال ، كان كل شيء متصل بـ Zoom ، يعني أنه كان من السهل على الحضور طرح الأسئلة أثناء مشاركة شاشتهم لإحياء المشاكل.

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

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

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

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

ما سأغيره في المرة القادمة

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

1. اعرض الأساسيات ، وليس تعلم الأساسيات

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

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

2. تقسيم الناس في مجموعات أكبر

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

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

3. أضف المزيد من التمارين الجماعية

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

ملصق لجميع القواعد

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

سألني عدد قليل من الحاضرين عما إذا كان لدي ملصق لجميع القواعد ولم أفعل - لذلك قمت الآن بعمل ملصق.

ملصق ماجستير في تصميم النموذج (نسخة نصية عادية)

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

اليوم الأول: إبراز أساسيات تصميم النموذج

1. اجعل النماذج تعمل بشكل جيد للجميع
2. يحتاج كل عنصر تحكم إلى تسمية
3. أضف نص تلميحًا فقط إذا كان يضيف قيمة
4. لا تستخدم نص العنصر النائب
5. ضع نص التلميح بين التسمية والإدخال
6. ضع تسميات فوق الإدخال
7. لا تستخدم تلميحات الأدوات لنص تلميح
8. اعرف لماذا تسأل كل سؤال ^*
9. امنح مربعات النص حدًا مميزًا
10. تسميات الموضع المراد ربطها بالمدخلات
11. إعطاء المدخلات حالة تركيز واضحة
12. استخدم نوع الإدخال الصحيح للوظيفة
13. قم بمحاذاة الزر إلى الحافة اليسرى من المدخلات
14. قم بتسمية الزر بما يفعله بالضبط
15. تأكد من أن النموذج الخاص بك ضروري بالفعل
16. تجنب وضع شكلين في صفحة واحدة
17. استخدم مدخلات متعددة كملاذ أخير
18. لا تستخدم أقنعة الإدخال

اليوم الثاني: التحقق من صحة النماذج وكتابة رسائل خطأ جيدة

1. لا تقم بتعطيل زر الإرسال
2. لا تسبب أخطاء عندما يجيب المستخدم
3. تحقق فقط من صحة عندما يرسل المستخدم
4. ضع الأخطاء فوق المدخلات
5. اغفر الأخطاء التافهة
6. تتبع أخطائك
7. أعط المستخدمين أخطاء واضحة وموجزة ومحددة

اليوم الثالث: إعادة تصميم تدفق حقيقي للخروج

1. قم بتأجيل الأسئلة التي يمكنك طرحها لاحقًا ^**
2. استخدم عناصر تحكم النموذج داخل النماذج
3. ابدأ بدون شريط تقدم ^*
4. ابدأ النمذجة بشيء واحد في كل صفحة ^**
5. اطرح الأسئلة بترتيب معقول
6. استخدم مربعات التحديد كملاذ أخير
7. استخدم الافتراضات المعقولة
8. قدم المساعدة في سياق السؤال
9. تجنب الحقول الاختيارية قدر الإمكان
10. لا تخفي زر الإرسال
11. اجعل عرض الحقل يطابق القيمة المتوقعة
12. دع المستخدمين يتحققون من إجاباتهم
13. ضع الرابط الخلفي في الجزء العلوي الأيسر من النموذج
14. تكوين صداقات مع الإدارات الأخرى

اليوم الرابع: استخدام الاختزال وتصميم أشكال طويلة ومعقدة

1. قسّم الأشكال الضخمة إلى مهام صغيرة
2. أخبر المستخدمين بما يحتاجون إليه قبل أن يبدؤوا
3. مساعدة المستخدمين على التحقق من أهليتهم

^* هذا المبدأ مأخوذ من دليل خدمة GOV.UK
^** هذا المبدأ مأخوذ من دليل خدمة NHS.

شكرا مرة أخرى لكل من جاء على كل مساهماتهم. أنا أتطلع إلى المرحلة التالية.

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

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