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

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

עדכון 6/6/2009 – קישורים לכל הפוסטים בסידרה:

חלק ראשון: זרימה בטופס ויישור תוויות.

חלק שני: עזרה והסברים, ובדיקות תקינוּת (וָלידציות).

חלק שלישי (הפוסט הזה): פעולה ראשית ופעולות משניות, ומספר השדות בטופס.

חלק רביעי: תלויות בין שדות, ורשימת קריאה מומלצת.

פעולה ראשית ופעולות משניות

המטרה של כל טופס היא לאסוף מידע מהמשתמש. הפעולה הראשית (Primary Action, או לפעמים Action Button) היא הדרך של המשתמש להגיד "סיימתי להזין את המידע שנדרש". בדרך כלל זה יהיה כפתור: "כניסה", "המשך", "שלח" וכו' (או באנגלית "Log In", "Continue", "Next").

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

מטרתה של הפעולה המשנית (Secondary Action) היא לרוב לבטל את הפעולה (למשל כפתור "ביטול" – "Cancel") או ניווט לתהליך עבודה אחר, כמו למשל הקישור "שכחת סיסמה?" בטופס של ג'יידייט. באשפים (wizards) יש הרבה פעמים כפתור "חזרה" – "Back" שמאפשר לחזור לעמוד הקודם ולערוך שינויים, וכפתור "ביטול".גם אלה הן פעולה משנית. לא בכל טופס יש פעולה משנית פעולה משנית תופיע לעתים ככפתור בעיצוב דומה לפעולה הראשית, אבל לרוב הפעולה המשנית מוצגת ככפתור בעיצוב מעט שונה, או כקישור ולא ככפתור. על הסיבות לכך – כאן למטה.

הנה דוגמא לטופס די מוכר, עם  שתי פעולות ראשיות, ושלוש פעולות משניות. אני מתייחס לכפתור "I'm feeling lucky" כפעולה ראשית, כי לחיצה עליו ממלאת את אותו תפקיד של הפעולה הראשית, "Google Search", עם שינוי קטן – גולשת עבורנו אל התוצאה הראשונה בחיפוש. השימוש בשתי פעולות ראשיות הוא די נדיר, ובצדק: הוא מקשה על המשתמשים, בגלל שהוא מאלץ אותם לבחור מה הם רוצים גם כשהם עושים את הפעולה הנפוצה בטופס. חופש בחירה הוא לא תמיד דבר טוב, מסתבר.

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

מיקום הפעולה הראשית

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

הנה דוגמא מצויינת מאתר לשכת רואי החשבון.

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

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

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

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

הרגשתם את התנועה החדה שמאלה? עכשיו תנסו לסרוק במהירות שוב (מתנצל מראש בפני מי שעיצב את הדף, הזזתי לך את הגבינה):

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

מיקום הפעולה המשנית

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

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

עיצוב פעולה ראשית ומשנית

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

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

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

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

פעולה ראשית ומשנית: סיכום

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

אני רק שאלה (מספר השדות בטופס)

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

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

הנה דוגמא לטופס הרשמה מצויין מתוך האתר Wellcome Collection:

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

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

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

לכל הפוסטים בסידרה

חלק ראשון: זרימה בטופס ויישור תוויות.

חלק שני : עזרה והסברים, ובדיקות תקינוּת (וָלידציות).

חלק שלישי (הפוסט הזה): פעולה ראשית ופעולות משניות, ומספר השדות בטופס.

חלק רביעי: תלויות בין שדות, ורשימת קריאה מומלצת.