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:
- only Persona
- Persona + "traditional sign-in" (that is, sign in with a username and password stored on the site)
- Persona + one or more other federated sign-in options such as Facebook Connect
- Persona + "traditional sign-in" + one or more other federated sign-in options
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"
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.
Sign up/Sign in link
You can show just the text "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.
Sign in with Persona Buttons
Images
The "Sign in" button comes in three versions, and three colors:
Sign in with your Email | Sign in with Persona | Sign in | |
---|---|---|---|
Black | |||
Blue | |||
Red |
CSS-Based
Sawyer Hollenshead created a set of excellent CSS-based buttons. Download (.zip)
More Info
You can find more information about Persona's visual design in Sean Martell's style primer.