Make WordPress Core

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: johnbillion's profile johnbillion 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.

  1. Language chooser: Primary, large, right-aligned, with custom font size
  2. Welcome message: Secondary, left-aligned
  3. Database connection: Secondary, left-aligned
  4. All right, sparky: Secondary, large, left-aligned
  5. Installation: Secondary, large, left-aligned
  6. Success: Plain text link, left-aligned
  7. 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)

before.png (1.1 MB) - added by johnbillion 2 months ago.
after.png (1.1 MB) - added by johnbillion 2 months ago.

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

@johnbillion
2 months ago

@johnbillion
2 months ago

#2 @johnbillion
2 months ago

  • Keywords has-screenshots added; needs-screenshots removed

#3 @johnbillion
2 months ago

  • Keywords needs-testing added

#4 @joedolson
2 months ago

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?

#5 @siliconforks
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 @johnbillion
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 @johnbillion
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.

Note: See TracTickets for help on using tickets.