עיצוב

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

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

זה מה שהיה לדאגלס אדאמס ז"ל להגיד על ממשק ה-Kinect, ובאופן כללי על כל טירוף ממשקי ה-Minority Report. להזכירכם, המילים האלה נכתבו בשנת 1978:

A loud clatter of gunk music flooded through the Heart of Gold cabin as Zaphod searched the sub-etha radio wavebands for news of himself. The machine was rather difficult to operate. For years radios had been operated by means of pressing buttons and turning dials; then as the technology became more sophisticated the controls were made touch-sensitive — you merely had to brush the panels with your fingers; now all you had to do was wave your hand in the general direction of the components and hope. It saved a lot of muscular expenditure of course, but meant that you had to sit infuriatingly still if you wanted to keep listening to the same programme.

ועכשיו, down to business.

–המשך קריאה–

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

–המשך קריאה–

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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