0

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:

The login screen

The registration screen

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:

enter image description here

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:

enter image description here

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!

  • 1
    Your app is really cool. – edocetirwi Aug 23 '16 at 18:12
  • I always get nervous when people say "I have a really good question" or "I built something that you'll love". Warning signs 😂 – plainclothes Aug 23 '16 at 18:32
  • I didn't say the question was good, nor that the app would be loved by many :D Seriously, this is only the empty shell of a generic app. The "coolness" is in the tech behind it... I am releasing everything under GPL, so it will be for everybody to use and love/hate! :D – Merc Aug 24 '16 at 4:55
3

“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:

Revised design concept

  • Thank you! I am following your advice basically to the letter. But... where did you get the "Link your account" and "Successfully linked" buttons? Did you make them yourself? What's the exact font? – Merc Aug 24 '16 at 2:33
  • Made it up. I'm using Roboto throughout. – plainclothes Aug 24 '16 at 3:20
  • I ended up creating "Linked with Facebook" and "Link with Facebook" by photoshopping the existing icons... It worked well enough! – Merc Aug 24 '16 at 4:54
  • My pleasure 😊 You should be able to make that button with straight HTML and an icon. – plainclothes Aug 24 '16 at 5:01
  • I suck at HTML :D I have a follow-up question... I didn't want to pollute it here, and it IS another question after all. The bonus is that you get to see how I implemented your advice...! ux.stackexchange.com/questions/98402/… – Merc Aug 24 '16 at 5:06

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.