أفضل الممارسات لنموذج الاشتراك

ساعِد المستخدمين على الاشتراك وتسجيل الدخول وإدارة تفاصيل حساباتهم بأقل إزعاج.

Sam Dutton

إذا احتاج المستخدمون في أي وقت إلى تسجيل الدخول إلى موقعك، فإن التصميم الجيد لنموذج الاشتراك بالغ الأهمية. وينطبق ذلك بشكل خاص على الأشخاص الذين يعانون من ضعف الاتصال، والذين يستخدمون الأجهزة الجوّالة، وفي أو الإسراع أو التوتر. تحصل نماذج الاشتراك سيئة التصميم على معدلات ارتداد مرتفعة. قد تعني كل مرة ارتداد مستخدم مفقود أو مستاء - وليس مجرد اشتراك فائت الأخرى.

فيما يلي مثال لنموذج اشتراك بسيط جدًا يوضح أفضل الممارسات:

قائمة التحقق

• تجنُّب تسجيل الدخول إذا أمكن.
• وضّح كيفية إنشاء حساب.
• وضّح كيفية الوصول إلى تفاصيل الحساب.
• التخلص من الفوضى في النماذج:
• التفكير في مدة الجلسة:
• ساعِد مدراء كلمات المرور في اقتراح كلمات المرور وتخزينها بأمان.
• لا تسمح بكلمات المرور المحتمَل تعرّضها للاختراق.
• السماح بلصق كلمة المرور
• لا تخزن كلمات المرور أو تنقلها مطلقًا في نص عادي.
• لا تفرض تعديلات كلمة المرور
• تسهيل تغيير كلمات المرور أو إعادة ضبطها:
• تفعيل تسجيل الدخول الموحّد
• تسهيل عملية تبديل الحسابات
• ننصحك بتوفير مصادقة متعدّدة العوامل.
• اعتنِ بأسماء المستخدمين.
• إجراء الاختبارات في الميدان وكذلك في المعمل:
• الاختبار على مجموعة من المتصفحات والأجهزة والأنظمة الأساسية

تجنب تسجيل الدخول إذا كان بإمكانك

قبل تنفيذ نموذج الاشتراك وطلب إنشاء حساب على موقعك من المستخدمين، ضع في اعتبارك وما إذا كنت بحاجة إليه حقًا أم لا. ويجب تجنُّب حظر الميزات خلف تسجيل الدخول كلما أمكن ذلك.

أفضل نموذج اشتراك هو نموذج الاشتراك.

عندما تطلب من أحد المستخدمين إنشاء حساب، تكون بين المستخدمين وما يحاولون تحقيقه. فأنت تطلب ذلك وتطلب من المستخدم الوثوق بك فيما يتعلق بالبيانات الشخصية. كل كلمة مرور وعنصر من البيانات التي تخزنها تحمل "ديون" البيانات المتعلقة بالخصوصية والأمان، مما يجعلها تكلفة ومسؤولية عن موقعك الإلكتروني.

إذا كان السبب الرئيسي الذي تطلب من المستخدمين إنشاء حساب هو حفظ المعلومات بين التنقلات أو جلسات التصفّح، يمكنك استخدام مساحة التخزين من جهة العميل بدلاً من ذلك. للتسوّق المواقع، التي تجبر المستخدمين على إنشاء حساب لإجراء عملية شراء، يُستشهد بها كسبب رئيسي للتسوّق ترك سلة التسوق. عليك جعل خيار إتمام الدفع بلا تسجيل دخول هو الإعداد التلقائي.

جعل عملية تسجيل الدخول واضحة

وضِّح طريقة إنشاء حساب على موقعك الإلكتروني بوضوح، مثل تسجيل الدخول أو تسجيل الدخول. أعلى يسار الصفحة. تجنَّب استخدام رمز غامض أو كلمات غامضة (مثل: "الانضمام إلينا") وعدم إخفاء تسجيل الدخول في قائمة التنقل. لخص خبير قابلية الاستخدام ستيف كروغ هذا النهج لسهولة استخدام الموقع الإلكتروني: لا تجعلني أفكر. إذا كنت بحاجة إلى وإقناع الآخرين في فريق الويب لديك، واستخدم الإحصاءات لإظهار تأثير الخيارات.

