7 أمثلة ممتازة لنموذج متعدد الخطوات لإلهامك

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

الوقت التقريبي للقراءة: 7 دقائق

لا أحد يحب ملء النماذج الطويلة. حتى نحن ونحن في شكل عمل.

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

لذا، باعتبارنا منشئي المواقع، كيف يمكننا أن نجعل ملء النماذج أقل صعوبة مع الاستمرار في جمع المعلومات التي نحتاجها؟

الجواب هو تصميم نموذج متعدد الخطوات!

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

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

متى تستخدم النماذج متعددة الخطوات (ومتى لا تستخدمها)

هناك الكثير من المواقف المناسبة لاستخدام النموذج متعدد الخطوات، بما في ذلك:

• تطبيقات وظيفة
• الاختبارات أو الامتحانات عبر الإنترنت
• نماذج التسجيل والانتساب
• مسابقات ومغناطيس الرصاص
• معالجات الإعداد
• طلبات عرض الأسعار

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

ولكن هل يجب عليك ذلك؟

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

من المحتمل ألا تستخدم نموذجًا متعدد الخطوات إذا كان النموذج قصيرًا جدًا ويحتوي على عدد قليل من الحقول فقط .

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

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

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

لقد استخدموا بعض عناصر تصميم UX الذكية لجعل النموذج يبدو أقصر، والحد من عوامل التشتيت - وتقليل التخلي عن عربة التسوق.

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

أنت تعرف مستخدميك أفضل من أي شخص آخر. لا تخف من البحث في الإحصائيات وتحليل نتائج الاستطلاع الخاص بك لمعرفة ما هو الأفضل بالنسبة لهم!

أفضل الأمثلة على النماذج متعددة الخطوات

1. Airbnb - نموذج تسجيل المستخدم

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

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

هذا السطر الصغير يزيل الكثير من الضغط عن المستخدمين لأول مرة.

لماذا نحبها:

• تصميم نموذج متعدد الخطوات سهل الاستخدام وسريع الاستجابة
• سهولة التنقل مع زر الرجوع وخيار التخطي
• مؤشر التقدم
• نسخة ذكية وفعالة

2. N26 - إنشاء حساب مصرفي

يحافظ N26 على شكله الأساسي دون الشعور بالبرد. أليس من اللطيف أن يستثمر البنك القليل من الوقت والطاقة في إسعاد عملائه؟

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

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

لماذا نحبها:

• مؤشر التقدم
• مسح قائمة الخطوات
• سهولة التصفح
• خيار الوضع الفاتح / الوضع المظلم
• المنطق الشرطي للخيارات بناءً على بلد الإقامة

3. Ubersuggest - مغناطيس الرصاص

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

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

لماذا نحبها:

• تصميم نظيف وبسيط
• مؤشرات التقدم
• مسح خيارات النموذج
• سؤال واحد في كل مرة، صيغة المحادثة
• الوجه الودي والتفسيرات

4. Stripe - تسجيل الحساب وتأهيل المستخدم

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

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

لماذا نحبها:

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

5. العادي - اختبار المنتج

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

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

لو كانت كل تجارب التسوق بهذه السهولة والمتعة!

لماذا نحبها:

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

6. جوازات السفر الصغيرة - اختبار المنتج والخروج

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

لماذا نحبها:

• إضفاء الطابع الشخصي
• المنطق الشرطي
• مؤشر التقدم
• تصميم ممتع وملون

7. Geico - طلب عرض أسعار

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

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

لماذا نحبها:

• أزرار اختيار كبيرة مع صور لسهولة الوصول إليها
• الرسم المتجاوب
• منتج أو خدمة شخصية
• خيارات المنتج قبل طلب المعلومات الشخصية

مفاتيح التصميم الجيد للنموذج متعدد الخطوات

إذن، ماذا يمكننا أن نتعلم من هذه الأمثلة؟

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

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

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

هل أنت مستعد لإنشاء نماذج متعددة الخطوات خاصة بك؟

الآن بعد أن أصبحت مليئًا بالمعرفة والإلهام، حان وقت العمل! ولكن كيف يمكنك تحويل هذا النموذج الرائع متعدد الخطوات الذي تفكر فيه إلى حقيقة؟

يمكنك اختيار البرنامج المساعد لدينا، بطبيعة الحال!

قد نكون متحيزين بعض الشيء، لكن Formidable Forms هي حقًا أفضل أداة إنشاء نماذج متعددة الخطوات لـ WordPress. يتيح لك إضافة وتخصيص أشرطة التقدم وأزرار النماذج وأكثر من 30 نوعًا من حقول النماذج.

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

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

ابدأ بالنماذج الهائلة!

جرّب Formidable Pro بدون مخاطر مع ضمان استعادة الأموال لمدة 14 يومًا، أو ابدأ باستخدام المكون الإضافي المجاني لإنشاء النماذج.

لمزيد من المتعة بالنموذج عبر الإنترنت، تابعنا على Facebook وTwitter وYouTube. حتى المرة القادمة!

تعرف على المزيد حول تصميم النموذج متعدد الخطوات

• 9 أفضل ملحقات WordPress للنموذج متعدد الخطوات
  اقرأ أكثر

  كيفية إنشاء نموذج Ajax متعدد الخطوات في WordPress
  اقرأ أكثر

  كيفية إنشاء نموذج متعدد الخطوات مع أشرطة التقدم
  اقرأ أكثر