טפסים? למי זה חשוב? —פיהוק—

 

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

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

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

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

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

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

יישור תוויות

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

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

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

שם משפחה:
שם פרטי:
אימייל:

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

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

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

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

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

שם משפחה:
שם פרטי:
אימייל:

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

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

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

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

שם משפחה
שם פרטי
אימייל

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

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

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

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

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

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

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

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
דוד כהןNo Gravatar 26 במרץ

שלום,

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

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

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

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

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

שיהיה פסח חג שמח וכשר!
דוד

[תגובה]

אורן רוט

עצה מעולה!

הפן היחידי שהוא החסרון במתן תוויות בJS הוא פן הנגישות.

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

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

מה שכן, אפשר לאפשר חלופה לJS אם כותבים קוד נוח וכך הוא יהיה נגיש לכולם.

[תגובה]

מדריך phpNo Gravatar 7 ביוני

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

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

[תגובה]

אלרוןNo Gravatar 9 באוקטובר

נכון לעכשיו, לדעתי הדרך הכי טובה לתת תוויות היא דרך placeholder שלא מצויינת במדריך.

[תגובה]

אלרון

רק עכשיו ראיתי שדנתם בנושא למעלה :)

[תגובה]

בניית אתרים - טואולNo Gravatar 6 בנובמבר

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

תודה לך.

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון