1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: UI 가이드라인
slug: Mozilla/Persona/User_interface_guidelines
tags:
- Persona
translation_of: Archive/Mozilla/Persona/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><a href="#persona-only">Persona 전용으로</a></li>
<li><a href="#persona_plus_traditional">Persona + "일반 로그인"</a> (that is, sign in with a username and password stored on the site)</li>
<li><a href="#persona_plus_federated">Persona + 1개 이상의 다른 로그인 방법</a> (OAuth 2 나 Facebook Connect 등.)</li>
<li><a href="#persona_plus_traditional_plus_federated">Persona + "일반 로그인" + 1개이상의 다른 로그인 방법(OAuth 2)</a></li>
</ul>
<p>In each approach there are three user interface elements to consider:</p>
<ul>
<li>the Sign in/Sign up link, displayed on pages when the user is not signed in</li>
<li>the Sign up view: the interface that appears when the user clicks "Sign up"</li>
<li>the Sign in view: the interface that appears when the user clicks "Sign in"</li>
</ul>
<p>None of the recommendations here are mandatory.</p>
<h2 id="Persona_전용으로"><a name="persona-only">Persona 전용으로</a></h2>
<p>Persona가 유일한 로그인 옵션으로 제공된다면, 제공되는 경우의 수가 하나 뿐이기 때문에, 이용자의 혼란이 줄어들 것입니다., this offers the least confusing user experience, because the user has fewer choices to make.</p>
<h3 id="Sign_upSign_in_link">Sign up/Sign in link</h3>
<p>여러분은 그냥 "로그인 / 회원가입"이라고 표시된 링크 하나를 보여주면 됩니다. 사용자들이 어떠한 방법으로 로그인 하는 지 미리 알도록 하기 위해서, Persona 아이콘을 포함하는 것을 추천합니다.<br>
<br>
<img alt="" src="https://mdn.mozillademos.org/files/6773/persona-only-signin-link.png" style="display: block; height: 132px; margin-left: auto; margin-right: auto; width: 323px;"></p>
<h3 id="Sign_up_view">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_일반적인_로그인_방법"><a name="persona_plus_traditional">Persona + 일반적인 로그인 방법</a></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>
<h3 id="Sign_upSign_in_link_2">Sign up/Sign in link</h3>
<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p>
<h3 id="Sign_up_view_2">Sign up view</h3>
<p>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.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6777/persona-plus-trad-signup.png" style="display: block; height: 387px; margin-left: auto; margin-right: auto; width: 274px;"></p>
<h3 id="Sign_in_view_2">Sign in view</h3>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6779/persona-plus-trad-signin.png" style="display: block; height: 349px; margin-left: auto; margin-right: auto; width: 273px;"></p>
<h2 id="Persona_federated_sign-in"><a name="persona_plus_federated">Persona + federated sign-in</a></h2>
<p>In this case you support Persona alongside one or more other federated sign-in options such as Facebook Connect or Google+.</p>
<h3 id="Sign_upSign_in_link_3">Sign up/Sign in link</h3>
<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p>
<h3 id="Sign_up_view_3">Sign up view</h3>
<p>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.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6783/persona-plus-fed-signup.png" style="display: block; height: 185px; margin-left: auto; margin-right: auto; width: 275px;"></p>
<h3 id="Sign_in_view_3">Sign in view</h3>
<p>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":</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6785/persona-plus-fed-signin.png" style="display: block; height: 187px; margin-left: auto; margin-right: auto; width: 275px;"></p>
<h2 id="Persona_traditional_sign-in_federated_sign-in"><a name="persona_plus_traditional_plus_federated">Persona + traditional sign-in + federated sign-in</a></h2>
<p>In this case you support everything: Persona, traditional sign-in, and one or more additional federated sign-in options.</p>
<h3 id="Sign_upSign_in_link_4">Sign up/Sign in link</h3>
<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p>
<h3 id="Sign_up_view_4">Sign up view</h3>
<p>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.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6787/persona-plus-everything-signup.png" style="display: block; height: 411px; margin-left: auto; margin-right: auto; width: 275px;"></p>
<h3 id="Sign_in_view_4">Sign in view</h3>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6789/persona-plus-everything-signin.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 275px;"></p>
<h2 id="More_Info">More Info</h2>
<p>You can find more information about Persona's visual design in <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">Sean Martell's style primer</a>.</p>
|
