3

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?

  • What's the approximate distribution of users across the 4 methods? Eg do 99% of users use method 1, or are they more evenly distributed across the different approaches? – tohster Oct 4 '15 at 4:15
  • May we assume a profile can't be unprotected and protected at the same time and that a protected profile cannot have the empty password? (I feel like you can almost tell which method to use by which of user and password are filled out.) – Ulrich Schwarz Oct 4 '15 at 11:24
3

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3

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.

enter image description here

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.
  • 1
    This is something I would've wanted ideally, but we can't securely differentiate between password and usernames. – Eric S. Oct 5 '15 at 14:04
  • It that a system or architecture limitation? – Igorek Oct 6 '15 at 18:25
1

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.