النماذج الأولية المتطورة - لماذا نستخدم Axure

"التصميم لا يقتصر فقط على الشكل والمظهر. التصميم هو كيف يعمل." - ستيف جوبز

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

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

ولتعقيد الأمور ، ظهر العديد من الوافدين الجدد على الساحة مؤخرًا. توجد أدوات متاحة عبر الإنترنت فقط ، على سبيل المثال ، Figma و InVision و UXPin و Framer و Marvel و Principle و Origami وبعضها عبارة عن برامج سطح مكتب تقليدية مثل Sketch و Adobe XD مع نماذج أولية مدمجة كامتداد لوظائفها. لديهم جميعًا إيجابيات وسلبيات وميزات وتكامل.

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

لماذا نستخدم Axure؟

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

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

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

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

أكبر عائق أمام تقديم منتجات وخدمات جيدة التصميم هو عدم فهم مستخدمينا. Jared Spool ، UIE (هندسة واجهة المستخدم)

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

أمثلة على نماذج المحاور الواقعية

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

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

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

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

مزايا وفوائد Axure

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

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

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

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

عندما تمكن مطورو الواجهة الأمامية من وضع أيديهم على النموذج الأولي ، فقد جعل حياتهم أسهل أيضًا. حتى مطورو الواجهة الخلفية قدّروا النموذج الأولي لأنهم تمكنوا من رؤية كيف كان من المفترض أن يعمل المنتج النهائي.

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

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

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

ميزات وقوة المحور

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

النماذج الأولية والمتقدمة

• عناصر واجهة مستخدم مدمجة للتخطيط الشبكي السريع والنماذج الأولية
• بيئة السحب والإفلات
• بناء نماذج أولية قائمة على المستعرض بدون تشفير
• بناء تفاعلات من أصول Sketch
• مضاهاة المحمول وعرض الجهاز المحمول
• حقول نموذج العمل تتيح إدخال المستخدم
• إضافة المنطق الشرطي والمتغيرات والتعبيرات
• العمل مع المحتوى الديناميكي ووجهات النظر التكيفية
• إضافة تأثيرات الحركة
• عرض النموذج الأولي دون اتصال
• مكتبات أدوات مخصصة
• تكامل Adobe XD والإضافات
• مشاركة النماذج الأولية على Axure Cloud التي يمكن عرضها في المستعرض

التأليف المشترك والتعاون

• يتيح كل من Axure RP و Axure Cloud لعدة أشخاص العمل في نفس المشروع في نفس الوقت.

الأصول المشتركة

• قم بإنشاء ومشاركة مكتبات من المكونات التفاعلية ، واستيراد الأصول من Sketch.

مطور Handoff

• انشر التصميمات من RP و Sketch إلى Axure Cloud للخطوط الحمراء التلقائية بالإضافة إلى CSS وتصدير الصور.

التوثيق والمواصفات

• إنشاء تدفقات العملية وتفكيك المنتج والمواصفات المرئية.

دراسة حالة مصغرة للنماذج الأولية لـ Axure

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

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

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

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

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

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

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

ملخص

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

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

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

• • •

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

• اتقن عملية تصميم UX الخاصة بك - دليل لتصميم النموذج الأولي
• أفضل 10 تسليمات لتجربة المستخدم يستخدمها كبار المصممين
• أساطير UX - النماذج الأولية واختبار المستخدم وتسليمات تجربة المستخدم
• برنامج تعليمي للمبرمجين: كيفية إنشاء نماذج أولية تفاعلية مذهلة
• أتقن حرفتك باستخدام أفضل أدوات تجربة المستخدم هذه