Login management

Question

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:

• Username.

  • 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?

Ideas welcome!

Answer 1

“Delete what?”

Testing is the only real way to know what users think. Short of that, sit down, clear your head, and imagine you've never seen this screen before. What would you ask yourself?

There's a trashcan next to the save button ... delete my changes?

I wonder what that grey trashcan in the bottom corner does. meh.

Why would I sign in with Facebook when I'm already signed in?

Icons work when you can use a standard image that has extremely clear meaning. When you see a trashcan next to the quantity of an item in your shopping cart, no question. A trashcan next to a save button ... ?

When in doubt, spell it out

That statement is annoying. It annoys me when I'm sketching out a beautifully minimal product and I stop to put myself in the user's seat. It annoys my coworkers when I critique their concepts. But it's effective.

In the spirit of spelling it out: