redesign 'Go Back' and 'Continue' buttons

[elioqoshi]

Currently the primary and secondary button are styled similarly. Is there any background why the primary button is not styled as such (green)? @jpnurmi

Considering that primary button is reserved for the one time Installation is started, could we see to distinguish Go Back and Continue with other kinds of buttons?

[jpnurmi]

I don't know the background but the pattern is that buttons that modify the system are highlighted. "Go Back" and "Continue" are basically just navigating.

[elioqoshi]

I'd still recommend we distinguish Go Back from Continuing. Can we use buttons without any outlines for Go Back maybe? What are the available button styles we have at our disposal again?

[elioqoshi]

Since we are talking about this:

This is likely my fault, however the order of Primary and Secondary button is inverted in the 'Continue Testing' screen. We should use the usual order, so "Secondary | Primary"

[jpnurmi]

The ready-made options we have are:

• text buttons
• outlined buttons
• filled buttons
• elevated buttons

And we can freely mix and match them, of course. :)

I have already prepared to change them to the new filled buttons but I can put it on hold until we've made the choice:

• https://github.com/canonical/ubuntu-desktop-installer/pull/1459

[elioqoshi]

Thanks!

Can I propose to use Text buttons for secondary actions (Go Back) and filled buttons for primary actions (Continue)?

[jpnurmi]

Sure, here's how that combination would look:

[elioqoshi]

I think that looks better, though are we set on the accent color for the text button? The issue that might create is that it looks highlighted.

[jpnurmi]

The looks come from Yaru and M3 but we could either propose changes in Yaru or customize it locally in the installer.

[jpnurmi]

[jpnurmi]

Should it look like an outlined button but without the outline?

Screencast from 2023-02-27 10-33-03.webm

[elioqoshi]

I need a bit more time to think about this. Here is how I view this issue:

I am a bit worried about colored accent color text button as there are a few issues with it (most stemming that Ubuntu orange is so close to a signal color, we have to circumvent it in other ways:

• The button looks like a highlighted text/link
• The button looks like a destructive action

One way to do this is to change the secondary button to white, though I am worried it will not look interactive anymore However its proximity to the primary button here one could argue should suffice

On top of this topic there is also the fact that this will differ from the Desktop experience where text buttons are all in accent color but I will ignore this for now for the sake of improving the installer and not open up that topic for Yaru in general.

[jpnurmi]

I like this a lot especially if we make the buttons not animate :)

Screencast from 2023-02-27 12-07-57.webm

For reference, with animations:

Screencast from 2023-02-27 12-06-49.webm

[elioqoshi]

Yes! I do think it's an improvement. Let me mull it over a bit and peer review with other from UX for a bit longer before deciding on something here.

[jpnurmi]

Also, removing the outline from the Go Back button makes it feel less disturbing that it jumps when the Continue button is replaced by a Start Installing button without animation.

Screencast from 2023-02-27 12-14-22.webm

[elioqoshi]

@jpnurmi Could you show an example, for comparison, with a Secondary button in outline and primary button filled?

[jpnurmi]

Here's the variant with an outlined back button.

Screencast from 2023-02-27 12-26-06.webm

I don't know if it's just me but the outline, even if it's so subtle, makes the jump somehow stand out. With the outline removed it doesn't stand out nearly as much because you can't see the exact boundaries anyway.

[elioqoshi]

Thanks @jpnurmi ! I see what you mean. I would not prioritize the animation completely here if we think that statically it makes more sense but I think we should go with 1 of these 2 solutions. Will think a bit more about it

[elioqoshi]

So I am confident we should go with this:

• Secondary Button (i.e Back) is Outlined
• Primary Button (i.e Continue) is Filled (or in the case of Install) Elevated.
• Buttons have a minimum width of xxx pixels (Still thinking what that should be, maybe 120-150px?)
• If buttons are laid out as navigation buttons (i.e a wizard like here), they should be laid out left and right, as it's a linear representation and works better with the page indicator. I.e:

[jpnurmi]

Buttons have a minimum width of xxx pixels (Still thinking what that should be, maybe 120-150px?)

I tested 120px and didn't notice it getting stretched in any language but it's on the borderline. It's probably safer to make it slightly wider than 120px.

If buttons are laid out as navigation buttons (i.e a wizard like here), they should be laid out left and right, as it's a linear representation and works better with the page indicator. I.e:

Btw, there's still that one remaining info label that we need to move out of the way. :)

[elioqoshi]

Sorry for revisiting this, though the more I look at it, the more I think filled buttons should be filled and not outlined, as the current filled buttons on light theme makes the buttons look disabled. I'd propose to make the fill darker (E5E5E5) and remove the border for all filled buttons in the installer.

example: