How to show several log-in and sign-up options (mobile app)?

Question

I'm just wondering, how do you deal with a sign-up / login page that has a lot of options? As in below, after the onboarding, the user can sign-up / log-in in 3 ways.

Is this too overwhelming or is there a better way to arrange it?

Answer 1

I highly encourage you to consider only allowing one form of login.

Why? Well, MailChimp had social logins for a while until they realized a bulk of their users kept forgetting which login they used originally, resulting in either: multiple accounts, frustration in logins or multiple errors firing. Read this here. This happens to me a lot, not remembering which one is the one I signed up with... Avoid it at all costs.

I highly suggest you either choose email, or another social login.

Answer 2

I've seen interfaces where at first, only an email address field is shown. Based on wether the email address is known to the system, the rest of the form (register or login) is displayed.

• It makes the first step very small
• It avoids 'this email address is already in use' issues

For example, Google uses this UX to login or register to its services.

Answer 3

you could try using a modal view rather than loading a different page. Moreover, expanded inputs for email and password help rising the conversion rate. You can let clickable the other button (the "sign-up" button when in log-in mode and viceversa), switching the modal window for error recovery (rather than an X on the top-right of the modal to close it).

^{download bmml source – Wireframes created with Balsamiq Mockups}