أفضل الممارسات المتعلّقة بنموذج تسجيل الدخول

استخدِم ميزات المتصفّح المتوافقة مع عدّة منصات لإنشاء نماذج تسجيل دخول آمنة وسهلة الاستخدام.

Sam Dutton

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

في ما يلي مثال على نموذج تسجيل دخول بسيط يوضّح جميع أفضل الممارسات:

قائمة التحقق

• استخدِم عناصر HTML ذات معنى: <form> و<input> و<label> و<button>.
• أضِف تصنيفًا لكل إدخال باستخدام السمة <label>.
• استخدِم سمات العناصر للوصول إلى ميزات المتصفّح المضمّنة: type وname وautocomplete وrequired.
• امنح السمتَين name وid قيمًا ثابتة لا تتغيّر بين عمليات تحميل الصفحة أو عمليات نشر الموقع الإلكتروني.
• ضع نموذج تسجيل الدخول في عنصر <form> خاص به.
• التأكّد من إرسال النموذج بنجاح
• استخدِم autocomplete="new-password" وid="new-password" لإدخال كلمة المرور في نموذج الاشتراك، ولكلمة المرور الجديدة في نموذج إعادة ضبط كلمة المرور.
• استخدِم autocomplete="current-password" وid="current-password" لإدخال كلمة مرور تسجيل الدخول.
• توفير وظيفة عرض كلمة المرور
• استخدِم aria-label وaria-describedby لإدخال كلمات المرور.
• لا تكرّر المعلومات.
• صمِّم النماذج بحيث لا تحجب لوحة المفاتيح على الأجهزة الجوّالة حقول الإدخال أو الأزرار.
• تأكَّد من أنّ النماذج قابلة للاستخدام على الأجهزة الجوّالة: استخدِم نصًا واضحًا، وتأكَّد من أنّ حقول الإدخال والأزرار كبيرة بما يكفي لتعمل كمساحات لمس.
• الحفاظ على الهوية البصرية والأسلوب في صفحتَي الاشتراك وتسجيل الدخول
• الاختبار في الميدان وفي المختبر: يمكنك إنشاء إحصاءات الصفحة وإحصاءات التفاعل وقياس الأداء من منظور المستخدم في مسار الاشتراك وتسجيل الدخول.
• اختبِر النماذج على مختلف المتصفحات والأجهزة: يختلف سلوك النماذج بشكل كبير على مختلف الأنظمة الأساسية.

استخدام ترميز HTML مفيد

استخدِم العناصر المصمَّمة لهذه المهمة: <form> و<label> و<button>. تتيح هذه العناصر وظائف المتصفّح المضمّنة، وتحسّن أدوات تسهيل الاستخدام، وتضيف معنى إلى الترميز.

استخدام ميزة "<form>"

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

استخدام ميزة "<label>"

لتصنيف حقل إدخال، استخدِم <label>.

<label for="email">Email</label>
<input id="email" …>

هناك سببان:

• يؤدي النقر على تصنيف إلى نقل التركيز إلى حقل الإدخال الخاص به. يمكنك ربط تصنيف بإدخال معيّن باستخدام سمة for الخاصة بالتصنيف مع سمة name أو id الخاصة بالإدخال.
• تعلن برامج قراءة الشاشة عن نص التصنيف عندما يتم التركيز على التصنيف أو إدخال التصنيف.

لا تستخدِم العناصر النائبة كتصنيفات للإدخال. قد ينسى المستخدمون الغرض من حقل الإدخال بعد البدء في كتابة النص، خاصةً إذا تشتت انتباههم ("هل كنت أكتب عنوان بريد إلكتروني أو رقم هاتف أو رقم تعريف حساب؟"). هناك الكثير من المشاكل المحتملة الأخرى في العناصر النائبة: يمكنك الاطّلاع على Don't Use The Placeholder Attribute وPlaceholders in Form Fields Are Harmful إذا لم تكن مقتنعًا.

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

افتح العرض التوضيحي label-position على جهاز جوّال لترى بنفسك.

استخدام ميزة "<button>"

