خلق تجربه خوب ورود و ثبت‌نام

تا حالا در چند تا سایت فروشگاهی ثبت‌نام کرده‌اید؟

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

آیا شده که در همین مرحله از سایت خارج شده باشید؟

طراحی یک فرآیند ثبت‌نام و ورود ساده و روان برای سایت‌های فروشگاهی اهمیت زیادی دارد.

برای بازطراحی فرم ثبت‌نام و ورود، لازم است به تمام جزئیات توجه کنیم. ابزارهایی مثل کلریتی یا هات‌جر می‌توانند به ما کمک کنند تا مشکلات موجود را شناسایی کنیم و تجربه کاربری بهتری ارائه دهیم. پیش از شروع بازطراحی، باید اشاره کرد که دیالوگ ورود و ثبت‌نام فروشگاه دیجی‌شهر نکات مثبتی داشت، مانند طراحی با توجه به فضای کیبورد، استفاده از کیبورد عددی، پذیرش اعداد فارسی و انگلیسی، جداسازی شماره تلفن برای اسکن راحت‌تر و پذیرش قوانین و مقررات به‌صورت جمله خبری به جای چک‌باکس‌. همچنین ارسال کد تایید ۴ رقمی برای کوتاه‌تر کردن مراحل ثبت‌نام، از دیگر ویژگی‌های مثبت آن بود. برای درک بهتر اثرات مثبت این نکات، می‌توانید مقاله «بررسی موردی طراحی Login Page پف‌فیلم» را مطالعه کنید.

اما سؤال اصلی این است که چگونه می‌توانیم این تجربه را بهبود بخشیم؟

برای پاسخ به این سؤال، ابتدا باید مشکلات موجود را شناسایی می‌کردیم.

داستان اول: گیج شدن بین ورود یا ثبت‌نام

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

تمام این ابهام‌ها را می‌توانیم با یک تیتر شفاف مثل «ورود یا ثبت‌نام» برطرف کنیم تا کاربر بداند که در مسیر اشتباهی قرار نگرفته است. پس از وارد کردن شماره تلفن و تشخیص اینکه کاربر با این شماره ثبت‌نام کرده یا خیر، تیتر دیالوگ به «کد تایید ثبت‌نام» یا «کد تایید ورود» تغییر می‌کند تا کاربر به‌طور واضح بفهمد در چه مرحله‌ای قرار دارد. این روش مطابق با اصل اول اصول ۱۰گانه نیلسن نورمن است.

داستان دوم: مشکل در بستن دیالوگ

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

داستان سوم: مشکلات دریافت کد تایید

گاهی اوقات دریافت پیامک کد تایید به دلیل مشکلات اپراتورهای موبایل به تأخیر می‌افتد. بنابراین، کاربر پس از ۲ دقیقه انتظار و حتی زدن دکمه «دریافت مجدد»، ممکن است نتواند وارد حساب کاربری‌اش شود. در این شرایط، طبق اصل هفتم نیلسن نورمن، داشتن گزینه‌های جایگزین برای دریافت کد و ورود، به تجربه کاربری کمک می‌کند. به عنوان مثال، اضافه شدن گزینه «دریافت کد از طریق تماس» می‌تواند مفید باشد. اما اگر گزینه‌های «ورود»، «دریافت مجدد پیامک» و «دریافت کد از طریق تماس» به درستی اولویت‌بندی نشوند، ممکن است تجربه کاربری پیچیده شود. در حالی که بدون زدن دکمه «ورود»، صحت‌سنجی کد انجام می‌شود و در صورت صحیح بودن، ورود به سیستم اتفاق می‌افتد.
بنابراین، در یک نمونه طراحی، دکمه «ورود» را حذف کردم و دکمه اصلی را «دریافت مجدد پیامک» قرار دادم. در نمونه دیگر، همچنان دکمه «ورود» وجود داشت و دو دکمه «دریافت کد با پیامک» و «دریافت کد با تماس» با اولویت یکسان در نظر گرفته شدند. نتایج تست‌های کاربردپذیری که در Maze انجام شد، نشان داد که در نمونه اول، نتایج کلیک و نرخ تبدیل بهتر بود. همچنین در تست‌های واقعی، از کاربران خواسته شد که پس از وارد کردن شماره و زدن دکمه دریافت کد تایید، در صورت عدم دریافت پیامک، «چه کار می‌کنید؟» در نمونه اول، بیشتر کاربران گزینه تماس را انتخاب می‌کردند، اما در نمونه دوم بیشتر روی پیامک کلیک می‌کردند و سپس به دنبال راه‌حل بعدی می‌گشتند. همچنین، کلیک روی کلمه «دریافت مجدد» که اصلاً قابل کلیک نبود، به وضوح یک اشتباه و گیج‌کننده بود.

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

فرضیه‌سازی

در فاز اول، تغییرات در تیتر و نحوه بسته شدن دیالوگ اضافه شد و در فاز دوم ارسال کد با تماس اجرا شد.

در پیگیری نتایج اجرای فاز اول تغییرات، به میزان سلامت مسیر ثبت‌نام و ورود توجه خواهد شد. پیش‌بینی می‌شود که میزان کلیک‌های اشتباه کاهش پیدا کند و در وضعیت بهینه، تعداد کلیک روی ورودی شماره موبایل، دکمه دریافت کد تایید و ورودی OTP نزدیک به هم باشند که به معنی بالا بودن نرخ تبدیل است.

در تصویر زیر، نتایج کلیک در دو بازه یک هفته‌ای مقایسه شده و نشان می‌دهد که تعداد کلیک روی دکمه «دریافت کد» و ورودی شماره موبایل، به یکدیگر نزدیک‌تر شده است. بیشتر بودن تعداد کلیک روی دکمه به نسبت ورودی، که قبلاً اتفاق می‌افتاد، می‌تواند دلایل مختلفی داشته باشد:

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

سهم کلیک روی ورودی OTP که هدف از این دیالوگ است بیشتر شده و به معنی کاهش اشتباهات در کلیک است.

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