Hi everyone. I'm working on an onboarding flow for a new app and I'm struggling with how to deal with a Liquid Glass issue.
I have glass buttons with "next" and "back" chevron symbols that let the user go through the pages. When you get to the last page the "next" button is disabled.
Since the glass buttons are partially transparent they interact with the background colors. Depending on the colors of the background in use the button clearly looks disabled some times but other times it's barely dimmed and still would look active at a glance.
To deal with this I was just going to hide the next button on the last page by making the opacity zero. Back in the day VoiceOver would have still seen the disabled button, but now setting the opacity to zero also hides it from VoiceOver. Usually that's helpful but here it's not.
My real question is for a VoiceOver user would it be confusing to have the "next" button just disappear on the last page?
Comments
A Thought
If I understand your question correctly, which full disclosure I may not:
I definitely think there should be a clear way to dismiss the onboarding flow on that last page, be it a "next" or "done" button. Otherwise, there is no clear way to know how to get out of that screen or what to do next. I would guess that the VoiceOver Scrub gesture could probably dismiss it, but IMHO a button is better.
Done button
Oh yes, there's always going to be a done button present. The onboarding is basically a sheet that launches that you can swipe down to dismiss or hit the done button. This is several pages you can either swipe through or press the "next" and "back" chevron buttons to navigate. The big issue is the on the last page the "next" button sometimes visually still looks like it's active when it's not thanks to Liquid Glass.
Another idea I'm toying with is making the button barely visible when it's disabled instead of hiding it. That way VoiceOver would still make interactive.
In That Case
If there is a done button and it is the last screen in the onboarding flow, IMHO there isn't a need for a dedicated "next" button as the "done" button accomplishes the same thing.
Last page
I just realized that I misunderstood what you said. There's always going to be a close button present at the top of the sheet. I currently don't have have a done button where the next button existed for the other pages of the sheet (I certainly could easily make that change though).
Here's an image showing the UI in the state I have it right now. I've forcibly tried to make the next button look disabled (to match its dimmed, disabled state).
Probably not.
Interesting; I wonder what else liquid glass does differently. Until this point I thought it was purely visual.
IMO, no. We will have the same experience as a sighted user when the next button disappears, and I think when a user is going through an onboarding process, they always expect that there will be an end to it. I would be surprised if anyone concludes there's an accessibility problem instead of just realizing the lack of a next button indicates the lack of a next step. Leaving behind an invisible button is kind of like adding training wheels, and at this point, interfaces already change often so I think most experienced users operate on intuition rather than expecting specific design conventions.
Thanks for always thinking about accessibility; I know enough to know it's not always easy.
Change the button
Could the button’s label change from ‘Next’ to ‘Finish’ when the final screen is reached, and behave as a Close / Dismiss button if selected?
replies
@Simon Jaeger - Thank you for the insight!
@Dave Nason - I definitely could but I tend to shy away from that pattern because I myself have accidentally dismissed an onboarding flow with other apps when I was flipping through the pages quickly.
I'm going to go with hiding the next button on the last past with an opacity of zero, which will also hide it from VoiceOver.
Thank you for the comments everyone!