تأكَّد من ربط الحسابات للمستخدمين الذين يشتركون من خلال موفِّر هوية مثل Google والذين الاشتراك أيضًا باستخدام البريد الإلكتروني وكلمة المرور. هذا الإجراء سهل إذا كان بإمكانك الوصول إلى عنوان البريد الإلكتروني الخاص بالمستخدم. من بيانات الملف الشخصي من موفِّر الهوية، وتتطابق مع الحسابَين. يُظهر الرمز أدناه كيفية الوصول إلى بيانات البريد الإلكتروني للمستخدم الذي سجّل دخوله بحساب Google.

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

توضيح كيفية الوصول إلى تفاصيل الحساب

بعد أن يسجّل المستخدم دخوله، وضّح كيفية الوصول إلى تفاصيل الحساب. على وجه الخصوص، اجعل كيفية تغيير كلمات المرور أو إعادة ضبطها

التخلص من الفوضى في النماذج

في تدفق التسجيل، تتمثل مهمتك في تقليل التعقيد والحفاظ على تركيز المستخدم. التخلّص من الفوضى هذا ليس وقت المشتتات والإغراءات!

عند الاشتراك، اطلب أقل قدر ممكن. جمع بيانات إضافية عن المستخدمين (مثل الاسم والعنوان) فقط عندما تحتاج إلى ذلك، وعندما يرى المستخدم فائدة واضحة من تقديم تلك البيانات. ملاحظات يجب أخذها في الاعتبار أن كل عنصر من عناصر البيانات التي تقوم بتوصيلها وتخزينها يتحمّلها تكاليف ومسؤولية.

ولا تضاعف معلوماتك للتأكد من صحة تفاصيل الاتصال بالمستخدمين. هذا يبطئ إكمال النموذج ولا يكون مفيدًا في حال الملء التلقائي لحقول النموذج. بدلاً من ذلك، أرسِل تأكيدًا المستخدم بعد إدخال تفاصيل الاتصال الخاصة به، ثم مواصلة عملية إنشاء الحساب بمجرد استجابتهم. هذا نمط اشتراك شائع، حيث اعتاد المستخدمون عليه.

ننصحك بتسجيل الدخول بدون إدخال كلمة مرور من خلال إرسال رمز إلى المستخدمين في كل مرة يسجِّلون فيها الدخول. جهاز أو متصفح جديد. تستخدم المواقع مثل Slack وMedium إصدارًا من ذلك.

وكما هو الحال مع تسجيل الدخول الموحد، فإن ذلك له فائدة إضافية تتمثل في عدم وجوب إدارة كلمات مرور المستخدمين.

مراعاة مدة الجلسة

مهما كان النهج الذي تتبعه لهوية المستخدم، ستحتاج إلى اتخاذ قرار مدروس بشأن المدة: المدة التي يظل خلالها المستخدم مسجلاً الدخول، وما الذي قد يدفعك إلى تسجيل خروجه.

ضَع في اعتبارك ما إذا كان المستخدمون يستخدمون جهاز جوّال أو كمبيوتر مكتبي، وما إذا كان التي يشاركونها على سطح المكتب أو الأجهزة.

يمكنك مساعدة مدراء كلمات المرور على اقتراح كلمات المرور وتخزينها بأمان.

يمكنك مساعدة تطبيقات إدارة كلمات المرور التابعة لجهات خارجية والمدمَجة في المتصفِّح على اقتراح كلمات المرور وتخزينها، حتى لا لا يحتاج المستخدمون إلى اختيار كلمات المرور أو تذكرها أو كتابتها بأنفسهم. تعمل برامج إدارة كلمات المرور بشكل جيد في والمتصفحات الحديثة، ومزامنة الحسابات عبر الأجهزة، عبر تطبيقات خاصة بالنظام الأساسي وتطبيقات الويب، للأجهزة الجديدة.

وهذا يجعل من المهم للغاية ترميز نماذج الاشتراك بشكل صحيح، وخاصةً كيفية استخدام قيم الإكمال التلقائي. بالنسبة إلى نماذج الاشتراك، استخدِم autocomplete="new-password" لكلمات المرور الجديدة وأضِفها تصحيح قيم الإكمال التلقائي في حقول النموذج الأخرى كلما أمكن ذلك، مثل autocomplete="email" وautocomplete="tel". يمكنك أيضًا مساعدة مدراء كلمات المرور باستخدام name وid مختلفَين. في نماذج الاشتراك وتسجيل الدخول للعنصر form نفسه، بالإضافة إلى أي input أو select وtextarea من العناصر.

