بهترین شیوه های فرم ثبت نام

به کاربران خود در ثبت نام، ورود به سیستم و مدیریت جزئیات حساب خود با حداقل سر و صدا کمک کنید.

سام داتون

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

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

چک لیست

در صورت امکان از ورود به سیستم خودداری کنید

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

بهترین فرم ثبت نام بدون ثبت نام است!

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

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

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

نحوه ایجاد حساب کاربری در سایت خود را مشخص کنید، برای مثال با دکمه ورود یا ورود به سیستم در سمت راست بالای صفحه. از استفاده از نماد مبهم یا عبارات مبهم (" سوار شوید!"، "به ما بپیوندید") خودداری کنید و ورود به سیستم را در منوی ناوبری پنهان نکنید. استیو کروگ، کارشناس کاربردپذیری، این رویکرد را در مورد قابلیت استفاده وب‌سایت خلاصه می‌کند: مرا مجبور به فکر کردن نکنید! اگر می خواهید دیگران را در تیم وب خود متقاعد کنید، از تجزیه و تحلیل برای نشان دادن تأثیر گزینه های مختلف استفاده کنید.

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

اطمینان حاصل کنید که برای کاربرانی که از طریق یک ارائه دهنده هویت مانند Google ثبت نام می کنند و همچنین با استفاده از ایمیل و رمز عبور ثبت نام می کنند، حساب ها را پیوند دهید. اگر بتوانید از اطلاعات نمایه ارائه دهنده هویت به آدرس ایمیل کاربر دسترسی داشته باشید و این دو حساب را مطابقت دهید، انجام این کار آسان است. کد زیر نحوه دسترسی به داده های ایمیل برای کاربر Google Sign-in را نشان می دهد. 

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

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

هنگامی که کاربر وارد سیستم شد، نحوه دسترسی به جزئیات حساب را روشن کنید. به طور خاص، نحوه تغییر یا بازنشانی رمزهای عبور را مشخص کنید.

به هم ریختگی شکل را برش دهید

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

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

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

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

ممکن است بخواهید ورود بدون رمز عبور را با ارسال یک کد به کاربران هر بار که در دستگاه یا مرورگر جدید وارد می‌شوند، در نظر بگیرید. سایت هایی مانند Slack و Medium از نسخه ای از این استفاده می کنند.

ورود بدون رمز عبور در medium.com.

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

طول جلسه را در نظر بگیرید

هر رویکردی که در مورد هویت کاربر اتخاذ می کنید، باید در مورد طول جلسه تصمیم دقیق بگیرید: مدت زمانی که کاربر وارد سیستم می شود و چه چیزی ممکن است باعث شود که شما از سیستم خارج شوید.

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

به مدیران گذرواژه کمک کنید به طور ایمن رمزهای عبور را پیشنهاد و ذخیره کنند

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

این امر کدنویسی صحیح فرم های ثبت نام را بسیار مهم می کند، به ویژه استفاده از مقادیر صحیح تکمیل خودکار. برای فرم‌های ثبت‌نام، از autocomplete="new-password" برای گذرواژه‌های جدید استفاده کنید، و مقادیر تکمیل خودکار صحیح را تا حد امکان به سایر فیلدهای فرم، مانند autocomplete="email" و autocomplete="tel" اضافه کنید. همچنین می‌توانید با استفاده از مقادیر مختلف name و id در فرم‌های ثبت نام و ورود به سیستم، برای خود عنصر form و همچنین هر عنصر input ، select و textarea به مدیران رمز عبور کمک کنید.

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

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

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

با این حال، بسیاری از کاربران می خواهند رمز عبور خود را وارد کنند، بنابراین باید قوانینی را برای قدرت رمز عبور پیاده سازی کنید. مؤسسه ملی استاندارد و فناوری ایالات متحده نحوه جلوگیری از رمزهای عبور ناامن را توضیح می دهد.

اجازه ندهید رمزهای عبور به خطر بیافتد

قوانینی که برای گذرواژه‌ها انتخاب می‌کنید، هرگز نباید اجازه دهید رمزهای عبوری که در معرض نقض‌های امنیتی قرار گرفته‌اند .

