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

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

سام داتون

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

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

چک لیست

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

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

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

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

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

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

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

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

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

// 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

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

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

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

در نظر بگیرید که آیا کاربران شما از طریق موبایل یا دسکتاپ محتوا را به اشتراک می‌گذارند، و آیا آنها از طریق دسکتاپ یا دستگاه‌های اشتراک‌گذاری محتوا را به اشتراک می‌گذارند.

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

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

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

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

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

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

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

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

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

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

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

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

دلیل رد شدن رمز عبور را واضح بیان کنید.

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

بعضی از سایت‌ها اجازه نمی‌دهند متن در ورودی‌های رمز عبور پیست شود.

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

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

حتماً رمزهای عبور را salt و hash کنید—و سعی نکنید الگوریتم hashing خودتان را اختراع کنید !

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

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

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

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

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

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

تغییر یا تنظیم مجدد رمزهای عبور را آسان کنید

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

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

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

همچنین باید حذف حساب کاربری را برای کاربران آسان کنید.

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

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

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

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

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

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

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

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

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

ارائه احراز هویت چند عاملی

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

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

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

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

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

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

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

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

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

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

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

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