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