<Htm>

פוסט אורח של ברק דנין מ-Uniq UI, בעל הבלוג "פשוט. שימושי" – על אנשים, מחשבים והמסכים שביניהם.

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

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

מספר השדות בטופס

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

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

יישור תוויות

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

יש שלושה יישורים לתוויות: ימני, שמאלי ועליון.

יישור תוויות ימינה

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

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

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

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

יישור תוויות שמאלה

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

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

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

יישור תוויות למעלה

יתרונות: מילוי הטופס מהיר ב-20% מטופס עם יישור תוויות לשמאל, כי מיקום התווית מעל התוכן מאפשר לעין לקלוט את התווית ואת תוכן השדה במבט אחד. בטפסים שמחולל Google Docs משתמשים ביישור הזה, ולא סתם. הוא הכי מהיר והכי קל למילוי.

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

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

המלצות נוספות

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

שתפו את הפוסט הזה:

עוד באותו נושא:

• שימוש בפקודת OnBeforeUnload לוידוא יציאה של המשתמשUsing OnBeforeUnload to confirm user’s relocationing
• סיכום של יום השימושיות