Revision 514053 of User Interface guidelines

<p>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:</p>
<ul>
 <li>only Persona</li>
 <li>Persona + "traditional sign-in" (that is, sign in with a username and password stored on the site)</li>
 <li>Persona + one or more other federated sign-in options such as Facebook Connect</li>
 <li>Persona + "traditional sign-in" + one or more other federated sign-in options</li>
</ul>
<p>In each approach there are three user interface elements to consider:<br />
 <br />
 * the Sign in/Sign up link, displayed on pages when the user is not signed in<br />
 * the Sign up view: the interface that appears when the user clicks "Sign up"<br />
 * the Sign in view: the interface that appears when the user clicks "Sign in"</p>
<h2 id="Persona_only">Persona only</h2>
<p>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.</p>
<h3 id="Sign_up.2FSign_in_link">Sign up/Sign in link</h3>
<p>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:<br />
 <br />
 <img alt="" src="https://mdn.mozillademos.org/files/6773/persona-only-signin-link.png" style="width: 323px; height: 132px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h3>Sign up view</h3>
<p>You don't need to implement the sign up view at all, as Persona takes care of it for you.</p>
<h3 id="Sign_in_view">Sign in view</h3>
<p>Similarly, you don't need to implement the Sign in view, as Persona takes care of it.</p>
<h2 id="Persona_.2B_traditional_sign-in">Persona + traditional sign-in</h2>
<p>In this case you support Persona alongside traditional sign-in, where you ask users for a username and password which you then store yourself.</p>
<p>&nbsp;</p>
<h2 id=".C2.A0">&nbsp;</h2>
<h2 id="Sign_in_with_Persona_Buttons">Sign in with Persona Buttons</h2>
<h3 id="Images">Images</h3>
<p>The "Sign in" button comes in three versions, and three colors:</p>
<table align="center">
 <thead>
  <tr>
   <th scope="row">&nbsp;</th>
   <th scope="col">Sign in with your Email</th>
   <th scope="col">Sign in with Persona</th>
   <th scope="col">Sign in</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td><img alt="" src="/files/3955/email_sign_in_black.png" style="width: 202px; height: 25px;" /></td>
   <td><img alt="" src="/files/3961/persona_sign_in_black.png" style="width: 185px; height: 25px;" /></td>
   <td><img alt="" src="/files/3967/plain_sign_in_black.png" style="width: 95px; height: 25px;" /></td>
  </tr>
  <tr>
   <th scope="row">Blue</th>
   <td><img alt="" src="/files/3957/email_sign_in_blue.png" style="width: 202px; height: 25px;" /></td>
   <td><img alt="" src="/files/3963/persona_sign_in_blue.png" style="width: 185px; height: 25px;" /></td>
   <td><img alt="" src="/files/3969/plain_sign_in_blue.png" style="width: 95px; height: 25px;" /></td>
  </tr>
  <tr>
   <th scope="row">Red</th>
   <td><img alt="" src="/files/3959/email_sign_in_red.png" style="width: 202px; height: 25px;" /></td>
   <td><img alt="" src="/files/3965/persona_sign_in_red.png" style="width: 185px; height: 25px;" /></td>
   <td><img alt="" src="/files/3971/plain_sign_in_red.png" style="width: 95px; height: 25px;" /></td>
  </tr>
 </tbody>
</table>
<h3 id="CSS-Based">CSS-Based</h3>
<p><a href="https://sawyerhollenshead.com/" title="https://sawyerhollenshead.com/">Sawyer Hollenshead</a> created a set of excellent CSS-based buttons. <a href="/files/3973/persona-css-buttons.zip" title="/files/3973/persona-css-buttons.zip">Download (.zip)</a></p>
<h2 id="More_Info">More Info</h2>
<p>You can find more information about Persona's visual design in <a href="https://people.mozilla.org/~smartell/persona/" title="https://people.mozilla.org/~smartell/persona/">Sean Martell's style primer</a>.</p>