אף אחד לא אוהב טפסים. אז איך מעצבים אותם?



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

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



מה בדיוק הבעיה בטפסים באינטרנט?

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

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

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



אז איך מעצבים טופס שלא יגרום לכם לאיבוד משתמשים?

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

1. כמה שפחות שדות

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

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

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

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

שלב ראשון: מילוי כתובת אימייל, סיסמה ובחירת שם משתמש.


שלב שני: מילוי גיל ואישור לתנאי ההרשמה.


שלב שלישי ואחרון: סימון קופסת הביטחון (CAPTCHA). ברגע שהקופסה מסומנת המשתמש מועבר אוטומטית לעמוד הבית של tumblr


2. עיצוב שמביא בחשבון שגיאות ותקלות במהלך מילוי ושליחת הטופס


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

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

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


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

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


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

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

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

לגבי אלמנטים לחיצים, אפל ממליצה על ריבוע מינימלי של 44X44 פיקסלים וגוגל ממליצה על ריבוע מינימלי של 48X48 פיקסלים, עם תוספת padding - רווח בלתי נראה למשתמש אשר מקבל את אותה התנהגות כמו הכפתור שהוא צמוד אליו (מידע מעודכן נכון ליולי 2015). במילים אחרות, בעיצוב השדות והכפתורים בטופס, יש להקפיד כי גובה האלמנטים הלחיצים הוא לפחות 46 פיקסלים. מימד הרוחב יותר גמיש ונתון לשיקול דעתו של המעצב הגראפי.

מתן חיווי ללחיצה על כפתור שליחת הטופס. כאשר המשתמש סיים למלא את הטופס ולחץ על כפתור השליחה/סיום, ראוי שתהיה לו אינדיקציה ויזואלית לכך שמשהו מתרחש ושהלחיצה באמת התניעה תהליך. על מנת להמחיש זאת בצורה ויזואלית מומלץ לבחור באחת או בשתי השיטות הבאות:
i. שינוי ויזואלי של אלמנט הכפתור - שינוי צבע, שימוש באנימציה או חיווי ויזואלי אחר בכפתור שמתריע בפני המשתמש שמשהו מתרחש בעקבות הלחיצה.
ii. שימוש בסמלילי הספינר (spinner) או הטעינה (loader) - סמלילים כאלו מסמלים תהליך שקורה מאחורי הקלעים ועם הופעתם המשתמש מבין שעליו לחכות כמה שניות, שכרגע מתבצע תהליך בצד האתר.

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

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

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


יש לכם שאלה שעלתה מהמאמר? יש לכם רעיון אחר
לייעול תהליך מילוי טפסים באתרי אינטרנט?
נשמח אם תשתפו אותנו! שלחו לנו הודעה לכתובת info@kofeef.co.il