Across the WordPress ecosystem, the wizard UI is widely used in plugins, particularly for onboarding, setup, and feature guidance. Currently, there’s no standardized approach to wizard implementations, leading to inconsistencies in user experience and requiring developers to build unique solutions for similar needs. This proposal suggests creating a shared Wizard UI pattern as a variant of the existing Page component, incorporating elements of DataForm and DataViews for an adaptable and cohesive interface.
Problem to solve
Many plugins incorporate wizard UIs, but their implementations differ significantly, which can lead to:
Varied navigation patterns (e.g., different locations for "Next" and "Back" buttons).
Inconsistent styling and layouts, which may interrupt the user's flow as they switch between plugins.
Repetitive code for common flows, which adds maintenance overhead and makes it harder to achieve a polished, accessible UI across plugins.
Proposed solution
A shared Wizard UI pattern would streamline the user experience and improve developer efficiency. Building on the Page component, this variant could:
Define consistent button placement and section headers to create predictable flows across all of wp-admin, no matter if the screen is part of WordPress or a plugin.
Integrate components from Page, DataForm, and DataViews into a single reusable pattern.
A standardized pattern would facilitate accessibility improvements and ensure mobile-friendly design.
The attached designs illustrate a potential flow and layout for this pattern. It's based on some use cases I've observed across WordPress, WooCommerce, and several other plugins I interacted with over the years, but it certainly doesn't satisfy all possible needs.
What do you think is missing? How do you currently use the wizard UI in your plugin that you think could be useful to others? Please share your ideas, sketches, and designs!
Across the WordPress ecosystem, the wizard UI is widely used in plugins, particularly for onboarding, setup, and feature guidance. Currently, there’s no standardized approach to wizard implementations, leading to inconsistencies in user experience and requiring developers to build unique solutions for similar needs. This proposal suggests creating a shared Wizard UI pattern as a variant of the existing Page component, incorporating elements of DataForm and DataViews for an adaptable and cohesive interface.
Problem to solve Many plugins incorporate wizard UIs, but their implementations differ significantly, which can lead to:
Proposed solution A shared Wizard UI pattern would streamline the user experience and improve developer efficiency. Building on the Page component, this variant could:
The attached designs illustrate a potential flow and layout for this pattern. It's based on some use cases I've observed across WordPress, WooCommerce, and several other plugins I interacted with over the years, but it certainly doesn't satisfy all possible needs.
What do you think is missing? How do you currently use the wizard UI in your plugin that you think could be useful to others? Please share your ideas, sketches, and designs!