عليك أيضًا استخدام سمة type المناسبة. لتوفير لوحة المفاتيح الصحيحة على الأجهزة الجوّالة وتفعيل التحقّق الأساسي المُدمَج من خلال المتصفّح. يمكنك معرفة المزيد من المعلومات في أفضل الممارسات المتعلقة بنماذج الدفع والعناوين.

التأكّد من إدخال المستخدمين لكلمات مرور آمنة

إنّ الخيار الأفضل هو السماح لمديري كلمات المرور باقتراح كلمات مرور، لذا ننصحك بتشجيعهم قبول المستخدمين لكلمات المرور القوية التي اقترحتها المتصفحات ومديرو المتصفحات التابعة لجهات خارجية.

يرغب العديد من المستخدمين في إدخال كلمات مرورهم، لذا عليك تطبيق قواعد كلمة المرور. قُوَّة يشرح المعهد الوطني الأمريكي للمعايير والتكنولوجيا كيفية تجنُّب كلمات المرور غير الآمنة.

عدم السماح بكلمات المرور المحتمَل تعرّضها للاختراق

مهما كانت القواعد التي تختارها لكلمات المرور، يجب ألا تسمح مطلقًا بكلمات المرور التي تم الكشف عنها في الاختراقات الأمنية.

بعد إدخال المستخدم لكلمة المرور، يلزمك التحقق من أنها ليست كلمة مرور مستخدمة في السابق اختراق البيانات. يوفر موقع If I Been Pwned واجهة برمجة تطبيقات لكلمات المرور. التحقق، أو يمكنك تشغيل ذلك كخدمة بنفسك.

يتيح لك "مدير كلمات المرور في Google" أيضًا التحقّق مما إذا تم اختراق أيّ من كلمات مرورك الحالية. للاختراق.

إذا رفضت كلمة المرور التي يقترحها أحد المستخدمين، فأخبره على وجه التحديد بسبب رفضها. عرض المشاكل بشكل مضمّن وشرح كيفية حلّها: بمجرد إدخال المستخدم لقيمة - وليس بعد إرسال نموذج الاشتراك واضطررت إلى انتظار الرد من الخادم.

عدم حظر لصق كلمة المرور

لا تسمح بعض المواقع الإلكترونية بلصق النص في إدخالات كلمة المرور.

يؤدي عدم السماح بلصق كلمات المرور إلى إزعاج المستخدمين أو تشجيعهم على استخدام كلمات مرور يسهل تذكرها (وبالتالي: قد يكون من الأسهل اختراقها) ووفقًا لمؤسسات مثل أكاديمية National مركز الأمن السيبراني، قد يقلل من مستوى الأمان في الواقع. لن يدرك المستخدمون أنّ اللصق غير مسموح به بعد محاولة لصق كلمة المرور، لذلك لا يؤدي عدم السماح بلصق كلمة المرور إلى تجنُّب الثغرات الأمنية في الحافظة.

عدم تخزين كلمات المرور أو نقلها في نص عادي مطلقًا

احرص على إضافة كلمات المرور إلى كلمات المرور العشوائية وتجزئتها، ولا تحاول ابتكار خوارزمية التجزئة الخاصة بك.

عدم فرض تعديلات كلمة المرور

لا تجبر المستخدمين على تعديل كلمات المرور بشكل عشوائي.

قد يكون فرض تعديلات كلمات المرور أمرًا مكلفًا لأقسام تكنولوجيا المعلومات ومزعجًا للمستخدمين وليس له تأثير كبير في الأمان من المحتمل أيضًا أن يشجع الأشخاص استخدام كلمات مرور غير آمنة لا تُنسى أو للاحتفاظ بسجل مادي من كلمات المرور.

وبدلاً من فرض تعديلات كلمة المرور، عليك مراقبة الأنشطة غير المعتادة في الحساب وتحذير المستخدمين. وإذا أمكن، عليك أيضًا تتبُّع كلمات المرور التي عُرضت للاختراق بسبب عمليات اختراق البيانات.

عليك أيضًا تزويد المستخدمين بإمكانية الوصول إلى سجلّ تسجيل الدخول إلى حساباتهم، ليوضّح لهم مكان وعند تسجيل الدخول.

تسهيل تغيير كلمات المرور أو إعادة ضبطها

وضِّح للمستخدمين مكان وكيفية تعديل كلمة مرور حساباتهم. في بعض المواقع، من صعب بشكل مدهش.

وبطبيعة الحال، عليك أيضًا تسهيل إعادة ضبط كلمة المرور على المستخدمين في حال نسيانها. يوفر مشروع أمان تطبيقات الويب المفتوح إرشادات تفصيلية حول كيفية التعامل مع فقدان كلمات المرور.

للحفاظ على أمان نشاطك التجاري ومستخدميك، من المهم بشكل خاص مساعدة المستخدمين على تغيير كلمة المرور إذا اكتشفوا أنه تم اختراقها. لتسهيل ذلك، يجب عليك إضافة /.well-known/change-password عنوان URL يؤدي إلى موقع إلكتروني يعيد التوجيه إلى صفحة إدارة كلمات المرور. يتيح هذا الإجراء لمدراء كلمات المرور التنقّل المستخدمين مباشرةً إلى الصفحة التي يمكنهم من خلالها تغيير كلمة مرور موقعك. هذه الميزة المنفذ الآن في Safari وChrome، وسنضيفه إلى متصفحات أخرى. مساعدة المستخدمين في تغيير كلمات المرور بسهولة من خلال إضافة عنوان URL معروف لتغيير كلمات المرور لتنفيذ ذلك.

وينبغي لك أيضًا أن تسهل على المستخدمين حذف حساباتهم إذا كان هذا هو ما يريدون.

توفير تسجيل الدخول عن طريق موفري الهوية التابعين لجهات خارجية

يفضل العديد من المستخدمين تسجيل الدخول إلى مواقع الويب باستخدام عنوان بريد إلكتروني ونموذج اشتراك باستخدام كلمة المرور. ومع ذلك، عليك السماح للمستخدمين أيضًا بتسجيل الدخول من خلال موفِّر هوية تابع لجهة خارجية، يُعرَف أيضًا باسم تسجيل الدخول الموحّد.

لهذا المنهج مزايا عديدة. بالنسبة إلى المستخدمين الذين ينشئون حسابًا باستخدام تسجيل الدخول الموحّد، يمكنك إجراء ما يلي: لا تحتاج إلى طلب كلمات المرور أو الاتصال بها أو تخزينها.

قد تتمكن أيضًا من الوصول إلى معلومات إضافية تم التحقق منها في الملف الشخصي من خلال تسجيل الدخول الموحّد، مثل كعنوان بريد إلكتروني - مما يعني أنه لن يضطر المستخدم إلى إدخال تلك البيانات وأنك لست بحاجة إلى عملية التحقق بنفسك. يمكن أن يؤدي تسجيل الدخول الموحد أيضًا إلى تسهيل عملية تسجيل الدخول على المستخدمين عند جهاز جديد.

دمج بيانات "تسجيل الدخول بحساب Google" في تطبيق الويب شرح كيفية إضافة تسجيل الدخول الموحّد إلى خيارات الاشتراك. تتوفّر العديد من منصات الهوية الأخرى.

تسهيل عملية تبديل الحسابات

يتشارك العديد من المستخدمين الأجهزة ويبدّلون الحسابات باستخدام المتصفح نفسه. إمكانية وصول المستخدمين تسجيل الدخول الموحّد أو عدم استخدامه، سيكون التبديل بين الحسابات أمرًا سهلاً.

تجربة المصادقة المتعدّدة العوامل

تعني المصادقة المتعدّدة العوامل ضمان إجراء المستخدمين للمصادقة بأكثر من طريقة. على سبيل المثال، يمكنك فرض عملية التحقق، بالإضافة إلى مطالبة المستخدم بضبط كلمة مرور عند استخدام رمز مرور يُستخدم لمرة واحدة ومُرسل عبر البريد الإلكتروني أو رسالة نصية قصيرة SMS أو باستخدام تطبيق يستند إلى مرة واحدة الرمز أو مفتاح الأمان أو أداة استشعار بصمة الإصبع. أفضل الممارسات لاستخدام كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة تفعيل المصادقة القوية باستخدام WebAuthn شرح كيفية تطبيق المصادقة متعددة العوامل.

