Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

User Interface guidelines

Persona is no longer actively developed by Mozilla. Mozilla has committed to operational and security support of the persona.org services until November 30th, 2016.

On November 30th, 2016, Mozilla will shut down the persona.org services. Persona.org and related domains will be taken offline.

If you run a website that relies on Persona, you need to implement an alternative login solution for your users before this date.

For more information, see this guide to migrating your site away from Persona:

https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers

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:

In each approach there are three user interface elements to consider:

  • the Sign in/Sign up link, displayed on pages when the user is not signed in
  • the Sign up view: the interface that appears when the user clicks "Sign up"
  • the Sign in view: the interface that appears when the user clicks "Sign in"

None of the recommendations here are mandatory.

Persona only

If Persona is the only sign-in option presented to users, this offers the least confusing user experience, because the user has fewer choices to make.

You can just show a single link labeled "Sign up/Sign in". It's recommended that you also include the Persona icon, as this helps users know what to expect when they click the link:

Sign up view

You don't need to implement the sign up view at all, as Persona takes care of it for you.

Sign in view

Similarly, you don't need to implement the Sign in view, as Persona takes care of it.

Persona + traditional sign-in

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

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:

Persona + federated sign-in

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

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

Persona + traditional sign-in + federated sign-in

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

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:

More Info

You can find more information about Persona's visual design in Sean Martell's style primer.

Document Tags and Contributors

Tags: 
 Contributors to this page: wbamberg, Priyanka13, Sheppy, Callahad, Gerben
 Last updated by: wbamberg,