למכשירים עם מסך קטן, כמו טלפונים ניידים, יש בדרך כלל מסכי מגע. מכשירים עם מסך גדול, כמו מחשבים ניידים ומחשבים שולחניים, מגיעים בדרך כלל עם חומרה כמו עכבר או משטח מגע. מפתה להשוות מסכים קטנים עם מגע, ומסכים גדולים עם מצביעים.
אבל המציאות היא ניואנסית יותר. מחשבים ניידים מסוימים כוללים יכולות של מסך מגע. המשתמשים יכולים להשתמש במסך מגע, במשטח מגע או בשניהם. בדומה לכך, ניתן להשתמש במקלדת או בעכבר חיצוניים עם מסך מגע, כמו טאבלט.
במקום לנסות להסיק את מנגנון הקלט מגודל המסך, השתמשו בתכונות מדיה ב-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
פירושו שלפחות התקן הצבעה אחד אינו מדויק במיוחד. אבל אולי זה לא מנגנון הקלט העיקרי.
הערך fine
של any-pointer
פירושו שלפחות התקן הצבעה אחד יכול לשלוט בצורה מדויקת. אבל שוב, ייתכן שזה לא מנגנון הקלט העיקרי.
מכיוון ששאילתת המדיה 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
— הם תוספות קטנות לשדות הטופס, אבל הם יכולים לעשות הבדל גדול בחוויית המשתמש. היכולת לצפות ליכולות המכשיר של המשתמשים ולהגיב להם מעשירה את המשתמשים. כדי לקבל מידע מעמיק יותר, יש קורס שמיועד לעזור לך ללמוד טפסים.
בשלב הבא בקורס הזה, הגיע הזמן לבחון כמה דפוסים נפוצים של הממשק.
בדיקת ההבנה
בחינת הידע שלכם באינטראקציות
באיזו תכונה כדאי להשתמש במקום לנסות להסיק את סוג הקלט של המשתמש מגודל המסך?
@media (pointer: coarse)
או @media (-any-pointer: coarse)
prompt()
של JavaScripthandheld
מה ההבדל בין @media (pointer)
לבין @media (any-pointer)
?
any-pointer
שולחת שאילתה לכל סוגי הקלט של המכשירים לכל התאמה.אילו סוגי קלט מציגים מקלדת וירטואלית מתאימה יותר למשתמשים?
type="url"
type="tel"
type="number"
type="email"