وعليك بالتأكيد توفير (أو فرض) مصادقة متعددة العوامل إذا كان موقعك يتعامل مع البيانات الشخصية أو المعلومات الحساسة.

الاهتمام بأسماء المستخدمين

لا تصر على اسم المستخدم إلا إذا كنت بحاجة إليه (أو حتى). السماح للمستخدمين بالاشتراك وتسجيل الدخول باستخدام عنوان بريد إلكتروني (أو رقم هاتف) وكلمة مرور فقط، أو تسجيل الدخول الموحّد إذا كانوا يفضّلون لا تجبره على اختيار اسم مستخدم وتذكّره.

إذا كان موقعك الإلكتروني يتطلب أسماء مستخدمين، لا تفرض عليها قواعد غير معقولة، ولا تمنع المستخدمين من تحديث اسم المستخدم في الخلفية، يجب إنشاء معرّف فريد لكل حساب مستخدم، وليس معرِّفًا يستند إلى البيانات الشخصية مثل اسم المستخدم.

تأكد أيضًا من استخدام autocomplete="username" لأسماء المستخدمين.

نفِّذ اختبارًا على مجموعة من الأجهزة والأنظمة الأساسية والمتصفحات والإصدارات.

اختبر نماذج الاشتراك على الأنظمة الأساسية الأكثر شيوعًا للمستخدمين. قد تختلف وظائف عنصر النموذج، والاختلافات في حجم إطار العرض يمكن أن تؤدي إلى حدوث مشاكل في التنسيق. يتيح BrowserStack إمكانية الاختبار المجاني مشاريع مفتوحة المصدر على مجموعة من الأجهزة والمتصفحات:

تنفيذ الإحصاءات ومراقبة المستخدم الفعلي

تحتاج إلى البيانات الميدانية وبيانات التمرين المعملي. لفهم تجربة المستخدمين لنماذج الاشتراك "إحصاءات Google" ومراقبة المستخدمين الفعليين توفر (RUM) بيانات للتجربة الفعلية للمستخدمين، مثل المدة التي تستغرقها صفحات الاشتراك التحميل، ومكونات واجهة المستخدم التي يتفاعل معها المستخدمون (أو لا) والمدة التي يستغرقها المستخدمون لإكمالها الاشتراك.

• إحصاءات الصفحة: مشاهدات الصفحة ومعدلات الارتداد ومرّات الخروج لكل صفحة خلال عملية الاشتراك
• إحصاءات التفاعل: مسارات تحويل الأهداف والأحداث للإشارة إلى الوقت الذي يتراجع فيه المستخدمون عن تدفق الاشتراك ونسبة المستخدمين الذين ينقرون على الأزرار، والروابط وغيرها من المكونات في صفحات الاشتراك.
• أداء الموقع الإلكتروني: مقاييس تركّز على المستخدم يمكنك معرفة ما إذا كان تحميل عملية الاشتراك بطيئًا أو غير مستقر مرئيًا.

يمكن أن تُحدث التغييرات الصغيرة فرقًا كبيرًا في معدلات إكمال نماذج الاشتراك. Analytics وRUM ستمكنك من تحسين التغييرات وترتيبها حسب الأولوية، ومراقبة موقعك بحثًا عن أي مشكلات الكشف عنها من خلال الاختبار المحلي.

مواصلة التعلّم

• أفضل الممارسات المتعلّقة بنموذج تسجيل الدخول
• أفضل الممارسات المتعلّقة بنموذج الدفع والعنوان
• إنشاء نماذج رائعة
• أفضل الممارسات المتعلقة بتصميم النماذج للأجهزة الجوّالة
• عناصر تحكُّم أكثر فعالية في النموذج
• إنشاء نماذج يسهل الوصول إليها
• تبسيط عملية الاشتراك باستخدام واجهة برمجة التطبيقات Credential Management API
• إثبات ملكية أرقام الهواتف على الويب باستخدام واجهة برمجة التطبيقات WebOTP API

صورة من إعداد @ecowarriorprincess على منصة Unقل لصنّاع المحتوى