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

הטיפה הצבעונית

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

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

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

טוב, בסדר, הנה עוד טיפה.

הטיפה המתרחבת. 

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

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

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

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

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

הטיפה שלא הייתה.

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

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

אממה…

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

😂😂😂

או כזה

👍👍👍

או אפילו כזה

🍺🍺🍺

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

 

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

טיפה זה הרבה.

א'

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

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

ב'

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

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

 

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

עכשיו בואו ננסה את אותו הדבר עם הטופס הזה.

האם אפשר לשלב גם יתרה וגם כרטיס אשראי? גם אשראי וגם פייפאל? אשראי ו/או פייפאל ללא השימוש ביתרה?

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

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

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

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

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

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

וגם מיקרוסופט

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

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

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