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

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

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.