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

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

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

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

يجب أن تحتوي حقول إدخال كلمات المرور على 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 أن يكون حجم الصورة 48x48 بكسل، ويقترح W3C وحدة بكسل CSS 44x44 بكسل على الأقل. وبناءً على ذلك، أضِف (على الأقل) مساحة متروكة تبلغ 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 أثناء استخدامهما من خلال تأثير خلل ما يلي:

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

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

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

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

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

Analytics وRUM

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

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

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

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

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

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

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

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

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

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