استخدِم <button> للأزرار. توفّر عناصر الأزرار سلوكًا يسهل الوصول إليه ووظيفة مدمجة لإرسال النماذج، ويمكن تصميمها بسهولة. لا فائدة من استخدام <div> أو عنصر آخر يتظاهر بأنه زر.

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

ضمان إرسال النموذج بنجاح

مساعدة مدراء كلمات المرور في فهم أنّه تم إرسال نموذج هناك طريقتان لإجراء ذلك:

• يُرجى الانتقال إلى صفحة مختلفة.
• يمكنك محاكاة التنقّل باستخدام History.pushState() أو History.replaceState()، وإزالة نموذج كلمة المرور.

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

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

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

تجنَّب تكرار الإدخالات

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

الاستفادة إلى أقصى حد من سمات العناصر

هنا يحدث السحر الحقيقي! تتضمّن المتصفّحات ميزات مضمّنة مفيدة متعددة تستخدم سمات عناصر الإدخال.

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

يجب أن تحتوي حقول إدخال كلمات المرور على type="password" لإخفاء نص كلمة المرور ومساعدة المتصفّح في فهم أنّ الإدخال مخصّص لكلمات المرور. (يُرجى العِلم أنّ المتصفّحات تستخدم مجموعة متنوعة من الأساليب لفهم أدوار الإدخال وتحديد ما إذا كان سيتم عرض خيار حفظ كلمات المرور أم لا).

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

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

استخدِم <input type="email"> لتزويد مستخدمي الأجهزة الجوّالة بلوحة مفاتيح مناسبة وتفعيل عملية التحقّق الأساسية من صحة عنوان البريد الإلكتروني المضمّنة في المتصفّح، بدون الحاجة إلى استخدام JavaScript.

إذا كنت بحاجة إلى استخدام رقم هاتف بدلاً من عنوان بريد إلكتروني، يتيح لك <input type="tel"> استخدام لوحة مفاتيح الهاتف على الأجهزة الجوّالة. يمكنك أيضًا استخدام السمة inputmode عند الضرورة: السمة inputmode="numeric" مثالية لأرقام التعريف الشخصية. Everything You Ever Wanted to Know About inputmode has more detail.

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

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

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

الاختبار على مجموعة من الأجهزة

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

ننصحك باستخدام صفحتَين

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

من الأفضل تنفيذ ذلك باستخدام عنصر <form> واحد. استخدِم JavaScript لعرض حقل إدخال البريد الإلكتروني فقط في البداية، ثم إخفائه وعرض حقل إدخال كلمة المرور. إذا كان عليك إجبار المستخدم على الانتقال إلى صفحة جديدة بين إدخال بريده الإلكتروني وكلمة المرور، يجب أن يحتوي النموذج في الصفحة الثانية على عنصر إدخال مخفي يتضمّن قيمة البريد الإلكتروني، وذلك لمساعدة مدراء كلمات المرور في تخزين القيمة الصحيحة. أنماط نماذج كلمات المرور التي يفهمها Chromium تقدّم مثالاً على الرمز البرمجي.

مساعدة المستخدمين على تجنُّب إعادة إدخال البيانات

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

هناك جزأين لهذا:

1. تساعد السمات autocomplete وname وid وtype المتصفّحات في فهم دور حقول الإدخال من أجل تخزين البيانات التي يمكن استخدامها لاحقًا في الملء التلقائي. للسماح بتخزين البيانات من أجل الملء التلقائي، تتطلّب المتصفّحات الحديثة أيضًا أن تحتوي حقول الإدخال على قيمة name أو id ثابتة (لا يتم إنشاؤها عشوائيًا عند كل تحميل للصفحة أو نشر للموقع الإلكتروني)، وأن تكون في <form> مع زر submit.

2. تساعد السمة autocomplete المتصفّحات في ملء حقول الإدخال تلقائيًا بشكل صحيح باستخدام البيانات المخزّنة.

بالنسبة إلى حقول إدخال البريد الإلكتروني، استخدِم autocomplete="username" لأنّ مدراء كلمات المرور في المتصفّحات الحديثة يتعرّفون على username، مع أنّه من الأفضل استخدام type="email" وقد تحتاج إلى استخدام id="email" وname="email".

بالنسبة إلى حقول إدخال كلمات المرور، استخدِم القيمتَين المناسبتَين autocomplete وid لمساعدة المتصفّحات في التمييز بين كلمات المرور الجديدة والحالية.

استخدام autocomplete="new-password" وid="new-password" لإنشاء كلمة مرور جديدة

• استخدِم autocomplete="new-password" وid="new-password" لإدخال كلمة المرور في نموذج الاشتراك، أو كلمة المرور الجديدة في نموذج تغيير كلمة المرور.

استخدام autocomplete="current-password" وid="current-password" لكلمة مرور حالية

• استخدِم autocomplete="current-password" وid="current-password" لإدخال كلمة المرور في نموذج تسجيل الدخول أو لإدخال كلمة المرور القديمة للمستخدم في نموذج تغيير كلمة المرور. يخبر هذا المتصفح أنك تريد منه استخدام كلمة المرور الحالية التي قام بتخزينها للموقع.

بالنسبة إلى نموذج الاشتراك:

<input type="password" autocomplete="new-password" id="new-password" …>

لتسجيل الدخول:

<input type="password" autocomplete="current-password" id="current-password" …>

إتاحة استخدام خدمات إدارة كلمات المرور

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

يعرض Chrome على الكمبيوتر اقتراحات لعناوين البريد الإلكتروني، ويُظهر مدير كلمات المرور، ويملأ كلمة المرور تلقائيًا.

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

الملء التلقائي: ما يجب أن يعرفه مطوّرو الويب، ولكنهم لا يعرفونه يحتوي على الكثير من المعلومات حول استخدام name وautocomplete. تسرد مواصفات HTML جميع القيم الـ 59 المحتملة.

السماح للمتصفّح باقتراح كلمة مرور قوية

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

إليك كيفية إجراء ذلك في Safari على الكمبيوتر المكتبي.

(يتوفّر اقتراح كلمة مرور قوية وفريدة في Safari منذ الإصدار 12.0).

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

المساعدة في إنقاذ المستخدمين من فقدان المدخلات عن طريق الخطأ

أضِف السمة required إلى حقلَي البريد الإلكتروني وكلمة المرور. تطلب المتصفحات الحديثة تلقائيًا التركيز على البيانات المفقودة وتعيينها. لا حاجة إلى استخدام JavaScript.

التصميم للأصابع والإبهام

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

تأكَّد من أنّ حجم حقول الإدخال والأزرار كبير بما يكفي

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

وفقًا لإرشادات تسهيل الاستخدام في Android، فإن حجم الهدف الموصى به لكائنات شاشة اللمس هو 7-10 مم. تقترح إرشادات واجهة Apple 48 × 48 بكسل، وتقترح W3C ما لا يقل عن 44 × 44 بكسل CSS. على هذا الأساس، أضف (على الأقل) حوالي 15 بكسل من المساحة المتروكة لعناصر الإدخال والأزرار للجوال، وحوالي 10 بكسل على سطح المكتب. جرب ذلك باستخدام جهاز محمول حقيقي وإصبع أو إبهام حقيقي. يجب أن تكون قادرًا على النقر بشكل مريح على كل من المدخلات والأزرار.

يمكن أن يساعدك تدقيق Lighthouse أهداف النقر ليست بالحجم المناسب في أتمتة عملية رصد عناصر الإدخال الصغيرة جدًا.

التصميم للإبهام

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

اجعل النص كبيرًا بما يكفي

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

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

وهذا يعني أنّه عليك استخدام حجم بكسل أكبر على الأجهزة الجوّالة: حجم 16px على Chrome لأجهزة الكمبيوتر المكتبي مقروء تمامًا، ولكن حتى مع الرؤية الجيدة، من الصعب قراءة نص بحجم 16px على Chrome لنظام Android. يمكنك ضبط أحجام بكسل مختلفة للخطوط لأحجام إطارات العرض المختلفة باستخدام الاستعلامات عن الوسائط. ‫20px مناسبة تقريبًا على الأجهزة الجوّالة، ولكن عليك اختبار ذلك مع أصدقاء أو زملاء يعانون من ضعف في النظر.

