Opened 2 months ago
Last modified 2 months ago
#63008 new defect (bug)
Be consistent with button style, size, and placement during installation
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | Upgrade/Install | Keywords: | needs-design-feedback has-patch has-screenshots needs-testing |
Focuses: | Cc: |
Description
When installing WordPress from scratch, there is considerable inconsistency with the style, size, and placement of the primary action button on each screen as you're guided through setup, installation, and login.
- Language chooser: Primary, large, right-aligned, with custom font size
- Welcome message: Secondary, left-aligned
- Database connection: Secondary, left-aligned
- All right, sparky: Secondary, large, left-aligned
- Installation: Secondary, large, left-aligned
- Success: Plain text link, left-aligned
- Login: Primary, large, right-aligned
Granted not many people go through the full setup flow thanks to the prevalence of one-click installers, but let's give this some love anyway to improve first impressions.
I propose that every button shown during setup and installation that takes you to the next step is styled the same as the login button, which is a primary, large, right-aligned button.
Attachments (2)
Change History (9)
This ticket was mentioned in PR #8394 on WordPress/wordpress-develop by @johnbillion.
2 months ago
#1
- Keywords has-patch added; needs-patch removed
#5
@
2 months ago
Is the "Try Again" button supposed to be right-aligned?
I also notice that the capitalization on the buttons seems inconsistent too - sometimes all words have uppercase first letter, sometimes not. (Though maybe it's best to just ignore that for now since I'm not sure WordPress has any clear guidelines on how buttons should be capitalized.)
#6
@
2 months ago
I also think it's very important to distinguish between links and buttons
I tagged you in the PR because I thought there could be a concern there. As can be seen from the PR, there is a mixture of buttons and links that take a user from one step to another in the setup and installation process. Only the final link, which takes the user to the Login screen, is actually styled as a link, all the others are styled as buttons. What is the effect of also styling the final link as a button? Is there an accessibility concern?
Is the "Try Again" button supposed to be right-aligned?
It acts as a "back" button so I thought it would be beneficial to leave it left-aligned. Happy to defer to those with more design and UX experience than me.
I also notice that the capitalization on the buttons seems inconsistent too
I think that can be addressed in a separate ticket. Definitely seems to be some inconsistency in this regard.
#7
@
2 months ago
Regarding that final link on the "Success!" screen that takes the user to the login screen, another option would be to remove that screen entirely, redirect the user straight to wp-login.php, and display the "WordPress has been installed..." message at the top.
Many years ago in #34084 we attempted to log users in straight away after installation but that surfaced some problems on Multisite. Perhaps that could be revisited too.
While I generally agree with a need for consistency, I also think it's very important to distinguish between links and buttons. While their behavior may be similar in these contexts, I strongly feel that using the same design for both blurs the distinction in an undesirable way.
Can we explore related designs that can still clearly distinguish between different types of controls?