פוסטים   פודקאסט   על האתר   צרו קשר

די לכפתורי "נקה טופס"!

9 בפברואר, 2010 | 18 תגובות | מתוך: ביקורות אתרים, בית-הספר לשמישות, חוויית המשתמש UX, ממשק המשתמש UI.

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

אז איך זה שעדיין מסתובבים חופשי טפסים עם כפתור "נקה"?

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

כאן נטמן כפתור "נקה"

מאיפה בא ה"נקה" הזה?

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

עוד כפתור = עוד עבודה

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

הנה דוגמה מאלפת מבית NRG – זה מהטופס של "המייל האדום".

clean

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

חוץ מעניין כפתור ה"נקה", אגב, יש פה עוד כמה חוקי שמישות חשובים שנשברו:

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

adom

עוד דוגמאות מהנוף המקומי

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

fnx

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

meuhedet

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

קופת חולים כללית

ב-gov.il (גידי, מה קורה?), בטופס יצירת קשר – כן, ניחשתם נכון.

gov

בבית החולים רמב"ם עוזרים לנו עם אייקון של X שמציין ניקוי, ואייקון של חץ (שממש קשה לראות, אם כי הוא מאוד אלגנטי) שמציין "שלח":

רמב"ם

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

egged

בשירות הלקוחות של תנובה התמונה די דומה, אבל רק למי שגולש ב-Internet Explorer. זה ברור למה – שועל אש זה בשרי, תנובה זה חלבי:

תנובה

כמה דוגמאות טובות יותר

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

ישרוטל. קישור.

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

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

הרשמה לאימייל של ynet

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

btl

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

strauss

אז מה עושים?

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

רוצים לדעת מתי מתפרסמים פה פוסטים?

הרשמו לעדכונים באימייל או ב-RSS. לא מכירים RSS? הנה הסבר.

18 תגובות לפוסט "די לכפתורי "נקה טופס"!"

  1. מאת ויטלי:

    אהבתי.

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

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

  2. מאת ברק דנין:

    תודה, ויטלי. הכפתור יכול להיות שימושי כשרוצים לאפס את הערכים לערכי ברירת המחדל (במקור זה "RESET"), אבל בטפסי "יצירת קשר"? מישהו סתם עשה "Copy paste" בלי להפעיל מחשבה על המשתמש ומה הוא צריך.

  3. מאת אוריאל:

    תזכורת מצויינת ומשעשעת !
    כיף לקרוא :)

  4. מאת ברק דנין:

    תודה אוריאל :-) כמו שאתה רואה מכמות האתרים הגדולים שמופיעים פה, לרבים זאת לא תזכורת…

  5. מאת Sro:

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

  6. מאת ברק דנין:

    Sro, אני מקווה שגם לא יהיה לך כפתור כזה באיזור התגובות.
    תודה על המשוב!

  7. מאת דנה:

    לגמרי!
    אהבתי את הפידבקים ששלחת להם.. :)

    אני יכולה להוסיף לטופס שלי כפתור "נקה לי את הבית"?

  8. מאת טליה אבירן:

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

  9. מאת ברק דנין:

    הי טליה, תודה על התגובה.

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

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

    לגבי קישורים לצורך פעולות, אין פה עניין של אהבה או שנאה, זה משהו שהוכח מחקרית עם אנשים ומעקב עיניים, וזה הפתרון שעובד הכי טוב בהקשר של פעולות ראשיות ומשניות. הנה המחקר:
    http://www.lukew.com/resources/articles/psactions.asp

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

  10. מאת Tweets that mention די לכפתורי "נקה טופס"! « פשוט. שימושי -- Topsy.com:

    [...] This post was mentioned on Twitter by YehezkelB, Ran Bar-Zik, Barak Danin, Amit T, Guy Meron and others. Guy Meron said: די לכפתורי "נקה טופס"! http://www.usable.co.il/archives/2921 [...]

  11. מאת רוני אורבך:

    וואלה. רצתי עכשיו והעפתי כל זכר לכפתורי "נקה" שחטאתי בהם בעבר. תודה :-)

  12. מאת ברק דנין:

    היי רוני,
    שמח שיכולתי לעזור :-) הגיע הזמן להיפטר מהמעצבנים האלה!

  13. מאת אורלי:

    כ"כ נכון, תודה על הפוסט המצויין

  14. מאת יוסי רוזנמן:

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

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

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

  15. מאת טליה אבירן:

    ליוסי, דוגמא נהדרת.

  16. מאת ברק דנין:

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

  17. מאת טליה אבירן:

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

  18. מאת שגיא:

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

    :) ))

כתיבת תגובה

רוצים שהתמונה שלכם תופיע עם התגובה? העלו אותה ל-Gravatar.