الگوی ورود 2 صفحه ای، و نحوه رفع آن – مجله Smashing

الگوی ورود 2 صفحه ای، و نحوه رفع آن - مجله Smashing

چرا می بینیم فرم های ورود به چندین صفحه تقسیم می شوند هر کجا؟ به جای تایپ ایمیل و رمز عبور، باید ایمیل را تایپ کنیم، به صفحه بعد برویم و سپس رمز عبور را در آنجا تایپ کنیم. به نظر می رسد این حداقل ناکارآمد است.

بیایید ببینیم که چرا فرم‌های ورود به سیستم در سراسر صفحه‌ها تقسیم می‌شوند، چه مشکلی را حل می‌کنند و چگونه تجربه بهتری برای احراز هویت بهتر UX طراحی کنیم (ویدئو).

این مقاله است بخشی از سریال در حال انجام ما روی الگوهای طراحی همچنین بخشی از کتابخانه ویدیویی 10 ساعته در مورد الگوهای طراحی رابط هوشمند 🍣 و همچنین آموزش زنده UX آینده است. از کد استفاده کنید پرنده برای صرفه جویی 15 درصدی

مشکل فرم های ورود

اگر یک چیز وجود داشته باشد که ما در طول سال ها در UX یاد گرفته ایم، این است که طراحی برای افراد سخت است. این در مورد فرم های ورود نیز صدق می کند. مردم به طرز چشمگیری فراموشکار هستند. آنها اغلب فراموش می کنند که با چه ایمیلی ثبت نام کرده اند یا آخرین بار با چه سرویسی وارد شده اند (گوگل، توییتر، اپل و غیره)

لیستی از گزینه های مختلف ورود
یکی از بسیاری از موارد: گزینه های ورود زیادی برای انتخاب، و مردم معمولا آخرین انتخاب خود را به خاطر نمی آورند. (پیش نمایش بزرگ)

یک ایده این است که به مشتریان یادآوری کنیم که آخرین بار با چه چیزی وارد سیستم شده اند و شاید آن را تبدیل به یک ایده کنیم گزینه پیش فرض. با این حال، به طور مستقیم نشان می دهد که حساب کاربر چیست، که ممکن است یک مشکل حریم خصوصی یا امنیتی باشد:

یک گزینه ورود به سیستم برجسته که یک کاربر آخرین بار از آن استفاده کرده است
برجسته کردن آنچه یک کاربر آخرین بار با آن وارد شده است. نمونه ای از Spectrum (دیگر در دسترس نیست). (پیش نمایش بزرگ)

چه می شود اگر به جای نشان دادن همه گزینه هایی برای همه مشتریان در همه زمان ها، ما ابتدا ایمیل بخواهید، و سپس جستجو کنید که آخرین بار از چه خدماتی استفاده کرده اند و مشتریان را به طور خودکار به مکان مناسب هدایت کنید؟ خوب، این دقیقاً همان ایده است ورود 2 صفحه ای.

با 2-Page-Logins آشنا شوید

شاید قبلاً آنها را دیده باشید. اگر چند سال پیش، اکثر فرم‌های ورود به سیستم ایمیل و رمز عبور را در یک صفحه درخواست می‌کردند، این روزها بیشتر پرسیده می‌شود. فقط برای ایمیل اول. هنگامی که کاربر ادامه را انتخاب می کند، فرم در مرحله ای جداگانه رمز عبور را درخواست می کند. براد برخی از مشکلات این الگو را بررسی می کند.

ورود به سیستم Shopify، فقط درخواست ایمیل
ورود 2 صفحه ای در Shopify: ابتدا ایمیل بزنید، بقیه بعدا. (منبع تصویر: برد فراست) (پیش نمایش بزرگ)

یک دلیل رایج برای تقسیم فرم ورود به صفحه در صفحات است احراز هویت تک ورود (SSO).. شرکت های بزرگ معمولاً از SSO برای ورود به سیستم کارمندان خود استفاده می کنند. با استفاده از آن، کارکنان تنها یک بار در روز وارد سیستم می شوند و تنها از یک مجموعه اعتبار استفاده می کنند که امنیت شرکت را بهبود می بخشد.

