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

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

אטי הדר

עוד בנושא:

הנורמלי החדש: 3 מחקרים חדשים ומה אפשר ללמוד מהם על עסקים בדיגיטל בתקופת Covid19

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

המשך קריאה
איך לבנות אמון של לקוחות באתר באמצעות UX חווית משתמש?

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

המשך קריאה
כנס WordCamp Europe 2020

WordCamp Europe הוא הכנס השנתי הגדול של מפתחי ומשתמשי WordPress באירופה. סיכום היום הראשון- ההרצאות, החידושים, החשיפות

המשך קריאה
WORDCAMP EUROPE | שיחה עם מייסד WordPress

המשך הסקירה שלנו מכנס WordCamp השנתי הגדול של קהילת וורדפרס באירופה את הערב הראשון של הכנס סגר האיש והאגדה, Matt

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

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

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

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

המשך קריאה