יסודות העיצוב

בחלק הראשון למדתם איך לבנות טופס בסיסי. קטע זה עוסק בשיטות מומלצות. במודול הזה נסביר על חוויית המשתמש (UX) ועל הסיבה לכך שהטמעה נכונה של ממשק משתמש (UI) יכולה לעשות את כל ההבדל.

יצירת ממשקים ידידותיים למשתמש

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

Labels (תוויות)

האם אתה זוכר למה מיועד הרכיב <label>? תווית מתארת פקד טופס. תווית גלויה וכתובה היטב עוזרת למשתמש להבין את המטרה של פקד טופס.

שימוש בתווית לכל פקד טופס

האם ברצונך להוסיף פקד חדש לטופס? קודם כול צריך להוסיף את התווית של השדה החדש. בדרך זו לא תשכחו להוסיף אותו.

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

ניסוח תוויות

נניח שרוצים לתאר שדה אימייל. תוכל לעשות זאת באופן הבא:

<label for="email">Enter your email address</label>

לחלופין, אפשר לתאר את זה כך:

<label for="email">Email address</label>

איזה תיאור לבחור?

לצורך הדוגמה שלנו, עדיף להשתמש בניסוח 'Email address' (כתובת אימייל), כי קל יותר לסרוק תוויות קצרות, להפחית את העומס החזותי ולעזור למשתמשים להבין מהר יותר אילו נתונים נחוצים.

מיקום התווית

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

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

עיצוב טפסים

עיצוב טוב של טפסים יכול לצמצם באופן משמעותי את שיעורי הנטישה של טפסים. כדי לעזור למשתמשים להזין נתונים באמצעות הרכיב המתאים וסוג הקלט המתאים, אפשר לבחור מבין רכיבי טופס וסוגי קלט שונים. כדי לספק את חוויית המשתמש הטובה ביותר, מומלץ להשתמש ברכיב ובסוג הקלט המתאימים ביותר לתרחיש לדוגמה שלכם. אם המשתמש צריך למלא כמה שורות טקסט, צריך להשתמש ברכיב <textarea>. כאשר המשתמש צריך לאשר את התנאים וההגבלות של האתר, יש להשתמש ב-<input type="checkbox">.

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

עזרה למשתמשים לנווט בטפסים

עיצוב מיותר יכול להיות מהנה, אבל עלול להפריע למילוי הטופס.

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

עזרה למשתמשים באינטראקציה עם טפסים

כדי למנוע הקשות וקליקים מקריים, וכדי לעזור למשתמשים לבצע אינטראקציה עם הטופס, מומלץ להגדיל את הלחצנים. גודל יעד ההקשה המומלץ הוא לפחות 48px. כמו כן, כדאי להוסיף מרווח מספיק בין פקדי הטפסים באמצעות נכס ה-CSS margin כדי למנוע אינטראקציות מקריות.

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

ניתן להגדיר גדלים שונים למכשירי הצבעה שונים, למשל עכבר, באמצעות תכונת המדיה של CSS pointer.

// 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>

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

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

בדיקת ההבנה

בחינת הידע שלכם בעיצוב טפסים

מקורות מידע

• יצירת טפסים מדהימים
• שיטות מומלצות לעיצוב טפסים לנייד
• Baymard Institute: מחקרים בנושא חוויית המשתמש במסחר אלקטרוני
• אל תגרום לי לחשוב