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

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

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

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

תוויות

האם אתה זוכר למה מיועד הרכיב <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.

// 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: E-Commerce UX Research
• אל תגרמו לי לחשוב