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

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

ניסיתי לעבוד עם האתר החדש ודי מהר נתקלתי בכמה דוגמאות שגורמות למשתמש חדש באתר לחשוב. הן הזכירו לי מיד את הספר הנפלא, Don't Make Me Think, מיד אסביר למה.

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

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

ואז לא קרה כלום.

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

הסתכלתי על המסך, וניסיתי לחשוב איפה הייתי. כאן חשבתי על Don't Make Me Think בפעם הראשונה. נזכרתי שהתחלתי את התהליך בתיבה הכתומה, וראיתי שכתוב בה כבר סן פרנסיסקו, 2 מבוגרים… מצויין. לחצתי על "חפש".

נתעלם רגע מהודעת ה-JavaScript המיושנת (זה כל-כך 90s), בעיני אין לה מקום באתר חדש.

לחצתי OK והסתכלתי שוב על הטופס:

שום דבר לא סימן לי מה השדה חסר.

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

יכול להיות שעבור 80% מהמשתמשים זה ברור מה לעשות, אבל לא כדאי בשביל אלה שזה לא ברור להם לסמן את הדרך?

מילאתי תאריך והגעתי לדף התוצאות (הקליקו כדי להגדיל בחלון חדש)

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

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

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

כך נראה החלק העליון:

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

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

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

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

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

רביעית, אין בחלק הזה שום Call for Action חזק שמושך אותי לבחור את האפשרות הזולה ביותר שזמינה לי כעת.

הצעה לשינוי

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

עשיתי פה כמה שינויים:

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

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

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

לאחר הלחיצה

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

אני משאיר לדמיון שלכם מה אפשר לעשות במקום זה…

איך להימנע מבעיות כאלה?

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

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

הסדנאות הקרובות נפתחות בשבוע הבא, בשלושה מועדים:

• 5/12, יום ראשון (ועוד 3 ימי ראשון שאחריו) – למנהלי מוצר, מנהלי פרויקטים, מנהלי פיתוח ויזמים, בתל-אביב.
• 6/12, יום שני (ועוד 3 ימי שני שאחריו) – למעצבים גראפיים, בתל-אביב.
• 7/12, יום שלישי (ועוד 3 ימי שלישי שאחריו) – למעצבים גראפיים, בחיפה.

הסדנה נמשכת ארבעה מפגשים של 4 שעות, בין 9:00-13:00.

מחיר הסדנה המלא הוא 2,600 ש"ח+מע"מ,

מחיר הסדנה למי שירשם עד יום שלישי הקרוב, ה-30/11: 2,200 ש"ח+מע"מ (15% הנחה!)

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

לפרטים נוספים והרשמה לסדנה

משתתפי הסדנה מספרים

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

שירית שרגא, מנהלת פרויקטים, ווייט לייבל

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

דן ברק, מנהל מוצר, קלירזן

לפרטים נוספים והרשמה לסדנה

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

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

הטופס: הזנת צ'ק

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

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

להזכירכם, צ'ק נראה כך:

הבעיה

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

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

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

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

• סכום במספר
• תאריך
• מס' שיק
• שם בנק
  
• סניף
• מס' חשבון

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

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

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

הצעה לשינוי

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

• סכום במספר
• תאריך
• מס' חשבון
• סניף
  
• מס' שיק
• שם בנק

מסלול סריקת הצ'ק היה נראה אז ככה:

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

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

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

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

תגובת בעל האתר

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

היי ברק,

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

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

2.      זרימה: זרימת העין היא נגד כיוון השעון סכום >> תאריך >> מס' שיק >> מספר בנק >> סניף >> חשבון.

הקונפליקטים שלך נובעים מ:

1.       היפוכי rtl/ltr (כל החלק התחתון של שיק הוא ltr לעומת חלק תחתון של טופס ההזנה שהוא rtl);

2.       מהתייחסות ללוגו כשם הבנק במקום למספר הבנק בחלק התחתון של השיק (במקרה שלך: 10 הוא מספר הבנק).

תודה שוב על ההתייחסות, וערב טוב.

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

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

להערכתי בדיקה קצרצרה (20 דקות) עם 4-5 משתמשים אמיתיים וכמה צ'קים אמיתיים היתה חושפת את הבעיות האלה תוך זמן קצר.

מה דעתכם?

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

אשמח לשמוע מה דעתכם.

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

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

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

הטופס

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

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

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

בנוסף, ההודעה "הקוד נשלח בהצלחה" בשילוב עם האייקון של ה-V הירוק היא חיזוק מצויין: היא אומרת – אצלנו הכל בסדר. מה שחסר בה הוא מידע חשוב – להיכן הקוד נשלח.

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

ההודעה ב-SMS מגיעה משולח שנקרא "Orange" והיא נראית ככה: "הקש מספר זה להמשך תהליך 999999". תקראו לי קטנוני, אבל אם באתר קוראים לזה "קוד חד-פעמי", לא כדאי גם ב-SMS לקרוא לזה ככה? זה היה מקל על הקישור בין השניים. עוד עניין, יכול להיות שאת החשבון מקבל מישהו שלא מחזיק בטלפון ביד כרגע. למשל – אב המשפחה מקבל אותו עבור הטלפון של הבת שלו, והבת לא בבית כרגע. מה היא תחשוב כשהיא תקבל את ההודעה?