هنگامی که یک کاربر رمز عبور را وارد کرد، باید بررسی کنید که رمز عبور قبلا در معرض خطر قرار نگرفته باشد. سایت Have I Been Pwned یک API برای بررسی رمز عبور ارائه می دهد، یا می توانید خودتان آن را به عنوان یک سرویس اجرا کنید.

Google's Password Manager همچنین به شما امکان می دهد بررسی کنید که آیا هر یک از رمزهای عبور موجود شما در معرض خطر قرار گرفته است یا خیر .

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

واضح باشد که چرا رمز عبور رد می شود.

چسباندن رمز عبور را ممنوع نکنید

برخی از سایت‌ها اجازه نمی‌دهند متن در ورودی‌های رمز عبور جای‌گذاری شود.

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

هرگز رمزهای عبور را در متن ساده ذخیره یا انتقال ندهید

مطمئن شوید که رمزهای عبور را Salt و هش کنید —و سعی نکنید الگوریتم هش خود را اختراع کنید !

به روز رسانی رمز عبور را مجبور نکنید

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

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

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

همچنین باید به کاربران خود دسترسی به تاریخچه ورود به حساب کاربری خود را ارائه دهید و به آنها نشان دهید که کجا و چه زمانی ورود به سیستم انجام شده است.

صفحه فعالیت حساب جیمیل
صفحه فعالیت حساب جیمیل .

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

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

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

برای ایمن نگه داشتن کسب و کار و کاربرانتان، کمک به کاربران برای تغییر گذرواژه در صورتی که متوجه شوند در معرض خطر قرار گرفته است بسیار مهم است. برای آسان‌تر کردن این کار، باید URL /.well-known/change-password را به سایت خود اضافه کنید که به صفحه مدیریت رمز عبور شما هدایت می‌شود. این به مدیران رمز عبور اجازه می‌دهد تا کاربران شما را مستقیماً به صفحه‌ای هدایت کنند که می‌توانند رمز عبور خود را برای سایت شما تغییر دهند. این ویژگی اکنون در سافاری، کروم پیاده سازی شده و به مرورگرهای دیگر نیز می آید. با افزودن یک URL شناخته شده برای تغییر رمز عبور، به کاربران کمک کنید تا رمزهای عبور را به راحتی تغییر دهند .

همچنین باید حذف اکانت خود را در صورتی که کاربران می‌خواهند ساده کنند.

ورود به سیستم را از طریق ارائه دهندگان هویت شخص ثالث ارائه دهید

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

صفحه ورود به وردپرس
صفحه ورود به وردپرس، با گزینه های ورود گوگل و اپل.

این رویکرد چندین مزیت دارد. برای کاربرانی که با استفاده از ورود به سیستم یک حساب کاربری ایجاد می کنند، نیازی به درخواست، برقراری ارتباط، یا ذخیره گذرواژه ندارید.

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

ادغام Google Sign-In در برنامه وب شما نحوه اضافه کردن ورود به سیستم را به گزینه های ثبت نام خود توضیح می دهد. بسیاری از پلتفرم های هویتی دیگر در دسترس هستند.

تغییر حساب را ساده کنید

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

Gmail، نشان دادن تغییر حساب
روشن کردن حساب جیمیل

پیشنهاد احراز هویت چند عاملی را در نظر بگیرید

احراز هویت چند عاملی به معنای اطمینان از اینکه کاربران احراز هویت را به بیش از یک روش ارائه می کنند. برای مثال، علاوه بر اینکه کاربر را ملزم به تنظیم رمز عبور می‌کنید، می‌توانید تأیید را با استفاده از یک رمز عبور یک‌بار مصرف ارسال شده از طریق ایمیل یا پیام متنی SMS، یا با استفاده از یک کد یک‌بار مصرف مبتنی بر برنامه، کلید امنیتی یا حسگر اثر انگشت بهترین شیوه های SMS OTP و فعال کردن احراز هویت قوی با WebAuthn نحوه اجرای احراز هویت چند عاملی را توضیح می دهد.

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

مراقب نام های کاربری باشید

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

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

همچنین مطمئن شوید که از autocomplete="username" برای نام های کاربری استفاده کنید.

تست بر روی طیف وسیعی از دستگاه ها، سیستم عامل ها، مرورگرها و نسخه ها

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

پیاده سازی تجزیه و تحلیل و نظارت بر کاربر واقعی

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

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

به یادگیری ادامه دهید

عکس @ecowarriorprincess در Unsplash .