راهنمای طراحی یک لاگین موفق

طراحی برای صفحات ورود/ثبت‌نام در ظاهر شاید ساده باشد؛ اما رسیدن به یک ورود موفق که کاربران را در سریع‌ترین زمان ممکن به هدف خود برساند بسیار چالش برانگیز است. طراحی یک فرایند ورود موفق و بدون استرس برای کاربران نیازمند آزمون و خطای بسیاری‌ست. در زیر نکات مهم را لیست کرده‌م تا بتوانیم در هنگام طراحی یک چک‌لیست مطمئن داشته باشیم.

فرایند ورود (login) چیست؟

فرایند ورود به تمام تجربه‌ای که کاربر برای وارد شدن به اپلیکیشن/سرویس/وبسایت برای احراز هویت خود در سیستم طی می‌کند می‌گویند؛ به صورت ساده‌تر تمام صفحات و interactionهایی که کاربر در طی مسیر ورود خود با آن‌ها مواجه می‌شود فرایند ورود رو تشکیل می‌دهند.

• به طور معمول این فرایند شامل یک صفحه ورود کلی، یک فرایند برای بازپس‌گیری رمزعبور (فراموشی رمزعبور)، عوض کردن رمزعبور و روش‌های دیگر برای ورود به سیستم (مثل ورود از طریق گوگل، فیسبوک و…) می‌شود.
• هدف نهایی فرایند ورود مطمئن شدن از ورود موفق و بی‌دردسر کاربران به سیستم است.

قصد ورود (Login intent) چیست؟

کلیدی‌ترین قسمت تصمیم‌گیری در هنگام ورود کاربر، قصد کاربر است. به این معنی که چه چیزی باعث می‌شود کاربر ترغیب به ورود در سیستم شود.

قصد ورود (Login intent) به معنی دلیل تمایل کاربر به وارد شدن به فرایند ورود است، اگر بخوام بلند بلند فکر کنم در حقیقت ی کلمه‌ای مثل من می‌خواهم ورود کنم، من میخواهم ایمیل‌هایم را چک کنم، می‌خواهم سفارش‌های قبلیم را ببینم و… است.

وقتی که کاربر در صفحه ورود است ممکن است با احساس lack of intent نیز مواجه شود به این معنی که هیچ دلیل برای ورود به اپلیکیش نمی‌بیند و در صورت ورود چیز خاصی نصیب‌ش نخواهد شد. اگر بخوام دوباره به صورت بلند بلند فکر کنم، به این صورت است که فکر نمی‌کنم چیز خاصی باشه، بعدا هم میشه چکش کرد، چقدر سخته ولش کن (و صفحه رو می‌بند) و… که این به این معنی‌ست که فرایند ورود برای کاربر به شدت سخت/مبهم است.

به همین ترتیب، یکی از سنجه‌هایی که می‌توان برای درک موفقیت بازطراحی یک فرایند ورود در نظر گرفت، بالا بردن نرخ ورود کاربران است.

در زیر چند نکته‌ی کلی برای رعایت در دیزاین یک فرایند ورود موفق را مرور خواهیم کرد.

۱. تجربه‌های مشابه را طراحی کنید.

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

اما شاید بپرسید که پس خلاقیت در طراحی کجا رفته، این بود دیزاینر بودن؟

در حقیقت فرایند ورود یکی از حساس‌ترین نقاط برخورد (touchpoint) های کاربر با نرم‌افزار است، در این نقطه میشه به راحتی برند خودمون رو پرزنت کنیم، به صورت بصری از رنگ برند برای دکمه ورود استفاده کنیم یا از تصاویر شرکت، تصویرسازی‌ها با زبان بصری خودمون و یا لحن برند خودمون برای copyهاش استفاده کنیم. اما باید بالانس بودن این قضیه و شلوغ نکردن صفحه رو هم در نظر داشته باشیم؛ یادمون نره که هدف اصلی کاربر در این صفحه ورود به سیستم است و المان‌های دیگر در صفحه نباید noise بسیار زیاد ایجاد کند.

