4 טופס עיצוב טיפים UX אתה צריך לדעת (עם דוגמאות)

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

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

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

ציפיות צורכי המשתמש

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

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

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

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

דוגמה: מיקוד חברתי למיקוד משתמש

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

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

תחשוב נייד הראשון

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

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

דוגמה: פקדי Tappable

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

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

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

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

דוגמה: הוצאה ניתנת להוצאה

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

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

כאשר המשתמש לוחץ על השדה, הוא מתכווץ, והמידע הנוסף נעלם.

דוגמה: לחצן מורפינג

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

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

להקל על קלט קלט

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

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

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

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

דוגמה: בחירת קלט מותאמת אישית

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

רשימת Todoist לוקח רשימה נותן רמזים מותאמים אישית בתוך בורר התאריכים שלה כאשר המשתמש מרחף מעל הימים.

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

דוגמה: קלט גרור ושחרר

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

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

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

דוגמה: שכבה להסרת הסחות דעת

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

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

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

תן משוב למשתמשים

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

בתבנית טופס, יש שני סוגים של משוב מהמשתמשיםYou

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

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

דוגמה: התקדמות Tracker

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

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

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

דוגמה: אימות בזמן אמת

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

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

דוגמה: הסבר קצר

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

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

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

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