אינטראקציה

למכשירים עם מסך קטן, כמו טלפונים ניידים, יש בדרך כלל מסכי מגע. מכשירים עם מסך גדול, כמו מחשבים ניידים ומחשבים שולחניים, מגיעים בדרך כלל עם חומרה כמו עכבר או משטח מגע. מפתה להשוות מסכים קטנים עם מגע, ומסכים גדולים עם מצביעים.

אבל המציאות היא ניואנסית יותר. מחשבים ניידים מסוימים כוללים יכולות של מסך מגע. המשתמשים יכולים להשתמש במסך מגע, במשטח מגע או בשניהם. בדומה לכך, ניתן להשתמש במקלדת או בעכבר חיצוניים עם מסך מגע, כמו טאבלט.

במקום לנסות להסיק את מנגנון הקלט מגודל המסך, השתמשו בתכונות מדיה ב-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 — הם תוספות קטנות לשדות הטופס, אבל הם יכולים לעשות הבדל גדול בחוויית המשתמש. היכולת לצפות ליכולות המכשיר של המשתמשים ולהגיב להם מעשירה את המשתמשים. כדי לקבל מידע מעמיק יותר, יש קורס שמיועד לעזור לך ללמוד טפסים.

בשלב הבא בקורס הזה, הגיע הזמן לבחון כמה דפוסים נפוצים של הממשק.

בדיקת ההבנה

בחינת הידע שלכם באינטראקציות