? قانون حیاتی: هرچه که تایم کمتری رو کاربر در صفحه ورود سپری کند بهتر است، در حقیقت با ورود سریع به اپلیکیشن کاربر به سمت کشف ارزش‌های اصلی اپلیکیشن و مفید بودن محصول شما می‌رود.

۲. برای تمرکز کاربر دیزاین کنید

در قانون حیاتی گفتیم که هرچه کاربر زمان کمتری رو در فرایند ورود صرف کند بهتر است، در همین راستا صفحه لاگین و یا فرایند بازگیری رمزعبور باید تمام تمرکز کاربر را همراه داشته باشد.

• بهتر است که فرم ورود در مرکز صفحه باشد، اگر قرار است که آن را در سمت چپ یا راست قرار بدهید، سعی کنید از طریق المان‌های بصری وزن خوبی را روی آن سمت ایجاد کنید.
• در راستای تجربه‌نویسی (ux writing) کاربر را با نوشته‌های طولانی و فنی و بیهوده اذیت نکنید، سعی کنید به صورت right to the point به کاربر بگویید که چه کاری باید انجام دهد. برای مثال «رمزعبور خود را وارد کنید» بجای اینکه بنویسید «اینجا محل وارد کردن رمزعبور شماست»، نوشته‌های بامزه، فنی و اصطلاحات جایی در فرایند ورود ندارند.
• در فرایند بازگیری/فراموشی رمزعبور بهتر است که این فرایند پیچیده (فرم‌های متعدد) را در چند مرحله بشکنید، بهتر از است که از کاربر بخواهید در هر مرحله فقط یک کار مهم را انجام دهد. برای مثال: شماره تلفن خود را وارد کنید، سپس در مرحله بعد کد را بخواهید.

نکاتی برای نگه‌داشتن فرم لاگین در مرکز توجه کاربر:

• فرم ورود می‌تواند در یک مدال، یک sheet و یا یک صفحه جدا (separated page) باشد.
• از کارت‌ها برای این فرم استفاده کنید
• اکشن‌های مهم را از اکشن‌های اصلی جدا کنید (اهمیت دکمه ورود از دکمه فراموشی رمزعبور بیشتر است)
• از یک دکمه بزرگ و برجسته (اصطلاحا در چشم کاربر به راحتی دیده شود) استفاده کنید.
• سعی کنید اکشن‌های ثانویه (فراموشی رمزعبور یا خواندن قوانین و شرایط) را در کمترین تعداد خود نگه‌دارید - به صورت کلی از المان‌ها و فرایندهای اضافی که هدف اصلی ورود کاربر نیستند دوری کنید.

۳. به کاربر یک فیدبک واضح/شفاف بدهید و در صورت اشتباه رفتن یک مسیر، سعی به کمک کردن آن کنید.

در هر مرحله از فرایند ورود، کاربر ممکن است که مسیری را اشتباه طی کند، برای مثال ممکن است که فرمت ایمیل را درست تایپ نکند یا پسورد خود را اشتباه وارد کنید و یا ارورهای سمت سرور بگیرد (connection errors) - تمامی این حالات باعث می‌شود که login intent کاهش پیدا کرده و در نهایت کاربر از فرایند خارج شود (یک تجربه بد را برای او رقم بزند). برای همین مهم است که در طراحی خود feedback را در نظر بگیرید. در صورت اشتباه وارد کردن ایمیل به او اعلام شود که ایمیل خود را اشتباه وارد کرده است.

نکته: متاسفانه در بسیاری از وبسایت‌های دولتی و بعضی دیگر از وبسایت‌های قدیمی مشاهده می‌شود که در صورت وارد کردن یکی از فیلدها به صورت کلی یک ارور به کاربر نشان داده می‌شود که «نام‌کاربری یا رمزعبور اشتباه است» یا در صورت وارد نکردن کپچا (که به علت مشکلات اینترنت دیرتر load می‌شود) ارور «خطا در ورود» نمایش داده می‌شود. باید دقت داشت به عنوان طراح محصول از تیم فنی درخواست کرد که برای هر field یک feedback ارائه نمایند و کاربر به صورت واضح راهنمایی نمایند.

