كيفية تصميم نموذج متعدد الخطوات في مشروط؟

لقد صممت تطبيقًا مصغّرًا لتطبيق ويب لتعيين الخرائط يأخذ تنسيقًا بتنسيق .csv كمدخل وله خياران للخرج:

enter image description here

منطق الأعمال:

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

لكن الآن طُلب مني إضافة مخرج جديد:

enter image description here

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

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

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

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

أبحث عن حلول/أفكار حول كيفية تصميم تدفق الأشياء بشكل أفضل هنا.

0

5 إجابة

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

لا تجعل هذا الزر "إرسال" آخر. بدلاً من ذلك ، يمكنك إضافته كخيار آخر - على سبيل المثال ، مربع اختيار (حدد هنا للتحميل إلى URL) أو حدد زر اختيار لاسلكي مع جميع الخيارات الثلاثة وزر إرسال عادي في الجزء السفلي بدلاً من 3 خيارات. ثم إذا قام المستخدم بتحديد/التحقق من التحميل إلى URL ، فسيتم فتح بقية الحقول. يمكنك أيضًا عرض الحقول في كل وقت ولكن مع ظهورها باللون الرمادي/تعطيلها ما لم/إلى أن يتم تحديد/تحديد التحميل إلى عنوان URL.

5
وأضاف

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

1
وأضاف

قد يكون من المفيد إضافة "..." إلى نهاية نص الزر (أي "تحميل إلى URL ...") للإشارة إلى أن هناك حاجة إلى مزيد من المعلومات.

0
وأضاف

You can split that in two steps/layers. Instead of classic modal I would use move from left animation and Overlay...
Then for second step I suggest place additional layer on top.
Close icon on first layer closes the "modal"/overlay. Back icon on second layer reverts to first layer.
enter image description hereenter image description here

0
وأضاف

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

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

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

0
وأضاف