תוֹכֶן
- 1. אל תסמן שדות חובה
- 2. אל תשתמשו בספינרים
- 3. יש רק סוג כפתור אחד או עדיף רק כפתור אחד לכל טופס
- 4. שדות גוש
- 5. חשוב מדוע אתה שואל משהו ואיך זה מרגיש למשתמש
- 6. תאריכים הם פרחים קטנים ומפותלים
- 7. טפסים כ מלאכת מפתח
- 8. אל תשתמש בעמודות בטפסים
- 9. אל תשתמש בשני שדות כאשר אחד יעשה זאת
- 10. היה נחמד
טפסים, אין דבר שמעצבים רבים שונאים יותר מצורות. הם לא בהכרח מוציאים את היצירתיות החוצה, או שמא? אולי הגיע הזמן שנביט בטפסים מחדש ונבין שטופס, הכי בסיסי, הוא שיחה בין המשתמש לתוכנה.
תשכחו מהצבע ולחצו, טפסים מייצגים את האינטראקציה העשירה ביותר שעומדת בפנינו כמעצבים דיגיטליים. בפעם הבאה שטופס מגיע אליך אל תחשוב שזה רק עניין ליישם כמה אפקטים CSS נחמדים או להוסיף פריחת jQuery נחמדה. יש הרבה יותר עומק בעיצוב טפסים.
בדקתי משתמשים במאות טפסים ועיצבתי כמה טפסים מורכבים עבור חברות ביטוח, אינטראקציות להזמנת חופשות ורבים אחרים. רוב הסיכויים שהשתמשת באחד מהטפסים שלי בחודשים האחרונים.
הנה השיעורים שהלוואי שלמדתי לפני שהתחלתי לעצב טפסים.
1. אל תסמן שדות חובה
אתה מכיר את הכוכבית הקטנה המציינת שדה חובה? ראיתי שנכשלים פעמים רבות בבדיקות משתמשים. כמושג, שדות חובה אינם הגיוניים במיוחד, אין להם מקבילה מקוונת. הם מעולים עבור מפתחים מכיוון שהם מציעים גישה נחמדה בשחור-לבן להשלמתם. הכוכבית ושדה החובה נכשלים מכיוון שמדובר בהתנהגות נלמדת. התנהגות אופיינית שראיתי בבדיקת משתמשים היא המשתמש שממלא את הטופס בחלקו העליון ומסיים או כאשר יש משהו שיעצור אותם או שהם לוחצים על כפתור.
הפתרון הוא פשוט, סמן שדות אופציונליים, סמן את המקום שבו המשתמש הנחמד שלנו צריך לעצור ולחשוב אם הוא צריך להשלים את השדה הזה.
2. אל תשתמשו בספינרים
HTML5 הוא מבריק לא? הוא מציע המון כלים מבריקים חדשים ומלהיבים לשחק איתם. עלינו לחשוב על התאמתם של הצעצועים החדשים שלנו. שדה המספרים כולל כעת מעט חצים למעלה ולמטה כדי לאפשר למשתמש לעבור בין מספרים.
יש כאן שתי בעיות. ראשית, תצוגת הדפדפן המוגדרת כברירת מחדל של החצים הופכת אותם למעט קטנים. מאוד קליל ללחוץ והשמנים שמאצלים בינינו הולכים להיאבק באייפון. זה נקרא חוק פיט, ככל שמשהו קטן יותר קשה ללחוץ עליו.
אבל אני שומע אותך צועק, אתה יכול פשוט להקליד את המספר ישירות לשדה המספרים. כן, אתה יכול, אבל בואו נסתכל על תצוגת הדפדפן, החצים הטובים למעלה / למטה דומים לחברנו האמין בתיבת הבחירה. משתמש שהוצג בפניו טווה בפעם הראשונה הולך להניח, מכיוון שהוא דומה לתיבת בחירה, שהוא לא יכול להקליד לתוכו.
העצה שלי היא להתרחק עד שהם הופכים למקובלים יותר או שמפתחי הדפדפנים ימיינו את עיצוב ברירת המחדל.
3. יש רק סוג כפתור אחד או עדיף רק כפתור אחד לכל טופס
יש עקרון פסיכולוגי ידוע מעט שנקרא חוק היק. חוק היק קובע ככל שמציעים לנו יותר אפשרויות קשה יותר לבחור. לא מדע רקטות אני מכיר, אלא כלל שכדאי לזכור.
אתה יכול לעזור למשתמש הנחמד שלך על ידי עזרה להם בבחירה. על ידי הפיכת כל הכפתורים הראשיים לצבע אחד, והיותם רק אחד מהם בעמוד מקל על הבחירה. על איזה כפתור אני צריך ללחוץ? אה, זה קל, זה הצבעוני הגדול.
4. שדות גוש
למדתי מדעי המוח בחיים קודמים וכך למדתי את הפסיכולוגיה של הזיכרון - במיוחד זיכרון לטווח קצר או זיכרון עבודה. עכשיו לפני שאתה אומר את זה; לא, קיבולת הזיכרון לטווח הקצר אינה 7 +/- 2, 4 +/- 1 או באדם מדברים שלושה עד חמש נתחים. אנו כבני אדם מעולים בהערכת גירויים חזותיים, האילוץ הוא שאנחנו טובים יותר כאשר המספר קטן יותר. חתיכת טופס לקבוצות קטנות יותר מקלה על ההערכה, כי לעתים קרובות מה שיש למשתמש להזין את הטופס נובע מזיכרונו.
ודא שקבוצות השדות שלך אורכות כארבע.
5. חשוב מדוע אתה שואל משהו ואיך זה מרגיש למשתמש
זו כנראה העצה הכי פשוטה שאני נותן, אך לעתים קרובות היא הכי פחות מנוצלת.
ניקח את הדברים הבאים:
שאלה כל שאלה שאתה שואל. זה הכרחי? איך מרגיש לשאול את זה?
לא פעם יש צורך עסקי לשאול שאלה ואנחנו כמעצבים יכולים להתווכח על הצורך עד שתהיה כחול בפנים. יש לשאול את השאלה. בהבנת הצורך העסקי בנתונים אלה אנו יכולים לעתים קרובות להתפשר.
אנו יכולים לעזור בכך שאנו מספרים למשתמש הנחמד שלנו מדוע עלינו לשאול שאלה זו. הרגיע לגבי השימוש והשיתוף של הנתונים האלה ופשוט להיות נחמד בדרך כלל.
ניקח שוב את הדוגמה שלנו:
זו עדיין שאלה קשה אבל מקווה שהמתקנו את הגלולה.
6. תאריכים הם פרחים קטנים ומפותלים
הזנת תאריכים יכולה להיות אתגר אמיתי ויש כמה מלכודות שתוכלו להימנע מהן. הבעיה היחידה הגדולה ביותר היא התמודדות עם טעויות.
הגישה הקלה ביותר היא הפעלת לוח שנה. ראוי לציין שבועות מתחילים ביום שני בבריטניה וביום ראשון בארה"ב. אם המשתמש שלך לא מתרכז הוא בהחלט יכול לבחור ביום ראשון כשהוא מתכוון ליום שני.
ראוי להזכיר גם פורמטים בינלאומיים של תאריכים. ארה"ב מציבה את החודש הראשון, ביפן זו השנה הראשונה. כך שתאריך כמו 5/5/12 יכול להתפרש בשלוש דרכים.
לכן עדיף להשתמש בתיבות נבחרות.
7. טפסים כ מלאכת מפתח
טפסים הם מלאכה למפתחים וגם למעצבים. להבין מהן הטעויות האפשריות שעשויות להיעשות בהזנת נתונים ובעיצוב הקוד האחורי שלך להתמודדות הוא אתגר.
הנה אחת פשוטה. הזנת ערך מטבע. הטעויות האפשריות שהמשתמש יכול לעשות הן עצומות. אילוץ פורמטים של נתונים שמשתמשים צריכים לעמוד בהם הוא מתסכל עבור המשתמש שלך, ובואו נודה בזה, קצת עצלן מצד המפתחים.
איזה אתגר טוב יותר עבור מפתח מאשר בניית טופס חסין כדורים.
8. אל תשתמש בעמודות בטפסים
הבעיה הגדולה בשימוש בעמודות בטפסים היא זרימה. אנו מתחילים טופס בחלקו העליון ומסיימים בתחתית. בהצגת עמודות ניתן לשבור את זרימת הטופס.
אל תניח שהמשתמשים מכניסים טפסים ולכן מיקוד הוא דרך לנווט בטפסים בעמודות. זה נדיר שראיתי את זה בבדיקות משתמשים. לרוב אנו רואים הזנת פרטים, לחצו לשדה הבא בעזרת העכבר / משטח העקיבה / האצבע ואז הזינו פרטים וכן הלאה.
9. אל תשתמש בשני שדות כאשר אחד יעשה זאת
רוב האנשים אינם קלדני מגע. בבדיקות משתמשים אנו רואים אנשים שמסתכלים על המקלדת תוך כדי הקלדה.
בעת הזנת מספר טלפון המפצל את שדה הטופס, אמור להוסיף קוד קידומת ומספר, גורם לבעיות אמיתיות. משתמשים לא רואים או אכן זוכרים שיש שני שדות אז הזן את המספר המלא בשדה הראשון, גרוע מכך אם השדה מוגבל למספר תווים מסוים.
השתמש רק בשדה אחד למספר טלפון, הדבר נכון לגבי מספר הבית / רחוב - השתמש רק בתיבת הזנת טקסט אחת.
10. היה נחמד
תתפלא מכמה הודעות שגיאה די גסות יש שם.
הנה דוגמא לאחת שנתקלתי בה לאחרונה.
עצם העובדה שהם מציעים לך להזין תאריך בעתיד ברצון ואז תגובה די מפתיעה, ובכן, זה לא מאוד נחמד.
שוב שים את עצמך במקום המשתמש, איך תרגיש לראות את השגיאה הזו? מְרוּגָז? אולי אפילו יותר גרוע. להיות נחמד זה קל.
הפקתי דף עריסה / צ'יט להורדה שיעזור לך לעצב טפסים טובים יותר. הוא כולל הרבה יותר דרכים מומלצות לעיצוב טפסים טובים יותר.
