تفاعل

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

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

بدلاً من محاولة استنتاج آلية الإدخال من حجم الشاشة، استخدِم ميزات الوسائط في CSS.

المؤشر

يمكنك اختبار ثلاث قيم محتملة باستخدام ميزة الوسائط pointer: none وcoarse وfine.

إذا أبلغ المتصفّح عن قيمة pointer‏=none، قد يستخدم المستخدِم لوحة مفاتيح للتفاعل مع موقعك الإلكتروني.

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

إذا أبلغ المتصفّح عن قيمة pointer‏=fine، يعني ذلك أنّ آلية الإدخال الأساسية قادرة على التحكّم بدقة. يُعدّ الماوس أو قلم الشاشة مؤشرًا جيدًا.

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

في هذا المثال، تم تكبير الأزرار للمؤشرات الخشنة:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

من الممكن أيضًا تصغير العناصر لعرض إشارات دقيقة، ولكن عليك الحذر عند إجراء ذلك:

الإجراءات غير المُوصى بها

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

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

أي مؤشر

تُبلغ ميزة الوسائط pointer عن دقة آلية الإدخال الأساسية. لكنّ العديد من الأجهزة تتضمّن أكثر من آلية إدخال واحدة. من الممكن أن يتفاعل أحد الأشخاص مع موقعك الإلكتروني باستخدام شاشة لمس وماوس في الوقت نفسه.

تختلف ميزة any-pointer عن ميزة الوسائط pointer من حيث أنّها تُبلغ في حال اجتياز أي جهاز توجيه للاختبار.

تشير قيمة any-pointer‏=none إلى عدم توفّر جهاز توجيه.

تعني قيمة any-pointer‏=coarse أنّ جهاز توجيه واحدًا على الأقل ليس دقيقًا للغاية. ولكن قد لا تكون هذه هي آلية الإدخال الأساسية.

تعني قيمة any-pointer‏=fine أنّ هناك جهاز توجيه واحدًا على الأقل يمكنه التحكّم بدقة. ولكن مرة أخرى، قد لا تكون هذه هي آلية الإدخال الأساسية.

بما أنّ طلب البحث عن الوسائط any-pointer سيُبلغ عن نتيجة إيجابية إذا اجتاز أيّ من آليات الإدخال الاختبار، من الممكن أن يُبلغ المتصفّح عن نتيجة any-pointer: fine ويُبلغ أيضًا عن نتيجة any-pointer: coarse. في هذه الحالة، يكون ترتيب طلبات البحث عن الوسائط مهمًا. وستُمنَح الأولوية للقيمة الأخيرة.

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

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

تمرير مؤشر الماوس

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

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

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

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

سيظهر الرمز إذا مرّرت مؤشر الماوس فوق هذا الزر. ولكن إذا استخدمت لوحة المفاتيح للانتقال إلى الزر، سيظل الرمز غير مرئي. عند استخدام لوحة المفاتيح، يتم التركيز على العنصر بدلاً من التمرير فوقه. سيُبلغ جهاز كمبيوتر مكتبي مزوّد بماوس أنّ آلية الإدخال الأساسية قادرة على التمرير فوق العناصر، وهذا صحيح. ولن يستفيد من أنماط :hover أي مستخدم يستخدم لوحة مفاتيح مع الماوس. لذلك، من الجيد الجمع بين أسلوبَي :hover و:focus لتغطية كلتا المتفاعلتَين.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

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

أي تمرير مؤشر الماوس

لا يُبلغ طلب البحث عن الوسائط hover إلا عن آلية الإدخال الأساسية. تحتوي بعض الأجهزة على آليات إدخال متعددة: شاشة تعمل باللمس وماوس ولوحة مفاتيح ولوحة لمس.

تمامًا كما يُبلغ any-pointer عن أيّ من آليات الإدخال، سيكون any-hover صحيحًا إذا كانت أيّ من آليات الإدخال المتاحة قادرة على التمرير فوق العناصر.

إذا قرّرت عكس المنطق في المثال السابق، يمكنك جعل أنماط التمرير المؤشر هي الإعداد التلقائي ثم إزالتها إذا كانت قيمة any-hover هي none.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

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

لوحات المفاتيح الافتراضية

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

أنواع الإدخال

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

تشكّل أنواع عناصر الإدخال في HTML5 طريقة رائعة لوصف عناصر input. تقبل سمة type قيمًا مثل email وnumber وtel وurl وغيرها.

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

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

أوضاع الإدخال

Browser Support

• 66
• 79
• 95
• 12.1

Source

تمنحك السمة inputmode إمكانية التحكّم بشكل دقيق في لوحات المفاتيح الافتراضية. على سبيل المثال، عندما يكون هناك input type واحد بقيمة number، يمكنك استخدام سمة inputmode للتمييز بين الأعداد الصحيحة والأرقام العشرية.

إذا كنت تطلب عددًا صحيحًا، مثل عمر شخص ما، استخدِم inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

إذا كنت تطلب رقمًا يتضمّن خانات عشرية، مثل السعر، استخدِم inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

الإكمال التلقائي

لا أحد يحب ملء النماذج. بصفتك مصمّمًا، يمكنك تحسين تجربة المستخدمين من خلال السماح لهم بملء حقول النموذج تلقائيًا. تقدّم لك سمة autocomplete مجموعة من الخيارات لتحسين نماذج التواصل ونماذج تسجيل الدخول ونماذج الدفع.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

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

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

في القسم التالي من هذه الدورة التدريبية، سنفحص بعض أنماط الواجهات الشائعة.

التحقّق من فهمك

اختبِر معلوماتك حول التفاعلات

ما هي الميزة التي يجب استخدامها بدلاً من محاولة استنتاج نوع إدخال المستخدم من حجم الشاشة؟

ميزات وسائط CSS

مثل @media (pointer: coarse) أو @media (-any-pointer: coarse)

اطلب من المستخدم استخدام prompt() في JavaScript.

لا يُنصح بطلب الإذن مباشرةً.

نوع وسائط CSS handheld

وقد تم إيقاف هذه الميزة نهائيًا في Media Queries 4.

ما هو الفرق بين @media (pointer) و@media (any-pointer)؟

ويشمل أي مؤشر عناصر مثل إصبعك.

يتضمّن المؤشر حاليًا اللمس كنوع إدخال.

لا تشمل المؤشرات عناصر مثل الماوس.

تشمل المؤشرات الماوس كجهاز إدخال.

سيُبلغ أي مؤشر عن قيمة صحيحة عندما تجتاز الإدخالات الإضافية غير الأساسية، مثل قلم الشاشة، الاختبار.

يبحث any-pointer في جميع أنواع إدخالات الجهاز عن أي مطابقة.

ما هي أنواع الإدخال التي تعرِض لوحة مفاتيح افتراضية أكثر ملاءمةً للمستخدمين؟

type="url"

ستوفّر لوحة المفاتيح أزرارًا تتيح كتابة عناوين URL.

type="tel"

ستعرض لوحة المفاتيح أزرارًا تتيح كتابة أرقام الهواتف.

type="number"

ستعرض لوحة المفاتيح أزرارًا تتيح كتابة الأرقام فقط.

type="email"

ستقدّم لوحة المفاتيح أزرارًا تتيح كتابة عناوين البريد الإلكتروني.