استخدِم ميزات المتصفّح المتوافقة مع عدّة منصات لإنشاء نماذج اشتراك آمنة وسهلة الاستخدام.
إذا كان المستخدمون بحاجة إلى الاشتراك في موقعك الإلكتروني، من المهم تصميم نموذج اشتراك جيد. وينطبق ذلك بشكل خاص على المستخدمين الذين لديهم اتصالات ضعيفة أو يستخدمون الأجهزة الجوّالة أو على عجلة من أمرهم أو تحت ضغط. تحصل نماذج الاشتراك سيئة التصميم على معدلات ارتداد عالية. فكل ارتداد قد يعني خسارة عميل ومستخدم مستاء، وليس مجرد فرصة ضائعة للاشتراك.
كيفية الإعداد
في ما يلي أهم الإرشادات لإنشاء نماذج اشتراك ناجحة.
استخدام ترميز 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" لإدخالات البريد الإلكتروني، وسيتحقّق المتصفّح من التنسيق تلقائيًا. بالنسبة إلى كلمات المرور، استخدِم سمة pattern لفرض متطلبات القوة وتقديم رسائل خطأ واضحة عند تعذُّر التحقّق من الصحة. أضِف السمة 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="new-password" لكلمة مرور جديدة
MANDATORY: For a sign-up form, use autocomplete="new-password".
<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>
السماح للمتصفّح باقتراح كلمة مرور قوية
تستخدم المتصفّحات الحديثة أساليب إرشادية لتحديد وقت عرض واجهة مستخدم مدير كلمات المرور واقتراح كلمة مرور قوية.
بفضل أدوات إنشاء كلمات المرور المضمّنة في المتصفّحات، لا يحتاج المستخدمون والمطوّرون إلى معرفة ما هي "كلمة المرور القوية". وبما أنّ المتصفّحات يمكنها تخزين كلمات المرور بأمان وملؤها تلقائيًا حسب الحاجة، لن يحتاج المستخدمون إلى تذكُّر كلمات المرور أو إدخالها. إنّ تشجيع المستخدمين على الاستفادة من أدوات إنشاء كلمات المرور المضمّنة في المتصفّح يعني أيضًا أنّه من المرجّح أن يستخدموا كلمة مرور فريدة وقوية على موقعك الإلكتروني، ومن غير المرجّح أن يعيدوا استخدام كلمة مرور يمكن اختراقها في مكان آخر.
المساعدة في إنقاذ المستخدمين من فقدان المدخلات عن طريق الخطأ
أضِف السمة required إلى حقلَي البريد الإلكتروني وكلمة المرور. تطلب المتصفحات الحديثة تلقائيًا التركيز على البيانات المفقودة وتعيينها.
السماح بلصق كلمة المرور
لا تسمح بعض المواقع الإلكترونية بلصق النص في حقول إدخال كلمة المرور.
يؤدي عدم السماح بلصق كلمات المرور إلى إزعاج المستخدمين، ويشجّع على استخدام كلمات مرور يسهل تذكّرها (وبالتالي قد يسهل اختراقها)، وقد يؤدي في الواقع إلى تقليل مستوى الأمان، وفقًا لمؤسسات مثل "المركز الوطني للأمن السيبراني" في المملكة المتحدة. لا يدرك المستخدمون أنّ اللصق غير مسموح به إلا بعد محاولة لصق كلمة المرور، لذا فإنّ عدم السماح بلصق كلمة المرور لا يمنع ثغرات الحافظة.
إتاحة تسجيل الدخول من خلال خدمات تابعة لجهات خارجية
يفضّل العديد من المستخدمين تسجيل الدخول إلى المواقع الإلكترونية باستخدام نموذج الاشتراك الذي يتطلّب عنوان بريد إلكتروني وكلمة مرور. ومع ذلك، يجب أيضًا السماح للمستخدمين بتسجيل الدخول باستخدام موفِّر هوية خارجي، وهو ما يُعرف أيضًا باسم تسجيل الدخول الموحّد.
لهذا النهج مزايا عديدة. بالنسبة إلى المستخدمين الذين ينشئون حسابًا باستخدام تسجيل الدخول الموحّد، لا تحتاج إلى طلب كلمات المرور أو إرسالها أو تخزينها.
قد تتمكّن أيضًا من الوصول إلى معلومات إضافية تم التحقّق منها في الملف الشخصي من خلال تسجيل الدخول الموحّد، مثل عنوان البريد الإلكتروني، ما يعني أنّ المستخدم ليس عليه إدخال هذه البيانات ولن تحتاج إلى إجراء عملية التحقّق بنفسك. يمكن أن يسهّل تسجيل الدخول الموحّد أيضًا على المستخدمين عند حصولهم على جهاز جديد.
توخّي الحذر عند اختيار أسماء المستخدمين
لا تصرّ على اسم مستخدم إلا إذا كنت بحاجة إليه (أو إلى أن تحتاجه). يمكنك السماح للمستخدمين بالاشتراك وتسجيل الدخول باستخدام عنوان بريد إلكتروني (أو رقم هاتف) وكلمة مرور فقط، أو تسجيل الدخول الموحّد إذا كانوا يفضّلون ذلك. لا تجبرهم على اختيار اسم مستخدم وتذكره.
إذا كان موقعك الإلكتروني يتطلّب أسماء مستخدمين، لا تفرض قواعد غير منطقية عليها، ولا تمنع المستخدمين من تعديل أسماء المستخدمين الخاصة بهم. في الخلفية، يجب إنشاء معرّف فريد لكل حساب مستخدم، وليس معرّفًا يستند إلى بيانات شخصية مثل اسم المستخدم.
احرص أيضًا على استخدام autocomplete="username" لأسماء المستخدمين.
استراتيجيات احتياطية
الملء التلقائي هو تحسين تدريجي. في المتصفّحات التي لا تتيح ميزة الملء التلقائي، سيحتاج المستخدمون ببساطة إلى إدخال بيانات اعتماد الاشتراك يدويًا. ستظل قيود HTML الدلالية (مثل type وinputmode وrequired) تعمل بشكل مناسب للتحقّق من صحة إدخال المستخدم وتوفير لوحات المفاتيح الافتراضية الصحيحة.