בקטע הראשון למדתם איך ליצור טופס בסיסי. בקטע הזה נסביר על שיטות מומלצות. במודול הזה נלמד על חוויית המשתמש (UX) ועל הסיבות לכך שממשק משתמש (UI) שמוטמע בצורה טובה יכול לעשות הבדל גדול.
יצירת ממשקים ידידותיים למשתמש
מילוי טפסים יכול להיות מייגע ומעצבן, אבל לא חייב להיות כזה. כדי ליצור חוויית משתמש מעולה, חשוב לוודא שהממשק אינטואיטיבי. חשוב לוודא שאתם מספקים מבנה טופס אופטימלי ועיצוב גרפי (פריסה, רווחים, גודל וצבע הגופן), וממשק משתמש הגיוני (למשל, ניסוח התווית וסוגי הקלט המתאימים). כאן מוסבר איך לשפר את הטופס ולהפוך אותו לידידותי יותר למשתמש.
תוויות
זוכר למה משמש הרכיב <label>?
תווית מתארת פקד טופס.
תווית גלויה וכתובה היטב עוזרת למשתמש להבין את המטרה של אמצעי הבקרה בטופס.
שימוש בתווית לכל רכיב של בקרת צורה
רוצה להוסיף לרכיב הטופס רכיב חדש של טופס? מתחילים בהוספת התווית לשדה החדש. כך לא תשכחו להוסיף אותו.
הוספת תוויות קודם עוזרת לכם להתמקד ביעדים של הטופס – אילו נתונים אתם צריכים כאן? אחרי שההסבר ברור, אפשר להתמקד בעזרה למשתמש בהזנת הנתונים ובהשלמת הטופס.
הניסוח של התווית
אומרים שרוצים לתאר שדה באימייל. כך עושים את זה:
<label for="email">Enter your email address</label>
או לתאר את זה כך:
<label for="email">Email address</label>
איזה תיאור תבחרו?
בדוגמה שלנו, עדיף להשתמש במילים 'כתובת אימייל', כי תוויות קצרות קלות יותר לסריקה, מפחיתות את העומס החזותי ועוזרות למשתמשים להבין מהם הנתונים הנדרשים מהר יותר.
מיקום התווית
באמצעות CSS, אפשר למקם תווית בחלק העליון, התחתון, הימני והשמאלי של פקד טופס. איפה מציבים אותו?
מחקרים מראים שהשיטה המומלצת היא למקם את התווית מעל אמצעי הבקרה של הטופס, כדי שהמשתמש יוכל לסרוק את הטופס במהירות ולראות איזו תווית שייכת לאיזה אמצעי בקרה של הטופס.
עיצוב טפסים
עיצוב טוב של טופס יכול להפחית באופן משמעותי את שיעורי הנטישה של טפסים.
עזרה למשתמשים בהזנת נתונים באמצעות הרכיב המתאים וסוג הקלט המתאים
יש מגוון של רכיבי טופס וסוגי קלט שאפשר לבחור מתוכם.
כדי לספק את חוויית המשתמש הטובה ביותר, כדאי להשתמש ברכיב ובסוג הקלט המתאימים ביותר לתרחיש לדוגמה שלכם.
אם המשתמש צריך למלא כמה שורות טקסט, משתמשים באלמנט <textarea>.
אם צריך שהמשתמשים יאשרו את התנאים וההגבלות של האתר, צריך להשתמש ב-<input type="checkbox">.
כדאי גם להבדיל חזותית בין סוגים שונים של אמצעי בקרה בטופס. כפתור צריך להיראות כמו כפתור. קלט כמו קלט. כדי להקל על המשתמשים להבין את המטרה של אמצעי הבקרה בטופס. לדוגמה, אם משהו נראה כמו קישור, קליק עליו צריך לפתוח דף חדש ולא לשלוח טופס.
עזרה למשתמשים בניווט בטפסים
פריסה ראוותנית יכולה להיות כיפית, אבל היא עלולה להפריע למילוי הטופס.
בפרט, מחקרים מראים שמומלץ להשתמש בעמודה אחת בלבד. המשתמשים לא רוצים לבזבז זמן בחיפוש של אמצעי הבקרה הבא בטופס. שימוש בעמודה אחת מאפשר מעקב רק בכיוון אחד.
עזרה למשתמשים באינטראקציה עם טפסים
כדי למנוע הקשות וקליקים מקריים ולעזור למשתמשים ליצור אינטראקציה עם הטופס, כדאי לוודא שהלחצנים גדולים מספיק. גודל יעד ההקשה המומלץ של לחצן הוא לפחות 48 פיקסלים. כדאי גם להוסיף מספיק רווח בין רכיבי הטופס באמצעות marginמאפיין ה-CSS כדי למנוע אינטראקציות מקריות.
גודל ברירת המחדל של פקדי הטפסים קטן מדי מכדי להיות שימושי. כדי להגדיל את הגודל, צריך להשתמש ב-padding ולשנות את ברירת המחדל font-size.
אפשר להגדיר גדלים שונים למכשירי הצבעה שונים, למשל עכבר, באמצעות התכונה pointer CSS media.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
pointerמידע נוסף על תכונת המדיה של CSS
הצגת השגיאות במקום שבו הן מתרחשות
כדי שהמשתמשים יוכלו להבין בקלות איזה אמצעי בקרה בטופס דורש את תשומת הלב שלהם, כדאי להציג את הודעות השגיאה ליד אמצעי הבקרה בטופס שאליהן הן מתייחסות. כשמציגים שגיאות בשליחת טופס, חשוב לוודא שמועברים לפקד הטופס הראשון שלא תקין.
להסביר למשתמשים בצורה ברורה אילו נתונים צריך להזין
חשוב לוודא שהמשתמשים מבינים איך להזין נתונים תקינים. האם הם צריכים להזין לפחות שמונה תווים לסיסמה? תספרו להם.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
להבהיר למשתמשים אילו שדות הם שדות חובה
<label for="name">Name (required)</label>
<input name="name" id="name" required>
אם שדה מסוים הוא חובה, חשוב להבהיר את זה! במאמר The Anatomy of Accessible Forms מוסבר על חלופות לסימון שדות חובה. אם רוב השדות בטופס הם שדות חובה, כדאי לציין אילו שדות הם אופציונליים.
איך אפשר לקשר בין הודעות שגיאה לבין אמצעי בקרה בטפסים כדי להפוך אותן לנגישות לקוראי מסך? מידע נוסף בנושא זמין במודול הנגישות.
בדיקת ההבנה
בדיקת הידע שלכם בעיצוב טפסים
איך מתארים פקד של טופס?
<description>.<label>.description.placeholder.מהו הגודל המומלץ של יעד הקשה?
איפה כדאי למקם את הודעות השגיאה?
<form>.