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

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

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

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

قائمة التحقق

استخدام تنسيق HTML ذي معنى

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

استخدام <form>

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

استخدام <label>

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

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

هناك سببان لذلك:

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

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

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

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

افتح Glitch في موضع التصنيف على جهاز جوّال للاطّلاع على المشكلة بنفسك.

استخدام <button>

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

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

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

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

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

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

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

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

عدم تكرار الإدخالات

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

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

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

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

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

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

نموذج تسجيل الدخول إلى Google يعرض رمز إظهار كلمة المرور
إدخال كلمة المرور من نموذج تسجيل الدخول إلى Google: مع رمز عرض كلمة المرور ورابط هل نسيت كلمة المرور؟

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

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

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

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

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

لقطةَا شاشة لنموذج تسجيل الدخول على هاتف Android: إحداهما تعرض كيفية حجب لوحة مفاتيح الهاتف لزر الإرسال.
زر تسجيل الدخول: يظهر لك الآن، ثم يختفي.

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

لقطة شاشة لنموذج تسجيل الدخول على هاتف Android: لا تحجب لوحة مفاتيح الهاتف زر &quot;تسجيل الدخول&quot;.
لا تحجب لوحة المفاتيح زر تسجيل الدخول.

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

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

لقطات شاشة لنموذج تسجيل الدخول على هواتف iPhone 7 و8 و11 على هاتفَي iPhone 7 و8، تحجب لوحة مفاتيح الهاتف زر &quot;تسجيل الدخول&quot;، ولكن ليس على هاتف iPhone 11.
زر تسجيل الدخول: يظهر بشكل غير واضح على هاتفَي iPhone 7 و8، ولكن ليس على هاتف iPhone 11.

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

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

لقطة شاشة لنموذج تسجيل الدخول على موقع Amazon الإلكتروني: عنوان البريد الإلكتروني/الهاتف وكلمة المرور في &quot;صفحتَين&quot; منفصلتَين
تسجيل الدخول على مرحلتَين: البريد الإلكتروني أو الهاتف، ثم كلمة المرور

من الأفضل تنفيذ ذلك باستخدام عنصر <form> واحد. استخدِم JavaScript لعرض حقل إدخال البريد الإلكتروني فقط في البداية، ثم إخفائه وعرض حقل إدخال كلمة المرور. إذا كان عليك إجبار المستخدم على الانتقال إلى صفحة جديدة بين إدخال بريده الإلكتروني وكلماته المرسَلة، يجب أن يتضمّن النموذج في الصفحة الثانية عنصر إدخال مخفيًا يحتوي على قيمة البريد الإلكتروني، للمساعدة في تمكين مدراء كلمات المرور من تخزين القيمة الصحيحة. Password Form Styles that Chromium Understands (أنماط نماذج كلمات المرور التي يفهمها 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 والإصدارات الأحدث على أجهزة الكمبيوتر المكتبي، يتم عرض مدير كلمات المرور، ثم يتم استخدام المصادقة بالمقاييس الحيوية (بصمة الإصبع أو التعرّف على الوجه) إذا كانت متاحة.

لقطات شاشة لثلاث مراحل من عملية تسجيل الدخول في Safari على الكمبيوتر المكتبي: مدير كلمات المرور، والمصادقة باستخدام المقاييس الحيوية، والملء التلقائي
تسجيل الدخول باستخدام ميزة "الإكمال التلقائي" بدون الحاجة إلى إدخال نص

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

لقطات شاشة لأربع مراحل من عملية تسجيل الدخول في Chrome على الكمبيوتر المكتبي: إكمال عنوان البريد الإلكتروني، اقتراح عنوان البريد الإلكتروني، خدمة إدارة كلمات المرور، الملء التلقائي عند الاختيار
مسار تسجيل الدخول باستخدام الملء التلقائي في الإصدار 84 من Chrome

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

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

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

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

في ما يلي كيفية تنفيذ Safari لهذه العملية على أجهزة الكمبيوتر المكتبي.

لقطة شاشة لخدمة إدارة كلمات المرور في Firefox على الكمبيوتر المكتبي
مسار اقتراح كلمات المرور في Safari

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

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

تجنُّب فقدان المستخدمين للإدخالات عن طريق الخطأ

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

لقطة شاشة لمتصفّحَي Firefox وChrome للكمبيوتر المكتبي على نظام التشغيل Android تعرض رسالة المطالبة &quot;يُرجى ملء هذا الحقل&quot; للبيانات غير المتوفّرة
إشعار وتركيز على البيانات غير المتوفّرة في Firefox للكمبيوتر المكتبي (الإصدار 76) وChrome لأجهزة Android (الإصدار 83).

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

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

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

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

لقطة شاشة لنموذج بدون تنسيق في Chrome للكمبيوتر المكتبي وChrome لأجهزة Android

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

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

تصميم مخصّص للأجهزة الجوّالة

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

يجب أن يكون النص كبيرًا بما يكفي.

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

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

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

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

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

يجب ترك مسافة كافية بين الإدخالات.

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

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

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

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

لقطة شاشة لنموذج منمّق في Chrome على Android
نص قابل للقراءة، وحدود إدخال مرئية، ومساحات متروكة وهامشات ملائمة:

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

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

لقطة شاشة لنموذج تسجيل الدخول في Chrome على الكمبيوتر المكتبي تعرِض طلب المتصفّح والتركيز على قيمة بريد إلكتروني غير صالحة
التحقّق الأساسي المضمّن من المتصفّح:

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

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

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

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

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

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

نموذج تسجيل الدخول إلى Google يعرض زرّ التبديل &quot;إظهار كلمة المرور&quot; ورابط &quot;نسيت كلمة المرور&quot;
نموذج تسجيل الدخول باستخدام حساب Google: يتضمّن زرّ التبديل عرض كلمة المرور ورابط نسيت كلمة المرور.

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

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.');
 
}
}

في ما يلي النتيجة النهائية:

لقطات شاشة لنموذج تسجيل الدخول مع زر &quot;إظهار كلمة المرور&quot; في Safari على جهاز Mac وعلى هاتف iPhone 7
نموذج تسجيل الدخول الذي يتضمّن "زر" نص عرض كلمة المرور، في Safari على أجهزة Mac وiPhone 7

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

استخدِم 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 في Glitch التالي:

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

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

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

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

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

الإحصاءات وميزة "رصد المستخدمين الجدد"

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

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

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

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

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

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

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

الصورة مقدمة من Meghan Schiereck على Unsplash.