במכשירים עם מסך קטן, כמו טלפונים ניידים, בדרך כלל יש מסכי מגע. מכשירים עם מסך גדול, כמו מחשבים ניידים ושולחניים, בדרך כלל כוללים ציוד חומרה כמו עכבר או משטח מגע. מפתה להשתמש במסכים קטנים עם מגע ובמסכים גדולים עם סמנים.
אבל המציאות היא מורכבת יותר. למחשבים ניידים מסוימים יש יכולות של מסך מגע. המשתמשים יכולים להשתמש במסך מגע, במשטח מגע או בשניהם. באותה מידה, קיימת אפשרות להשתמש במקלדת או בעכבר חיצוניים עם מסך מגע, כמו טאבלט.
במקום לנסות להסיק את מנגנון הקלט מגודל המסך, השתמשו בתכונות מדיה ב-CSS.
מצביע
אפשר לבדוק שלושה ערכים אפשריים באמצעות תכונת המדיה pointer
: none
, coarse
ו-fine
.
אם דפדפן מדווח על ערך pointer
של none
, יכול להיות שהמשתמש משתמש במקלדת כדי לבצע פעולות באתר.
אם דפדפן מדווח על הערך coarse
כ-pointer
, פירוש הדבר שמנגנון הקלט הראשי לא מדויק מאוד. אצבע על מסך מגע היא מצביע גס.
אם הדפדפן מדווח על הערך fine
של pointer
, המשמעות היא שמנגנון הקלט הראשי יכול לשלוט בצורה פרטנית. עכבר או סטיילוס הם סמן עדין.
אפשר לשנות את הגודל של רכיבי הממשק כך שיתאימו לערך של 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
מספק שליטה פרטנית במקלדות הווירטואליות. לדוגמה, בעוד שיש type
אחד מסוג input
עם הערך 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="url"
type="number"
type="email"
type="tel"