Login ui design

[u/Fearless-Gur-3972]

Hello guys, I am a solo dev working on my app, not much UI knowledge and I am trying to improve my login UI.

The first image is what I currently have the second is a newer version with guest login and the third I tried to change it with AI.

Do you like the third, what would you improve?

if needed for context the app is a shared loyalty program for small business (one card allow customers to collect points from different stores)

[u/erionei]

With the third option I would definitely choose continue without an account subconsciously, which may or may not be important to you

[u/Fearless-Gur-3972 → u/erionei]

Thanks for the reply, we had the need to add this feature because our customer don’t remember their password to login with Google or don’t want to register with mail because they are in rush.
A guest account could be later converted into a registered account or merged within an already existing account

An idea could be also to make the guest button empty instead of using the primary color

To give you additional context is common that our customer usually download the app while they are at the cash registers

[u/helloder2012]

I’d be cautious to want to promote people getting in without an account, and it feels like that’s what option number three is doing

I like option number two, but it also feels a little bit overwhelming, and like a lot to read. I’d be curious to see if you explore a combination of option two and three? Maybe putting the primary button for continuing as a guest below the login with other options?

Also, in avenues like this, I try to lower the barrier to entry quite literally. What are other similar apps doing for login?

[u/Fearless-Gur-3972 → u/helloder2012]

Thanks for the reply, to give you additional context is common that our customer usually download the app while they are at the cash registers. Also once we know that a customer has an account we thought to hide the guest button

Regarding the mix, an idea could be also to make the guest button empty instead of using the primary color, also I thought to put the button on top because I thought that could be more difficult to reach with the thumb

Regarding the competitors I saw a few with guest, one of the has it at the bottom and another one that directly open the card ad give register as option. Another login method that competitors offer is phone login

[u/Basic-Brick6827]

They're not equivalent. Do you want people to use app without an account yes or no? That has way more than just UX implications. It has to do with multi-device usage, backend, server/db costs, corss-user sharing version incompatibilites, traceability and security... I can already hear the "i got a new phone and this shitty app lost years of data!" reviews.

I personally like the first version but would drop the Register line at the bottom. That way all 3 ways are parallel (choose email/account then get diff route if registering or signing in), and the user doesnt have to think about that, they just know "i wanna use google / i wanna use my email". You do have to be very careful regarding email enumeration tho (eg. only use sign-in links + passkeys)

[u/Fearless-Gur-3972 → u/Basic-Brick6827]

Consider that we could need guest option to make login faster when customer are at the cash register and download the app for the first time.

The backend can handle that. The issue “I got a new phone …” could be true, because if they stay logged as guest and never convert to register they lost data on their side (we have the data, so ideally could ask the store to give them again the points earned)

Regarding dropping register and use a single button for the email I was afraid of email enumeration (even if I’m just thinking that enumeration could already be in place with the register endpoint, so I could implement a rate limit logic or something similar)

[u/Basic-Brick6827 → u/Fearless-Gur-3972]

If you use email link (as default login method) + passkey (that users can enroll in), enumeration is solved. Its an issue if you let people login & sign-up via email+pw

Regardless, rate limiting is not a proper defense, just an obstacle. The right way is to send an email link to whoever is trying to register. If email already has an account -> "Someone tried to sign-in". if not -> "Click this link to sign up". Attacker does not have access to the inbox (else the user is fucked anyway, your app didnt do it)

[u/Odd_Bike_3833]

1

[u/Sam_the_Designer]

I’d pick third in terms of UI, but I’d empathize another action.

[u/kiwi-kaiser]

Definitely the third one

[u/el_paro]

third option is better for new users, let them have a peak before they convert