التفاعل

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

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

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

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

أي مؤشر

تعرض ميزة الوسائط 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;
  }
}

إذا استخدمت الماوس لتمرير مؤشر الماوس فوق هذا الزر، سيظهر الرمز. ولكن إذا استخدمت لوحة المفاتيح للانتقال إلى الزر باستخدام مفتاح Tab، سيظل الرمز غير مرئي. عند استخدام لوحة المفاتيح، أنت تركز بدلاً من تمرير مؤشر الماوس. سيعرض جهاز سطح المكتب المزوّد بماوس أنّ آلية الإدخال الأساسية قادرة على تمرير مؤشر الماوس، وهذا صحيح. لكن أي مستخدم يستخدِم لوحة مفاتيح أثناء توصيل الماوس لن يستفيد من أنماط :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، إضافات صغيرة إلى حقول النموذج، ولكن يمكن أن تحدث فرقًا كبيرًا في تجربة المستخدم. من خلال توقّع إمكانات جهاز المستخدم والاستجابة لها، أنت تمنح المستخدمين القدرة على الاستفادة من أجهزتهم. لمزيد من المعلومات المتعمقة، هناك دورة تدريبية مخصّصة لمساعدتك في تعلُّم النماذج.

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

اختبِر معلوماتكَ

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