استخدِم ميزات المتصفّح المتوافقة مع عدّة منصات لإنشاء نماذج تسجيل دخول آمنة وسهلة الاستخدام.
إذا كان المستخدمون بحاجة إلى تسجيل الدخول إلى موقعك الإلكتروني، من المهم تصميم نموذج تسجيل دخول جيد. وينطبق ذلك بشكل خاص على المستخدمين الذين لديهم اتصالات ضعيفة أو يستخدمون الأجهزة الجوّالة أو على عجلة من أمرهم أو تحت ضغط. تؤدي نماذج تسجيل الدخول المصمّمة بشكل سيئ إلى ارتفاع معدلات الارتداد. فكل ارتداد قد يعني خسارة عميل واستياء مستخدم، وليس مجرد فرصة ضائعة لتسجيل الدخول.
كيفية الإعداد
في ما يلي أهم الإرشادات لإنشاء نماذج تسجيل دخول ناجحة.
استخدام ترميز HTML صالح ومفيد
استفِد إلى أقصى حد من العناصر والسمات المصمّمة لإنشاء النماذج:
<form>و<input>و<label>و<button>typeوautocompleteوinputmode
تتيح هذه العناصر وظائف المتصفّح المضمّنة، وتحسّن أدوات تسهيل الاستخدام، وتضيف معنى إلى الترميز.
استخدِم العنصر <label> لتصنيف حقول النماذج لإدخال البيانات
لتصنيف <input> أو <select> أو <textarea>، استخدِم <label>. يمكنك ربط تصنيف بإدخال من خلال منح سمة for للتصنيف القيمة نفسها لسمة id للإدخال.
الاستفادة إلى أقصى حد من سمات HTML
سهِّل على المستخدمين إدخال البيانات باستخدام سمة عنصر <input> المناسبة <type> لتوفير لوحة المفاتيح المناسبة على الأجهزة الجوّالة وتفعيل عملية التحقّق الأساسية المضمّنة في المتصفّح.
يجب دائمًا استخدام type="email" لعناوين البريد الإلكتروني وtype="tel" لأرقام الهواتف.
يجب أن يتضمّن كل عنصر <input> و<select> و<textarea> سمة autocomplete مناسبة لتحسين تسهيل الاستخدام ومساعدة المستخدمين في تجنُّب إعادة إدخال البيانات.
تحتوي حقول اسم المستخدم والبريد الإلكتروني على معرّفات، وليس على نصوص. أضِف spellcheck="false" حتى لا يعيد المتصفّح كتابتها إلى شيء لا يتطابق مع الحساب. يتم دائمًا إيقاف autocorrect وautocapitalize في input type="email"، ولكنّهما مطلوبان لأسماء المستخدمين غير المرتبطة بعناوين بريد إلكتروني.
اجعل الأزرار مفيدة
استخدِم <button> للأزرار. يمكنك أيضًا استخدام <input type="submit">، ولكن لا تستخدِم div أو أي عنصر عشوائي آخر يعمل كزر. توفّر عناصر الأزرار سلوكًا يسهل الوصول إليه، ووظيفة مضمّنة لإرسال النماذج، ويمكن تصميمها بسهولة.
امنح كل زر إرسال نموذج قيمة توضح ما يفعله. استخدِم تصنيفًا واضحًا يسهل التعرّف عليه. على سبيل المثال، استخدِم تسجيل الدخول بدلاً من متابعة أو إرسال.
استخدام حقل واحد لإدخال الاسم كلما أمكن ذلك
اسمح للمستخدمين بإدخال أسمائهم باستخدام إدخال واحد، ما لم يكن لديك سبب وجيه لتخزين الأسماء الأولى أو أسماء العائلة أو الألقاب أو أجزاء الأسماء الأخرى بشكل منفصل. يؤدي استخدام حقل واحد لإدخال الاسم إلى جعل النماذج أقل تعقيدًا، ويتيح استخدام ميزة "القص واللصق"، ويجعل ميزة "الملء التلقائي" أبسط.
السماح بالأسماء الدولية لإجراء عملية التحقّق، تجنَّب استخدام التعبيرات العادية التي تتطابق مع الأحرف اللاتينية فقط. يستبعد خيار "الأحرف اللاتينية فقط" المستخدمين الذين تتضمّن أسماؤهم أو عناوينهم أحرفًا غير لاتينية. بدلاً من ذلك، اسمح بمطابقة أحرف Unicode، وتأكَّد من أنّ الواجهة الخلفية تتيح استخدام Unicode بشكل آمن كإدخال وإخراج. تتوافق المتصفّحات الحديثة مع ترميز Unicode في التعبيرات العادية.
عرض مستوى تقدّم عملية تسجيل الدخول
في كل خطوة من خطوات تسجيل الدخول، استخدِم عناوين الصفحات وقيم الأزرار الوصفية التي توضّح ما يجب فعله الآن وما هي الخطوة التالية.
استخدِم السمة enterkeyhint في حقول الإدخال في النماذج لضبط تصنيف مفتاح Enter في لوحة المفاتيح على الأجهزة الجوّالة. على سبيل المثال، يمكنك استخدام enterkeyhint="previous" وenterkeyhint="next" ضمن نموذج متعدّد الصفحات، وenterkeyhint="done" للإدخال النهائي في النموذج، وenterkeyhint="search" لإدخال البحث.
مساعدة المستخدمين في تجنُّب إعادة إدخال بيانات تسجيل الدخول
تأكَّد من إضافة قيم autocomplete المناسبة في نماذج تسجيل الدخول.
يتيح ذلك للمتصفّحات مساعدة المستخدمين من خلال تخزين تفاصيل تسجيل الدخول بأمان وإدخال بيانات النماذج بشكل صحيح. بدون ميزة "الإكمال التلقائي"، قد يميل المستخدمون أكثر إلى الاحتفاظ بسجلّ مادي لتفاصيل تسجيل الدخول، أو تخزين بيانات تسجيل الدخول بشكل غير آمن على أجهزتهم.
التحقّق بعناية
التحقّق من صحة البيانات المُدخلة في الوقت الفعلي وقبل إرسال النموذج استخدِم type="email" لإدخالات البريد الإلكتروني، وسيتحقّق المتصفّح من التنسيق تلقائيًا. أضِف السمة required إلى الحقول الإلزامية لمنع إرسال نماذج فارغة.
وضع تسجيل الدخول في عنصر <form> خاص به
استخدِم دائمًا العنصر <form> عندما تطلب من المستخدمين إدخال البيانات
لا تضع عناصر الإدخال في <div>، بل عالِج إرسال بيانات الإدخال باستخدام JavaScript فقط. من الأفضل بشكل عام استخدام عنصر <form>. يؤدي ذلك إلى إتاحة موقعك الإلكتروني لبرامج قراءة الشاشة والأجهزة المساعِدة الأخرى، ويتيح مجموعة من ميزات المتصفّح المضمّنة، ويسهّل إنشاء عملية تسجيل دخول أساسية تعمل على المتصفّحات القديمة، ويمكن أن يستمر في العمل حتى في حال تعذُّر استخدام JavaScript.
تجنَّب تكرار الإدخالات
تفرض بعض المواقع الإلكترونية على المستخدمين إدخال عناوين البريد الإلكتروني أو كلمات المرور مرّتين. قد يقلل ذلك من الأخطاء لعدد قليل من المستخدمين، ولكنه يتسبب في عمل إضافي لجميع المستخدمين، ويزيد من معدلات التراجع. ولا معنى أيضًا لطلب إدخال عنوان البريد الإلكتروني مرتين في المتصفحات التي تملأ عناوين البريد الإلكتروني تلقائيًا أو تقترح كلمات مرور قوية. من الأفضل السماح للمستخدمين بتأكيد عنوان بريدهم الإلكتروني (ستحتاج إلى إجراء ذلك على أي حال) وتسهيل إعادة ضبط كلمة المرور إذا لزم الأمر.
الحفاظ على خصوصية كلمات المرور، مع السماح للمستخدمين بالاطّلاع عليها إذا أرادوا ذلك
يجب أن تحتوي حقول إدخال كلمات المرور على type="password" لإخفاء نص كلمة المرور ومساعدة المتصفّح في فهم أنّ الحقل مخصّص لكلمات المرور. (يُرجى العِلم أنّ المتصفّحات تستخدم مجموعة متنوعة من الأساليب لفهم أدوار الإدخال وتحديد ما إذا كان سيتم عرض خيار حفظ كلمات المرور أم لا).
يجب إضافة زر تبديل إظهار كلمة المرور لتمكين المستخدمين من التحقق من النص الذي أدخلوه، ولا تنسَ إضافة رابط نسيت كلمة المرور.
توفير لوحة المفاتيح المناسبة لمستخدمي الأجهزة الجوّالة
استخدِم <input type="email"> لتزويد مستخدمي الأجهزة الجوّالة بلوحة مفاتيح مناسبة وتفعيل ميزة التحقّق الأساسية المضمّنة من عنوان البريد الإلكتروني من خلال المتصفّح، بدون الحاجة إلى JavaScript.
إذا كنت بحاجة إلى استخدام رقم هاتف بدلاً من عنوان بريد إلكتروني، يتيح لك <input type="tel"> استخدام لوحة مفاتيح الهاتف على الأجهزة الجوّالة. يمكنك أيضًا استخدام السمة inputmode عند الضرورة: السمة inputmode="numeric" مثالية لأرقام التعريف الشخصية.
منع لوحة المفاتيح على الأجهزة الجوّالة من حجب زر "تسجيل الدخول"
إذا لم تكن حذرًا، قد تغطّي لوحات المفاتيح على الأجهزة الجوّالة النموذج أو تحجب زر "تسجيل الدخول" جزئيًا. وقد يستسلم المستخدمون قبل أن يدركوا ما حدث.
ويمكنك تجنُّب ذلك، إن أمكن، من خلال عرض حقول إدخال البريد الإلكتروني (أو الهاتف) وكلمة المرور وزر تسجيل الدخول فقط في أعلى صفحة تسجيل الدخول. ضع المحتوى الآخر في الأسفل.
مساعدة المستخدمين على تجنُّب إعادة إدخال البيانات
يمكنك مساعدة المتصفّحات في تخزين البيانات بشكل صحيح وملء حقول الإدخال تلقائيًا، وبذلك لن يضطر المستخدمون إلى تذكُّر إدخال قيم البريد الإلكتروني وكلمة المرور. وهذا مهم بشكل خاص على الأجهزة الجوّالة، وهو أمر بالغ الأهمية لإدخالات البريد الإلكتروني التي تسجّل معدلات تراجع عالية. هناك جزأين لهذا:
- تساعد السمات
autocompleteوnameوidوtypeالمتصفّحات في فهم دور الإدخالات لتخزين البيانات التي يمكن استخدامها لاحقًا في الملء التلقائي. للسماح بتخزين البيانات من أجل الملء التلقائي، تتطلّب المتصفّحات الحديثة أيضًا أن تحتوي حقول الإدخال على قيمةnameأوidثابتة (لا يتم إنشاؤها عشوائيًا عند كل تحميل للصفحة أو نشر للموقع الإلكتروني)، وأن تكون في عنصر<form>يتضمّن زرsubmit. - تساعد السمة
autocompleteالمتصفّحات في ملء حقول الإدخال تلقائيًا بشكل صحيح باستخدام البيانات المخزّنة.
بالنسبة إلى حقول إدخال البريد الإلكتروني، استخدِم autocomplete="username"، لأنّ مدراء كلمات المرور في المتصفّحات الحديثة يتعرّفون على username، مع أنّه من الأفضل استخدام type="email" وقد تحتاج إلى استخدام id="email" وname="email". بالنسبة إلى حقول إدخال كلمات المرور، استخدِم قيمة autocomplete المناسبة لمساعدة المتصفّحات في التمييز بين كلمات المرور الجديدة والحالية.
استخدام السمة autocomplete="current-password" لكلمة مرور حالية
إلزامي: استخدِم autocomplete="current-password" لإدخال كلمة المرور في نموذج تسجيل الدخول. يُعلم هذا الإجراء المتصفّح بأنّك تريد استخدام كلمة المرور الحالية التي تم تخزينها للموقع الإلكتروني.
بالنسبة إلى نموذج تسجيل الدخول:
<input type="password" autocomplete="current-password" id="current-password" …>
السماح للمتصفّح باقتراح كلمة مرور قوية
تستخدم المتصفّحات الحديثة أساليب إرشادية لتحديد وقت عرض واجهة مستخدم مدير كلمات المرور واقتراح كلمة مرور قوية.
بفضل أدوات إنشاء كلمات المرور المضمّنة في المتصفّحات، لا يحتاج المستخدمون والمطوّرون إلى معرفة ما هي "كلمة المرور القوية". وبما أنّ المتصفّحات يمكنها تخزين كلمات المرور بأمان وملؤها تلقائيًا حسب الحاجة، لن يحتاج المستخدمون إلى تذكُّر كلمات المرور أو إدخالها. إنّ تشجيع المستخدمين على الاستفادة من أدوات إنشاء كلمات المرور المضمّنة في المتصفّح يعني أيضًا أنّه من المرجّح أن يستخدموا كلمة مرور فريدة وقوية على موقعك الإلكتروني، ومن غير المرجّح أن يعيدوا استخدام كلمة مرور يمكن اختراقها في مكان آخر.
المساعدة في إنقاذ المستخدمين من فقدان المدخلات عن طريق الخطأ
إجراء إلزامي: أضِف السمة required إلى حقلَي البريد الإلكتروني وكلمة المرور. تطلب المتصفحات الحديثة تلقائيًا التركيز على البيانات المفقودة وتعيينها.
<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>
السماح بلصق كلمة المرور
لا تسمح بعض المواقع الإلكترونية بلصق النص في حقول إدخال كلمة المرور.
يؤدي عدم السماح بلصق كلمات المرور إلى إزعاج المستخدمين، ويشجّع على استخدام كلمات مرور يسهل تذكّرها (وبالتالي قد يسهل اختراقها)، وقد يؤدي في الواقع إلى تقليل مستوى الأمان، وفقًا لمؤسسات مثل "المركز الوطني للأمن السيبراني" في المملكة المتحدة. لا يدرك المستخدمون أنّ اللصق غير مسموح به إلا بعد محاولة لصق كلمة المرور، لذا فإنّ عدم السماح بلصق كلمة المرور لا يمنع ثغرات الحافظة.
استراتيجيات احتياطية
الملء التلقائي هو تحسين تدريجي. في المتصفّحات التي لا تتيح ميزة "الملء التلقائي"، سيحتاج المستخدمون ببساطة إلى إدخال بيانات اعتماد تسجيل الدخول يدويًا. ستظل قيود HTML الدلالية (مثل type وinputmode وrequired) تعمل بشكل مناسب للتحقّق من صحة إدخال المستخدم وتوفير لوحات المفاتيح الافتراضية الصحيحة.