يمكن أن يساعدك تدقيق Lighthouse بشأن عدم استخدام المستند لأحجام خطوط مقروءة في رصد النصوص الصغيرة جدًا بشكل تلقائي.

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

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

تأكَّد من أنّ إدخالاتك ظاهرة بوضوح

إنّ نمط الحدود التلقائي لحقول الإدخال يجعل من الصعب رؤيتها. وتكون غير مرئية تقريبًا على بعض المنصات، مثل Chrome لأجهزة Android.

بالإضافة إلى المساحة المتروكة، أضِف حدًا: على خلفية بيضاء، من الأفضل استخدام #ccc أو لون أغمق.

استخدام ميزات المتصفّح المضمّنة للتحذير من قيم الإدخال غير الصالحة

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

يمكنك استخدام أداة اختيار لغة CSS :invalid لتمييز البيانات غير الصالحة. استخدِم :not(:placeholder-shown) لتجنُّب اختيار حقول إدخال لا تتضمّن محتوى.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

جرِّب طرقًا مختلفة لتمييز حقول الإدخال التي تحتوي على قيم غير صالحة.

استخدام JavaScript عند الضرورة

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

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

يستخدم الرمز التالي زرًا نصيًا لإضافة وظيفة عرض كلمة المرور.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

في ما يلي رمز CSS لجعل الزر يبدو كنص عادي:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

وإليك رمز JavaScript لإظهار كلمة المرور:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

إليك النتيجة النهائية:

تسهيل الوصول إلى حقول إدخال كلمات المرور

استخدِم aria-describedby لتحديد قواعد كلمة المرور من خلال منحه معرّف العنصر الذي يصف القيود. توفر برامج قراءة الشاشة نص التسمية ونوع الإدخال (كلمة المرور) ثم الوصف.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

عند إضافة وظيفة إظهار كلمة المرور، تأكَّد من تضمين aria-label للتحذير من أنّه سيتم عرض كلمة المرور. وإلا فقد يكشف المستخدمون عن كلمات المرور عن غير قصد.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

يمكنك الاطّلاع على ميزتَي ARIA أثناء العمل في العرض التوضيحي التالي:

إنشاء نماذج تسهّل الاستخدام يتضمّن المزيد من النصائح للمساعدة في تسهيل استخدام النماذج.

التحقُّق من صحة البيانات في الوقت الفعلي وقبل الإرسال

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

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

مزيد من المعلومات حول استخدام JavaScript لإجراء عمليات تحقّق أكثر تعقيدًا في الوقت الفعلي

الإحصاءات وRUM

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

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

• إحصاءات الصفحة: عدد مشاهدات صفحة الاشتراك وتسجيل الدخول ومعدلات الارتداد والخروج
• إحصاءات التفاعل: مسارات الإحالة الناجحة للأهداف (أين يتخلى المستخدمون عن عملية تسجيل الدخول أو مسار تسجيل الدخول؟) والأحداث (ما هي الإجراءات التي يتخذها المستخدمون عند التفاعل مع النماذج؟)
• أداء الموقع الإلكتروني: المقاييس التي تركّز على المستخدم (هل نماذج الاشتراك وتسجيل الدخول بطيئة لسبب ما؟ وإذا كان الأمر كذلك، ما هو السبب؟).

يمكنك أيضًا استخدام اختبارات A/B لتجربة طرق مختلفة لعمليات التسجيل وتسجيل الدخول، واستخدام ميزة الطرح على مراحل للتحقّق من التغييرات على مجموعة فرعية من المستخدمين قبل طرحها لجميع المستخدمين.

الإرشادات العامة

يمكن أن يؤدي التصميم الجيد لواجهة المستخدم وتجربة المستخدم إلى تقليل معدّل التخلي عن نموذج تسجيل الدخول:

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

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

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