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

עודכן ב: 29 נוב 2019


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



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

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

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

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

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

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

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

  • פחות שדות=פחות עבודה

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

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

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

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

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

בואו נראה דוגמאות


תוודאו שהכפתורים ברורים

נשמע פשוט?

וסופר חשוב!

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

שמרו מרחק בטוח | מטרות המגע

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

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

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

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

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


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

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

תסבירו מצורה ברורה איפה יש שגיאות במילוי הטופס

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

טקסט עזר (הסבר) הוא דבר מבורך!

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

קשרו מידע ושדות

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

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

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

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

[עוד על השטחים הלבנים בפוסט שיעלה ממש בקרוב ]

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

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

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

#עיצובאתר #מדריכים #Goodui #טפסים

  • Facebook - Black Circle
  • YouTube - Black Circle