اتقن عملية تصميم UX الخاصة بك - دليل لتصميم النموذج الأولي

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

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

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

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

تصميم النموذج الأولي - ما الغرض من النماذج الأولية

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

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

في حين أن هناك الكثير من الآليات للجوانب المختلفة لتصميم النموذج الأولي (مثل إنشاء الرسومات) ، فمن السهل تفويت الأشياء وارتكاب الأخطاء.

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

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

تيم براون ، الرئيس التنفيذي ورئيس IDEO

طريقة بسيطة للتفكير في النماذج الأولية هي كآلية لإثبات الوظيفة.

هذا التفسير العملي لكيفية عمل شيء ما له عدد من الفوائد عالية القيمة ، بما في ذلك:

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

كيف تبدأ عملية النمذجة

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

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

1. ما هي أهداف المشروع؟

ابدأ بالصورة الكبيرة. هل المنتج يحل حاجة حقيقية؟ كيف تحل هذه الحاجة؟ يعد فهم فائدة المنتج أمرًا بالغ الأهمية لتقديم أي نوع من الحلول القابلة للتطبيق.

2. ما هي المنتجات التنافسية التي يستخدمها الأشخاص حاليًا؟

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

3. من هو الجمهور؟ ما هي أهدافهم؟

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

4. ما هو نوع المنتج ، ولأي (الجهاز) يستخدم؟

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

5. هل هناك سوابق مرئية يجب اتباعها؟

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

6. ما هي المخرجات؟

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

ارسم النماذج الأولية الخاصة بك

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

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

01 | تدفقات المستخدم - اتبع تحديد تدفقات المستخدم. شاهد كيف يحقق المستخدمون أهدافهم وكيف يتفاعلون داخل النظام.

02 | كيانات المعلومات - سيُظهر كل تدفق مستخدم بعض مدخلات ومخرجات المستخدم. حدد ما هي ، وكيف ترتبط بسلوك المستخدم وتوقعاته ، وما هي التفاعلات التي يشاركون فيها ، وكيف يعملون.

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

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

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

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

الانتقال إلى النماذج الرقمية (النماذج الأولية منخفضة إلى عالية الدقة)

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

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

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

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

من السهل أيضًا اختبار النماذج الأولية الرقمية نظرًا لأنها ليست سهلة القراءة فحسب ، بل إنها أيضًا أسرع في التكاثر والتكرار بشكل جماعي. هذا هو المكان الذي تكون فيه أدوات النماذج الأولية لـ UX مثل InVision و Proto.io مفيدة جدًا لإنشاء نماذج أولية قابلة للنقر. عندما يكون قابلاً للنقر ، يصبح من السهل اختبار قابلية استخدام الجوانب المختلفة ، من الأزرار الفردية إلى التدفقات بالكامل.

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

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

تعتبر النماذج الأولية التفاعلية رائعة لاختبار الرسوم المتحركة وعمليات المستخدم داخل التطبيق والوظائف عالية المستوى التي لا يمكن اختبارها أحيانًا بدون إجراء وظيفي.

النموذج الأولي مع الغرض

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

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

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

• • •

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

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية