الأداة المناسبة للوظيفة: اختيار أفضل برامج النماذج الأولية لمشروعك
نشرت: 2022-03-10أصبحت أدوات النماذج الأولية موردًا مهمًا لنا كمصممي - مما يسمح لنا بتوثيق حالات متعددة لشاشة واحدة ، بما في ذلك الرسوم المتحركة والانتقالات والتفاعلات الدقيقة التي يصعب تمثيلها في التوثيق الثابت.
بدأت الشركات التي تهتم بهذا الاتجاه في بناء أدوات النماذج الأولية لتلبية هذه الحاجة ؛ واليوم نشهد ظهور عدد كبير من الأدوات بشكل منتظم. لكن أيهما تختار؟ والأهم من ذلك ، ما هي الأسئلة التي يجب أن تطرحها على نفسك وفريقك للتأكد من اختيار السؤال الصحيح؟
مزيد من القراءة على SmashingMag:
- 12 عاملاً في اختيار أداة النماذج الأولية للجوال
- دليل المشككين للنماذج الأولية منخفضة الدقة
- استخدام سكتش لتصميم الويب سريع الاستجابة
- الحصول على سير عمل الرسم بشكل صحيح: كتيب الرسم
"ما الأداة التي يجب أن أستخدمها؟" أصبح أحد الأسئلة الأكثر شيوعًا في المنتديات عبر الإنترنت ولقاءات التصميم والمدونات. لقد تحول إلى نقاش عاطفي - ويميل المصممون إلى المجادلة بسرعة حول أداة أو تطبيق معين.
الحقيقة أنه لا يوجد حل واحد يناسب الجميع . المزيد والمزيد ، يحتاج المصممون إلى مجموعة من الأدوات تحت تصرفهم ، لفهم إيجابيات وسلبيات كل منها ، وللتمكن من اتخاذ قرار سريع بشأن سير العمل الأكثر ملاءمة للسياق المحدد.

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

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

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

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

إذا كنت تحاول سرد قصة عن منتجك أو كيف سيختبرها المستخدمون ، فقد يكون وضع النماذج الأولية للتدفق أسلوبًا أفضل. في هذه الحالة ، تكون أدوات مثل InVision و Axure و Keynote قوية للغاية في زيادة الكفاءات وجعل النموذج الأولي يشعر بأنه متصل بالقصة التي تحاول سردها.
إذا كنت تحاول تمثيل تفاعل فريد ومتعمق وتريد استخدام النموذج الأولي كطريقة ملموسة لشرح سلوكه لأصحاب المصلحة وأعضاء الفريق ، فقد ترغب في التركيز على مجموعة مختلفة من الأدوات. يتصدر Framer و Principle و Pixate و Origami تلك القائمة.
الاعتبارات:
- القدرة على محاكاة التدفق
- مستوى الإخلاص والتفاعل الذي تسمح به الأداة
- الأجهزة المدعومة
الإخلاص: تحديد سير العمل والتلميع البصري
الأسئلة الشائعة:
- هل تخطط لاستخدام الإطارات الشبكية أو النماذج المرئية كنقطة انطلاق؟
- هل ما زالت الشاشات بحاجة إلى التصميم؟
- هو نفس الشخص المسؤول عن التصميم والنماذج الأولية؟
- هل سيحتاج فريقك إلى تسليم النموذج الأولي إلى فريق آخر في وقت ما؟
- ما هو الشكل والمظهر المتوقعان للنموذج الأولي النهائي؟
تسمح لك بعض أدوات النماذج الأولية بالتصميم والبناء في نفس الوقت ، بينما يركز البعض الآخر بشكل أكبر على استيراد الأصول الموجودة - مثل الإطارات الشبكية أو اللوحات المرئية - إلى اللوحة القماشية.
خذ بعض الوقت للتحدث خلال عملية التصميم المتوقعة مع فريقك. في بعض الحالات ، يجب بناء النموذج الأولي بناءً على الأصول الموجودة (على سبيل المثال ، ربما يكون الفريق قد سخر بالفعل من التراكيب المرئية لواجهة المستخدم) - وكل ما يحتاج المصمم فعله هو ربط النماذج بالأحجام الطبيعية معًا في تدفق متماسك أو السرد. هناك العديد من الأدوات التي تركز بشكل أكبر على ربط الشاشات ومحاكاة التفاعلات أثناء مرور المستخدم عبر التدفق. إن InVision و Keynote مثالان جيدان على ذلك.
في حالات أخرى ، سيحتاج عضو الفريق نفسه إلى تصميم واجهة المستخدم وبناء النموذج الأولي في نفس الوقت . ستسمح القدرة على تكرار هذين الجانبين من التصميم في نفس الوقت بمزيد من التحسينات والتفاعلية في نهاية مرحلة النماذج الأولية. إذا كانت هذه هي الحالة ، فابحث عن أداة تتجاوز مجرد الارتباط وتتيح لك تصميم واجهة المستخدم أيضًا.
أيضًا ، ضع في اعتبارك مستوى الصقل البصري المطلوب. قد تجعل أداة مثل Axure أو UXPin الشكل والمظهر القابل للتسليم كإطار سلكي ، بينما يسمح البعض الآخر بمنتج نهائي مصقول بصريًا أكثر دقة. تختار بعض فرق التصميم إقران الأدوات التي تعمل معًا بسلاسة لتحقيق نفس النتيجة (على سبيل المثال ، Sketch للتصميم و InVision للنماذج الأولية). تأكد من أن الأدوات التي تختارها توفر تكاملاً تلقائيًا ، لتوفير الوقت والجهد المبذول في كل مرة يحتاج فيها النموذج الأولي إلى التحديث.
الاعتبارات:
- ميزات التعاون (المشاركة والمشاركة المباشرة والتعليق وردود الفعل)
- التكامل مع البرامج الأخرى في سير عملك (مثل Photoshop و Sketch)
- مستوى الدقة المطلوب (إطار سلكي مقابل تصميم مثالي للبكسل)
الموارد: تحديد مجموعة المهارات المطلوبة
الأسئلة الشائعة:
- من الذي سيقوم بإنشاء النموذج الأولي؟
- ما هي مهارات البرمجيات لدى الشخص ، وما مدى سرعة عملها؟
- إذا كانوا لا يعرفون كيفية استخدام أداة معينة ، فما مدى سرعة تعلمهم؟ هل هم على استعداد للقيام بذلك؟
- كم عدد المصممين الذين سيتعاونون في النموذج الأولي؟
ستوفر الاستفادة من مهارات برامج فريقك الكثير من الوقت - ولكن تأكد من أن هذا لا يعيق مؤسستك من اختبار أدوات جديدة ودمجها في عملية التصميم. أصبحت أدوات النماذج الأولية سهلة التعلم والتشغيل بشكل متزايد ؛ يمكن أن يهتم المصممون بدرجة أقل بمنحنى التعلم وأكثر من ذلك بما إذا كانت الأداة مناسبة للوظيفة أم لا.
حدد مع فريقك الأدوات التي يعرفون بالفعل كيفية استخدامها ، وقم بإجراء بعض الأبحاث عبر الإنترنت لمعرفة الأدوات التي يسهل تعلمها. شجع فريقك على التعلم واللعب بأكبر عدد ممكن من أدوات النماذج الأولية - سيكون تنوع الخيارات والمرونة في مجموعة مهارات فريقك في متناول اليد عندما يتعين عليك اختيار أفضل أداة لمشروعك التالي.
الاعتبارات:
- منحنى التعلم
- سهولة الاستعمال
- سرعة
السياق: تحديد الجمهور والاستخدام
الأسئلة الشائعة:
- من هو جمهور النموذج الأولي الخاص بك؟ من الذي يجب أن يكون قادرًا على التفاعل معها وإبداء الرأي؟
- في أي وسيط يحتاج النموذج الأولي إلى التصور؟ على أي جهاز؟ في أي سياق؟
- هل ستقوم بتوجيه الجمهور عبر النموذج الأولي أو ببساطة إرسال ارتباط بالبريد الإلكتروني؟ إذا كان الأمر الأول ، فهل سيتم إجراء الإرشادات بشكل شخصي ، هل سيتم إجراؤها عبر الإنترنت من خلال مشاركة الشاشة ، أم ستكون موجهة ذاتيًا؟
إذا كنت تقوم بتجميع نموذج أولي للهاتف المحمول وتنوي الجلوس بجانب أحد أصحاب المصلحة في اجتماع لشرح الفكرة ، فستحتاج إلى التوليفة الصحيحة من البرامج (أداة تسمح بنماذج أولية للجوال) والأجهزة (هاتف يفي بالمواصفات الخاصة بك). بيئة أكثر تحكمًا مثل هذه لا تتطلب تجسيد التدفق بالكامل - مما يوفر لك الوقت والجهد.
ولكن قد تكون المجموعة مختلفة تمامًا إذا كنت تخطط لاستخدام نفس النموذج الأولي لتشغيل اختبارات قابلية الاستخدام غير المتزامنة عن بُعد مع مستخدمين في جميع أنحاء البلاد ليس لديهم أي فكرة عن شكل المنتج أو شكله. في هذه الحالة ، قد تحتاج إلى نموذج أولي أكثر وظيفية ومقاوم للرصاص يسمح بتجربة ذاتية التوجيه.
الاعتبارات:
- الأجهزة المدعومة
- تجربة النقر إلى الظهور ذاتية التوجيه
- سهولة مشاركة الملاحظات والتقاطها
ستساعدك الإجابة عن الأسئلة أعلاه على فهم سياق الاستخدام وتحديد بعض المتطلبات الأساسية للنموذج الأولي. ارسم قائمة ، وتأكد من تضمين المتطلبات لجميع المجموعات الأربع المحددة أعلاه: النطاق ، والإخلاص ، والموارد ، والسياق . الشيء التالي الذي تريد القيام به هو التحقق مما إذا كانت الأدوات التي تفكر فيها توفر الوظائف التي تحتاجها.

