יש הרבה דרכים למלא טופס. אנשים עשויים להשתמש בטופס בסמארטפון כשהם עומדים באוטובוס עמוס, עם קורא מסך או במחשב נייד ישן. בהמשך נראה איך אפשר לוודא שהטופס פועל במכשירים שונים ובהקשרים שונים.
מוודאים שהטופס מתאים למשתמשי מקלדת
כדי לוודא שהטופס נגיש, מומלץ למלא את הטופס באמצעות המקלדת בלבד.
פותחים את הטופס ומנסים לנווט באמצעות המקש tab.
האם ברור איזה שדה טופס פעיל כרגע?
כדי לעזור למשתמשים להבין איזה שדה בטופס פעיל, אפשר להשתמש במחווני מיקוד.
רוצים לנסות?
משתמשים במקש tab כדי לעבור לקלט.
האם אתה רואה את המתאר כאשר הקלט פעיל?
זה אינדיקטור המיקוד.
אתם יכולים להוסיף מדדי מיקוד באמצעות פסאודו-סיווג :focus של CSS.
input:focus {
outline: 4px solid #222;
}
מידע נוסף על עיצוב מחווני מיקוד נגישים
איך לעזור למשתמשים לנווט בטופס
בדיקה טובה נוספת לנוחות השימוש ולנגישות היא לוודא שהסדר הלוגי של הכרטיסיות תואם לסדר של הכרטיסיות החזותיות. איך אפשר לבדוק את סדר הכרטיסיות? מנווטים בטופס עד הסוף. האם הבחנתם בקפיצות ניווט לא הגיוניות? ודאו שסדר ה-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: ביצועים ואופטימיזציה של אתרים
- בדיקה ברוחב פס נמוך וזמן אחזור גבוה
- שיתוף תוצאות הבדיקה