Wizard - Optional Finish Button Location Guidance

[lboehling]

When creating a connector in Debezium, only the first two steps in the wizard are required for users to complete a configuration. The last three steps are optional, so there is a requirement to have a "finish" button shown on the 2nd-4th steps of the wizard so users can complete the configuration without having to click through any additional optional steps. We're hoping to get guidance on where to place this finish button on the earlier steps.

The current implementation displays the next/back/cancel buttons in their usual placement, but also shows the "Finish" button separated with a divider line to the right.

CC: @amysueg @jgiardino @tiffanynolan

[mcarrano]

@lboehling Thanks for filing this. I think it's something we should have guidance on. Do you know if this is using the PatternFly Wizard component? If so, need to investigate if those buttons can be customized without a code update.

What's the timeframe within which you need this?

[lboehling]

Spoke with @mcarrano today. We think that it makes the most sense to place the "Finish" button close to the next button, and make it a secondary button so there are not two conflicting primaries. This button order/styling in combination with grouping all of the optional steps in the wizard should make it clear that the latter steps are optional and users can choose to finish the wizard on an early step.

[tiffanynolan]

I think this is a good alternative, but I'm not sure how intuitive this is at first glance. As someone new to the UI, I would (do) not understand the difference between Next and Finish unless I actually clicked them. I know we're trying to keep the actions simple, but in this case, what if we were more explicit and had something that mentioned going to the final review step instead? The "Finish" term is throwing me off a bit by itself. I'm also not sure about it even being a secondary button as it does break what users see as the normal pattern of Next and Back.

[lboehling]

Hi @mcarrano and @tiffanynolan I've updated the designs for this issue: https://marvelapp.com/prototype/62dig4j/screen/78180859.

In order to not break the existing next/back pattern, I styled the optional finish button as a tertiary button and placed it in between the next/back buttons and the cancel button. I also changed the finish button to read as "Review and finish"--clicking this button would jump users ahead to the final review step. Finally, I've added an option to include an inline alert below the wizard buttons to help explain the new finish action/give more context to the user.

Let me know what you think!

[mcarrano]

I like the use of the tertiary button @lboehling . The only thing I'm wondering about is the placement of the alert. These Inline alerts were really designed to go at the top of a page, however I do see the desire to associate this more with the buttons. I wonder if there could be a lighter weight solution similar to what's displayed above the checkboxes in this form example: https://www.patternfly.org/v4/components/form/design-guidelines#validation-on-submission

@mceledonia perhaps you could also take a look.

[tiffanynolan]

@lboehling I really like the new location and text on the button. Much easier to understand. I agree with @mcarrano about the location of the alert. I would expect to see it above the buttons and not below at the very least. Perhaps a new style is needed here but I do think the inline alert would be an acceptable solution.

[mcarrano]

@lboehling I reviewed your designs during the PF design share meeting today. Use of tertiary Review and finish button makes sense. There were questions about whether we even need the alert. Feedback was that this seemed "heavy handed." Maybe this is not needed as part of this pattern? A consumer could always decide to add an alert. Placement might be more dependent on the content of the wizard page. Maybe we would also consider just placing this message in a tooltip? Thoughts?

[lboehling]

Thank you @mcarrano! I like the idea of placing the message in a tooltip. I've updated the mocks accordingly. https://marvelapp.com/prototype/62dig4j/screen/78180859

[mcarrano]

@mcoker @tlabaj can you review the above design proposal and let me know if there's value to adding this as a new Wizard demo? I'm OK to just have this approach documented as a standard design pattern if it's easy for a consumer to add custom buttons to the wizard footer or we could create a demo to show this if you think it would be useful.