אני מציע את העיצוב החדש הזה:

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

את ה-SMS הייתי משנה ל"הקלד קוד זיהוי זה להמשך התהליך באתר אורנג': 999999". כך השם הוא "קוד זיהוי" כמו בטופס, וגם ברור למי שקיבל את ההודעה שקורה משהו עם הקו שלו באתר אורנג'.

נשמע הגיוני?

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

כתבה חדשה שלי באתר UXI, על סיסמאות, שמות משתמש, ועוד כמה אמצעים שנועדו להגן על המידע של המשתמשים שלכם (ושלכם) באתרים השונים. מה מהם יוצרים אבטחה יעילה בשילוב עם חוויית משתמש טובה? תציצו בכתבה ותגלו…

http://uxi.org.il/pages/1789

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

זהירות, הצלחת!

נכנסתי לחשבון הבנק שלי כדי לעדכן את הסיסמה, ולאחר השינוי קיבלתי את ההודעה הזו:

כשאנחנו מקבלים הודעה מהסוג הזה, שיש לה גם אייקון, אנחנו מעבדים אותה בשלושה שלבים:

• 

  תמרור א-40

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

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

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

אייקונים מוסכמים להודעות

בהנחיות שמיקרוסופט נותנת ליישומים ב-Windows מופיעים האייקונים הבאים:

ההנחיות ברורות:

• X – הממשק מראה שגיאה או בעיה שהתרחשו.
• ! – הממשק מראה מצב שעשוי להיות בעייתי בעתיד.
• i – הממשק מראה מידע שימושי.
• ? – הממשק מראה נקודת כניסה למערכת העזרה

במקינטוש יש גם אייקונים סטנדרטיים שמשמשים באופן דומה, למשל אלה:

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

ברשת נהוג להשתמש בצבע הירוק ובסימן ה-V כדי לציין הצלחה. כך למשל בטוויטר:

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

חשיבות השימוש בסטנדרטים

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

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

סטדנרטים קיימים לא רק באייקונים של הודעות שגיאה. הם קיימים בהרבה מקומות בממשק. למשל, מוסכם בהודעת אימייל שיש "Reply" כדי להשיב לכותב, ו-"Reply to All" בשביל להשיב לכל הנמענים.

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

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

זה קרה גם לכם?

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

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

קוּטֶרָפְּיָה = קיטוּר + תרפיה

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

איך מקטרים?

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

קדימה. הבמה שלכם.

תודה ליוסי על ההשראה.

האתרים שלכם

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

האתר

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

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

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

האתר

1. לא מדברים עם שועלים: "המון באגים אלא אם גולשים עם אקספלודר וגם אז זה רחוק ממושלם."
   

   איך מכניסים מספר תיק פה?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אז מה עושים?

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

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

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

כדי להאזין לפרק (30:27 דקות)

אפשר להוריד את הפרק (12.8MB), להאזין לו באייטיונז, או באתר – בסוף הדף יש נגן כסוף.

קישורים שהוזכרו בפרק

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

אינדקס נושאים וזמן בפרק

3:30 מה זאת המרה?
5:00 על השינוי שהרשת עברה בשנים האחרונות
7:30 מה זה עמוד נחיתה ומה מייחד אותו ואת חוויית השימוש בו?
11:00 מה צריך להיות בעמוד נחיתה ומה הוא צריך להכיל?
16:30 איך לחזק את תחושת הביטחון של המשתמש בעמוד נחיתה?
18:00 על Split Test והאתר whichtestwon
19:45 תהליך האופטימזיציה של עמוד נחיתה
24:00 סיפור מקרה מאתר תכשיטים.
25:00 עוד טיפים לאופטימזציה של עמודי נחיתה

הרשמה לפודקאסט

יש לפודקאסט RSS Feed משלו וגם מקום ב-iTunes Store. אם אתם משתמשים ב-iPod או ב-iPhone תוכלו לעשות מנוי ב-iTunes ולהוריד את הפרקים אוטומאטית ברגע שהם מתפרסמים.

כדי להאזין, תלחצו כאן למטה:

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

האתר החדש של יוניק יו איי

עוד לא הספקתי להסיר את הניילונים מכל החלקים, הוא כולו עדיין מבריק ומצוחצח. הבית החדש של העסק שלי, Uniq UI. אתם מוזמנים להסתובב וגם לגעת (יש הפתעות שמסתתרות), ואם מצאתם משהו שלא עובד כמו שצריך, כמובן שאשמח מאוד אם תספרו לי barak@uniqui.co.il.

ביקשתם? קיבלתם: הגירסה המקוצרת

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

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

סדנת עיצוב חוויית המשתמש – בהנחייתי

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

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

הזדמנות מצויינת לצחוק

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

http://bit.ly/imlaughing

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

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

מן ה"פונג" ועד למחשב הביתי

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

כרזת התערוכה - שמרתי אותה מאז

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

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

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

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

הרצאות על UX – בשבוע הבא

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

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

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

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

מועדי ומבנה ההרצאות

שתי ההרצאות יתחלקו לשניים:

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

ספרו לחברים…

אתם מוזמנים להעביר את הקישורים לכל מי שעשוי להיות מעוניין להקשיב להרצאה. מקווה שתיהנו!