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

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

Sam Dutton

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

فيما يلي مثال على نموذج اشتراك بسيط للغاية يوضح جميع أفضل الممارسات:

قائمة التحقّق

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

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

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

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

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

إظهار معلومات تسجيل الدخول

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

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

يُرجى التأكّد من ربط حسابات المستخدمين الذين يشتركون من خلال موفِّر هوية مثل 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 إصدارًا من ذلك.

تسجيل الدخول بدون إدخال كلمة مرور على medium.com.

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

مراعاة طول الجلسة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يُرجى توضيح سبب رفض كلمة المرور.

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

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

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

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

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

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

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

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

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

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

صفحة نشاط حساب Gmail
صفحة نشاط حساب Gmail.

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

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

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

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

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

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

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

صفحة تسجيل الدخول إلى WordPress
صفحة تسجيل الدخول إلى WordPress التي تتضمّن خيارات تسجيل الدخول إلى Google وApple

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

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

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

تسهيل التبديل بين الحسابات

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

Gmail يعرض تبديل الحسابات
تبديل الحسابات على Gmail:

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

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

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

يُرجى مراعاة أسماء المستخدمين

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

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

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

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

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

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

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

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

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

الصورة من إعداد @ecowarriorprincing على صفحة Unسبلاش