אינטראקציה

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

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

במקום לנסות להסיק את מנגנון הקלט מגודל המסך, כדאי להשתמש בתכונות מדיה ב-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;
  }
}

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

כל סמן

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

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

בניגוד לתכונת המדיה 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 יחזיר true אם כל אחד ממנגנוני הקלט הזמינים יכול לרחף מעל רכיבים.

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

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

בדיקה של רמת ההבנה שלך

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