יש הרבה דרכים למלא טופס. אנשים עשויים להשתמש בטופס בסמארטפון שלהם בזמן שהם עומדים באוטובוס צפוף, באמצעות קורא מסך או ממחשב נייד ישן. עכשיו נראה איך אפשר לוודא שהטופס פועל במכשירים שונים ובהקשרים שונים.
איך לוודא שהטופס מתאים למשתמשי מקלדת
כדי לוודא שהטופס נגיש, מומלץ קודם למלא את הטופס באמצעות המקלדת בלבד.
פותחים את הטופס ומנסים לנווט באמצעות המקש tab.
האם ברור איזה שדה בטופס פעיל כרגע?
כדי לעזור למשתמשים להבין איזה שדה בטופס פעיל,
אפשר להשתמש במחווני מיקוד.
רוצים לנסות?
צריך להקיש על tab כדי לנווט אל הקלט.
האם המתאר מופיע כשהקלט פעיל?
זה האינדיקטור למיקוד.
ניתן להוסיף סמני מיקוד באמצעות
:focus מחלקה מדומה של CSS.
input:focus {
outline: 4px solid #222;
}
מידע נוסף על לעצב מחווני מיקוד נגישים.
איך לעזור למשתמשים לנווט בטופס
בדיקה טובה נוספת של נוחות השימוש והנגישות היא לוודא שסדר הכרטיסיות הלוגי תואם לסדר הכרטיסיות החזותי. איך בודקים את סדר הכרטיסיות? אפשר להקיש על Tab כדי לעבור בין כל הטופס. האם הבחנתם בקפיצות לא הגיוניות בניווט? צריך לוודא שהסדר של ה-DOM תואם לסדר החזותי.
מוודאים שהסדר החזותי בדף תואם לסדר ה-DOM.
איך לעזור למשתמשים למלא את הטופס במכשירי מגע
נהדר! וידאת שהטופס שלך פועל עם המקלדת. עכשיו נראה איך אפשר לוודא שהכרטיס פועל גם במכשירי מגע כמו טלפונים ניידים.
פותחים את הטופס במכשיר המגע
ממלאים את כל השדות ושולחים את הטופס.
האם נאלצת להקיש כמה פעמים כדי לבחור פקד ליצירת טופס?
יכול להיות שהבעיה היא שאזורי ההקשה קטנים מדי.
צריך לוודא שהמאפיינים
גודל היעד של ההקשה בלחצן הוא לפחות 48 פיקסלים
ושכל <input> ו-<select> גדולים מספיק שאפשר להתחבר אליהם.
כדי לעזור למשתמשים לנווט בטופס במכשירי מגע, אפשר גם להוסיף מרווח מספיק בין פקדי הטופס.
לוודא שהמשתמשים מקבלים מקלדת שמותאמת למכשיר
במודולים הקודמים למדתם איך להפעיל מקלדת אחרת שמופיעה במסך
באמצעות המאפיינים type או inputmode.
גישה חופשית
ההדגמה
בטלפון ולהקיש בשדה של מספר הטלפון.
שימו לב שמספרים מוצגים כברירת מחדל במקלדת שמופיעה במסך,
ותווים אחרים שייתכן שתזדקק להם עבור מספר טלפון.
השתמש בtype="tel" כדי לקבל מקלדת שמופיעה במסך שעברה אופטימיזציה להזנת מספרי טלפון.
אתם יכולים להשתמש בטלפון כדי לנסות אותו בעצמכם.
ולראות אם אתם יכולים להזין בקלות כל תו שדרוש למילוי מספר טלפון.
רוצה לדעת איך המקלדת שמופיעה במסך פועלת במכשיר type אחר? אפשר לנסות את type="email" בהדגמה.
איך מוודאים שלחצני הטופס לא מוסתרים
נניח שאתם ממלאים טופס ארוך,
ואתם מוכנים לשלוח אותו. אבל איפה נמצא הלחצן שליחה?
יכול להיות שהוא מופיע מאחורי סרגל הכלים של הדפדפן, בחלק התחתון של המסך.
אחת הדרכים לוודא שהלחצנים גלויים היא להשתמש בפונקציית ה-CSS env().
בעזרת הקישור הבא אפשר
מוודאים שהלחצנים לא מוסתרים על ידי ממשקי המשתמש של המכשירים.
איך לוודא שהטופס פועל בפלטפורמות שונות
מומלץ לבדוק את הטפסים בכמה שיותר מכשירים. יש לך מחשב נייד ישן? פותחים בו את דפדפן ברירת המחדל ובודקים את הטופס. לחבר/ה שלך יש טאבלט? אפשר לשאול אותו ולבדוק את הטופס גם שם.
האם חלק מהעיצובים נראים אחרת בדפדפן אחד? כאן אפשר ללמוד איך לוודא הסגנונות פועלים בכל הפלטפורמות במודול מאוחר יותר.
BrowserStack מציע חשבונות בדיקה בחינם לפרויקטים בקוד פתוח, ו-Browserling מציע תקופת ניסיון בחינם לבדיקה בדפדפנים שונים, ובמכשירים של מערכות הפעלה.
איך לעזור למשתמשים למלא את הטפסים בהקשרים שונים
אנשים לא משתמשים רק בדפדפנים, במכשירים שונים ובמערכות הפעלה שונות. אנשים משתמשים בטפסים שלכם גם בהקשרים שונים. כדאי לנסות! האם השמש זורחת בחוץ עכשיו? לוקחים את הטלפון ויוצאים החוצה. שימוש בתמונה באור בהיר הוא דרך טובה לבדוק אם אפשר להשתמש ביחסי ניגודיות.
מידע נוסף על נגישות בצבעים וניגודיות.
לוודא שהטופס פועל עם קישוריות לא טובה
נניח שאתם נוסעים למקום כלשהו ברכבת. פותחים דף אינטרנט בטלפון. מעניין אותך איך טעינת אתר יכולה להימשך כל כך הרבה זמן 😕.
אפשר לדמות חיבורים איטיים וסוגי רשתות שונים עם WebPageTest או DevTools.
מידע נוסף על בדיקות עם רוחב פס נמוך וזמן אחזור ארוך
עזור למשתמשים להשתמש בטופס שלך כשהם נמצאים מחוץ לבית
נניח שאתם הולכים לפגישה. פתאום הטלפון מצלצל, עונים לשיחה ובו-זמנית, לקבל התראה מחברת הביטוח שלך כדי למלא את טופס הבקשה שהתחלת. אתם פותחים את הטופס ומנסים למלא אותו תוך כדי הליכה ושיחה.
חשוב לזכור שאנשים ישתמשו בטפסים שלכם בהקשרים רבים ושונים. במצבי סטרס, כשעושים דברים אחרים, תוך כדי תנועה. כדי לעזור למשתמשים, חשוב לוודא שקל להשתמש בטופס.
כדאי להגדיר מגבלת זמן למילוי הטופס. מומלץ לדמות תנאים לא מושלמים כדי לבדוק את הטופס.
חשוב לשתף את תוצאות הבדיקה
מתעדים את כל הבדיקות ומשתפים את התוצאות עם הצוות. זה יעזור לתעדף פעולות לביצוע, כדי לוודא שכל חברי הצוות מודעים למשימות החשובות ביותר.
מידע נוסף על שיתוף תוצאות בדיקה.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי בדיקות בפלטפורמות שונות
האם אפשר להציג סימני מיקוד רק למשתמשים במקלדת?
:focus-visible.:focus-detected.:focus-shown.משאבים
- WebPageTest: בדיקות אופטימיזציה וביצועים של אתרים
- בדיקות עם רוחב פס נמוך וזמן אחזור ארוך
- שיתוף תוצאות בדיקה