large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://uxplanet.org/ux-login-register-and-password-the-ultimate-design-guide-f18b1932ee84">medium bookmark / Raindrop.io</a> |  </p>
<p>Today I want to go through a very common problem for designers: the <strong>UX of Login, Register and Password Recovery</strong>. This problem affects a lot the exit page rate and, of course, conversions.</p>
<p>There are two cases that you should consider:</p>
<ul>
<li>websites e-commerce, where the user data can be very important;</li>
<li>website and web apps where user informations can be optional.</li>
</ul>
<p>The<strong> UX of Login and Registration </strong>is always painful. Nobody loves registering on a new site by filling forms, check and validate emails, invent new passwords that follow strictly rules.</p>
<p>How many times does it happen where you don’t remember the password used during a registration process? I do forget it a lot of time and need to recover it.</p>
<p>On mobile devices, the <strong>user experience of login and registration</strong> is more painful than on desktop. That’s because the user has to switch apps in order to confirm the email, or switch keyboard in order to find special characters.</p>
<p>There is a <a href="http://dl.acm.org/citation.cfm?doid=2639189.2639218">study carried out at University of Munich</a> that shows that, on mobile, people tend to spend double the time to enter a password and, at the same time, they create weaker passwords compared to on the desktop.</p>
<h3>How to Improve Registration UX</h3>
<h3>1 — Describe the benefits of registration to the user</h3>
<p>What do people get by creating an account? What benefits do they get by registering?Example:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*XkuqB1nbDPjyTXEF.png" alt="0*XkuqB1nbDPjyTXEF.png"></div>
</div>
<h3>2 — Add alternative methods of registration</h3>
<p>It’s a way to be able to register more quickly. You can use social logins or google.</p>
<p>Avoid typing and remembering passwords; it’s a good way to improve this process. Even if there are users that prefer the standard email registration.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*xP2M18d1oFmsZD8a.png" alt="0*xP2M18d1oFmsZD8a.png"></div>
</div>
<h3>3 — The registration form should have only the minimum amount of information</h3>
<p>Less is more! From a UX point of view, asking for email and password should be enough.</p>
<p>Avoid asking, at this stage, info like gender, date of birth or other informations that are not essential. You can always ask the user to add more info in the profile page.</p>
<h3>4 — Do not repeat fields</h3>
<p>Just don’t repeat the fields in a registration form: e.g. two password fields, two email fields, etc.</p>
<h3>5 — Do not ask users to confirm their registration through email</h3>
<p>This step is very important.</p>
<p>For some companies is very important to validate the users in the platform.</p>
<p>Consider that you can always validate them by sending the email but let them do it later and use the system now with all the functionalities. The validation process via email can be done during the next days.</p>
<p>In the case you must confirm credentials, do so using other services that avoid the user having to switch applications. A good practice is the message validation: the user will receive a code by sms that can be easily typed without switching applications (on mobile) or switching webpage (on desktop).</p>
<p>Switching context is a bad practice in UX. The user can get disoriented which can raise roadblocks that ultimately may prevent them from attaining their original goal.</p>
<h3>How to Improve Password UX</h3>
<p>Improve password in UX is a topic that I wanted to separate from the others.</p>
<p>Password are really painful in UX.</p>
<h3>6 — Don’t use too many security rules</h3>
<p>How many times did you get bored by inventing “secure” passwords? How many times could you not use your “most used” password on a website because it doesn’t include a symbol or a number?</p>
<p>I think that security is very important today on websites. Reasearching on over 50 websites I discovered that 90% of them are using only two or three password constraints and they haven’t have password security issues during the last years.</p>
<p>I really recommend the use two or three of the following rules for your website:</p>
<ul>
<li>Password must contain numbers;</li>
<li>Password must contain uppercase letters;</li>
<li>Password must have at least one @#$ symbol;</li>
<li>Length must be greater than 8 characters;</li>
<li>Password should not contain strings;</li>
<li>Password must not contain repetitions.</li>
</ul>
<p>Not all of them</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*jIFWCoCsE1HSJ454.png" alt="0*jIFWCoCsE1HSJ454.png"></div>
</div>
<h3>7 — Add the option to show/hide password</h3>
<p>Giving this option to the user is very good in UX. The user make fewer mistakes while they can see what are they typing.</p>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*0sv_QXDIH1AJMkIH.png" alt="0*0sv_QXDIH1AJMkIH.png"></div>
<h3>8 — Don’t ask the user to type twice the password</h3>
<p>As I said above, in the registration UX section, just don’t repeat fields in a form.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*A65wFN_ml4P5PpKA.png" alt="0*A65wFN_ml4P5PpKA.png"></div>
</div>
<h3>9 — Add a Password Strength Meter</h3>
<p>Today there are many simple JS scripts that can be easily added to your website and that can improve the UX of the password field.</p>
<p>With this script the user can see the level of security in real time and with visual helpers (like colours: green, yellow, red).</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*CkECNXWvLqqZSmVU.jpg" alt="0*CkECNXWvLqqZSmVU.jpg"></div>
</div>
<h3>10 — Show password constraints upfront and update it in real time</h3>
<p><a href="https://login.mailchimp.com/signup/?source=website&amp;pid=GAW">Mailchimp </a>has this nice feature. I simply love it.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*8ljnOkJTE5K1GICa.png" alt="0*8ljnOkJTE5K1GICa.png"></div>
</div>
<h3>How to Improve Login UX</h3>
<p>Improve the UX of login is the last part of this article.</p>
<h3>11 — Use Social Login</h3>
<p>This is the same idea of the Social Registration.</p>
<h3>12 — Allow people to use fingerprint authentication to login.</h3>
<p>With this method you can reduce pain from the login process. It can be done with TouchID, as 80% of the smartphones allows that nowadays.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*q36wGyojvNGWiYvc.jpg" alt="0*q36wGyojvNGWiYvc.jpg"></div>
</div>
<h3>13 — Add the option to show/hide password</h3>
<p>The same idea of what I said above in the registration section.</p>
<p>However, showing the password doesn’t need to be the default option. That’s because the user can feel unsecure.</p>
<p>My advices is to cover the password with the classic symbol “*”, and let the user decide to show/hide.</p>
<h3>14 — Include a Forgot password? link</h3>
<p>Rarely used passwords are forgotten, and recovering them should be available on any login process.</p>
<p>This is how the optimal password recovery process should work:</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/0*p17wQtYI_7Jeu9Fa.png" alt="0*p17wQtYI_7Jeu9Fa.png"></div>
</div>
<h3>15 — Login without password</h3>
<p>Few companies are trying to innovate this process by skipping the insert password field.</p>
<p>How can we do that? Few example:</p>
<ul>
<li>With google authenticator: <a href="https://support.google.com/accounts/answer/1066447?hl=en">link</a></li>
<li>Sms identification number: for example with <a href="https://www.twilio.com/use-cases/two-factor-authentication">Twilio</a></li>
<li>Give the user an extra option in case they don’t want to type the password: “Magic Link” from Slack is a good examples and you can integrate to your website using <a href="https://auth0.com/blog/how-to-implement-slack-like-login-on-ios-with-auth0/">Auth0</a></li>
<li>Biometric authentication: this is the most innovative piece of this article. For sure it will be the future of UX for Login and Registration. Some examples are: voice recognition, facial scans, fingerprints, eye scans, hand geometry, etc.</li>
</ul>
<h3>Summary</h3>
<p>Plan the best user experience for Login and Registration on your website:</p>
<ul>
<li>Consider guest checkout if you have an e-commerce;</li>
<li>Make it very simple and minimal if your business is mobile first;</li>
<li>Describe the benefits of registration to the user;</li>
<li>Add social registration and login;</li>
<li>Forms should have only essential fields;</li>
<li>Don’t repeat fields;</li>
<li>Consider different ways to validate the user (email or sms)</li>
<li>Improve password UX: don’t add too many rules and show them upfront, show/hide option, don’t ask twice the password, add a strength meter;</li>
<li>Allow alternative login methods without password: biometric and two-factors authentication;</li>
</ul>
<p>Credits for this article to: <a href="http://www.gartner.com/technology/home.jsp">Gartner</a>, <a href="https://www.nngroup.com/">Nielsen Norman Group</a>, <a href="https://baymard.com/">Baymard</a></p>
<p>Does your ecommerce website need help? Do you want to increase your conversion rate? <a href="https://designexcellent.com/contact/">Book a FREE call with me to discuss about that.</a></p>
<div><a href="https://uxplanet.org/ux-login-register-and-password-the-ultimate-design-guide-f18b1932ee84">https://uxplanet.org/ux-login-register-and-password-the-ultimate-design-guide-f18b1932ee84</a></div>


UX Login, Register and Password: The Ultimate Design Guide By Luca Longo

UX Login, Register and Password: The Ultimate Design Guide By Luca Longo

Top Stories