غالبًا ما تحتوي الأجهزة ذات الشاشات الصغيرة مثل الهواتف المحمولة على شاشات تعمل باللمس. غالبًا ما تكون الأجهزة ذات الشاشات الكبيرة مثل أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية مزودة بأجهزة مثل الماوس أو لوحة اللمس. قد يغريب الفارق بين الشاشات الصغيرة ذات الشاشات التي تعمل باللمس والشاشات الكبيرة التي تحتوي على مؤشرات.
لكن الواقع أكثر دقة. تتميز بعض أجهزة الكمبيوتر المحمولة بإمكانيات الشاشة التي تعمل باللمس. ويمكن للمستخدمين التفاعل مع شاشة تعمل باللمس أو لوحة لمس أو كليهما. وبالمثل، يمكن استخدام لوحة مفاتيح أو ماوس خارجي مع جهاز مزوّد بشاشة تعمل باللمس، مثل الجهاز اللوحي.
بدلاً من محاولة استنتاج آلية الإدخال من حجم الشاشة، استخدِم ميزات الوسائط في 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
، هي إضافات صغيرة إلى حقول النموذج، ولكنها يمكن أن تُحدث فرقًا كبيرًا في تجربة المستخدم. ومن خلال توقع إمكانات جهاز المستخدم والاستجابة لها، فإنك بذلك تعزز قدرات المستخدمين. لمزيد من المعلومات التفصيلية، هناك دورة تدريبية مخصّصة لمساعدتك في تعلُّم النماذج.
بعد ذلك في هذه الدورة التدريبية، حان وقت فحص بعض أنماط الواجهة الشائعة.
التحقق من فهمك
اختبر معلوماتك حول التفاعلات
ما الميزة التي يجب عليك استخدامها بدلاً من محاولة استنتاج نوع إدخال المستخدم من حجم الشاشة؟
handheld
prompt()
في JavaScriptما هو الفرق بين اشتراكَي @media (pointer)
و@media (any-pointer)
؟
ما أنواع الإدخال التي تعرض لوحة مفاتيح افتراضية أكثر ملاءمة للمستخدمين؟
type="tel"
type="url"
type="number"
type="email"