شناسه

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

بیایید به فرم ثبت نام و نحوه کمک به کاربران برای ثبت نام در وب سایت خود نگاه کنیم.

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

به کاربران کمک کنید جزئیات حساب خود را پر کنند

می توانید با استفاده از ویژگی autocomplete مناسب به کاربران کمک کنید تا جزئیات حساب خود را پر کنند. از autocomplete="email" برای فیلد ایمیل و autocomplete="new-password" برای قسمت new-password استفاده کنید.

درباره تکمیل خودکار کنترل‌های ورودی بیشتر بیاموزید.

همچنین می توانید با ارائه <button> رمز عبور به کاربران کمک کنید تا یک رمز عبور امن وارد کنند.
درباره الگوی آشکار-گذرواژه بیشتر بیاموزید.

از امن بودن فرم ثبت نام خود اطمینان حاصل کنید

هرگز رمزهای عبور را در متن ساده ذخیره یا انتقال ندهید. حتماً رمزهای عبور را Salt و Hash کنید—و سعی نکنید الگوریتم هش خود را اختراع کنید .

احراز هویت چند عاملی را ارائه دهید، به خصوص اگر داده های شخصی یا حساس را ذخیره می کنید. بهترین شیوه های SMS OTP و فعال کردن احراز هویت قوی با WebAuthn نحوه اجرای احراز هویت چند عاملی را توضیح می دهد.

اطمینان حاصل کنید که کاربران از رمزهای عبور به خطر افتاده استفاده نمی کنند. به عنوان مثال، از API Have I Been Pwned برای شناسایی گذرواژه‌های به خطر افتاده استفاده کنید و به کاربران خود پیشنهاد دهید رمز عبور دیگری را وارد کنند یا اگر رمز عبور آنها در معرض خطر قرار گرفت به آنها هشدار دهید.

به کاربران کمک کنید وارد سیستم شوند

بیایید ببینیم چگونه یک فرم ورود به سیستم بسازیم تا مطمئن شویم کاربران می توانند به راحتی وارد وب سایت شما شوند.

مکان دکمه های ثبت نام و ورود به سیستم را مشخص کنید. اطمینان حاصل کنید که فرم شما در دستگاه های لمسی قابل استفاده است:

  • اندازه هدف ضربه زدن دکمه ها حداقل 48 پیکسل است.
  • font-size عناصر فرم شما به اندازه کافی بزرگ است ( 20px تقریباً در موبایل است).
  • فضای کافی ( margin ) بین کنترل‌های فرم وجود دارد و ورودی‌ها به اندازه کافی بزرگ هستند (حداقل padding: 15px در تلفن همراه).

به کاربران کمک کنید ایمیل و رمز عبور خود را پر کنند

به مرورگرها و مدیران گذرواژه کمک کنید جزئیات حساب را تکمیل کنند. از autocomplete="email" برای فیلد ایمیل و autocomplete="current-password" برای فیلد رمز عبور فعلی استفاده کنید.

برای کمک به کاربران برای تکمیل دستی جزئیات حساب خود، از type="email" برای فیلد ایمیل استفاده کنید تا صفحه کلید مناسب روی صفحه را در دستگاه های تلفن همراه نشان دهید.

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

اطمینان حاصل کنید که کاربران می توانند رمز عبوری را که وارد کرده اند ببینند

متنی که برای <input type="password"> پر می‌کنید، برای احترام به حریم خصوصی کاربران، به‌طور پیش‌فرض پنهان است. به کاربران کمک کنید تا رمز عبور خود را وارد کنند، با نشان دادن یک <button> برای تغییر حالت مشاهده متن وارد شده.

درباره اجرای <button> برای آشکارسازی رمز عبور بیشتر بیاموزید.

مطمئن شوید که فرم های ورود و ثبت نام شما قابل استفاده هستند

فرم های ورود و ثبت نام خود را به طور منظم با افراد واقعی آزمایش کنید تا مطمئن شوید که احراز هویت همانطور که انتظار می رود کار می کند. از تجزیه و تحلیل و اندازه گیری کاربر واقعی (RUM) برای جمع آوری داده های میدانی و ابزارهایی مانند Lighthouse و PageSpeed ​​Insights برای اجرای آزمایش ها استفاده کنید. درباره آزمایش قابلیت استفاده و جمع آوری داده های تحلیلی بیشتر بیاموزید.

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

به کاربران کمک کنید تنظیمات حساب خود را تغییر دهند

اطمینان حاصل کنید که کاربران می‌توانند هر تنظیمات حساب، از جمله آدرس‌های ایمیل، رمز عبور و نام‌های کاربری را تغییر دهند.

اطلاعاتی را که ذخیره می کنید شفاف کنید و به کاربران کمک کنید همه داده های شخصی خود را در هر زمان دانلود کنند. اطمینان حاصل کنید که کاربران می توانند حساب خود را در صورتی که می خواهند حذف کنند. ویژگی‌های مدیریت حساب مانند اینها ممکن است در برخی مناطق یک الزام قانونی باشد.

اطمینان حاصل کنید که کاربران می توانند رمزهای عبور خود را به روز کنند

به روز رسانی رمز عبور خود را برای کاربران آسان کنید.

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

گزینه درخواست گذرواژه جدید را اضافه کنید و برای درخواست رمز عبور جدید یک URL .well-known .. ارائه دهید.

منابع