تفاعل

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

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

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

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

أي مؤشر

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

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

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

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