أفضل ممارسات نموذج تسجيل الدخول

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

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 للإدخال.
• تُعلن برامج قراءة الشاشة عن نص التصنيف عند وصول التصنيف أو إدخال التصنيف التركيز.

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

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

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

استخدام <button>

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

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

التأكّد من إرسال النموذج بنجاح

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

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

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

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

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

عدم مضاعفة الإدخالات

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

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

هذا هو المكان الذي يحدث فيه السحر حقًا! تحتوي المتصفّحات على العديد من الميزات المدمجة المفيدة التي تستخدم سمات عناصر الإدخال.

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

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

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

منح مستخدمي الجوّال لوحة المفاتيح الصحيحة

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

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

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

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

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

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

ستحتاج إلى الاختبار على مجموعة من الأجهزة لجمهورك المستهدف وتعديل وفقًا لذلك. يتيح 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" …>

دعم تطبيقات إدارة كلمات المرور

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

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

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

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

تفعيل المتصفِّح لاقتراح كلمة مرور قوية

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

وإليك كيفية استخدام Safari على سطح المكتب.

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

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

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

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

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

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

تأكد من أن الإدخالات والأزرار كبيرة بما يكفي

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

بحسب سهولة الوصول في Android الإرشادات ويتراوح حجم الهدف الموصى به لكائنات الشاشة التي تعمل باللمس من 7 إلى 10 ملم. واجهة Apple تقترح الإرشادات بحجم 48×48 بكسل، وتقترح W3C حجم CSS 44×44 على الأقل البكسل. فِي ذَلِكَ ، أضف (على الأقل) حوالي 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 مع ملفات أكثر تعقيدًا في الوقت الفعلي والتحقق من صحته.

Analytics وRUM

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

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

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

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

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

يمكن لواجهة المستخدم وتجربة المستخدم ذات التصميم الجيد تقليل معدّل المغادرة في نموذج تسجيل الدخول:

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

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

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

صورة من تصوير ميغان شيريك على قناة Unقلاش