אינטראקציה

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

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

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

אם הערך של 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 יהיה 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">

שיטות קלט

Browser Support

• 66
• 79
• 95
• 12.1

Source

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

בשלב הבא נבחן כמה דפוסי ממשק נפוצים.

בדיקת ההבנה

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

באיזו תכונה כדאי להשתמש במקום לנסות להסיק את סוג הקלט של המשתמש מגודל המסך?

תכונות מדיה של CSS

כמו @media (pointer: coarse) או @media (-any-pointer: coarse)

שאלה של המשתמש באמצעות prompt() של JavaScript

לא מומלץ לשאול ישירות.

סוג מדיה CSS‏ handheld

האפשרות הזו הוצאה משימוש בגרסה 4 של שאילתות מדיה.

מה ההבדל בין @media (pointer) לבין @media (any-pointer)?

כל רכיב להצבעה כולל פריטים כמו האצבע שלכם כרכיב להצבעה.

סוג הקלט של סמן כבר כולל מגע.

מכשירים להצבעה לא כוללים דברים כמו עכבר.

התקני הצבעה כוללים עכבר כמכשיר קלט.

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

any-pointer שולחת שאילתות לכל סוגי הקלט של המכשיר כדי למצוא התאמה.

אילו סוגי קלט מוצגת בהם מקלדת וירטואלית מתאימה יותר למשתמשים?

type="url"

במקלדת יוצגו לחצנים שתומכים בהקלדה של כתובות URL.

type="tel"

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

type="number"

המקלדת תציע לחצנים שתומכים בהקלדה של מספרים בלבד.

type="email"

במקלדת יוצגו לחצנים שתומכים בהקלדה של כתובות אימייל.