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

۱- پیدا کردن ارزش پیشنهادی

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

فرم ثبت نام لینکدین
فرم ثبت نام لینکدین

۲- به وضوح نشان دهید که کجا باید ورود کنند.

هنگامی که یک کاربر به یک وبسایت رسید، باید به وضوح نشان دهید که از کجا میتواند ثبت نام یا ورود کند. بخصوص هنگامی که ورود دکمه CTA شما می باشد.

وضوح در دکمه ورود
وضوح در دکمه ورود

۳- نمایش فیلد ورود

اگر در وبسایت شما، فرم ورود اولویت دارد، آن را در نگاه اول به کاربر نمایش دهید. مشابه مسیری که فیس بوک پیش برده است.

فرم ثبت نام فیسبوک
فرم ثبت نام فیسبوک

۴- تفاوت واضح بین دکمه ثبت نام و ورود (اولویت بندی بر اساس وزن بصری)

همه افراد نمیتوانند تفاوت بین دکمه ثبت نام و ورد را متوجه شوند بنابراین باید تفاوت آن دو را بصورت واضح بیان کنید. نمونه آن در تصویر زیر قابل مشاهده است.

نکات مهم در طراحی فرم ورود و ثبت نام
نمونه تفاوت فرم ورود و ثبت نام

۵- اجازه ورود و ثبت نام با استفاده از شبکه های اجتماعی

دسترسی دادن به کاربران برای ثبت نام و ورود به وسیله شبکه های اجتماعی نظیر فیسبوک و گوگل پلاس و … . این باعث می شود کاربر راحت تر ثبت نام و ورود کند و دیگر نگران هدر رفتن زمان و فراموشی رمز عبور خود نباشد.

ورود با شبکه های اجتماعی
ورود با شبکه های اجتماعی

۶- استفاده از ایمیل یا شماره موبایل بعنوان نام کاربری

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

استفاده از ایمیل بجای نام کاربری
استفاده از ایمیل بجای نام کاربری

۷- بصورت اتوماتیک پیش شماره کشور را وارد کنید.

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

ISD
ISD

۸- دکمه ثبت نام و ورود

در صفحه ثبت نام، دکمه “اگر حساب کاربری دارید وارد شوید” را قرار دهید تا اگر قبلا ثبت نام کرده است به آسانی بتواند وارد شود. همچنین این دکمه را باید در صفحه ورود هم قرار دهید.

۹- تمرکز بر فیلد اول

“Auto focus” یک قابلیت در وب است که میتوانید این امکان را به کاربر بدهید تا بدون کلیک بر روی فیلد اول، با تایپ کردن اطلاعاتش، اطلاعات آن در فیلد اول قرار گیرد.

Auto Focus
Auto Focus

۱۰- دکمه ذخیره اطلاعات ورود

دکمه ذخیره اطلاعات کاربر را قرار دهید تا کاربران نیاز نباشد اطلاعات ورودشان را در هر مرتبه وارد نمایند.

۱۱- دریافت اطلاعات از سرویس های گوگل و فیسبوک و نظیر آن

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

دریافت اطلاعات از سرویس های گوگل
دریافت اطلاعات از سرویس های گوگل

۱۲- Placeholders

از متغییر ها برای فهماندن اطلاعات مورد نیاز برای ورودی کاربر استفاده کنید.

مشابه Mobile Number و At least 6 character
مشابه Mobile Number و At least 6 characte

۱۳- اجازه نمایش رمزعبور به کاربر

به کاربرتان اجازه دهید تا بتواند پسوردی که وارد کرده است را مشاهده کند تا حس ترس از اشتباه وارد کردن یک واژه اشتباه را نداشته باشد.

Show Password
Show Password

۱۵- اگر Caps Lock کاربر روشن بود به آن هشدار دهید.

Warning: CAPS Lock is on
Warning: CAPS Lock is on

۱۵- استحکام پسورد در صورت مهم بودن اطلاعات ورود حساب کاربری

پسورد های پیچیده برای هک سخت تر است پس به کاربرانتا استحکام پسوردی که وارد میکنند را نشان دهید.

استحکام پسورد
استحکام پسورد

۱۶- پیغام خطا

نمایش پیغام خطای مناسب و واضح تا کاربر راه حل آن را به اسانی پیدا کند.

پیغام خطای مناسب
پیغام خطای مناسب

امیدوارم که مفید واقع شده باشه!

ارسال یک پاسخ

لطفا دیدگاه خود را وارد کنید!
لطفا نام خود را در اینجا وارد کنید