We need some signifier of progress through the installer flow

[local-optimum]

Ubiquity included a number of dots to visualise to the user how far through the process they are. Whilst the dot approach is not necessary it would be more user friendly to have a visual presentation of progress through this UI even if not 100% accurate for all use-cases.

Windows 10 has 'chapter headings' throughout the flow to signify this as an alternative example

@elioqoshi it might be good to experiment with mockups of a preferred presentation

[elioqoshi]

I agree that information on progress would be useful. Here are a few explorations I did, including what we originally had in Ubiquity:

I feel the Windows approach is a bit too much. Due to being unable to see non-active menu progress items, it looks like the labels are floating. I'd recommend A or B

[elioqoshi]

With the new merged title approach JP worked on:

[elioqoshi]

An alternative could be also this without losing too much height screen estate:

[local-optimum]

I like both, if the dots were in line with the buttons on the bottom then I doubt we'd lose much screen estate either @jpnurmi what is the most logistically feasible to implement and how many 'dots'/stages do we need?

[jpnurmi]

I recall there are some screens that show additional status/info/warnings at the bottom left that we need to avoid overlapping with, but otherwise putting the dots there at the bottom is trivial. Deciding on the number of steps is harder. :)

I need to take a closer look at how Ubiquity does it because there are some special pages where the steps might not make sense (Turn off RST/BitLocker) e.g. Try or install is going to be only shown on the first launch. Maybe all partitioning related could be considered one step because the offered pages depend on your selections and available disks.

[local-optimum]

Your approach sounds good to me, I think we should largely echo what was in Ubiquity and not worry about the dots being of equal length in terms of steps. It should be based on the number of installation 'sections'

[jpnurmi]

It looks nice when the page indicator is aligned with the buttons but there are a couple of pages that have some info/status/warning labels in the bottom left corner. Does it look silly if we move the page indicator down closer to the window edge?

[Feichtmeier]

Duplicate of #135 :)

[madsrh]

...It should be based on the number of installation 'sections'

@local-optimum I really like the idea of having a progress indicator - I wonder if something has changed since this comment since this idea is being revisited?

...Does it look silly if we move the page indicator down closer to the window edge?

Yes 😸 IMHO that looks odd.

@jpnurmi Wouldn't it be possible to just move the message up, so the dots can stay aligned to the buttons?

I have no idea what kind of information/status/warnings these could be, but I was wondering if using the snackbar would be fitting here 🤷‍♂️

[Feichtmeier]

Maybe there is one more option.

Since the YaruWindowTitleBar includes a title which describes the content of the page, eventually it could be followed by a simple - 3/20 page indication to show where the page is in the page flow ?

[local-optimum]

We did discuss page number style progress indicators, but since different sections of the installer include more pages depending on selection it felt better to go with the abstract 'dots' that simply represent your current 'stage' rather than a specific number of screens. @madsrh I agree that it can be misleading sometimes (hence the need for abstractness in the visualisation) but we also don't want users to not have a rough sense of how far they are through the setup. I agree with @elioqoshi's comment that the current dots should be inline with the continue buttons and more compact. If folk want to argue strongly for not having progress indicators I'm also happy to hear.

[elioqoshi]

Since the YaruWindowTitleBar includes a title which describes the content of the page, eventually it could be followed by a simple - 3/20 page indication to show where the page is in the page flow ?

I don't think that's ideal due to cognitive overload. We do not want to prioritize telling the user exactly where they are, we just want to give them an idea at what position they are in, hence visualizing that is more appropriate than a label. What @local-optimum said as well.

I do think @madsrh seems ideal if that's possible. The snack bar seems like a good way to handle messages too (just ensuring that it's themed right, as it's light theme in this example). @jpnurmi what do you think?

[jpnurmi]

I do think @madsrh seems ideal if that's possible. The snack bar seems like a good way to handle messages too (just ensuring that it's themed right, as it's light theme in this example). @jpnurmi what do you think?

Looks great and solves the issue with the red error color in the dark theme. What about the light theme, are we going to invert the colors? We should aim to fix the error color, of course, but I'm just wondering because currently, the issue is only visible to those who change to the dark theme. Inverting the colors would bring the issue visible by default.

[elioqoshi]

Regarding color: We need different shades for the same semantic color in light and dark. So on dark we need a different red than on light. Let's discuss that in the relevant issues

[elioqoshi]

Really checking on details here, but would it be possible to alter the page indicator active dot to be bigger than the others? I assume we are using the page indicator from Yaru right now so don't want to introduce too much conflict, though I think this creates a better distinction of where the user is.

[madsrh]

...but would it be possible to alter the page indicator active dot to be bigger than the others?

Let me summon @Jupi007 🧙

[jpnurmi]

It should be doable with the new theming capabilities @Jupi007 added. The dots all have the same size (which is good to keep the layout stable) but you can probably make the current dot visually larger by using an opaque decoration border, and transparent for the non-active ones, for example.

• https://github.com/ubuntu/yaru_widgets.dart/pull/632

[Feichtmeier]

Altering the look is fine, as long as you keep the default look to look different enough from our radio buttons :radio_button:

[elioqoshi]

Sorry I pasted in a wrong screenshot. Updated it.

The dots all have the same size (which is good to keep the layout stable) but you can probably make the current dot visually larger by using an opaque decoration border, and transparent for the non-active ones, for example.

Alternatively, the inactive dots could have a stroke in the same color as the background. Not sure if that is a hack or not though.

[jpnurmi]

@d-loose is this something you could take a look at?

[d-loose]

Yes, will do!

[elioqoshi]

Thanks!

In my example I used 12px for the active dot and 8px for the inactive ones.

[Jupi007]

I just tried in the example of yaru_widgets, and it is possible to trick around with a border to change the item size, but it looks ugly because the transition white/transparent->orange is different from the grey->orange one.

Capture vidéo du 2023-03-02 10-50-58.webm

Capture vidéo du 2023-03-02 10-53-15.webm

It is funny, but I was working yesterday on some improvements of the page indicator (for which I requested a dev branch), and I added a sizeBuilder, in the same way as the decorationBuilder:

Capture vidéo du 2023-03-02 10-55-25.webm

[d-loose]

I think it's easiest with yet another change in the yaru widgets. Rather than making the selected dot larger, I'd shrink all others and center them in a SizedBox which is as large as the selected one. Works smoothly without any dots moving around:

Screencast from 2023-03-02 11-41-01.webm