🚀 [REQUEST] - Checkout UI Improvements - Edit and Login

[cruftex]

Summary

In checkout step one "Order as guest" shows up like a button. It is, however, the current selection and nothing happens when it is pressed. That is confusing and not consistent with how the button design is used elsewhere.

When moving to the next checkout step, there is no visual aid for the fact that the previous step can be clicked. An icon or a text would help to guide user.

Current state:

Our modifications at the moment:

I think our version is a step forward, but there is still room for improvement and make it more user friendly. If we should do an PR, let us know.

Feature target required module/theme

falcon

Drawbacks

None

[Oksydan]

Hi @cruftex,

thank you for creating an issue.

In checkout step one "Order as guest" shows up like a button. It is, however, the current selection and nothing happens when it is pressed. That is confusing and not consistent with how the button design is used elsewhere.

Unfortunately I am not able to reproduce an issue - for me it's toggling guest (register) form and login form. Can you provide for me more information how to reproduce it? Did you make any modification there?

About everything else related to UI/UX. Currently we are working on version 4.0.0 - javascript part is work in progress.
Together with our sponsor and technical partner Waynet, we are working on new UI/UX projects for Falcon theme with bootstrap 5.
I will be creating issues with linked figma pages/project, so feel free to contribute.

[cruftex]

Unfortunately I am not able to reproduce an issue - for me it's toggling guest (register) form and login form. Can you provide for me more information how to reproduce it? Did you make any modification there?

It is toggling fine. Just the design is confusing. See the first image above, "Order as a guest" looks like a button, but it is the current enabled option. If something looks like a button, it should work as one.

[Oksydan]

Ok. So I misunderstood that part. We will also design this step in checkout.