نکاتی برای راهنمایی بهتر کاربر در فرایند ورود:

• در صورت موفق نشدن یک در یک مسیر، سعی در راهنمایی او به استفاده از مسیرهای دیگر کنید. (مثال گوگل رو اینجا بزار)
• با توجه به funnel ورودی کاربر به سیستم، راحت‌ترین مسیر را برای ورود را به او پیشنهاد دهید؛ برای مثال کاربرانی که از گوگل آمده‌اند را تشویق به ورود با گوگل کنید
• با توجه به context کاربران، بهترین راه‌ها را برای آن‌ها تهیه کنید.

۴. در صورت امکان، سعی کنید از فرم‌های گذشته استفاده کنید

شاید معنی این عنوان را متوجه نشده باشید اما این بسیار مهم است که به کاربر یادآوری کنید که او را در سیستم میشناسید و یک تجربه خوب برای فراموشی رمزعبور بسازید. برای مثال وقتی که کاربری رمز خود را فراموش می‌کند و روی فراموشی رمز عبور می‌زند به صورت auto-fill ایمیل‌ش را که در مرحله قبلی وارد کرده است در فیلد پر کنید.

نکانی برای حفظ اطلاعات کاربر:

• از ویژگی (feature) من را به خاطر بسپار استفاده کنید
• پر کردن فیلدها از اطلاعات قسمت قبلی مثل مثال پر کردن ایمیل در قسمت recovery password
• در صورت داشتن ورود دو مرحله‌ای می‌توان به کاربر یادآوری کرد که هر دو آپشن ورود از طریق شماره تلفن و از طریق ایمیل را دارد و در آخرین باری که وارد شده از روش x استفاده کرده است. این به صورت کلی به او این حس را می‌دهد که به سیستم تعلق دارد. (مثال گوگل (اخرین گوشی که استفاده کردی)
• در سیستم‌های enterprise که امکان لاگین با چند اکانت وجود دارد؛ اگر بیشتر از یک اکانت وجود داشت می‌توان به کاربر نشان داد که مایل است با کدام اکانت وارد شود (بجای اینکه با اخرین اکانتی که لاگین بوده است فرایند را طی کنیم)

۵. طراحی/توسعه چندین روش برای ورود انعطاف پذیری را برای کاربر بالا می‌برد.

هیچ راه مشخصی برای همه بیزینس‌ها نیست؛ اما تهیه چندین روش برای ورود کاربر می‌تواند کمک کند که login intent کاربر افزایش یابد، بهتر است که حداقل یک یا دو روش بجز ورود از طریق نام‌کاربری و رمزعبور در اختیار کاربر قرار داد؛ این می‌تواند ورود به همراه otp از طریق موبایل/ایمیل، یا ورود بایومتریک و در ساده‌ترین حالت ورود از طریق social accountها باشد.

? نکته حیاتی: اضافه کردن بیشتر از ۲ روش لاگین ممکن است باعث سردرگمی کاربر شود و فرایند لاگین را برای او سخت کنید؛ سعی کنید با توجه به نوع کاربران خود بهترین روش‌ها رو پیدا کردن و ۲تای آن‌ها برگزینید. برای مثال اگر کاربری را از طریق ایمیل مارکتینگ جذب کردید؛ خیلی بهتر است که لاگین از طریق ایمیل را به او پیشنهاد بدهید.

فرایندهای لاگین بدون پسورد بسیار سریع‌تر و محبوب‌تر از فرایندهای قدیمی همراه با پسورد هستند؛ در صورت ارائه لاگین به همراه کد otp (اس‌ام‌اس) حتما دسترسی خواندن اس‌ام‌اس را گرفته و کد ارسال شده را auto-fill کنید؛ به صورت کلی باید از هزینه‌های interactionیی که کاربر باید انجام دهد کم کنید.

۶. آگاه باشید که فرایند لاگین؛ باید در کاربر احساس امنیت ایجاد کند.

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

? نکته حیاتی: در نظر داشته باشید که با اینکه باید فرایند ورود را ساده کرد اما باید به اندازه کافی امن باشد که ادم‌های بد را از سیستم دور کند. برای همین در فرایند طراحی مدام با تیم فنی صحبت کرده و در صورت حذف یک اپشن از تاثیر آن در فرایندهای امنیتی مطمئن شوید.

یکی از راه‌هایی که می‌توانید به کاربر احساس امنیت را القا کنید این است که از او بخواهید ورود دو مرحله‌ای را فعال کند یا او را تشویق به set کردن رمزعبور‌های سخت کنید.

۷. سرنخ‌ها را پیدا کنید و کاربران خود را بشناسید

در سطر‌های بالاتر اشاره کرده بودم که فرایند ورود می‌تواند با توجه به نوع کاربران شما برای ان‌ها شخصی‌سازی شود، با توجه به پلتفرمی که دارید روی آن کار می‌کنید می‌توانید متریک‌های مختلفی را برای پیدا کردن رفتار کاربران و نحوه تعاملاتشان با فرایند ورودتان بررسی کنید؛ در زیر به ۴ مورد اشاره می‌کنم:

۱. فانل‌های ورود (Login funnels)

با مدیر محصول‌ها کار کنید تا نقطه‌های مهم در فرایند لاگین را پیدا کنید و نقاطی که کاربران در این فرایند drop off می‌کنند را شناسایی کنید

۲. نقاط ورود به فرایند (Login entry points)

ایا کاربران شما از صفحه از طریق ایمیل وارد صفحه لاگین‌تان می‌شوند، یا از موتورهای جستجو این اتفاق می‌افتد؟ یا هنگامی که درحال بررسی وبسایت به صورت مهمان هستند؟ به صورت کلی باید مسیرهای ورودی به این flow را بررسی کنید تا بتوانید بهترین مدل را برای آن‌ها طراحی کنید.

۳. دیوایس‌های کاربران (known devices)

آیا کاربران بیشتر با موبایل لاگین می‌کنند یا دسکتاپ؟ از چه براوزری استفاده می‌کنند و برای مثال از طریق بررسی این مورد می‌توانید مشخص کنید آیا اضافه کردن لاگین بایومتریک کاربردی خواهد بود یا نه (برای مثال وقتی ۳۰ درصد یوزرهای شما دیوایسی ندارند که سنسور بایومتریک (اثرانگشت/face detection) داشته باشد اضافه کردن این مورد احمقانه‌ست)

۴. گروه‌بندی‌های کاربران (User cohorts)

راه‌های دیگر تفکیک کاربران مثل سن، محل زندگی و یا تایم‌زون‌های آن‌ها در محصولات international می‌تواند کمک کننده باشد (برای مثال در بعضی از کشورها‌ قوانین خاصی برای حفظ اطلاعات کاربر وجود دارد و اشاره کردن به آن‌ها در فرایند ورود می‌تواند کمک‌کننده باشد).

از آن‌جایی که کاربران در این مرحله هنوز وارد نشده‌اند و اطلاعاتی را در سامانه ثبت نکرده‌اند؛ این دیتا‌ها می‌تواند کمک به شناخت بهتر کاربرانتان شود.

نتیجه‌گیری

برای طراحی فرایند لاگین، نکات بالا با در نظر گرفتن context محصول و رفتار کاربرانتان می‌تواند منجرب به طراحی یک تجربه خوب برای کاربران شود. در نظر داشته باشید که همیشه فرایند‌های ورود رقبای خود را بررسی و محدودیت‌های فنی را بررسی کنید.

منبع: +