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

טופס באתר יכול לשמש למגוון פונקציות: יצירת קשר, 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

אטי הדר

עוד בנושא:

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

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

המשך קריאה
6 רמות בדיקת QA שחברת הפיתוח שלך צריכה לבצע עבורך

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

המשך קריאה
WordPress 5.5: כל החידושים והשיפורים ולמה זה צריך לעניין גם אותך

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

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

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

המשך קריאה
design UX – המבחן הגדול

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

המשך קריאה
קידום אתרים SEO: מה באמת צריך לדעת?

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

המשך קריאה