I managed to create a usable screen to manage credentials. It's a bit tricky, because users can set login/password pair, as well as Facebook. However, a user could have just facebook, just login/pass, or both (all linked to the same account).

Here is what it looks like when both user/pass pair and Facebook are linked:

Both user/pass pair and Facebook linked

Here is what it looks like when login/pass are linked, but Facebook isn't:

User/pass pair linked (no FB)

Here is what it looks like when only Facebook is linked:

Only FB linked

The screens are "usable" (meaning that they pass some rather strict usability tests I ran this morning) mainly thanks to @plainclothes who gave some important feedback. However... now that usability is done, I really want this form to look pretty.

I think the main issue is that it needs separation for the three different sections. if I use <hr>s, they get confused with the input fields. And I could't find anything in material that would tell me how to face this.

Ideas will be amazingly welcome. I have no aesthetic taste...


1 Answer 1


You can try Material Design's expansion panels. They will give you strict separation of the three sections, enhance readability, enhance the information architecture and also make the screen more aesthetically pleasing.

Expansion panel example from the Material Design site showing both collapsed and expanded states

The following is my advice on implementing the expansion panels:

  1. First panel should have a label Username and in the collapsed state should show the current username. Expanded it should allow the user to update the username with save and cancel buttons.

  2. Second panel should have the label Password and in the collapsed state can possibly show password set. Expanded it should allow the user to update the password with update and cancel buttons.

  3. Third panel should have the label Password login and in the collapsed state should show Active. Expanded it should present disable password login and cancel buttons.

  4. Fourth panel should have the label Facebook login and in the collapsed state should show Linked or Unlinked depending on the state. Expanded it should present Link Facebook (or Unlink Facebook login) and cancel buttons.

  5. The ordering and presence of panels should of course depend on the enabled login methods.

List alternative (edit)

To reduce the interaction complexity of this design you can opt for a list instead of expansion panels. Instead of panels you will use list items. Instead of collapsing and expansion states, all list items will take the user to a secondary page when clicked. This will allow you to keep the benefits of expansion panels but reduce the implementation costs.

Additional suggestions

  1. I would also suggest presenting a confirmation prompt for all login disabling actions. These are destructive actions that the user would not want to accidentally perform.

  2. You allow users to link Facebook yet don't give them the ability to add password login. I would suggest making this an option as well, since users who originally registered with Facebook may want to create a login.

  3. I don't see it here or in your previous post but I hope you have logic and an error state that handle users trying to remove all forms of login.

  • Interesting approach. Definitely appeals to the progressive disclosure fan in me. But that's an awful lot of interaction complexity for a simple set of account management tools. Commented Aug 24, 2016 at 8:08
  • @plainclothes I get where you are coming from. I have added an alternative that would be easier to implement and probably more familiar to users. Commented Aug 24, 2016 at 10:14
  • 1
    Even if expansion panels are a little too much interaction, non-interactive panels might still be useful to dress this form up a bit?
    – tobybot
    Commented Apr 18, 2018 at 16:50

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