User Interface guidelines

Presenting sign-in options to users without confusing them can be difficult, especially if your site offers multiple sign-in options. This article aims to provide guidance about the best way to present Persona sign-in to your users. It covers four different possible approaches, depending on the different sign-in options the website supports:

Sign in view

In this case you support Persona alongside traditional sign-in, where you ask users for a username and password which you then store yourself.

Sign up/Sign in link

You can show the text "Sign up/Sign in", with separate links for each choice:

Sign up view

When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona or to create a new username and password on your site.

In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:

Sign in view

When the user clicks "Sign in" you'll offer them the choice to sign in with Persona or the account they created on your site. This can be just like the "Sign up view", except you won't include the password confirmation field:

In this case you support Persona alongside one or more other federated sign-in options such as Facebook Connect or Google+.

Sign up/Sign in link

You can show the text "Sign up/Sign in", with separate links for each choice:

Sign up view

When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona or to sign up using one of the other federated identity options.

In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:

Sign in view

When the user clicks "Sign in" you'll offer them the choice to sign in with Persona or one of the other federated sign-in options. This can be just like the "Sign up view":

In this case you support everything: Persona, traditional sign-in, and one or more additional federated sign-in options.

Sign up/Sign in link

You can show the text "Sign up/Sign in", with separate links for each choice:

Sign up view

When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona, to create a new username and password on your site, or to sign up using one of the other federated identity options.

In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:

Sign in view

When the user clicks "Sign in" you'll offer them the choice to sign in with Persona, one of the other federated options, or the account they created on your site. This can be just like the "Sign up view", except you won't include the password confirmation field: