Showing a login with four different ways to log in

Question

I received an Android app design for a login form that accepts four different types of logins. Our system (unfortunately, IMO), accepts four ways to login in

• Username/Password - For protected profiles
• Username only - For unprotected profiles
• Password only - For locking the default profile (locking the device)
• PIN - For locking the device, but with a PIN

I personally think it's stupid to have four different ways of logging in, but that's not my call. Moving past that, the current spec is to show a login window like this below (sorry I dont have mockup software, am developer).

 __________________________
|                         |
|  [ Username/pass    ▼]  |
|  [ Username          ]  |
|  [ Password          ]  |
|_________________________|

The first line is a spinner. Clicking on it will show the four choices, and selecting each choice will show the appropriate input lines. For example selecting on PIN will only show one line, and will obfuscate the inputs like this

 __________________________
|                         |
|  [ PIN              ▼]  |
|  [ ****              ]  |
|                         |
|_________________________|

I personally feel the dropdown spinner is ugly (because it looks like a third input line, but isnt), but I'm not sure how else it could've been done. If it had just been two options, I would've made a link that toggles between the two login methods, but with four, I'm curious if this is the only legit way. Keep in mind this is a mobile app, so screen size is limited.

Is there a better way of supporting four different login methods?

Answer 1

For Mobile? Why not something like the mock-up below?

Allow them to tab to their preferred login type, and to make it even more friendly:

• Cache the most recently used tab, and default to it on startup
• Have an active state for tabs

Side note: to create "mock ups" or "sketches" without using some external tool, there is a tiny icon in your editor next to the "insert image" icon that allows you to draft a sketch.

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

Answer 2

The less fields you display for user to fill out the better.

Assuming distribution of users between those options is fairly equal, you could use the following approach, see diagram below.

Page 1:

• User chooses to input either their username, password or PIN (assumption, system is able to determine the difference between those three fields and there are several ways you can do that)

• If the user falls into: PIN only, Password Only or Username Only - let them in right away

Page 2:

• If user provided a password and a username is required, show page 2 for final validation and let them in.

Page 3:

• If user provided a username and a password is required, show page 3 for final validation and let them in.

Answer 3

You could use show the three fields, and use placeholders to make the meaning clear that user or pass could be left blank.

Also provide a link to helptext (or a help-button) right below so they can easily discover help.

This would result in least extra clicks for anyone. Of course provide helpfull feedback messages if something goes wrong. Since the type of login indicates users that use the app for a longer time (if not, you could ditch the old login types), you can probably afford them to figure it out. So it's a little more overwhelming the first time but after that, this would be easiest for users to handle, without the least amount of extra clicks.