پیچیدگی‌های UX ورود به سیستم (SSO)

SSO نیز کمک می کند انطباق با مقرراتو ارائه مجوزهای مناسب به کاربران و لغو آن‌ها بعداً به یکباره بسیار آسان‌تر است. بنابراین، اگر کارمندی را ترک کند، تمام حساب‌ها و داده‌های او به یکباره حذف می‌شوند.

به هم از مشتریان تجاری و هم از مشتریان خصوصی پشتیبانی می کند، شرکت ها از ورود 2 مرحله ای استفاده می کنند. کاربران باید ابتدا ایمیل خود را تایپ کنند، سپس اعتباردهنده بررسی می کند که ایمیل با کدام ارائه دهنده مرتبط است و کاربران را به آنجا هدایت می کند.

قبل و بعد: گزینه های ورود 1 صفحه ای و ورود 2 صفحه ای
مشکلات ورود به سیستم 2 صفحه ای، که به طور منظم توسط جاش وین جمع آوری شده است. (پیش نمایش بزرگ)

کاربران به ندرت این تجربه را دوست دارند. گاهی اوقات، آنها چندین حساب (خصوصی و تجاری) با یک سرویس دارند. همچنین، اغلب وارد سیستم 2 مرحله ای می شود مدیریت تکمیل خودکار و رمز عبور را بشکنید. و برای اکثر کاربران، ورود/گذر سریعتر از ورود دو مرحله ای است.

البته، به طور معمول، وجود دارد صفحات ورود به سیستم اختصاصی شرکت برای کارمندان برای ورود به سیستم، اما آنها اغلب مستقیماً به Gmail، Figma و غیره سر می‌زنند و سعی می‌کنند در آنجا وارد شوند. با این حال، آنها نمی توانند وارد سیستم شوند زیرا باید از طریق SSO وارد شوند.

خط پایین: این الگو برای کاربران SSO به خوبی کار می کند، اما برای کاربران غیر SSO منجر به a می شود UX خسته کننده.

راه حل جایگزین: آشکارسازی مشروط SSO

وجود دارد راهی برای کار کردن این چالش ها (تصویر زیر را ببینید). ما می توانیم از a استفاده کنیم جستجوی تک صفحه ای با فیلدهای ورودی ایمیل و رمز عبور به عنوان پیش فرض. هنگامی که کاربر ایمیل خود را تایپ کرد، متوجه می شویم که آیا احراز هویت SSO فعال است یا خیر.

یک صفحه ورود به بخش، که ابتدا ایمیل و رمز عبور را به طور پیش فرض نشان می دهد
یک جایگزین: ابتدا ایمیل و رمز عبور را به صورت پیش فرض نشان دهید. (پیش نمایش بزرگ) (+ پیش نمایش ویدیو)

اگر Single Sign-On (SSO) باشد برای آن ایمیل فعال شده است، یک گزینه Single Sign-On را نشان می دهیم و به طور پیش فرض روی آن قرار می دهیم. همچنین می‌توانیم قسمت رمز عبور را اختیاری یا غیرفعال کنیم.

صفحه ورود به بخش با گزینه Single Sign-On
یک جایگزین: ابتدا ایمیل و رمز عبور را به صورت پیش فرض نشان دهید. (پیش نمایش بزرگ) (+ پیش نمایش ویدیو)

اگر SSO فعال نیست برای آن ایمیل، ما با ورود به ایمیل/رمز عبور معمولی ادامه می دهیم. این مشکل چندانی ندارد، اما از دردسر برای حساب های خصوصی و تجاری صرفه جویی می کند.

خوراکی های کلیدی

