2

What is/are the best UI practices for a process that has 2+ stages or optional segments? And how does the amount of stages, and the popularity or likely use affect the layout?

For example, if I want to give the user the power to run:

1) Stage 1 - gather necessary data
2) Stage 2 - gather optional data
3) Stage 1 & 2 (in that order)

What would be an informative and non-clunky way to display these choices?


* EDIT *
Currently I have:
Current buttons layout

Improve this question
1
  • Personally what I've seen more often than not is data gathering by the flow of information structure, rather than optional and necessary. For example a form will ask for a name (req), address (req), home phone (req), mobile phone (optional), credit card number (req), email (optional). It makes sense to put the mobile phone field right after the home phone, rather than all the way at the end of the process or on a separate step all together. Usually people want to still encourage users to fill out optional fields so placing it among the required fields accomplishes that.
    – Anindya Basu
    Commented Apr 30, 2014 at 16:12

3 Answers 3

Reset to default
1

For this case, I will suggest you:

  1. Use for all three possible functions the same user interface element: Buttons.
  2. Reorder your functions. On the top provide two buttons. Stage 1 and Stage 2
  3. The sum of width of the two buttons defines the third button on the bottom for the accumulated functions

The result can look like:

[Stage 1] [Stage 2]
[Stage 1 & Stage 2]

Improve this answer
0

Personally I think this problem could be easily solved. At the start of your process have a dialog box that asks if they are ready to run the process, something with a Next and Cancel button. Then have a check box with an optional field that asks if they would want to gather the optional data, this enables them to control how the rest of the process will go. The positive to this is that the user gets all of their decisions out of the way early and the rest of the process can occur without further prompts. They can simply hit the next button after making the decision and not worry anymore about the process. Just an idea, hope this helps.

Improve this answer
1
  • I do have the optional checkbox (see original post) but it's complicated by the fact that sometimes the user needs to (re-)run only the optional part.
    – and or maybe
    Commented May 5, 2014 at 14:47
0

I think both Foundation and the Bootstrap framework provides UI components to build button bars/groups and split buttons that will provide a richer (or complex) button behaviour. You can see some examples for Button Groups in Foundation and Nesting Buttons in Bootstrap and how they can be tailored to suit your specific needs. Basically they provide a more flexible way to visually manipulate button styles and structures that are more suggestive of a certain type of workflow.

Improve this answer
1
  • Love the nested buttons idea but this is in VB6 so I sadly cannot do anything that nice.
    – and or maybe
    Commented May 5, 2014 at 14:53

Your Answer

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

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