ביקרתי היום באתר www.gov.il, ובו ראיתי את התרשים הבא:
אתם לא חושבים שהתרשים הזה ממש, אבל ממש מדכא?
עיצוב טוב
The error situation
נכון שהודעה כזו היא דרך נפלאה לפתוח את היום?
באמת, ווינדוז? באמת? Disallowed? אני לתומי חשבתי שהגישה אסורה, אבל לא, מה פתאום. אנחנו? שנאסור משהו על מישהו? חס ושלום. הגישה ממש לא אסורה, היא פשוט אי-מאושרת. כן, אי-מאושרת, מה קרה?
אל תבינו אותי לא נכון, המילה קיימת בשפה האנגלית, ויש לה את השימושים שלה. זה פשוט לא אומר שצריך לדחוף אותה לתוך הודעות שגיאה סטנדרטיות לחלוטין. אגב, ה-resource המסתורי הזה? קוראים לזה כונן! יעני drive!
אבל מה אני מדבר, כבר אמרו את כל זה לפָני אנשים יותר חכמים ממני.
למי שלא מכיר את פועלו של ג'ורג' קרלין המנוח, אני חש חובה להזהיר שהסרטון עשוי להכיל גם מילים שאינן גסות.
[youtube=http://www.youtube.com/watch?v=DagVklB4VHQ]
אגב, תראו איזו אפליקציה יפיפייה עשו בעיתון הספורט הספרדי Marca עבור צופי המונדיאל. זה פשוט תענוג צרוף.
.
נתבאג
השבוע, באדיבות אייפייליוקול (הר הגעש בעל השם הלא יוזבילי), נאלצתי לבקר באתר נתב"ג, שזו תמיד חוויה די מפוקפקת. קודם כל, כן חייבים להודות שהאתר מושקע. רואים שהוא מושקע. אחד הדברים שתמיד אהבתי בו זה ההודעה על זה שהוא לא תומך בדפדפנים אחרים מלבד אקספלורר. אני אומר את זה ללא טיפה של ציניות -– אם כבר החלטתם לעשות אתר מוגבל, כנראה עקב סיבות של עלות וזמן פיתוח, אז מן הראוי לחסוך מהמשתמשים את החוויה המעיקה של השימוש בדפדפנים לא נתמכים, ולהגיד להם את זה על ההתחלה. בצורה כזו המשתמש לא יצטרך לקלל ולהיאבק באתר, ויסתפק רק בלקלל (וגם זה רק האידיאולוגיים שביננו). אין הרבה אתרים שיש להם את האומץ לחסום לחלוטין את הגישה לדפדפנים לא נתמכים, הרוב אומרים שהמשתמש יסתדר, ואולי הוא בכלל לא ישים לב. ייתכן שהאומץ נובע מן העובדה שהאתר הוא למעשה מונופול ואין דרך נוחה אחרת להשיג את המידע, וייתכן גם שההחלטה לחסום נובעת ממחיר הטעות – האתר מספק מידע בעל חשיבות רבה, ואם משהו יתפקשש בגלל חוסר תאימות דפדפנים, זה לא ייגמר טוב, וראשים יעופו. נו טוב, שום ראשים לא יעופו, אבל יפרסמו כתבה ב-ynet ושם בתגובות ירשמו "אקספלורר שולטטתת!!11" ואף אחד לא רוצה לראות את זה.
אבל כמו שבטח ניחשתם, לא פתחתי את הנושא על מנת להלל את אתר נתב"ג, ובמיוחד לא על זה שאינו תומך בפיירפוקס.
הבעיה הראשונה צצה בכל פעם שאני צריך להגיע אל האתר של נתב"ג. העניין הוא שאני אוהב לנחש כתובות. יש לי מין קטע כזה, שאני מאמין שכתובות של אתרים חשובים צריכות להיות הגיוניות או לפחות זכירות. פעם, בבלוג אחר, שאלתי: מה מפריע לאנשי נתב"ג לרכוש את אחד הדומיינים הבאים: www.bengurion.com, www.bengurionairport.com, www.bengurionairport.co.il? כנראה שלא הרבה, כי שלושת האתרים פנויים לרכישה מידי מתנחלים וירטואליים (או שיש תרגום עברי ל-cybersquatters ללא קונוטציות פוליטיות?). ורוב הסיכויים שנתב"ג יכול להרשות את זה לעצמו. מכאן אני נאלץ להסיק, שלדעתם הכתובת http://www.iaa.gov.il/Rashat/en-US/Airports/BenGurion/ היא הרבה יותר מובנת, זכירה ואינטואיטיבית מאשר הכתובות שציינתי.
מישהו בתגובות הסביר לי שניתן להגיע אל האתר בכתובת ben-gurion-airport.co.il, מה שהעלה אצלי שאלה אחרת – איך אני אמור לדעת את זה? לא הצלחתי להקליד בגוגל חיפוש שייתן לי את הכתובת הזו, וגם לא באתר עצמו. כנראה שזו כתובת חד-כיוונית – אתה יכול להקליד אותה, אבל לא למצוא אותה.
בכל אופן, הפעם הייתי צריך את לוח הטיסות המתוכנן. הטופס נראה כך, והשדה המעניין בו הוא "חברת תעופה".
השדה אינו עריך ישירות, כלומר אי אפשר להקליד בו. חייבים ללחוץ על הכפתור הזה בעל עיצוב הרטרו בסגנון "אמצע שנות התשעים". למה? לא קשה לעשות מנגנון של השלמה אוטומטית, שיתמוך בעברית ובאנגלית, כפי שנראה בהמשך. לחיצה על הכפתור פותחת את הדיאלוג הבא:
למעלה יש את תיבת הבחירה, ולמטה את תיבת הפריטים הבחורים. הטופס גם טורח לציין שאפשר לבחור עד 3 חברות תעופה. כיצד בוחרים יותר מאחת? אם סתם נלחץ על שני פריטים אחד אחרי השני, כפי שיעשה בהיעדר הנחיות אחרות המשתמש הממוצע (שאלתי אותו, יש לי את המספר), הפריט השני פשוט יחליף את הראשון. אמנם בסופו של דבר זה מתבצע בתפעול החלונאי הסטנדרטי של לחיצה על ctrl, אך הטופס אינו מכיל כל הסבר על זה, והמשתמש צריך לנחש את זה בעצמו. לא הייתי אומר שזה ניחוש פשוט. מאוד הייתי רוצה לפתוח את לוג האתר ולראות את אחוז המשתמשים שמצליחים לעשות את זה בפועל. אגב, להבדיל מהטופס הראשי, דווקא כאן כן יש אפשרות להקליד בשדה העליון, והוא יקפוץ לאות שהוקלדה. הם הולכים אפילו רחוק יותר מרוב הטפסים, ומאפשרים להקליד את כל הביטוי, בלי להתייחס לכל אות כאות ראשונה של מילת חיפוש חדשה. וזאת השקעה ראויה לציון, אבל מאחר ואין שדה המיועד ויזואלית להקלדה, אין כל דרך לגלות את האפשרות הזו אם לא מנסים. כך שאת ההשקעה עדיף היה להפנות בכיוונים אחרים, ואני יכול לחשוב על כמה. משום מה בשאר תת-הטפסים, כמו בבחירת מדינה למשל, כן יש שדה כזה. מעניין להשוות את אחוז המשתמשים שמקלידים בשני הטפסים האלו.
לאחר שעברתי את מכשולי השדות והזנתי את המידע הנדרש, רציתי להפעיל את החיפוש, אז לחצתי על הלינק שצד את עיני עם המילה "חיפוש". ואז כל המידע שהזנתי נעלם, והטופס התאפס לברירות המחדל. אני מודה שעשיתי את זה פעם נוספת לפני שהבנתי מה הבעיה. הלינק אינו מפעיל את החיפוש. מה שמפעיל אותו זה הכפתור הקטן בכחול ולבן, שלא רשום עליו דבר ובמקום זה יש עליו ציור של חץ. כחול ולבן זה אמנם נורא פטריוטי, אבל במקרה זו גם בדיוק סכמת הצבעים של הטופס עצמו, מה שגורם לכפתור להתמזג עם הטופס עד כדי כך שהדבר הראשון שבולט לאחר שסיימת להזין מידע הוא הלינק לחיפוש חדש. ואם הוא היה נקרא "נקה טופס", שזה בדיוק מה שהוא עושה, אולי האפקט היה פחות חזק, אבל הניסוח הנוכחי שלו מאוד מטעה, במיוחד בצירוף עם העובדה שהמשתמש שם לב אליו לראשונה בדיוק כשהוא מחפש ללחוץ על משהו שרשום עליו "חיפוש", ובמקרה הוא באמת רוצה לבצע חיפוש חדש. ולא למחוק את כל השדות שהוא הזין.
בלי לגרוע מהאמור לעיל, אני רוצה לציין לטובה את האפשרות לחפש טיסות לפי חגים, מבלי להזין את תאריכי החגים ישירות. בעיניי זה רעיון מעולה, במיוחד במציאות הישראלית. זאת חוויית משתמש טובה, שיוצאת (קצת) מהקופסא, לוקחת בחשבון את הצרכים האמיתיים של המשתמש, וחוסכת לו זמן ומאמץ. כמובן שכרגע החג היחיד שזמין בתפריט הוא "שבועות", וגם לא בדיוק ברור מהי המשמעות של ערך ברירת המחדל "הכל" (האם זה אומר "רק בחגים ולא משנה איזה חג" או "תמיד, לא משנה אם זה חג או יום רגיל"?), אבל לצפות שגם הרעיון וגם הביצוע שלו יהיו מעולים זאת נאיביות לשמה. במיוחד במציאות הישראלית.
ולקינוח, קבלו הודעת שגיאה מנצחת מהאתר:
בואו נהיה לארג'ים ונתעלם מהתהייה מהו אחוז האנשים באוכלוסיית היעד שמבינים מה זה קריטריון בהקשר של חיפוש. אבל מה הסיפור עם הכוכבית האדומה מימין לכפתור החיפוש? מה, אתם יודעים שמקובל לשים כוכבית ליד שדה שיש בו שגיאה, אבל אין פה שדה ספציפי כזה, אז החלטתם לשים אותה במקום אקראי בטופס? או שההגיון מאחורי ההחלטה היה "חלה שגיאה בחיפוש אז צריך לסמן את כפתור חיפוש"? או שזה לטובת כל אלה שלא עלה בידם לפענח את הטקסט? פעם ראיתי באתר TED הרצאה של איזה מתכנן ערים אקסצנטרי. הוא הראה תמונה של בניין גדול וממש מדכא ללא חלונות, ואמר משהו בסגנון של "אני לא יודע מי היו האנשים בדיון בו הוחלט על העיצוב הזה, ואני לא יודע היכן הוא התקיים או כמה זמן הוא נמשך. יש רק דבר אחד שאני יודע על הדיון הזה – שהמשפט האחרון בו היה 'Oh, fuck it'". אני סתם מספר את זה, בלי קשר.
ועוד כמה דברים שהצטברו:
בראש אתר העין השביעית נמצא תפריט ניווט שהוא גם רשימת הכותבים הקבועים באתר. לחיצה על שמו של אדם מציגה למטה את המאמרים שפירסם. יפה. אבל על הדרך הרשימה גם מהווה דוגמא לאחת התופעות הנפוצות שיותר מרגיזות אותי, פשוט בגלל חוסר המחשבה שמאחוריה. ה-tooltip על הכפתורים מציג בדיוק את שמות הכפתורים. למשל, אם על הכפתור רשום "עידו קינן", אז גם בטולטיפ יהיה רשום "עידו קינן". שמישהו יסביר לי למה צריך טולטיפ כזה ומה הוא משיג. לפעמים עושים את זה מסיבות קידום אתרים, כי הכפתור מוצג כתמונה ואז גוגל לא יכול לקרוא אותו. ולפעמים זה עניין של נגישות, שנועד עבור תוכנות קוראות מסכים המשמשות גולשים בעלי מוגבלויות ראייה. לדעתי אלו עדיין אינן סיבות מספקות לעשות זאת (כן תציגו טולטיפ, רק תמצאו עבורו איזה טקסט מועיל, למשל "לכתבות של עידו קינן" במקרה שלנו), אבל לפחות זה סוג של סיבה. ואולם כאן הרכיב עצמו הוא פלאשי, שזה אכן בעייתי לגוגל ולקוראי המסכים, אבל גם הטולטיפ הוא פלאשי, אז למיטב הבנתי אין סיבה שהוא יעבוד טוב יותר משתי הבחינות הללו. ומרתקת בפני עצמה העובדה שהטולטיפ מוצג רק עבור חלק מהשמות, ועל אחרים לא מוצג דבר.
אתר מגניב ביותר נמצא בכתובת הפשוטה www.IJustMadeLove.com. בניגוד לאיך שזה נשמע, האתר הוא די חופשי מתכני זימה ותועבה, ואנשים נכנסים אליו מטעמים סטטיסטיים גרידא, כלומר במטרה להעשיר את בסיס נתוני המשגל העולמי. כולל גיאוטאגינג (geotagging), כלומר זיהוי מיקום המשתתפים והצגתו על המפה. יצא לי קצת לעבוד עם אפליקציות מבוססות מפה, ואני חייב להודות שבשימוש כזה מעולם לא נתקלתי. כשלראשונה גיליתי על האתר ועל הקונספט שלו, הייתי בטוח שזה עוד סוג של צ'אט רולט, שנבע מהשיעמום של איזה תיכוניסט. אבל האתר הפתיע אותי לטובה – הוא מאוד מרשים ומעוצב למופת. גם התכנים הבעייתיים יותר (תציצו באזור הסטטיסטיקות) מוצגים בצורה משעשעת ובהחלט לא נגיד "חסודה", אבל סטרילית למדי.
לפוסט שלי על סגירת הטאבים הייתה השפעה אחת מאוד לא צפויה. בתגובות הזכירו לי שניתן לסגור טאבים בדפדפן גם בלחיצת כפתור אמצעי של העכבר (לחיצה על הגלגל). חברים, זה הדבר הכי נוח בעולם. חסל סדר קליעה למטרה. לצערי זה קצת נוח מדי – התרגלתי לזה תוך בערך תוך יום, וזה התחיל להשליך על אפליקציות אחרות, כך שעכשיו אני מנסה לסגור בצורה כזו את כל החלונות והטאבים שנקרים בדרכי רוויית החלונות והטאבים, אבל זה עובד רק בדפדפנים. בסרגל המשימות של ווינדוז 7 זה אפילו פועל הפוך ופותח חלון נוסף של התוכנה עליה לחצתי. אבל זה עדיין שווה את זה.
התנועה כפתרון
אחת השאלות הנפוצות ביותר בנוגע לעיצוב טפסים היא לגבי המיקום האופטימלי של תוויות השדות. אם נדבר על טפסים באנגלית, the labels obviously will be to the left of the כמובן שהתוויות יהיו משמאל לשדות, אך השאלה היא האם עליהן להיות מיושרות לשמאל (האותיות הראשונות של התויות נמצאות על אותו קו אנכי), לימין (האותיות האחרונות יהיו צמודות לתחילת השדה), ושמא הן יהיו מעל השדות.
כפי שניתן לקרוא באחת המצגות של הגורו הגדול של עיצוב טפסים, לוק ורובלווסקי (באנגלית), או אצל ברק דנין (בעברית), מה שקורה זה ככה:
אם מיישרים את התוויות לפי האות הראשונה, זה מרחיק את התוויות הקצרות יותר מהשדות שלהן, מה שגורם להאטה בעיבוד הטופס ע"י המשתמש (הקשר הויזואלי בין התווית לשדה נחלש).
אם מיישרים את התוויות לפי האות האחרונה, זה מאיץ את מילוי הטופס, אך מקשה על הסריקה – בכל שורה חדשה המשתמש נאלץ לחפש את תחילת המילה, במקום שכולן יתחילו באותה נקודה. זה גורם לכך שלוקח לנו יותר זמן לאתר תווית מסוימת.
אם שמים את התווית מעל השדה, זה פותר את שתי הבעיות הנ"ל, אבל מוסיף לגובה הטופס, וגם עשוי לפגוע במבנה הטופס (זה לא מאפשר לנו ליצור בלוקים של שדות בעלי רוחב זהה, מה שבתורו פוגע קצת בתפיסה כי זה נוגד את עקרונות הגשטאלט – כבר הזכרתי את זה בעבר).
אפשרות נוספת, קצת פחות נפוצה, היא לרשום את התווית בתוך השדה עצמו, ולהעלים אותה ברגע שמתחילים להקליד. זה פותר את שלוש הבעיות שדיברתי עליהן, אבל גם זה מעלה בעיות משלו – לפעמים אורך התווית עשוי להיות גדול מאורך השדה, או שהתווית בכלל לא תתאים לטיפוס השדה (שדות תאריך וזמן למיניהם). בנוסף, המשתמש עשוי להתחיל להקליד ואז לשכוח מה הייתה השאלה בכלל, כי אינו רואה את התווית. זה אומר שהטפסים שלנו לא יתאימו לאנשים עם בעיות קשב חמורות וכמובן לדגי זהב. אבל גם אנשים עם קשב תקין עשויים להתקשות כשמדובר בטפסים ארוכים יחסית, במיוחד אם התוויות נעלמות גם במידה והכנסתי את השדה לעריכה ואז יצאתי מבלי להקליד דבר. בקיצור, אפשר להבין מדוע זה לא פתרון נפוץ.
אבל היום נתקלתי בטריק מגניב שפותר את רוב הבעיות שתוארו כאן. ובדומה לטאבים הקסומים של גוגל כרום, גם כאן הפתרון הוא באנימציה. אתם מוזמנים להתרשם — כאן. אמנם זה ידרוש עוד קצת מחשבה לפני שאפשר להשתמש בזה בטופס אמיתי (שוב – מה קורה עם שדות תאריך למשל?), אבל בהחלט יש לזה פוטנציאל.
גם להמצאה השנייה שנתקלתי בה היום יש המון פוטנציאל. מדובר בסוג של דפדפן – והתרגום הזה מעולם לא היה מתאים יותר – שמאפשר להשאיר כמה מקורות מידע פתוחים בעמוד מסוים, ורק לעבור בין אותם עמודים בנוחות יחסית. ייתכן שאתם מכירים את זה בתור דפדפן עם טאבים, אבל אתנזיוס קירכר, שהמציא את זה במאה ה-17, בכלל קרא לזה "שולחן קריאה מסתובב" או rotary reading table, וזה היה נראה כך:
מגניב, לא?
על צ'קבוקסים ועל פְרסים
(מי שאין לו כוח לניתוחי UI מוזמן לדלג לחלק האמנותי החווייתי של הפוסט)
ניתוחי UI
אחד הדברים הראשונים שלמדתי כשהתחלתי להתעסק באפיון מפורט של מערכות desktop מורכבות, היה להעריך את אפיון התוכנות של מיקרוסופט. לפני כן קצת הפריע לי שבכל פעם שנדרש לאפיין מנגנון כלשהו, פשוט מעתיקים אותו אוטומטית מאפליקציית האופיס המתאימה. וזה לא קשור לסטנדרטים או להרגלי השימוש המוּכרים – אפשר לתפור פתרון ייעודי ללקוח תוך כדי הקפדה על הסטנדרטים גם בלי שזה יהיה זהה לאוטלוק. אבל ברגע שמתחילים לאפיין ברמה באמת מפורטת, כזו שבסוף התהליך מתגלה שחסכת ל-QA חצי מעבודת כתיבת התרחישים, אז נאלצים לנתח לעומק את הפתרונות של אופיס ולהבין את ההגיון שמאחורי הדברים. ואז מורגשות אותן אלפי שעות אדם שהחברה משקיעה בהנדסת האנוש של הפרטים הכי קטנים של הממשקים שלהם. זה לא שהכל מושלם (למשל אני עדיין חושב שהפתרון הגראפי של כפתור "שולחן העבודה" מהפוסט הקודם הוא גרוע), אבל רוב הדברים המורכבים מאופיינים למופת.
למה אני מקשקש על זה? בגלל תחביב קטן שיש לי. אני נהנה למצוא את המקרים בהם החברה חורגת בצורה בוטה מהסטנדרטים, ולהבין מדוע זה נעשה. כמובן שאין בעיה למצוא דוגמאות כאלה בתוכנות אחרות, אבל שם זה לא ממש מעניין כי ברוב המקרים פשוט מדובר באפיון גרוע (אפשר לחפש דוגמאות בבלוג הזה תחת התגית תקנים). אצל מיקרוסופט, לעומת זאת, זה מעיד בדרך-כלל על ההשקעה באפיון, כי זאת לא חברה שמקבלת החלטות כאלה בלי לחשוב על זה טוב-טוב.
את הדוגמאות אני שומר בצד למקרים בהם אני אצטרך להפר את אותו סטנדרט בעצמי, ואז יגידו לי שאי אפשר כי זה לא עובד ככה, ואז אני נדרש להוכיח שזה כן יכול לעבוד גם ככה, כשבאמת צריך.
הדוגמא החביבה עליי תמיד הייתה של צ'קבוקסים שמתנהגים כמו כפתורי רדיו. זה קורה בכמה מקומות, אבל הדוגמא המועדפת עליי היא בוורד, בדיאלוג "גופן". לכאורה, כל הצ'קבוקסים נראים בסדר, אבל עבור כל אפשרות יש לפחות אפשרות אחת אחרת שלא יכולה להתקיים יחד איתה, וכך קורה שהצ'קבוקסים מכבים זה את זה. ואי אפשר היה להחליף אותם בכפתורי רדיו – גם בגלל המצב שכולן כבויות, וגם בגלל המצב שיותר מאפשרות אחת דולקת – כי עבור כל אחת יש גם הרבה שאינן מתנגשות איתה. כך נראות הקבוצות בפועל (התיבות המוקפות באותו עיגול מכבות זו את זו, לחצו להגדלה):
ואתמול נתקלתי בדוגמא נוספת: כשמגדירים כללים באוטלוק, ובוחרים באפשרות "למחוק לצמיתות", היא אוטומטית מדליקה גם את הצ'קבוקס "הפסק לבצע כללים נוספים" (מכיוון שההודעה הולכת להימחק, ולא ניתן יהיה לבצע עליה פעולות נוספות). זה לא נדיר שיש תלות בין שני צ'קבוקסים, אבל במקרים כאלה בדרך כלל יש לזה גם ביטוי גראפי בצורת הזחה (indendation) או קישור אחר כלשהו. כאן לא ניתן היה לנקוט בפתרונות המקובלים משום שהתיבה הנשלטת יכולה לפעול גם בזכות עצמה, או בצירוף עם תיבות אחרות. זאת גם הסיבה לכך שבעוד שהדלקת התיבה הראשונה מדליקה את השנייה, כיבויהּ של הראשונה אינו מכבה את השנייה – המערכת אינה יודעת מדוע השנייה דולקת, וייתכן שהמשתמש הדליק אותה בעצמו בכוונת תחילה.
החלק האמנותי החווייתי של הפוסט
קודם כל, המון המון ברכות לחברת אינקוד-הייפרה על הזכייה בקטגוריה "האתר הנבחר של היום" באתר TheFWA (Favourite Website Awards). למי שלא מכיר, מדובר כנראה באתר המשפיע ביותר בתחום עיצוב אתרים, עם יותר משלושה מיליון ביקורים בחודש. בכל יום הם בוחרים אתר אחד מכל רחבי הרשת, ומציינים אותו בזכות עיצוב "חדשני, יצירתי ופורץ גבולות". לאחר מכן בוחרים מתוכם את אתר החודש ואת אתר השנה.
ב-19 למרץ, החנות האינטראקטיבית למכירת פוסטרים מותאמים אישית, canv-as.com, שעוצבה ופותחה ע"י אינקוד-הייפרה, נבחרה לאתר היום. (תיקון – החנות פותחה ע"י אינקוד-הייפרה ע"פ העיצוב המקורי של בעלי החנות, יהודה אזולאי).
ולבסוף, אם כבר מדברים על חוויית משתמש, אני רוצה לציין את אתר השבוע האישי שלי – http://lab.andre-michelle.com/tonematrix. אין הרבה מה להגיד עליו חוץ מזה שהוא פשוט ממש ממש כיפי. תוודאו שהרמקולים פועלים. אפשר להקליק ואפשר לגרור עם העכבר. תתחילו באלכסונים. ותהנו.
תגיד, איש ה-UX שלך זגג?
אנשי תחרות הצילום היוקרתית של Leica השקיעו בעיצוב האתר. התמונה היא במרכז, וזה כל מה שיש. שאר הפונקציונאליות הנדרשת צומצמה למינימום, הפכה לשחור-לבן או אפור, וזזה הצידה. תראו את סרגל השיתוף המינימליסטי מימין. מישהו שלא מכיר אפילו לא יבין מה זה האותיות האלה, אבל מצד שני מישהו שלא מכיר גם לא הולך לשתף (כך לפחות במקרה של פייסבוק וטוויטר). שם התמונה והתיאור שלה נמצאים למטה באפור. תפריט התמונות האחרות מסתתר משמאל מאחורי חץ קטן שלא מבחינים בו בהתחלה (כי התמונה מושכת קשב על ההתחלה, ומשם בד"כ הולכים ימינה). זה היה עיצוב יפה, מושקע, ותומך במטרת האתר.
ואז בא איזה חכם והחליט שאת מנגנון הדפדוף אנחנו נדחוף לתוך טולטיפ שצף מעל התמונה ומסתיר אותה, ואם אתה יוצא מגבולותיה, הוא נעלם. וזאת תהיה הדרך היחידה לדפדף. והעכבר גם שומר על מיקומו מעבר לתמונות, מה שאומר שכשתופיע התמונה הבאה אחרי הדפדוף, איפשהו מעליה כבר יהיה מלבן גדול ומכוער שמדרבן אותי לעבור הלאה במקום לעצור לרגע ולהעריך אותה. וכידוע ההתרשמות הראשונית שלנו נוצרת ממש בשנייה הראשונה של החשיפה, ויש לה השפעה גדולה, אם לא מכרעת, על הרושם הסופי שנותר. חבל.
קישורים
הגיע הזמן שגם בבלוג הזה תהיה קטגוריית קישורים לכל מיני שטויות מעניינות שאני נתקל בהן, ושאין לי הרבה מה להגיד עליהן חוץ מלתת קישור.
מטבע הדברים אני נתקל בהרבה שטויות, ואני משתדל שיהיו מעניינות, לכן ייתכן שקטגוריה זו תגדל במהירות, אבל אני מקווה שהיא לא תשתלט לי על הבלוג על חשבון התוכן הסופר-איכותי שבו פינקתי אתכם עד כה.
השם הזמני לקטגוריה יהיה lynx, עד שאצליח לחשוב על מחשק מילים מטופש עוד יותר.
אגב, lynx הוא סוג של חתול-פרא ממש עצבני, שנראה כך:
ותגידו תודה – העדכונים על פרסומים בקטגוריה זו לא יופיעו בפייסבוק, טויטר, באזז, ושאר אמצעי הספאם החברתי שעוד לא הומצאו.
ובכן, הקישורים:
1. אתר ההיכרויות האמריקאי okcupid עוסק הרבה בסטטיסטיקה על-מנת להציע ללקוחותיו את בני-הזוג הפוטנציאליים הטובים ביותר. לפני כמה ימים הם פרסמו מחקר הבוחן את בני הזוג המועדפים על הלקוחות מבחינת טווח הגילאים. הממצאים אינם מהפכניים במיוחד, אבל הגרפים יפים ונגישים מאוד, וגם הנתונים מעניינים. ויש גם מסר חינוכי, כי מְחַברת הפוסט מנסה להוכיח סטטיסטית שאל לנו לגברים לפסול נשים מבוגרות יותר. מומלץ בעיקר בזכות הגרפים. OKCupid – The Case For An Older Woman.
2. אתר שמרכז הרבה חברות המפתחות אפליקציות למכשירים ניידים. האתר נראה כאילו שהמפתחים עצרו בשלב ה-wireframe והחליטו לא להמשיך עם העיצוב הגראפי אלא להעלות את הסקיצה לאויר. כמובן שבשביל לגרום לזה להראות ככה ועדיין להצליח, העיצוב בפועל חייב להיות מושקע ביותר. זה גם תומך בצורה מושלמת במטרת האתר, כי יוצא שהחלקים הצבעוניים באתר הם אלה שמדגימים את האפליקציות עצמן, מה שמבליט אותן, ומשאיר ברקע את האתר המארח. ואולי בצורה קצת פרדוקסלית מתקבל אפקט של הפוך על הפוך, כי מה שזוכרים בסוף זה דווקא את הקונספט של האתר, ולא את התוכן. TheyMakeApps.com
אגב, מה שלא אהבתי זה ששתי הלשוניות בצד שנראות כמו sidebars אינן נפתחות (זה מטעה וקצת מרגיז), וגם את זה שאין שם סרגל גלילה נורמלי. בפינה הימנית העליונה אפשר לעבור בין שני מודים של ניווט – באמצעות המקלדת או באמצעות הגלילה. במוד מקלדת הגלילה אינה עובדת כלל (ואני לא רואה סיבה לזה), אבל גם במוד של גלילה אין סרגל פנימי לאתר – רק זה של הדפדפן, והוא לא מספק חיווי נכון על אורך האתר. מבאס קצת.
ניתוח תהליך סגירת טאבים בדפדפנים שונים
שלשום, בזמן שכתבתי את הפוסט על שדות סיסמא, כל האתרים שקישרתי אליהם היו פתוחים לי בפיירפוקס, כל אחד בטאב נפרד. וכשסיימתי, רציתי לסגור את כולם (אבל להשאיר את הדפדפן פתוח). אז תפסתי את העכבר ולחצתי על ה-X של הטאב האחרון, ואז על ה-X של הטאב האחרון החדש, ואז על ה-X של הטאב האחרון החדש (אם אי-פעם תהיתם מה משותף לטאבים בדפדפן ולראשי החמאס בגדה…). ואז הבנתי שמשהו מוזר לי בתהליך – בהתחלה הטאבים נסגרו לי מבלי שנאלצתי להזיז את העכבר כלל, פשוט לחצתי תמיד באותו מקום, אבל באיזשהו רגע התחלתי להזיז אותו שמאלה בשביל להגיע אל ה-X של הטאב האחרון. אז החלטתי לבחון את העניין הזה לעומק.
מה שקורה, מרגע פתיחת הטאבים, זה ככה: בהתחלה הטאבים החדשים נפתחים בגודל קבוע, עד שהם ממלאים את רוחב החלון. מרגע שלא נכנסים יותר טאבים ברוחב המקורי, רוחבם של כל הטאבים מתחיל לקטון עם פתיחת כל טאב חדש, כי צריך להכניס יותר טאבים באותו חלון. באיזשהו שלב הם מפסיקים להצטמצם, הרוחב שלהם נשאר קבוע (הרוחב המינימלי), ומופיעה גלילה שמאפשרת להגיע לטאבים שלא נכנסים בחלון.
אבל אותנו יותר מעניינת סגירת הטאבים. אז אותו העקרון פועל גם בסגירה, רק להיפך – אם התחלת עם המון טאבים (במצב של גלילה), רוחבם לא משתנה עם סגירת כל טאב, לאחר מכן הגלילה נעלמת וכל טאב שנסגר מאפשר לטאבים הנותרים להתרחב קצת, עד שמגיעים למצב של רוחב מקסימלי קבוע – כשרוחבם המצטבר כבר לא ממלא את כל רוחב החלון. ואז הם מפסיקים לגדול, מסכנים.
ההשפעה של האלגוריתם הזה על תהליך סגירת טאבים מרובים ע"י המשתמש היא לא נעימה, בגלל ששינוי גודל הטאבים מזיז את כפתור ה-X, וצריך לרדוף אחריו.
כאשר יש לנו הרבה טאבים בעלי רוחב קבוע (כלומר, יש גלילה במסך), מצבנו טוב: הטאבים ממלאים את כל המסך, וסגירתם אינה גורמת לשינוי רוחב הטאבים הנותרים. אז אין לנו בעיה, כי טאב חדש תופס את מקומו של זה שנסגר, ומאחר והם בעלי אותו רוחב, ה-X החדש יושב בדיוק באותו מקום כמו בטאב שנסגר.
זה מתחיל להיות מעניין (ואני יודע ששאלתם את עצמכם מתי זה כבר יתחיל להיות מעניין) במצב שרוחב הטאבים משתנה. כי אז יש הבדל בין סגירת טאבים מהסוף (מימין בממשק אנגלי, כלומר סגירת הטאב האחרון) לבין סגירת טאבים מהאמצע. כי סגירתם מהסוף מציבה את כפתור ה-X החדש בדיוק במקום של הכפתור הישן, ואין צורך לכוון מחדש. אבל סגירתם מהאמצע גורמת בד"כ לכך שהעכבר עכשיו נמצא באמצע הטאב החדש, ולא על ה-X, בצורה כזו (השורה למטה זה המצב לאחר סגירת הטאב):
אז לכאורה כל עוד אנחנו סוגרים מהסוף, אנחנו מסודרים. אבל גם זה הולך להשתנות, כי ברגע שהטאבים כבר לא ממלאים את כל המסך, רוחבם נשאר קבוע (רוחב מקסימלי), אבל הטאב האחרון מתחיל לזחול שמאלה עם כל טאב שנסגר. אז עכשיו כפתורי ה-X הפנימיים כן חופפים, אבל האחרון כל פעם משנה את מקומו:
מה שמחמיר את המצב עוד, זה כל מיני משחקים שהדפדפנים עושים עם הטאבים וכפתורי ה-X. יש כאלה שמציגים את ה-X רק כשהטאב בפוקוס (IE8), יש כאלה שמציגים אותם רק כשהטאב ב-mouseover (ספארי), ויש שמשתדלים להציג אותו כל עוד המקום מאפשר (אופרה וכרום – והם גם אלה שממשיכים עם צמצום הטאבים הכי הרבה – בכרום הטאבים ממשיכים לקטון עד שיש כמאה טאבים, ואז רוחבם הופך לקבוע, וזה נראה בערך ככה
:
כל הדפדפנים שבדקתי מעלימים את ה-X כשיש ממש המון טאבים ואז מציגים אותו רק בפוקוס על הטאב – אבל יש כאלה שמעבירים את הפוקוס אל הטאב שתופס את מקומו של זה שנסגר, ואז אפשר להמשיך ללחוץ על ה- X((IE8, ויש גם כאלה שמעבירים את הפוקוס טאב אחד ימינה, ואז העכבר נמצא מעל טאב שאין בו X (פיירפוקס) וצריך ללחוץ פעמיים.
בקיצור, כשיש הרבה טאבים שמשנים את רוחבם, אם נסגור מהסוף לא נצטרך להזיז את העכבר, אבל אם נסגור מהאמצע אז כן נצטרך.
זאת כל עוד משתמשים בפיירפוקס (המחשה למעלה), באקספלורר
באופרה
ובספארי
אבל לא בכרום! האנשים הטובים מגוגל המציאו לנו טאבים קסומים!
בכרום, כל עוד יש מספיק טאבים בשביל למלא את המסך, הטאב הבא תמיד ימוקם כך שכפתור ה-X שלו נמצא במקום בו היה הכפתור של הטאב שנסגר זה עתה. וזאת ללא קשר למיקומו – אם סגרתי מהסוף אז הטאב האחרון מחליק ימינה, ואם סגרתי מהאמצע אז הטאב הימני מחליק שמאלה.
אבל זה לא הכל. אם חושבים על זה לשניה, מבינים שזה לא לגמרי מסתדר – כיצד הטאבים יכולים גם להחליק ימינה (ולהתרחק ע"י כך מקצה המסך), וגם לתפוס את כל המסך, בשביל שכפתור ה-X הימני ביותר יישאר במקומו? אמנם הם משנים את רוחבם, אבל הם עדיין חייבים גם למקם את כפתור ה-X החדש בדיוק במקומו של הישן, וגם להיות בעלי רוחב זהה. בקיצור, כל התנאים האלה לא ממש מסתדרים.
מבולבלים? גם אני. לא בטוח שהייתי עולה על הסתירה לבד אלמלא שמתי לב למנגנון שפותר את זה. והפתרון הוא שהתהליך יכול לקרות בשני שלבים: אם סוגרים מהאמצע, אז בהתחלה הטאבים מחליקים שמאלה ואכן מתרחקים מקצה המסך, אבל לאחר שהזזנו את העכבר משורת הטאבים, הם נפרסים מחדש, ברוחב גדול יותר, ושוב תופסים את כל המסך. כך נראים שלושת השלבים:
השינוי קורה רק אם סגרתי מהאמצע – כשסוגרים מהסוף, זה קופץ ישר למצב הסופי. והקסם כן נפסק ברגע שאין מספיק טאבים בשביל למלא את המסך, כי יש להם גודל מקסימלי קבוע.
אגב, אני לא רואה סיבות אחרות שבגללן גוגל היו רוצים ליישם את המנגנון המסובך הזה מלבד לענות על התרחיש הספציפי הזה, בו המשתמש סוגר הרבה טאבים בבת אחת ומעוניין לעשות זאת מבלי להזיז את העכבר. וזה אומר שהם חושבים עלינו.
חידת ממשק
כפי שכבר אוזכר כאן, לפעמים אני מגיע למקומות עם מבחר גדול של בירה. בד"כ אני יוצא משם עם תובנות שקשורות לעולם חוויית המשתמש, ומשום מה כככל ששתיתי יותר בירה, כך יש יותר תובנות. זה מעורר חששות מסוימים באשר לאיכות של אותן תובנות, אבל ניחא.
בכל אופן, שמתי לב לבעיה מעניינת. במקומות מהסוג הזה לרוב יש הרבה סוגי בירה, והלקוחות מתקשים לבחור מראש, לכן הם מבקשים טעימות. המלצר מביא כמה כוסות עם סוגי בירה שונים. כשמדובר במותגים ידועים ובמקום שמכבד את עצמו, הבירה תגיע בכוסות ממותגות, ואז אין בעיה לזכור מה זה מה.
הבעיה מתעוררת כשמביאים כמה סוגים בבת אחת, וכשלא ניתן להבחין ביניהם באמצעות הכוסות – בין אם מדובר בסוגי בירה שונים של אותו יצרן, או שפשוט אין במקום את הכוסות המתאימות. בנוסף, די מקובל למזוג את הטעימות לכוסות שוט קטנות וזהות.
ואז באמת יש בעיה – אם יש כמה אנשים בשולחן וכמה כוסיות זהות של בירות שונות וכולם טועמים מהכל – איך מבחינים ביניהן וזוכרים בסופו של דבר מה זה מה?
כשהסוגים מאוד שונים, ניתן להבחין ביניהם יחסית בקלות ע"פ הצבע (למרות שבפאב אפלולי גם זה לא תמיד אפשרי, ובכל מקרה צריך כבר סוג של מומחיות בשביל לעשות את זה – בד"כ פשוט שואלים את המלצר – כל זה בהנחה שבכלל נשאר משהו בכוס).
במבשלת הבירה Jem's beer factory פתרו את הבעיה באלגנטיות מרשימה.
השאלה היא כיצד?
רמז – התשובה מצויה באתר שלהם, ובהחלט ניתן לזהות אותה ע"י ניתוח נכון של התרחיש.
אגב, המקום מומלץ בחום. האווירה מצוינת, הבירות מצוינות, ובחצר חונה ואן פולקסוואגן מגניב כזה משנות השבעים, ומשום מה יש גם מגרש כדורסל פעיל.
הנה מצאתי אייטם עליהם מערוץ שתיים:
[youtube=http://www.youtube.com/watch?v=YzkUp82k3gI]
וכעת, בהפתעה גמורה, דאגה כנה למשתמשים!
בפוסט הקודם ראינו כיצד פייסבוק שמה את האינטרסים העסקיים שלה מעל האינטרסים של המשתמשים — בכך שהיא מגדירה ברירות מחדל שמאפשרות לה לחשוף כמה שיותר מידע על המשתמשים. ואפילו אמרנו שאמנם זה לא יפה, אבל אפשר להבין את זה: אין מה לעשות, ביזנס איז ביזנס.
לפני כמה דקות נכנסתי ל-ynet ,ופתאום שמתי לב שהאתר מאפשר כעת למשתמשים לפתוח תיבת דוא"ל משלהם באתר, שתרכז את כל הפעילות שלהם באתר – תגובות, כתבות, קניות בחנויות המקוונות של ynetshops, וכו'. אני מסכים שזה חשוב – אם לא תהיה לי תיבת דואר שתרכז את הטוקבקים, איך אוכל לזכור ש-13 הוא אידיוט, ובגלל אנשים כמו 132 המדינה שלנו נראית כמו שהיא נראית, וזאת למרות/הגלל החינוך החרדי/החילוני?
בכל אופן, כעת אפשר לפתוח תיבת דוא"ל ב-ynet. כך נראה טופס ההרשמה.
רואים משהו מוזר? תסתכלו טוב. שם, מתחת ל-CAPTCHA.
ראיתם? לא רק שהצ'קבוקסים של הרישום לניוזלטרים הם ריקים (לסמן את כולם כברירת מחדל באמת תהיה חוצפה), אלא גם הצ'קבוקס התחתון, המאפשר לאתר לשלוח דואר זבל לחשבון הדוא"ל ולסלולרי, גם הוא ריק!
רבותיי, אנחנו עדים כאן לתחשבות אמיתית בצרכי המשתמש, והגדרת ברירת מחדל שפועלת לטובתו, ולרעת האתר! אני בטוח שחניתות רבות נשברו בתוך ynet בדרך להחלטה הזו, וההחלטה היא באמת קשה. כל הכבוד, ותודה לאותו אדם במערכת ynet שעמד לצד המשתמשים ונלחם עבורם.