{"id":72,"date":"2021-06-02T08:49:00","date_gmt":"2021-06-02T08:49:00","guid":{"rendered":"http:\/\/blog.mirobin.com\/?p=72"},"modified":"2021-07-23T20:53:16","modified_gmt":"2021-07-23T20:53:16","slug":"the-journey-of-reset-password-and-my-recovery-frustration","status":"publish","type":"post","link":"https:\/\/www.mirobin.com\/blog\/the-journey-of-reset-password-and-my-recovery-frustration\/","title":{"rendered":"The journey of reset password and my recovery frustration"},"content":{"rendered":"\n<p>This Blog is originally posted on&nbsp;<a href=\"https:\/\/www.linkedin.com\/pulse\/journey-reset-password-my-recovery-frustration-monirul-islam-robin\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" title=\"https:\/\/www.linkedin.com\/pulse\/journey-reset-password-my-recovery-frustration-monirul-islam-robin\/\"><strong>LinkedIn<\/strong><\/a>.<\/p>\n\n\n\n<p>As you heard from my&nbsp;<a href=\"https:\/\/www.mirobin.com\/blog\/purchasing-a-product-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">previous article<\/a>&nbsp;about my experience in purchasing from the online platform, in this article I will be sharing a story about Sign In experience as an old user.<\/p>\n\n\n\n<p>As I am moving from my old phone to the new one, I started to login to all apps that I use regularly, to my new phone. One of my favorite apps is a news-reading app.<\/p>\n\n\n\n<p>Let me go through step by step of my login experience so you can get a feel as a user and visualize the scenario. In each step, I will be sharing my thoughts from the UX point of view. So keep reading!<\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-2 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"760\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start-1024x760.png\" alt=\"Get Start Page\" data-id=\"74\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start.png\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=74\" class=\"wp-image-74\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start-1024x760.png 1024w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start-300x223.png 300w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start-768x570.png 768w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start-1536x1140.png 1536w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/get-start.png 2021w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>As you can see the splash page[01] has this big button to get started. After tapping, the next page[02] offering me to select topics without even signup. That&#8217;s a plus! But since I am an old user I choose to click on the &#8220;Log In&#8221; button to get my account.<\/p>\n\n\n\n<h3>\ud83d\udca1&nbsp;<strong>Key things about Splash screen<\/strong>&nbsp;<\/h3>\n\n\n\n<ul><li>No unnecessary content<\/li><li>No distraction<\/li><li>Use a single color logo<\/li><\/ul>\n\n\n\n<p><em>Now there is a lot of debate about the splash screen necessity. But we are not going to discuss it here.<\/em><\/p>\n\n\n\n<h3><strong>\ud83d\udca1 Key things about Welcome screen<\/strong><\/h3>\n\n\n\n<ul><li>People don&#8217;t like to register for things in the first place without knowing the app due to spam and messages to their inbox. So offering content first then signup later is a good option to get&nbsp;<strong>&#8220;Genuine users&#8221;<\/strong>&nbsp;<\/li><li>To achieve Genuine Users, we have to make sure our guest user know what are the advantages of Sign Up. This is very important!<\/li><\/ul>\n\n\n\n<p>Let&#8217;s get back to the scenario. Once I clicked to the &#8220;Log In&#8221; button it gave me login options[01]. After tapping &#8220;Email&#8221; it asked me to sign-in through my current account I have on my mobile.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-4 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"760\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login-1024x760.jpeg\" alt=\"Onboarding Login\" data-id=\"76\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login.jpeg\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=76\" class=\"wp-image-76\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login-1024x760.jpeg 1024w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login-300x223.jpeg 300w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login-768x570.jpeg 768w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login-1536x1140.jpeg 1536w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/onboarding-login.jpeg 2021w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Honestly, I was expecting the 3rd page where I will put email and password. But that&#8217;s ok since It saved time from typing as we can see it already filled up my email there. This stage I realized I forgot the password. So I took the help of that tiny little text that says &#8220;Forgot username or password? on page 3<\/p>\n\n\n\n<p>The next pages were perfect as expected. Like, send you the reset link to your email address and change your password.&nbsp;<\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-6 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"760\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password-1024x760.jpeg\" alt=\"Reset password\" data-id=\"78\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password.jpeg\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=78\" class=\"wp-image-78\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password-1024x760.jpeg 1024w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password-300x223.jpeg 300w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password-768x570.jpeg 768w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password-1536x1140.jpeg 1536w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/reset-password.jpeg 2021w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>So at this stage, I did everything perfectly and apps asked me to get back to the login page and try to log in again.<\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-8 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"760\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-1024x760.jpeg\" alt=\"Login Failed\" data-id=\"80\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed.jpeg\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=80\" class=\"wp-image-80\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-1024x760.jpeg 1024w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-300x223.jpeg 300w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-768x570.jpeg 768w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-1536x1140.jpeg 1536w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed.jpeg 2021w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>After providing my email and new password this popup showed[2]. Now imagine how I was feeling as a user at this stage. I already invested my time to recover my account, changed my password but no hope. Also, this page is not saying I provided the wrong email or password rather it&#8217;s asking me &#8220;Try again later.&#8221;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3>\ud83d\udca1&nbsp;<strong>Key Problems<\/strong><\/h3>\n\n\n\n<ul><li>It&#8217;s not handling the user&#8217;s wrong actions gracefully.<\/li><li>The error message is ambiguous<\/li><\/ul>\n\n\n\n<p><strong>What if the message delivered like this to the user<\/strong><\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-10 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"562\" height=\"188\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-delivery-message.jpeg\" alt=\"Login-failed-UI\" data-id=\"82\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-delivery-message.jpeg\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=82\" class=\"wp-image-82\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-delivery-message.jpeg 562w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/login-failed-delivery-message-300x100.jpeg 300w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>So for the last time, I thought to try with my user name instead of my email address however that login page only had Email and Password input filed.&nbsp;<\/p>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-12 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"760\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage-1024x760.jpeg\" alt=\"Wrong label but logged in to account.\" data-id=\"84\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage.jpeg\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=84\" class=\"wp-image-84\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage-1024x760.jpeg 1024w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage-300x223.jpeg 300w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage-768x570.jpeg 768w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage-1536x1140.jpeg 1536w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/wrong-login-homepage.jpeg 2021w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Surprisingly it signed in[2]. So it was expecting me to put the username in the email field. How I guessed that? looking at that tiny cute little text saying &#8220;<strong>Forget&nbsp;username&nbsp;or password<\/strong>&#8221; and from my reset email.<\/p>\n\n\n\n<p>But the big question is, Can we have a better approach here? The label should behave as it says. If it is asking email defiantly I will only put an email address right?<\/p>\n\n\n\n<h3>Here are my thoughts about the journey.<\/h3>\n\n\n\n<ul><li>Single wrong labeling can discourage your user from your app within a minute.&nbsp;&nbsp;<\/li><li>Field Labels look very small thing but it&#8217;s very important to&nbsp;<strong>tell the user what the corresponding input field means<\/strong>.&nbsp;<\/li><li><strong>User mistakes are unavoidable. But the product should handle it gracefully.&nbsp;<\/strong>Be clear and specific about the error message as far as we don&#8217;t hurt security.<\/li><\/ul>\n\n\n\n<h3>What I always keep in mind for Form design&nbsp;<\/h3>\n\n\n\n<ul><li>Always try to use a single-column form layout. Everything in left-aligned including the title. But yes as always there is some exceptional.<\/li><li>If the form is long then&nbsp;<strong>divide the form into sections<\/strong>&nbsp;(For example Step 1. Company info. Step 2. Bank details)<\/li><li>If all fields are mandatory then, no Asterisk icon (*) sign is needed<strong>.&nbsp;<\/strong>if few (1\/2) fields are mandatory then use Asterisk icon (*) for those. And if few (1\/2) fields are optional then say (optional) to those fields only. see the image below to get more clear idea.<\/li><\/ul>\n\n\n\n<figure class=\"is-layout-flex wp-block-gallery-14 wp-block-gallery columns-1 is-cropped\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"529\" src=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740-1024x529.jpeg\" alt=\"Form UI\" data-id=\"87\" data-full-url=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740.jpeg\" data-link=\"https:\/\/www.mirobin.com\/blog\/?attachment_id=87\" class=\"wp-image-87\" srcset=\"https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740-1024x529.jpeg 1024w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740-300x155.jpeg 300w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740-768x396.jpeg 768w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740-1536x793.jpeg 1536w, https:\/\/www.mirobin.com\/blog\/wp-content\/uploads\/2021\/07\/1592495345740-2048x1057.jpeg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<ul><li>Take good care of Date, Dropdown list(if it is long).&nbsp;<strong>Don&#8217;t mix the Checkbox with the Radio button.<\/strong>&nbsp;Their purpose are different.<\/li><li>Be specific to error text.&nbsp;<strong>Don&#8217;t blame your user. be grateful<\/strong>.<\/li><li>Avoid showing error after submitting.<\/li><li>Always do User Testing. No one there? Ask me I will do it for you. \ud83d\ude00<\/li><\/ul>\n\n\n\n<p>What do you do to avoid reset password? or want to add anything about Form Design?<\/p>\n\n\n\n<p>Add your thoughts in the comments below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This Blog is originally posted on&nbsp;LinkedIn. As you heard from my&nbsp;previous article&nbsp;about my experience in purchasing from the online platform, in this article I will be sharing a story about Sign In experience as an old user. As I am moving from my old phone to the new one, I started to login to all &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.mirobin.com\/blog\/the-journey-of-reset-password-and-my-recovery-frustration\/\"> <span class=\"screen-reader-text\">The journey of reset password and my recovery frustration<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":73,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[11],"tags":[26,28,34,33,32,31,30,29],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/72"}],"collection":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":12,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/72\/revisions\/208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/media\/73"}],"wp:attachment":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}