4

In a form to insert products/services (in wich products will have extra data for products that are composed by a mix of quantities of other product(s)) is it better to have a large form with all the fields there and showing the extra fields when "it's a composed product" is selected running the risk of a lot of fields being overwhelming for the user but having everything you need right in front of you and just fill it in. Or dividing this form in steps and follow a different route in case you choose 'Product' (to select if it's composed or not) and then again a different route if the Product is Select as a composed one.

My inclination is for the latest approach but then I think it might take a lot of steps.

what would happen when creating a Service:

Description and Reference->Is it a produtct or a service?->Brand->Service Family->Service Type->Stamp duty and VAT->Want to had a image?->Any extra observations?

when creating a composed product:

Description and Reference->Is it a produtct or a service?->Is it composed?->Add the products and quantities that compose it -> Brand->Product Family->Product Type->Stamp duty and VAT->Want to had a image?->Any extra observations?

EDIT

also my problem with giving feedback, in the steps/wizard approach, is the fact that there will be a different number of steps according to choices made during the process

EDIT2

Ok i've been trying to figure it out and think I might have a solution. If I aggregate a few actions in the same step is it a bad idea? (because the user performs up to 3 actions but the step is still the same)

Step 1: Description and Reference->

Step 2: Is it a produtct or a service?->Is it composed?->Add the products and quantities that compose it-> OR JUST Is it a produtct or a service?-> (in case of a service)

Step 3: Brand->

Step 4: Product Family->Product Type->

Step 5: Stamp duty and VAT->

Step 6: Want to had a image?->

Step 7: Any extra observations?

What are your thoughts on these?

Also Franchesca's latest suggestion is interesting but i don't really like the idea of changing the size of the steps along the way, it seems like it gives somewhat of an inconsistency feeling.

1
  • 2
    added my main problem when using the steps approach, wich is not addressed on the answers to that question
    – FabioG
    Apr 29, 2014 at 14:50

2 Answers 2

2

I would definitely break it up into steps to avoid the pain of a giant form.

Lots of steps are fine, but the user needs to have feedback on their progress through the wizard. The nicest way I have seen this done is with a form progress bar, something like this:

enter image description here

or this:

enter image description here

It might also be nice to add encouraging text like "half way there", or "almost done", for that personal touch, unless you are going for a really formal / corporate feel.

EDIT:

To handle the unknown steps, it might be nice to define a fixed width progress bar outline, and only fill in the future steps whenever the user has made selections determining the path. Otherwise leave the space blank. Change the step size to fill / fit into the left over space. A rough idea might look something like this:

enter image description here

3
  • my problem with giving feedback is the fact that there will be a different number of steps according to choices made during the process
    – FabioG
    Apr 29, 2014 at 14:48
  • @FabioG Good point, will edit my answer with a suggestion on this.
    – Franchesca
    Apr 29, 2014 at 15:01
  • +1 for the interesting idea but i don't really like the idea of changing the size of the steps along the way, it seems like it gives somewhat of an inconsistency feeling
    – FabioG
    Apr 29, 2014 at 16:24
1

We ran into this problem when we were designing a "wizard-flow" for allowing a sales rep at a cell phone store to activate (setup) a new phone for a customer. Depending on the type of phone the customer purchased and whether they're brand new to the carrier or an existing customer, the steps and options varies significantly.

What we ended up doing is to have a double progress bar, kind of like a main nav and a sub section nav immediately below. The one on top keeps track of the major sections you need to go through, and the one below breaks out the items within the current section you're on. The substeps may vary depending on what options you choose, but the major sections should stay more or less consistent. So it doesn't seem like you are suddenly ballooning out more steps halfway in the process.

So for your example consider the major sections like... Description and Reference -> Product or Service Details -> Duty, Tax -> Image Attachement -> Additional Comments

Not sure if you need to show the substeps under Product/Service if it can easily be fit on a single page. I would consider asking the user whether it's a product or service at the very bottom of Description and Reference as two buttons: This is a "Product" "Service". You may want to update the label of step two to be specific product type. Then there's no need to expand/collapse more fields.

Yes this does make more work for the devs to do because it's over multiple pages... but if your form is complex, it's worth the extra work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.