Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 173 lines (166 sloc) 10.267 kB
6ebd4fd @tlozoot first pages commit
tlozoot authored
1 <!DOCTYPE html>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
2 <html>
6ebd4fd @tlozoot first pages commit
tlozoot authored
3 <head>
80aed4b @csievert Add screenshots to How it Works page
csievert authored
4 <meta charset="utf-8">
5 <title>Account Chooser</title>
6 <link rel="stylesheet" href="style.css">
7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
8 <script src="script.js" type="text/javascript"></script>
9 <script src="https://github.com/jeresig/jquery.hotkeys/raw/master/jquery.hotkeys.js"></script>
6ebd4fd @tlozoot first pages commit
tlozoot authored
10 </head>
11 <body>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
12 <ol id="slideshow-slides">
80aed4b @csievert Add screenshots to How it Works page
csievert authored
13 <li id="help-text">Click on the slide numbers or use the arrow keys to navigate:</li>
14 <li id="1" class="current-slide">1</li>
15 <li id="2">2</li>
16 <li id="3">3</li>
17 <li id="4">4</li>
18 <li id="5">5</li>
19 <li id="close-everything">close</li>
20 </ol>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
21 <span id="cursor"><img src="images/cursor.png" alt=""></span>
80aed4b @csievert Add screenshots to How it Works page
csievert authored
22
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
23 <div class="account-chooser">
80aed4b @csievert Add screenshots to How it Works page
csievert authored
24 <div class="modal-loading">
25 <a href="#"><img src="images/x.png" alt="x" /></a>
26 <img src="images/loading.png" alt="" />
27 <h2>Signing in</h2>
28 </div>
29 <div class="modal">
30 <div class="modal-header">
31 <img src="images/logo.png" alt="" />
32 <a href="#"><img src="images/x.png" alt="x" /></a>
33 </div>
34 <div id="modal-emailentry">
35 <h2>Enter your email address</h2>
36 <form id="email_entry" action="javascript: void(0)" method="post">
37 <input type="text" name="email" id="modal-email" size="25" value="" />
38 <input type="submit" name="signin" id="modal-signin" value="Sign in" />
39 </form>
40 </div>
41 <div id="modal-idpselection">
42 <h2>Sign in with</h2>
43 <ul>
44 <li><a href="#"><img src="images/myidp.png" alt="my idp" /></a></li>
45 <li><a href="#"><img src="images/socialnetwork.png" alt="SocialNetwork" /></a></li>
46 <li><a href="#"><img src="images/simplymail.png" alt="Simply, Mail." /></a></li>
47 <li><a href="#"><img src="images/freeemail.png" alt="Free Email" /></a></li>
48 </ul>
49 </div>
50 <div id="modal-accountselection">
51 <h2>Sign in</h2>
52 <ul>
53 <li>
54 <img src="images/bonniep.jpg" alt="" />
55 <p><strong>Bonnie Parker</strong>bonnie.parker1234@gmail.com</p>
56 <a href="#"><img src="images/x.png" alt="x" /></a>
57 </li>
58 <li>
59 <img src="images/bonniew.jpg" alt="" />
60 <p><strong>Bonnie Parker</strong>bonnie@bcgang.com</p>
61 <a href="#"><img src="images/x.png" alt="x" /></a>
62 </li>
63 <li>
64 <img src="images/clyde.jpg" alt="" />
65 <p><strong>Clyde Barrow</strong>clyde_barrow123@yahoo.com</p>
66 <a href="#"><img src="images/x.png" alt="x" /></a>
67 </li>
68 </ul>
69 <input type="submit" name="signinanother" id="modal-signin-another" value="Sign in with another account" />
70 </div>
71 <div class="modal-footer">
72 © 2011 OpenID Foundation. <a href="http://www.accountchooser.com/">Learn more about this</a>
73 </div>
74 </div>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
75 </div>
80aed4b @csievert Add screenshots to How it Works page
csievert authored
76
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
77 <div class="header">
80aed4b @csievert Add screenshots to How it Works page
csievert authored
78 <a href="#">
79 <img src="images/keyhole-logo.png" alt="" />
80 <h1>Account Chooser</h1>
81 </a>
82 <ul>
83 <li><a href="#" class="current-page">Home</a></li>
84 <li><a href="how.html">How it works</a></li>
85 <li><a href="webowners.html">For website owners</a></li>
86 <li><a href="idp.html">For identity providers</a></li>
87 </ul>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
88 </div>
89
90 <div class="pitch">
80aed4b @csievert Add screenshots to How it Works page
csievert authored
91 <h2>An open standard and user interface guidelines for the next generation of web sign in.</h2>
92 <div id="demo">
93 <p>See a slideshow</p>
94 <a href="#">
95 <img src="images/keyhole-demo-icon.png" alt="" />
96 <p>sign in</p>
97 </a>
98 </div>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
99 </div>
100
101 <div class="values">
80aed4b @csievert Add screenshots to How it Works page
csievert authored
102 <div class="value1">
103 <img src="images/value1.png" alt="" />
104 <div class="proposition">
105 <h3><a href="learnmore.html#simpleupgrade">Simple Upgrade</a></h3>
106 <p>If a user has been logging into a website for a long time with a password, then the account chooser experience makes it easy for the website to upgrade them to use an identity provider. After the website upgrades their login flow to use an account chooser, the user will either click a button or type their email address. The user can then be redirected to an identity provider, and give their consent to be identified to the website. <a href="learnmore.html#simpleupgrade">Learn more</a></p>
107 </div>
108 </div>
109 <div class="value2">
110 <img src="images/value2.png" alt="" />
111 <div class="proposition">
112 <h3><a href="learnmore.html#easesswitching">Eases switching between multiple accounts.</a></h3>
113 <p>Many computers are shared by multiple people who each have their own accounts. Many more are used to access multiple accounts used by the same person such as their personal and work accounts. It is frustrating for end users to log into a traditional website where multiple accounts on the same computer are used. However if the website deploys an account chooser, then the process is much simpler. The website can make it even more simpler by providing a navigation bar or button to let the user switch accounts. <a href="learnmore.html#easesswitching">Learn more</a></p>
114 </div>
115 </div>
116 <div class="value3">
117 <img src="images/value3.png" alt="" />
118 <div class="proposition">
119 <h3><a href="learnmore.html#reducessignuppains">Reduces signup pains on any website.</a></h3>
120 <p>By deploying an account chooser on your website you should expect to increase sign up and log in rates on your websites, as well as reduce costs from hijacked accounts and users who have trouble logging into their account. <a href="learnmore.html#reducessignuppains">Learn more</a></p>
121 </div>
122 </div>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
123 </div>
124
125 <div class="tertiary">
80aed4b @csievert Add screenshots to How it Works page
csievert authored
126 <div class="point">
127 <span id="point1"></span>
128 <div class="point-content">
129 <h4><a href="learnmore.html#security">Security</a></h4>
130 <p>The use of identity providers not only makes it easier for people to use websites, but also makes their accounts more secure. With traditional websites, people tend to reuse password across sites. If hackers are able to compromise even a single website, they can then use that password to break into the person’s accounts on other websites. Unless a user’s password is extremely complex, there are unfortunately very simple techniques, such as dictionary attacks, that hackers can use to identity a person’s password on almost any small to medium website. Fortunately identity providers can be certified to confirm they offer protection against those types of techniques. <a href="learnmore.html#security">Learn more</a></p>
131 </div>
132 </div>
133 <div class="point">
134 <span id="point2"></span>
135 <div class="point-content">
136 <h4><a href="learnmore.html#consistency">Consistency</a></h4>
137 <p>Websites can deploy the account chooser in a very visually consistent manner. One a user has used this technique on one website, they will be able to easily recognize and use it on another website. That visual recognition generally causes an increase in the set of users who are willing to log into a website they have never visited before. <a href="learnmore.html#consistency">Learn more</a></p>
138 </div>
139 </div>
140 <div class="point">
141 <span id="point3"></span>
142 <div class="point-content">
143 <h4><a href="learnmore.html#forgottenaccounts">Forgotten Accounts</a></h4>
144 <p>One common problem end users encounter is when they visit a website and do not remember that they already have an account. Generally they would try to go to the account creation step, and they would get an error about their existing account. With the account chooser, this problem goes away. They will either type their email or choose their identity provider. In either case the website can then immediately log them in if they have an identity provider, or ask for their password if they don’t. <a href="learnmore.html#forgottenaccounts">Learn more</a></p>
145 </div>
146 </div>
147 <div class="point">
148 <span id="point4"></span>
149 <div class="point-content">
150 <h4><a href="learnmore.html#futurecompatability">Future Compatibility</a></h4>
151 <p>Today there are a few identity providers, but in the future we expect many more. A website could simply add buttons to its login box for 3-4 identity providers, but they could not add more without visually overwhelming users. The account chooser experience splits the process of adding an account from the process of signing into an account. When the website shows a page to add an account, it can generally show 3-4 identity providers. That list can be modified over time, and can even be varied based on information like the user’s location and preferred language. <a href="learnmore.html#futurecompatability">Learn more</a></p>
152 </div>
153 </div>
154 <div class="point">
155 <span id="point5"></span>
156 <div class="point-content">
157 <h4><a href="learnmore.html#legacycompatability">Legacy Compatibility</a></h4>
158 <p>Most websites today offer a traditional login box with fields for a user’s email address and password. The website could offer support for identity providers by simply adding buttons around the existing login box. However that generally creates significant confusion for users because they think there are two ways to login, and they don’t know which one is the correct method to use. This problem is greatly reduced by splitting the process of adding an account from the process of signing into an account. It also avoids showing the password field to any users except those who absolutely need to use a password. <a href="learnmore.html#legacycompatability">Learn more</a></p>
159 </div>
160 </div>
161 <div class="point">
162 <span id="point6"></span>
163 <div class="point-content">
164 <h4><a href="learnmore.html#protocolagnostic">Protocol Agnostic</a></h4>
165 <p>There are many technical protocols support by identity providers (OpenID v2, SAML, OAuth2, OpenIDConnect, etc.) The Account Chooser is not specific to the protocol, and the website can even use different protocols to support different identity providers. As protocols evolve in the future, the website can continue to use the Account Chooser experience to hide the protocol details from the user. <a href="learnmore.html#protocolagnostic">Learn more</a></p>
166 </div>
167 </div>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
168 </div>
169
170 <div class="footer">&copy; 2011 OpenID Foundation.</div>
171
6ebd4fd @tlozoot first pages commit
tlozoot authored
172 </body>
d4f652c @Basheertome First draft, ux guidelines next up.
Basheertome authored
173 </html>
Something went wrong with that request. Please try again.