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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

من الأفضل تنفيذ ذلك باستخدام عنصر <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 والإصدارات الأحدث على أجهزة الكمبيوتر المكتبي، يتم عرض مدير كلمات المرور، ثم يتم استخدام المصادقة بالمقاييس الحيوية (بصمة الإصبع أو التعرّف على الوجه) إذا كانت متاحة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تضبط المتصفّحات على الأنظمة الأساسية المختلفة أحجام الخطوط بشكلٍ مختلف، لذا من الصعب تحديد حجم خط معيّن يعمل بشكلٍ جيد في كل مكان. يُظهر استطلاع سريع على المواقع الإلكترونية الرائجة أنّ أحجام النصوص تتراوح بين 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 في Glitch التالي:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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