4. تقييم الأدوات
يتم إصدار تطبيقات جديدة كل شهر ، يعد كل منها بحل جميع المشكلات التي لم تستطع التطبيقات السابقة القيام بها. الحقيقة هي أنك عندما تعمل في هذه الصناعة لأكثر من 10 سنوات ، تتكرر هذه القصة وتبدأ في رؤية النمط في هذه الإعلانات.
بمجرد الانتهاء من القائمة الأولية للأسئلة مع فريقك ، حان الوقت للنظر في الأدوات المحتملة. بمجرد الإجابة على الأسئلة الواردة في الخطوة 3 ، ستتمكن من التخلص سريعًا من بعض الخيارات والتوصل إلى قائمة مختصرة لتحليل أكثر دقة.
لكل أداة في قائمتك المختصرة ، قم بتقييم ما يلي:
- المنصة والقنوات . هل تقوم بعمل نموذج أولي لموقع ويب أو تطبيق؟ هل هي تجربة سطح مكتب أم جوال؟ هل تحتاج إلى واجهة سريعة الاستجابة ، وكيف ستتصرف عبر أحجام الشاشات؟ ستمنحك بعض الأدوات مزيدًا من المرونة في تقديم تجربة عبر القنوات ، بينما يكون البعض الآخر أكثر تركيزًا.
- الولاء . ما هو مستوى التلميع الذي تسمح به الأداة؟ هل تتيح لك الأداة إنشاء نماذج أولية سريعة وغير مصقولة تستند إلى إطار سلكي؟ هل يمكنك استيراد نماذج بالأحجام الطبيعية المرئية وتحريكها؟
- المشاركة والتعاون . هل توفر الأداة مستوى التعاون الذي تحتاجه؟ هل يتكامل بسلاسة مع أدوات التصميم والاتصال الأخرى التي يستخدمها فريقك؟ هل أنت قادر على مشاركة العمل الجاري على الإنترنت بسهولة؟
- منحنى التعلم . هل يعرف أحد أعضاء فريقك كيفية تشغيل الأداة؟ إلى أي مدى يجب أن يكونوا بارعين في إنشاء النموذج الأولي الذي تحتاجه؟ ما مدى سهولة الأداة؟ هل المعرفة البرمجية أو الترميز مطلوب؟
- السعر . هل تمتلك ترخيصًا للبرنامج؟ كم أنت على استعداد للدفع؟ إذا تم بيع الأداة في خطط متدرجة ، فما هو المناسب لمشروعك؟
5. دعونا نفعل هذا!
في هذه المرحلة ، ربما تكون قد قلصت الخيارات إلى خيار واحد أو اثنين. الخطوة التالية هي إعادة التجمع مع فريقك واتخاذ قرار نهائي وبدء العمل. عادةً ما تستند المكالمة النهائية إلى الجدول الزمني والتكاليف ، ولكن إجراء العملية المذكورة هنا سيضمن مراعاة جميع المعايير.
ستؤدي المناقشة التي يدور حولها فريقك حول أفضل أداة للنماذج الأولية إلى مواءمتك في الموضوعات التي تتجاوز الناتج نفسه - مثل سير العمل والعملية والأدوار والمسؤوليات.
أيضًا ، قم بإجراء تمرين سريع بعد الوفاة بعد المشروع. ناقش مع فريقك ما الذي نجح وما لم ينجح مع الأداة التي اخترتها. في مشروعك التالي ، ستتمكن بالتأكيد من تخطي خطوتين في عملية اختيار الأداة المناسبة.
لنضع حرف U مرة أخرى في UX
نصيحة أخيرة: لا تقع في فخ تعلم جميع أدوات النماذج الأولية الأحدث والأكثر فاعلية. ببساطة هناك الكثير من الخيارات. كن مدروسًا بشأن الأشخاص الذين تختارهم ، وكن ذكيًا بشأن كيفية استثمار وقتك في تعلم كيفية استخدامها.
في عصر يتم فيه تقييم المنتجات وفقًا لمدى قربها من تلبية احتياجات المستخدم ، قد يؤدي إنفاق الكثير من الوقت والطاقة على أداة النماذج الأولية نفسها إلى تشتيت انتباهك عما هو مهم حقًا في وظيفتك. بعد كل شيء ، فإن قضاء ساعات في صياغة وتلميع تفاعل معين سيكون عديم الفائدة إذا كانت الميزة التي تحاول إنشائها لا تحل حاجة مستخدم شرعية ومثبتة في البحث.
للحصول على قائمة شاملة بأدوات النماذج الأولية ، راجع قسم أدوات UX لتصميم UX.
بفضل Greg Siegal و Eugene Ahn و Caio Braga لمساهمتهم في هذه المقالة.