مساعدة المستخدمين في الاشتراك
غالبًا ما يكون نموذج الاشتراك هو أول تفاعل مع نموذج على موقعك الإلكتروني. يُعدّ تصميم نموذج اشتراك جيد أمرًا بالغ الأهمية، كما أنّ توفير نموذج آمن أمر ضروري.
اطّلِع على نموذج اشتراك لمعرفة كيف يمكنك مساعدة المستخدمين في الاشتراك على موقعك الإلكتروني.
يجب أن يكون نموذج الاشتراك بسيطًا وأن يعرض عناصر التحكّم المطلوبة فقط لإنشاء حساب. لا تكرّر عناصر التحكّم في النموذج لمساعدة المستخدمين في إدخال تفاصيل حساباتهم بشكل صحيح. إرسال رسالة تأكيد إلكترونية بدلاً من ذلك
تفاصيل الحساب
يمكنك مساعدة المستخدمين في ملء تفاصيل حساباتهم باستخدام السمة
autocomplete المناسبة. استخدِم autocomplete="email" لحقل البريد الإلكتروني، وautocomplete="new-password" لحقل كلمة المرور الجديدة.
مزيد من المعلومات حول الملء التلقائي لعناصر التحكّم في الإدخال
يمكنك أيضًا مساعدة المستخدمين في إدخال كلمة مرور آمنة من خلال توفير زر <button>لعرض كلمة المرور. مزيد من المعلومات حول نمط "إظهار كلمة المرور"
تأمين نموذج الاشتراك
عدم تخزين كلمات المرور أو نقلها كنص عادي مطلقًا احرص على تضمين قيمة عشوائية وتجزئة كلمات المرور، ولا تحاول ابتكار خوارزمية تجزئة خاصة بك.
قدِّم المصادقة المتعدّدة العوامل، خاصةً إذا كنت تخزِّن بيانات شخصية أو حسّاسة. توضّح أفضل الممارسات لاستخدام كلمة المرور لمرة واحدة عبر الرسائل القصيرة وتفعيل المصادقة القوية باستخدام WebAuthn كيفية تنفيذ المصادقة المتعدّدة العوامل.
التأكّد من أنّ المستخدمين لا يستخدمون كلمات مرور محتمَل تعرّضها للاختراق على سبيل المثال، استخدِم واجهة برمجة التطبيقات من Have 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 لطلب كلمة مرور جديدة.