על טפסים ואנשים / שינוי קטן, הבדל גדול [חלק א׳]

עודכן ב: אפר 6


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


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

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

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

קוגניטיבית ואיך היא יכולה לעזור לנו


החוויה של הגולשים באתר מורכבת מכמה דברים:

  • חושים

  • קוגניציה - הבנת המידע שהגיע מהחושים

  • רגש - מתעורר בעקבות החושים והקוגניציה

  • פעולה - התוצאה של התעוררות החושים, הקוגניציה והרגש

הבנת מנגנונים קוגניטיבים מאפשרת לנו:

  • שליטה בתהליך שאותו עובר המשתמש

  • הפחתית עומס

  • יצירת אינטואטיביות בשימוש במערכת שאותה נאפיין ומעצב

פסיכולוגיה קוגניטיבית שימושית מורכבת מ:

  • תפיסה, שכוללת: ראייה ושמיעה - החלקים הדומיננטים ביותר בתפיסה

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

  • עיבוד מידע מהחושים - איך אנחנו מזהים תבניות, חפצים, אנשים

  • זיכרון וייצוג מידע

  • שפה - איך אנחנו מייצרים ומעבדים תוכן מילולי

  • חשיבה - שכנוע, קבלת החלטות, לוגיקה, פתרון בעיות

איך כל זה מתבטא בטפסים?

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

(זכרו אילו קווים והנחיות כלליות, תמיד יהיו יוצאי דופן)


ניתן למשתמשים הוראות מדוייקות, בלי שאלות

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

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

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

  • צבעים: ניתן דגש על צבעוניות, משמעות צבעים

  • תוכן: נקפיד על תוכן ברור, בהקשר מדויק וללא תהיות

[אין טוב ממראה עיניים]

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



השתמשו בממלא מקום


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

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

במהירות את הטופס

טקסט ממלא מקום (‭ (‬Placeholder

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

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


ממלא מקום לא יכול להחליף, תפקידו תמיד על שימוש בתווית מעל השדה ובמידת הצורך להשתמש גם

בממלא מקום.


צמצמו שדות


תמנעו מהמשתמשים לקפוץ בין שדות, במקום‭ ‬לבקש‭ ‬שם‭ ‬פרטי‭ ‬ושם‭ ‬משפחה‭ ‬בשני‭ ‬שדות‭ ‬נפרדים השתמשו בשדה אחד: שם מלא‭.‬

צרו אמון


תסבירו מדוע אתם מבקשים‭ ‬מידע‭ ‬רגיש ומה תעשו או לא תעשו איתו.


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


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


תוכן גלוי


תעדיפו להשתמש ‬בלחצני‭ ‬אפשרויות על פני תפריט‭ ‬נפתח‭,‬ הם‭ ‬יעשו‭ ‬את‭ ‬כל‭ ‬האפשרויות‭ ‬גלויות‭ו ‬יפחיתו את הפעולות הנדרשות מהגולש לעשות,‬ הצבת‭ ‬האפשרויות‭ ‬בתפריט‭ ‬נפתח‭ ‬דורשת‭ ‬שני‭ ‬קליקים כדי לבצע בחירה (=יותר עבודה לגולש)‭ ‬ומסתירה‭ ‬את שאר‭ ‬האפשרויות.

יישור‭ ‬תוויות והצמדת לשדה


תווית‭ ‬ושדה‭ ‬שלה‭ ‬צריכים‭ ‬להיות‭ ‬מקובצים‭ ‬ויזואלית‭, ‬כך‭‬ שמשתמשים‭ ‬יוכלו‭ ‬להבין‭ ‬איזה‭ ‬תווית‭ ‬שייכת‭ ‬לשדות.


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


יתרון‭ ‬חשוב‭ ‬נוסף‭ ‬של‭ ‬תוויות‭ ‬מעל לשדות היא התאמה טובה יותר למסכי ניידים.


השתמשו בסליידר [מחוון]


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


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


אות גדולה


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


עד לכאן [חלק א׳]

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

יש לכם שאלות? רוצים לבנות אתר?

מוזמנים לצור קשר ממש כאן

#מדריכים #Goodui #טפסים

  • Facebook - Black Circle
  • YouTube - Black Circle