🤔 مردم اغلب فراموش می کنند که با چه ایمیلی ثبت نام کرده اند.
🤔 همچنین سرویس احراز هویتی که با آن وارد شده اند را فراموش می کنند.
🤔 شرکت ها از Single Sign-On (SSO) برای ورود به سیستم شرکتی استفاده می کنند.
🤔 حساب‌های شخصی هنوز برای ورود به ایمیل و رمز عبور نیاز دارند.
✅ ورود 2 مرحله ای: ایمیل بخواهید، سپس به سرویس مناسب هدایت شوید.

✅ ورود 2 مرحله ای جایگزین ورود “اجتماعی” برای کاربران مکرر می شود.
✅ کاربران را به جای ایجاد موانع برای آنها هدایت می کند.
🤔 کاربران همچنان ایمیلی را که با آن وارد شده اند فراموش می کنند.
🤔 گاهی اوقات، کاربران چندین حساب با یک سرویس دارند.
🚫 لاگین های 2 مرحله ای اغلب مدیریت تکمیل خودکار و رمز عبور را خراب می کنند.
🚫 برای اکثر کاربران، ورود/گذر بسیار سریعتر از ورود دو مرحله ای است.

✅ بهتر است: با یک صفحه واحد با لاگین و رمز عبور شروع کنید.
✅ همانطور که کاربران ایمیل خود را تایپ می کنند، متوجه شوید که آیا SSO برای آنها فعال است یا خیر.
✅ اگر اینطور است، یک گزینه SSO-login را نشان دهید و یک پیش فرض برای آن تنظیم کنید.
✅ در غیر این صورت با ورود رمز عادی اقدام کنید.
✅ اگر کاربران باید از SSO استفاده کنند، قسمت رمز عبور را غیرفعال کنید – آن را پنهان نکنید.

بسته بندی

من شخصاً این رویکرد را آزمایش نکرده‌ام، اما ممکن است یک جایگزین خوبی برای لاگین های 2 صفحه ای – هم برای کاربران SSO و هم برای کاربران غیر SSO. البته به خاطر داشته باشید که احراز هویت SSO ممکن یا ممکن نیست نیاز به رمز عبور دارید، زیرا گاهی اوقات ورود از طریق Yubikey یا Touch-ID یا اشخاص ثالث (به عنوان مثال، OAuth) اتفاق می افتد.

همچنین، در نهایت، کاربران قفل خواهند شد. این فقط به زمان بستگی داره. پس استفاده کن لینک های جادویی برای بازیابی رمز عبور یا بازیابی دسترسی، اما آن را به عنوان یک گزینه ورود به سیستم اجباری نکنید. جابجایی بین برنامه ها کند است و باعث اشتباه می شود. در عوض، کاربران را تشویق کنید تا 2FA را فعال کنند: هم قابل استفاده و هم امن است.

و از همه مهمتر، جریان ورود خود را تست کنید با ابزارهایی که مشتریان شما به آنها اعتماد دارند. اگر برای ورود به سیستم به مدیران رمز عبور یا ابزارهای امنیتی اعتماد کنند، ممکن است تعجب کنید که تجربه آنها چقدر شکسته است. همه موفق باشید!

منابع مفید

با الگوهای طراحی رابط هوشمند آشنا شوید

اگر به بینش های مشابه در مورد UX علاقه مند هستید، نگاهی به آن بیندازید الگوهای طراحی رابط هوشمند، ما دوره 10 ساعتی ویدیویی با 100 نمونه عملی از پروژه های واقعی – با آموزش زنده UX در اواخر امسال. همه چیز، از فهرست‌های کشویی تا جداول پیچیده سازمانی – با 5 بخش جدید هر سال. پرش به یک پیش نمایش رایگان.

الگوهای طراحی رابط هوشمند
با الگوهای طراحی رابط هوشمند، دوره ویدیویی ما در زمینه طراحی رابط و UX آشنا شوید.

100 الگوی طراحی و نمونه های واقعی.
دوره 10h-video + آموزش زنده UX. پیش نمایش رایگان.

سرمقاله Smashing
(Yk)

منبع: https://smashingmagazine.com/2024/06/2-page-login-pattern-how-fix-it/