I have written a really cool app that allows you to login and register using Facebook and/or login/password pair. The login and registration screens are the usual story:
Up to this point, users know what to do, and it's pretty much business as usual.
The problem is with the "management" screen. Users in my app are able to:
1) Change their login/pass, or disable login/pass login altogether 2) Link/unlink a facebook account, or disable facebook login altogether
The screen that manages this is this:
Yes, it's messy. At this point:
- users can change their username
- users can change their password
- They will activate the changes by pressing "save".
- If the password fields are empty, the password is left untouched
- If they click on the rubbish bin next to "save", login via login/password pair will no longer be possible
- users can activate facebook login by clicking on the facebook login
- if they click on the rubbish bin next to the facebook button, login via facebook will no longer be possible
This is what the screen looks like when Facebook is active:
It's terrible and it fails a huge number of usability tests. I am thinking along these lines:
Separate the UI in two sections:
- If a username is NOT set, then show the form as it is, with user, password and password confirmation.
- If a username is set, then have username screen split into three:
- Change your username
- Delete your username
- Change your password
Facebook. The current interface is a disgrace, with the buttons going opaque. What would a better way be?