טפסים באתר- עשה ואל תעשה

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

1. הגודל קובע:

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

מתוך אתר היוזמה המדעית
מתוך אתר hype

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

2. סידור בקבוצות:

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

3. "רגע, מה הייתי צריך למלא כאן?"

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

מתוך אתר sage marketing

4. כל הממעיט הרי זה משובח.

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

5. תיאור במקום הנכון

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

6. חובה? באמת?

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

7. המשתמשים (קצת) עצלים. זו עובדה.

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

מתוך אתר recruiters lineup

8. אל תחסכו בהנחיות.

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

איך בונים טופס נכון באתר
מתוך אתר היוזמה המדעית 5P2

9. לא כל השדות נולדו שווים.

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

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

10. הגביע הקדוש של הטופס- כפתור השליחה

יש מי שנשבע בטקסט ארוך "לחצו כאן לסיום ההרשמה" ויש בדיקות שמראות שהטקסט על הכפתור חייב להיות קצר שככל האפשר ומספיק לכתוב "שליחה" (מה שבטוח- לא כדאי לאבד 50% מהאוכלוסייה ולכתוב "שלח". לכו על ניסוח נייטרלי מגדרית!).
התשובה כנראה תלויה בסוג האתר, ב voice& tone  לאורכו ובזהות הלקוחות שלך.
ההמלצה שלנו? לבדוק. A/B testing. להעלות שני טפסים ולראות מי מהם מביא יותר הרשמות או להחליף בין הכפתורים לאורך זמן ולהשוות את הנתונים.

11. מה שקורה אחרי כפתור השליחה חשוב לא פחות!

  • הודעות שגיאה- לא לרכז את ההודעות בראש הטופס אלא למקם אותן מתחת או מעל כל שדה ושדה. כדאי להוסיף ליד השגיאה הסבר מדוע היתה בעיה ("כתובת המייל צריכה להיות בפורמט "myname@mail.com" או "מספר הטלפון יכול להכיל רק ספרות" וכדומה. זה המקום לשייף את כישורי המיקרו קופי שלכם)
  • מסך אישור- דיברנו לא מעט על חשיבות האמון והצורך להבטיח למשתמש שהמידע שלו נקלט בהצלחה. זה המקום. אבל בנוסף לזה , הנה הזדמנות לבטא את האופי האישי שלכם ושל העסק. את התודה שלכם כתבו מכל הלב ואל תשכחו לציין בדיוק מה קורה הלאה- "נחזור אליכן תוך 24 שעות" ההזמנה שלך בדרך" המקום שלך שמור" "הודעת מייל תישלח אליך ממחלקת הגיוס שלנו" וכו'.
מתוך אתר joyventures

אז מה לקחת מזה?

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

0

אטי הדר

עוד בנושא:

לעצב ולבנות מחדש את האתר – 5 השלבים הכי חשובים

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

המשך קריאה
על עבודה מרחוק, WordPress, Covid19 ואיש אחד שהוא השראה

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

המשך קריאה
10 טעויות קריטיות שבעלי אתרים עושים ואיך להימנע מהן בקלות ולשפר את האתר

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

המשך קריאה
שיווק באמצעות בלוג: 9 עובדות + בונוס (פוסט חגיגי ליום הבלוגים השנתי)

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

המשך קריאה
זה לא דביק, זה דבש! על אלמנטים דביקים באתרים

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

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

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

המשך קריאה

הוספת תגובה

האימייל לא יוצג באתר.