مساعدة المستخدمين على الاشتراك
غالبًا ما يكون نموذج الاشتراك هو التفاعل الأول مع نموذج على موقعك الإلكتروني. فالتصميم الجيد لنموذج الاشتراك هو أمر بالغ الأهمية، ومن الضروري تقديم نموذج آمن.
لنلقِ نظرة على نموذج الاشتراك وكيف يمكنك مساعدة المستخدمين في الاشتراك على موقعك الإلكتروني.
اجعل نموذج الاشتراك بسيطًا واعرض فقط عناصر التحكم المطلوبة في النموذج لإنشاء حساب. يجب عدم مضاعفة عناصر التحكّم في النموذج لمساعدة المستخدمين في الحصول على تفاصيل حساباتهم بشكل صحيح. يُرجى إرسال رسالة تأكيد إلكترونية بدلاً من ذلك.
مساعدة المستخدمين في ملء تفاصيل حساباتهم
يمكنك مساعدة المستخدمين على ملء تفاصيل حساباتهم باستخدام سمة autocomplete المناسبة.
استخدِم autocomplete="email" في حقل البريد الإلكتروني وautocomplete="new-password" في حقل كلمة المرور الجديدة.
مزيد من المعلومات حول الملء التلقائي لعناصر التحكّم في الإدخال
ويمكنك أيضًا مساعدة المستخدمين على إدخال كلمة مرور آمنة من خلال تقديم "<button>" لكشف كلمة المرور.
مزيد من المعلومات حول نمط الكشف عن كلمة المرور
التأكّد من أمان نموذج الاشتراك
لا تخزن أو تنقل كلمات المرور في نص عادي مطلقًا. احرص على إضافة كلمات مرور جديدة وتجزئتها، ولا تحاول ابتكار خوارزمية التجزئة الخاصة بك.
وفِّر مصادقة متعددة العوامل، خاصةً في حال تخزين بيانات شخصية أو حسّاسة. أفضل ممارسات كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS وتفعيل المصادقة القوية باستخدام WebAuthn يمكنك توضيح كيفية تنفيذ المصادقة المتعدّدة العوامل.
تأكَّد من عدم استخدام المستخدمين كلمات مرور محتمَل تعرّضها للاختراق. على سبيل المثال، يمكنك استخدام واجهة برمجة التطبيقات من Clear I Been Pwned لرصد كلمات المرور المحتمَل تعرّضها للاختراق واقتراح المستخدمين على إدخال كلمة مرور جديدة أخرى أو تحذيرهم إذا تمّ اختراق كلمة المرور.
مساعدة المستخدمين على تسجيل الدخول
لنتعرّف على كيفية إنشاء نموذج تسجيل دخول لضمان إمكانية تسجيل دخول المستخدمين بسهولة إلى موقعك الإلكتروني.
اجعل موقع أزرار الاشتراك وتسجيل الدخول واضحًا. تأكَّد من أنّ النموذج سهل الاستخدام على الأجهزة التي تعمل باللمس:
- لا يقلّ حجم هدف النقر للأزرار عن 48 بكسل.
- يجب أن يكون
font-sizeفي عناصر النموذج كبيرًا بما يكفي (يتناسب20pxعلى الأجهزة الجوّالة مباشرةً). - هناك مساحة كافية (
margin) بين عناصر التحكّم في النموذج، وهذه الإدخالات كبيرة بما يكفي (استخدِم على الأقلpadding: 15pxعلى الأجهزة الجوّالة).
ساعِد المستخدمين في إدخال عنوان البريد الإلكتروني وكلمة المرور.
مساعدة المتصفّحات وبرامج إدارة كلمات المرور في ملء تفاصيل الحسابات تلقائيًا
استخدِم autocomplete="email" في حقل البريد الإلكتروني
وautocomplete="current-password" في حقل كلمة المرور الحالي.
لمساعدة المستخدمين في ملء تفاصيل حساباتهم يدويًا، استخدِم type="email"
في حقل البريد الإلكتروني لعرض لوحة المفاتيح المناسبة على الشاشة على الأجهزة الجوّالة.
استخدِم السمة required لحقل البريد الإلكتروني وكلمة المرور، لتتمكن من التحذير من القيم غير الصالحة عند إرسال المستخدم للنموذج.
يمكنك استخدام ميزة التحقّق من الصحة في الوقت الفعلي
لمساعدة المستخدمين في تصحيح البيانات غير الصالحة فور إدخالها، بدلاً من انتظار
إرسال النموذج.
التأكُّد من أنّ المستخدمين يمكنهم الاطّلاع على كلمة المرور التي أدخلوها
يتم حجب النص الذي تملأه للموقع الإلكتروني <input type="password"> بشكل تلقائي،
لاحترام خصوصية المستخدمين.
ساعِد المستخدمين على إدخال كلمة المرور
من خلال عرض علامة <button> لتبديل إمكانية رؤية النص الذي تم إدخاله.
تعرَّف على مزيد من المعلومات حول
عرض كلمة المرور <button>.
تأكَّد من أنّ نماذج تسجيل الدخول والاشتراك سهلة الاستخدام.
اختبِر نماذج تسجيل الدخول والاشتراك بانتظام مع أشخاص حقيقيين للتأكد من أنّ المصادقة تعمل على النحو المتوقّع. استخدِم الإحصاءات وقياس المستخدم الفعلي (RUM) لجمع البيانات الميدانية، وأدوات مثل Lighthouse وإحصاءات PageSpeed لإجراء الاختبارات بنفسك. اطّلِع على المزيد من المعلومات حول اختبار قابلية الاستخدام وجمع بيانات الإحصاءات.
التأكّد من عمل نماذجك في متصفّحات مختلفة وعلى أنظمة أساسية مختلفة اختبِر نموذجك على أحجام الشاشة المختلفة باستخدام لوحة المفاتيح فقط أو باستخدام قارئ شاشة مثل VoiceOver على أجهزة Mac أو NVDA على Windows.
مساعدة المستخدمين في تغيير إعدادات حساباتهم
تأكَّد من أنّه بإمكان المستخدمين تغيير كل إعدادات الحساب، بما في ذلك عناوين البريد الإلكتروني وكلمات المرور وأسماء المستخدمين.
يمكنك تحديد البيانات التي تخزنها بشكل واضح ومساعدة المستخدمين على تنزيل جميع بياناتهم الشخصية في أي وقت. تأكَّد من إمكانية حذف المستخدمين لحساباتهم إذا كان هذا ما يريدونه. قد تكون ميزات إدارة الحساب مثل هذه من المتطلبات القانونية في بعض المناطق.
التأكد من إمكانية تعديل المستخدمين لكلمات المرور
سهِّل على المستخدمين تعديل كلمات المرور.
اسأل المستخدمين عن كلمة المرور الحالية قبل تغييرها وأرسل بريدًا إلكترونيًا بتغيير كلمة المرور مع خيار العودة إلى الحساب وقفله.
يمكنك إضافة خيار لطلب كلمة مرور جديدة،
ومراعاة تقديم عنوان URL للسمة .well-known لطلب كلمة مرور جديدة.