تفاعل

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

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

وبدلاً من محاولة استنتاج آلية الإدخال من حجم الشاشة، يمكنك استخدام ميزات الوسائط في 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;
  }
}

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

أي مؤشر

تشير ميزة وسائط 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">

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

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

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

التحقّق من استيعابك

اختبر معلوماتك عن التفاعلات