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

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

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 المناسبة لتوفير لوحة المفاتيح المناسبة على الأجهزة الجوّالة وتفعيل ميزة التحقّق الأساسية المدمجة من خلال المتصفّح. يمكنك الاطّلاع على مزيد من المعلومات من خلال أفضل الممارسات المتعلّقة بنموذج الدفع والعنوان.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إتاحة تسجيل الدخول من خلال موفِّري الهوية التابعين لجهات خارجية

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

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

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

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

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

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

ننصحك بتوفير مصادقة متعدّدة العوامل.

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

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

يجب الانتباه إلى أسماء المستخدمين.

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

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

احرص أيضًا على استخدام autocomplete="username" لأسماء المستخدمين.

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

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

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

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

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

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

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

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

الصورة مقدمة من ‎@ecowarriorprincess على Unsplash.