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

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

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

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

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

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

הכפתור ששווה 300 מיליון דולר

מה לא בסדר בתמונה הבאה:

נראה די סטנדרטי, לא? הבעיה של המסך הזה היא בכך שהוא מופיע מיד אחרי מסך עגלת הקניות (Shopping Cart), אחרי שלחצו על הכפתור "להזמנה ותשלום" (Checkout). אחרי שבוצע במסך התיקון הבא, המכירות באתר גדלו ב-45%, תוספת של 300 מיליון דולר:

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

עיקר השינוי היה בכפתור ה"Register" שהפך ל-"Continue". הוסיפו גם מתחת לכפתור קצת טקסט.

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

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

עוד נתון מעניין מהמחקר היה, שמתוך 160,000 מבקרים ביום שביקשו לשחזר את הסיסמא ("Forgot your login information? Click here"), כ-75% לא חזרו להשלים את הקנייה. אותי הנתון הזה די הדהים, באופן אישי.

למה טפסים הם דבר חשוב

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

• דו-שיח: שיחה מקוונת עם לקוחות החברה
• מידע: איסוף מידע ממבקרים באתר
• מסחר: מכירה של מוצרים

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

המסלול להשלמת הטופס

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

(הכפתור הצהוב הזה, אגב, לא שווה אפילו דולר אחד :-) הוא חינמי)

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

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

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

תשוו את הטופס הקודם, עם הזרימה של הטופס הזה (מתוך אתר יד שרה):

כאן המסלול אל סוף הטופס ברור – בקו ישר למטה. טופס כזה יהיה הרבה יותר קל למילוי, אף-על פי שהוא תופס יותר מקום לגובה, ודורש גלילה למטה כדי להגיע אל סופו.

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

יישור תוויות

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

יישור ימני – רחוק מהשדה

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

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

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

יישור שמאלי – קרוב לשדה

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

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

יישור עליון – מעל השדה

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

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

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

עוד על בדיקות (validations), שדות חובה וטיפים נוספים – בפוסטים הבאים.

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

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

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

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

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

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

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