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

בסוף כל חודש אני מקבל מאורנג' חשבונית במייל. טוב, לא בדיוק חשבונית, קישור להורדת חשבונית. שירות די נוח ומאובטח, האמת. לוחצים על קישור ומקבלים קוד חד-פעמי ב-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. אני מאמין שגם אם אתם קוראים את הבלוג שלי על בסיס קבוע, ואתם מכירים את הנושא הזה, יהיה לכם מעניין להקשיב.

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

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

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

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

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

ספרו לחברים…

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

כל מי שמשתמש ב-Windows כבר התרגל לקבל הודעות פורמאליות, טכניות וקרות ממערכת ההפעלה: "An Error has Occurred", או "The sender of the selected message has been added to your Safe Senders List". לכאורה, המחשב מדווח לנו שקרו דברים, כאלה שאין לו שום נגיעה אליהם. קרתה שגיאה. השולח התווסף לרשימת השולחים הבטוחים. האם היינו מצפים למשפטים מהסוג הזה עם בני אדם? תארו לעצמכם שביקשתם מבת או בן הזוג שלכם חביתה, והם היו אומרים לכם, "הביצים קושקשו והונחו במחבת". נשמע לכם הגיוני?

אבל זה לא בן-אדם, זה מחשב!

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

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

איך ממשק נולד?

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

שיחה מושהית

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

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

הנה דוגמה: את ההודעה הזו קיבלתי כשעברתי על תיקיית דואר הזבל שלי ב-Outlook, אחרי שלחצתי בפעם הראשונה על "Add to Safe Senders" על דוא"ל שזוהה בטעות כדוא"ל זבל. מה השאלה הראשונה שעולה לכם כשאתם קוראים את ההודעה הזאת?

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

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

הודעה יותר מוצלחת היתה יכולה להיות:

The sender of the selected message has been added to your Safe Senders List. All future messages from this sender will be delivered directly to your inbox.

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

לדבר עם סגנון

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

כולנו זוכרים את clippy, אותו מהדק נייר שמח שקפץ לעזור לנו בכל משימה ב-Word, גם כשלא היינו זקוקים לעזרה. אחד הדברים היותר מרגיזים בו היה שהוא הניח שהוא מבין מה אנחנו רוצים וצריכים. "It looks like you're writing a letter", היתה אחת מהאמירות הנפוצות. האם לא היה פחות מרגיז אילו הוא היה שואל – "Are you writing a letter? I can help". הסגנון שלו, וגם החזרה על אותן השאלות, השפיעו כל כך חזק על אנשים, עד כדי כך שהרבה מהם הפיקו פרודיות עליו. הנה אחת:

בהקשר של ממשק עם אופי אני ממליץ על מאמר מרתק ב-Johnny Holland.

רגש בממשק

אם כן, באיזה טון רגשי הממשק צריך לדבר? השאלות הראשונות שצריך לשאול, כמו בכל מוצר שמתכננים לשימוש של אנשים:

• מי הולך להשתמש בממשק?
• למה?
• איך היינו רוצים לגרום למשתמש להרגיש?

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

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

אבל זה לא נגמר רק בטקסט שמופיע בדפי אתר. לא הייתם רוצים להרגיש טוב גם כשאתם מקבלים מהאתר משוב? הנה דוגמה מעולה מ-Twitter. כשמעלים תמונת פרופיל חדשה מקבלים את ההודעה הבאה (That's a nice picture):

מישהוא אמר פעם, "חנופה תביא אותכם רחוק ב-80% מהמקרים, וב-100% מהמקרים אם היא אמיתית" (לא מצליח למצוא את המקור… אתם יודעים?), וזה בהחלט בולט בהודעה הזו של טוויטר. הרי ברור שהם אומרים את זה לכולם. אז מה? זה עדיין כיף לראות.

ממשקים בפולניה

אין לי שום דבר נגד העם הפולני; להיפך. כמה מאבותי הגיעו משם. אבל לא יכולתי שלא לחשוב על הבדיחות על האמא הפולניה כשראיתי את ההודעה הזאת מהרשת החברתית Tagged:

Shmulik has added you as a friend on Tagged
Is Shmulik your friend?

[Yes]        [No]

Click Yes if you are friends with Shmulik, otherwise click No.

Please respond or Shmulik may think you said no

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

Please respond!

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

סיכום

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

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

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

כמה מחשבות שלי על whitespace – הריווח הזה שתופס את תשומת הלב שלנו, ועל ארגון מידע בדף.

צילום המסך השבועי לילד

כך נראה הדף של גוגל כשהוא נטען:

הממשק הנעלם: ככה הדף נטען (לחצו להגדלה)

וככה זה אחרי שהעכבר עובר עליו – העמוד שאנחנו רגילים אליו:

הממשק הנעלם: ככה הדף נראה אחרי שהעכבר עובר עליו

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

גימיק או שינוי אמיתי?

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

העובדה שהדף לבן למעט תיבת החיפוש מושכת את העין בצורה מאוד משמעותית. יש פה שימוש יפה של אפקט ה-whitespace על משיכת תשומת לב, כפי שהזכרתי בפוסט השערורייתי סקס!!! ואיך למשוך תשומת לב: חלק 1 מתוך 3. טוב, אולי לא כל-כך שערורייתי העובדה שאין כמעט כלום על הדף מייצרת קשב למקום שיש בו תוכן.

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

עדכון 9/12: משיכת תשומת הלב לתיבת החיפוש היא רק חצי מהעניין. אחרי שגוגל וידאו שאנחנו ממוקדים על המטרה שלנו, תיבת החיפוש, הם השתמשו ב-fade-in כדי למשוך את תשומת הלב שלנו לכל הכלים האחרים שיש על הדף. אנשים רבים לא מודעים לכלים האלה בכלל: יומן הפגישות, מפות, חיפוש וידאו ועוד אחרים. האנימציה של ה-fade-in מפעילה את האיזורים בראיה ההיקפית שלנו; אלה רגישים לתנועה, שריד לתקופה הלא מאוד רחוקה שבה היינו צריכים להתגונן מפני חיות טרף מהירות שקפצו עלינו מהשיחים בזמן שאנחנו קטפנו תותי יער או שוקולד מהעצים. תזכירו לי לא לכתוב יותר פוסטים כשאני רעב. ותודה לעליזה על ההערה.

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

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

צפוף וחמים בואלה (לחצו להגדלה)

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

אמזון - מרווח ואוורירי (לחצו להגדלה)

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

תעמדו בטור ישר

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

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

היה מעניין לשמוע, אם מישהו ב-ynet קורא את המילים האלה, מה השיקולים מאחורי ההחלטה הזו.

הצילום בראש הכתבה הוא של LWY והטיגריסים של fPat