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

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

עדכון 6/6/2009 – קישורים לכל הפוסטים בסידרה:

חלק ראשון: זרימה בטופס ויישור תוויות.

חלק שני (הפוסט הזה): עזרה והסברים, ובדיקות תקינוּת (וָלידציות).

חלק שלישי: פעולה ראשית ופעולות משניות, ומספר השדות בטופס.

חלק רביעי: תלויות בין שדות, ורשימת קריאה מומלצת.

עזרה והסברים

מטרות

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

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

הסבר על שדה אימייל2. להסביר למה המערכת מבקשת מידע מסויים. למשל, אם המשתמש נדרש להזין כתובת אימייל כחלק מתהליך הקנייה, הוא בוודאי יישמח יותר לתת אותה אם ידע שבכתובת הזאת הוא יקבל אישור על ההזמנה ולא, למשל, דוא"ל זבל.

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

איפה להציג הסברים?

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

הסבר צמוד לשדה

איך להציג הסברים?

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

סמל עזרה

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

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

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

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

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

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

טיפים להסברים ועזרה בטפסים

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

בדיקות תקינוּת (ולידציות) והודעות שגיאה

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

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

כשמוקלד מידע לא תקין, נרצה להודיע למשתמש שעליו לתקן את הטעויות שעשה, בעזרת הודעות שגיאה.

מתי להציג הודעות שגיאה?

הרבה אתרים ותוכנות נוקטים בגישה של "טעֶה עכשיו, שלם אחר-כך", כלומר מודיעים על טעויות בטופס רק בסיום העבודה עליו. הנה דוגמא מאתר גלובס:

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

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

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

אם כן, הודעות שגיאה רצוי להציג כמה שיותר מוקדם, רצוי מיד עם הקשת השגיאה.

איפה להציג הודעות שגיאה?

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

הנה דוגמא מהאתר של ויזה כא"ל, Cal-Online. במקרה הזה מדובר בטופס ארוך, כך שלעתים המשתמש נדרש לגלול למעלה ולמטה כדי לאתר את הודעת השגיאה הבאה, ואז את המקום שהיא מתייחסת אליו, וחוזר חלילה. לעזרתו באים כאן החיצים האדומים לצד השדה שמציינים שגיאה, תוספת נחמדה שמקילה על המשימה המסורבלת:

מיקום הודעות שגיאה

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

המקום המומלץ להודעות שגיאה, אם כן, הוא בצמוד למקום שבו המידע השגוי. כך המשתמש יוכל בקלות לאתר ולתקן את השגיאה.

מה לכתוב בהודעת שגיאה?

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

חלקי הודעת השגיאה

להודעות שגיאה יש עד 3 חלקים:

  1. מה המשתמש עשה
  2. מה לא בסדר בזה
  3. איך לתקן, כולל דוגמא במידת הצורך

הנה דוגמא:

כתובת האימייל barak@barak איננה תקינה. הדומיין barak איננו חוקי.
הקלד כתובת אימייל מלאה, למשל: user@gmail.com.

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

אורך – לקצר לקצר לקצר!

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

סגנון

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

Salut Barak

Now you know how to greet people in French

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

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

שיעורי בית (העשרה לחרוצים)

לכל הפוסטים בסידרה

חלק ראשון: זרימה בטופס ויישור תוויות.

חלק שני (הפוסט הזה): עזרה והסברים, ובדיקות תקינוּת (וָלידציות).

חלק שלישי: פעולה ראשית ופעולות משניות, ומספר השדות בטופס.

חלק רביעי: תלויות בין שדות, ורשימת קריאה מומלצת.