תיבת אישור (Confirmation dialogue box) צפה בדרך כלל אחרי שמשתמשים מבצעים פעולה חשובה כלשהי, ומטרתה לוודא שהם אכן התכוונו לבצע אותה ומודעים להשלכות שלה.
תיבת אישור בעצם מחזירה את המשתמשים לרגע הבחירה ומבקשת מהם לבחור, שוב, את אותה הפעולה. זה חיכוך שאנחנו יוצרים בכוונה כי אנחנו מאמינים שזה לטובת המשתמשים.
לאשר מחדש או undo?
השאלה הראשונה שצריך לשאול היא אם זו באמת טובת המשתמשים, או שאולי מוטב לתת להם את הקרדיט שהם יודעים מה הם עושים, ובמקום להקפיץ להם תיבת אישור נאפשר לבטל את הפעולה (undo) למשך כמה רגעים אחרי שביצעו אותה.
בדרך כלל זה ייעשה בהודעת טוסט (toast) שמופיעה בשולי המסך ונעלמת מעצמה אחרי כמה שניות, כך שהיא לא דורשת מהמשתמשים שום פעולה נוספת או אפילו תשומת לב.
הינה טוסט undo של Google Calendar שמופיע בתחתית המסך אחרי מחיקת אירוע שאין בו משתתפים נוספים מלבדי, והודעה של Google Photos כשמעבירים תמונה לאשפה:
וזה מופיע בראש המסך אחרי הסרה מהמועדפים ב-Dropbox:
מתי כדאי להעלות תיבת אישור ומתי טוסט undo?
העליתי את השאלה בקבוצת הפייסבוק We של מומחיות UX וקיבלתי תשובות מעולות (תודה גדולה!). סיכמתי אותן כאן בארבעה שיקולים עיקריים:
הפיכות (reversibility) – בפעולות בלתי הפיכות, כמו מחיקה סופית ומוחלטת של פריט שאי אפשר לשחזר אחר כך, או שליחת דוח שאי אפשר לחזור ולשנות אחרי שנשלח, מוטב לשאול את המשתמשים לפני הביצוע ולוודא שהם מבינים מה עומד לקרות. אבל אם הפעולה הפיכה, למשל מעבירה את הפריט המחוק לתיקיית זבל שאפשר בקלות לשחזר ממנה ללא הגבלת זמן, אפשר להסתפק בטוסט undo.
חומרה (Severity) – בפעולות שיגרמו לשינויים מרחיקי לכת או לאובדן קריטי שישפיע על גורמים אחרים או לטווח ארוך, כדאי בהחלט לעצור את המשתמשים ולשאול אותם אם אכן זה מה שהתכוונו לבצע. לעומת זאת, אם מדובר בפעולה מקומית וקצרת טווח, אפשר להניח למשתמשים לבצע אותה במינימום הפרעה, כי גם אם טעו – הנזק יהיה מזערי.
מורכבות (complexity) – בפעולות שיש להן השלכות מורכבות, למשל שהפעולה תשפיע על הגדרות המכשירים אחרים, כדאי להציף הודעה לפני הביצוע, וכך לתת למשתמשים שהות לקרוא את ההשלכות בנחת ולהבין אותן לאשורן. לעומת זאת, אם ההשלכות קצרות ופשוטות או שאין בכלל השלכות, אפשר לשקול הודעת טוסט קצרה וחדה.
תדירות (frequency) – בפעולות שעושים לעיתים קרובות, כמו ניהול מיילים, זה יהיה מעצבן למדי אם ישאלו אותנו על כל פעולה אם אנחנו באמת באמת רוצים לעשות אותה. יתרה מכך, במוצרים או בפיצ'רים שנמצאים בשימוש יומיומי תדיר, הסבירות שמשתמשים ילחצו בטעות על פעולה שלא הבינו את משמעותה היא די נמוכה. אבל בפעולות שעושים לעיתים רחוקות ופחות זוכרים את המשמעות שלהן, תיבת אישור יכולה להיות פתרון בטוח יותר מטוסט undo.
חוץ מזה, יש מוצרים שמאפשרים חלופות לפעולה במקום האפשרות לבטל אותה (תודה לאפרי אלטחן על ההארה). אתן דוגמאות עוד מעט.
האנטומיה של תיבת אישור
תיבת אישור כוללת שניים או שלושה חלקים:
כותרת
שורה (או שתיים) של הסבר – אופציונלי
כפתורים
חלק ראשון: הכותרת
הכותרת צריכה לשאול (או להודיע) על פעולה אחת עיקרית שאותה אנחנו רוצים לאשר מחדש (מה שנקרא לאשרר). היא צריכה להיות הכי פשוטה שאפשר, ובעיקר חד-משמעית.
ברוב המקרים (אבל לא בכולם) הכותרת תנוסח כשאלה שהמענה עליה דיכוטומי, כלומר עם שתי אפשרויות מנוגדות שקל להבחין ולבחור ביניהן: כן/לא, להישאר/לצאת, להמשיך/לחזור.
יעזור מאוד לחשוב על הכפתורים כבר בשלב הזה ולוודא שיש לשאלה שאנחנו שואלים בכותרת שתי תשובות טובות, קצרות וחד-משמעיות שישמשו אותנו אחר כך בכפתורים.
אל תסתפקו בכותרת כללית כמו Warning או Are you sure. תהיו ספציפיים לפעולה המדוברת.
בכלל, הסירו לגמרי מתיבות האישור שלכם פתיחים מיותרים בסגנון בטוח ש...? (Are you sure), פעולה זו... (This action will) ואפילו Do you want to. גשו מיד למה שחשוב.
זה פשוט ומצוין, של Twitter כמובן:
למה חשוב להסיר את הפתיחים האלה?
המשתמשים עשו פעולה ואנחנו בעצם מעכבים אותם לפני הביצוע שלה, לכן יש לצמצם במילים ולנסח באופן שהכי קל להבין במהירות. שאלת Are you sure מכניסה מורכבות (ואפילו קצת מורכבות רגשית) שאינה נחוצה כלל.
מאחר שמדובר בפעולות חשובות, הניסוח צריך להיות מאוד חד-משמעי, וכל תוספת לשאלה המרכזית מערפלת את המסר החד והברור.
לא לערער את הביטחון של המשתמשים בעצמם ובמוצר – השאלות האלה בעצם רומזות שהמשתמשים לא סגורים על איך להשתמש במוצר או שהוא לא לגמרי ברור להם.
כי הם לא מוסיפים שום דבר.
להמשיך את הביטול?
שימו לב שהמילה ביטול או Cancel היא מאוד לא חד-משמעית בפעולות מסוג הסרה או מחיקה, בעיקר כשהיא מופיעה ליד ביטול אחר (Undo) או ליד מחיקה (Delete). הסיבה היא שנוצרת שלילה כפולה ולא ברור את מה מבטלים: את הפעולה או את ביטול הפעולה. לכן כדאי לשקול להחליף אותה ב-חזרה, להישאר, לא, לצאת, להפסיק, או כל פעולה ברורה אחרת לפי ההקשר.
גם המילה Continue או המשך יכולה להיות כללית מדי ולא חד-משמעית מספיק, אז נסו להיות מדויקים ולדבר על פעולה ספציפית.
החלק השני: ההסבר (אופציונלי)
ההסבר אמור להוסיף מידע על הכותרת. לכן אם אין לנו משהו חדש להגיד מעבר למה שכתבנו בכותרת, לא צריך להוסיף הסבר בכוח ולהגיד את אותו הדבר פעמיים.
יש מערכות, לא מעט לצערי, שמוגדרת בהן רק תבנית אחת לתיבות אישור, עם כל שלושת החלקים, ואז פשוט חייבים להוסיף שורת הסבר גם אם אין שום דבר חדש להגיד בה. אז קודם כל, נסו לשנות את המערכת וליצור בה שתי תבניות – אחת עם הסבר ואחת בלי – ולהשתמש בהן לפי הצורך.
אם אין ברירה, נסו לפחות לא לחזור על עצמכם. לדוגמה:
אז מתי צריך הסבר?
כשרוצים ליידע את המשתמשים על ההשלכות שיש לפעולה שלהם, אם לא בטוח שהם צפו את כולן.
הדוגמה הכי נפוצה היא שהמשתמשים ביקשו לעשות פעולה מסוימת, אבל לא בטוח שהם יודעים שהיא תגרור פעולות נוספות שהם לא ביקשו באופן ישיר. למשל:
* מחיקת פריטים קשורים – הם ביקשו למחוק פריט, אבל לא בטוח שהם יודעים שאיתו יימחקו עוד פריטים שקשורים אליו בכל מיני דרכים.
* מחיקה מחשבונות אחרים – המשתמשים ביקשו למחוק פריט אחד מהחשבון שלהם, אבל לא בטוח שהם יודעים שהפריט יימחק גם מהחשבונות של חברי הצוות שלהם.
* מחיקה ממכשירים אחרים – הם ביקשו למחוק פריטים מהספרייה בענן, אבל לא בטוח שהם מבינים שהפריטים יימחקו גם ממקומות מסונכרנים אחרים (ואם תיבת האישור לא תהיה מספיק ברורה בעניין, הם ימחקו לעולמי עולמים את כל התמונות מחופשה של חודש בספרד, עם כל הגיבויים שהם כל כך הקפידו לעשות. סיפור אמיתי).
* פעולה שסותרת פעולה אחרת – הם ביקשו לשנות הגדרה, אבל לא בטוח שהם יודעים שעכשיו היא סותרת הגדרה אחרת ולכן תביא לשינוי גם שלה.
דוגמה נפוצה אחרת היא יציאה בלי שמירה. למשל, המשתמשים ביקשו לצאת באמצע מילוי טופס או באמצע יצירת פריט, אבל לא בטוח שהם יודעים שכל מה שמילאו עד עכשיו פשוט יימחק והם יצטרכו למלא מחדש.
לדוגמה: במקרה הבא צריך לבחור לפחות חמישה תחומי עניין לפני שמתחילים להשתמש באפליקציה. אם משתמשים בוחרים פחות מחמישה ומפסיקים באמצע, הבחירות שלהם יימחקו, אבל יכול להיות שהם לא הבינו את העניין עד הסוף. לכן כדאי ליידע אותם על כך.
ככל שהפעולה יותר קריטית ופחות הפיכה, כך כדאי להקדיש יותר תשומת לב לחלק של ההסבר ולהשתמש גם בכלים עיצוביים (כמו צבע וריווחים) כדי שמשתמשים יקראו את מה שחשוב.
זה של Typeform:
ויש עוד מקרים רבים כאלה, אז אם המשתמשים שלכם אולי לא ערים להשלכות של הפעולה שביקשו לבצע – ספרו להם עליהן בבירור.
איחוד ההסבר והכותרת
כדאי לצאת מנקודת הנחה שהמשתמשים יקראו רק את הכותרת ואת הכפתורים. לכן כשההשלכה קריטית ויש חשש שידלגו על שורת ההסבר ויחמיצו אותה, כדאי לכלול אותה כבר בכותרת, או להפוך את הסדר ולשים את השאלה אחרי ההסבר. למשל:
למחוק את התיקייה ואת כל הקבצים שהיא מכילה?
הפרטים שמילאת לא יישמרו. לצאת בכל זאת?
התמונות יימחקו מכל מקום שבו הן שמורות, לרבות הגלריה במכשיר שלך. למחוק את התמונות לתמיד?
לעולמי עולמים ולנצח נצחים
אם הפעולה בלתי הפיכה, תגידו את זה. משתמשים רגילים לפחי מחזור ולפתרונות אחרים שיצילו אותם מהפזיזות של עצמם, אז אם אין לכם פתרון כזה – כתבו במפורש שזה לנצח ושאי אפשר לתקן, להחזיר או לשחזר. כדאי לשלב אפילו בכותרת מילה שתגיד את זה, כמו לתמיד, לצמיתות או permanently.
הדוגמה של Typeform שהבאתי למעלה מדגימה מצוין גם את העניין הזה.
יו-טיוב דורשים אפילו אישור אקטיבי: כפתור המחיקה מופיע ב-disabled עד שמסמנים צ'קבוקס.
יש חלופות? זה הזמן להציף אותן
אם יש לכם סיבה לחשוב שהמשתמשים בחרו פעולה הרסנית מדי או לא מדויקת כשבעצם יכלו לבחור פעולה אחרת מתאימה יותר – תיבת האישור היא בדיוק המקום ליידע אותם על האופציות העומדות בפניהם.
זה של פייסבוק:
החלק השלישי: כפתורים
כשכותבים כפתורים לתיבת אישור יש לשים לב לשלושה עקרונות:
1. שיהיו מובחנים מאוד זה מזה וחד-משמעיים
הכפתורים צריכים להציג בבירור שתי אפשרויות שונות בתכלית, שאי אפשר להתבלבל ביניהן ושכל אחת מהן היא לגמרי חד-משמעית בפני עצמה. אם ניסחנו היטב את הכותרת, יהיה לנו קל יותר להציג על הכפתורים שתי תגובות דיכוטומיות לשאלה או לאמירה שבכותרת.
זה של AVG וזה מושלם:
2. לתת הקשר
אם כותבים על הכפתורים רק כן ו-לא או רק המשך ו-ביטול זה (אולי) יספיק למשתמשים שקראו את הכותרת ואת ההסבר, אבל לא יהיה ברור בכלל (ואולי אפילו מטעה) למשתמשים שדילגו ישר לכפתורים, ויש הרבה כאלה.
לכן מוטב לתת את ההקשר המלא, לפחות על הכפתור של הפעולה הראשית: כן, סיום חניה; לצאת בכל זאת; כן, למחוק; להפסיק מעקב; כן, לשלוח; כן, להסיר התקנה וכו'.
אם הכותרת היא שאלת כן/לא, אני אישית מעדיפה תמיד להוסיף את המילה כן על הכפתור לפני הפועל (כן, לשלוח) או את המילים בכל זאת אחרי הפועל (לשלוח בכל זאת), אבל אפשר גם להסתפק בשם הפועל (לשלוח) או בשם פעולה (שליחה).
תיבת האישור המצחיקה הבאה היא מתוך התוסף לכרום Forest שנועד למנוע מכם להיכנס לאתרים זוללי זמן. במקרה הזה, ההקשר המלא שהוספתי על הכפתור בגרסה הימנית לא רק ברור יותר, אלא גם מוסיף מכשול רגשי בדרך אל בזבוז הזמן. כי מי רוצה להורות במפורש על הריגת שתיל? וכמובן, הכותרת ישירה יותר כמו שדיברנו למעלה.
יתרון נוסף הוא שמשתמשים חוזרים יוכלו ללחוץ מיד על הכפתור, אפילו בלי לקרוא את הכותרת. כשיש הקשר מלא על הכפתור, אנחנו חוסכים להם את הצורך לקרוא שוב ושוב את אותה השאלה.
זו תיבת האישור שעולה כשמוחקים תמונה מהגלריה של גלקסי. אני צריכה לקרוא רק את הכפתור ולא שום דבר אחר:
יתרון שלישי הוא שמילים עם תוכן שהוא לא רק כן/לא או ביטול/אישור יגרמו למשתמשים לעצור ולהבין לפני שהם לוחצים, וזו דרך טובה למנוע לחיצה אינטואיטיבית-פזיזה במקומות שיש חשש כזה.
3. להתאים את הפועל שעל הכפתור לפועל שבכותרת
כדי שיוכלו לעשות בקלות את הקישור בין הכותרת לכפתורים – השתמשו באותו פועל בשניהם.
אם שאלתם בכותרת על סיום הסשן – ודאו שכפתור האישור מדבר על סיום.
אם שאלתם על הסרת ההתקנה – ודאו שכפתור האישור מדבר על הסרה.
אם שאלתם על הפסקת החניה – ודאו שכפתור האישור מדבר על הפסקה.
וכו' וכו'.
המקרה הבא, מתוך Google Photos, מלמד על עוד שני דברים שצריך לזכור כשמנסחים תיבת אישור:
1. המשכיות – יש להביא בחשבון את מה שכתוב על הכפתור שהוביל לתיבת האישור, כדי ליצור המשכיות ברורה ביניהם. במקרה הזה המשתמשים לחצו על כפתור שכתוב עליו ריקון האשפה, ובשביל ההמשכיות גם תיבת האישור חייבת להזכיר את ה-אשפה ולקשר אליה.
2. להדגיש את מה שחשוב – מה שחשוב בפעולה הזאת הוא לא ריקון האשפה אלא המחיקה לצמיתות של הפריטים שבתוכה, לכן לדעתי חשוב שהכפתור יכלול את פעולת המחיקה, יותר מאשר את פעולה הריקון, וייתכן שהכי פשוט לאחד ביניהן ולקרוא לזה מלכתחילה מחיקת הפריטים מהאשפה (Delete bin content).
ולסיכום, דוגמה של שינוי בכל שלושת החלקים
הכותרת - שואלת על פעולה ספציפית באופן ברור.
ההסבר - מספר למשתמשים על ההשלכות של הפעולה שלהם, בלי לחזור על הכותרת.
הכפתורים = מובחנים מאוד זה מזה וכוללים הקשר.
Comments