טפסים

(מי שאין לו כוח לניתוחי UI מוזמן לדלג לחלק האמנותי החווייתי של הפוסט)

ניתוחי UI

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

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

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

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

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

החלק האמנותי החווייתי של הפוסט

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

ב-19 למרץ, החנות האינטראקטיבית למכירת פוסטרים מותאמים אישית, canv-as.com, שעוצבה ופותחה ע"י אינקוד-הייפרה, נבחרה לאתר היום. (תיקון – החנות פותחה ע"י אינקוד-הייפרה ע"פ העיצוב המקורי של בעלי החנות, יהודה אזולאי).

ולבסוף, אם כבר מדברים על חוויית משתמש, אני רוצה לציין את אתר השבוע האישי שלי – http://lab.andre-michelle.com/tonematrix. אין הרבה מה להגיד עליו חוץ מזה שהוא פשוט ממש ממש כיפי. תוודאו שהרמקולים פועלים. אפשר להקליק ואפשר לגרור עם העכבר. תתחילו באלכסונים. ותהנו.

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

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

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

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

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

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

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

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

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

לפני כמה דקות נכנסתי ל-ynet ,ופתאום שמתי לב שהאתר מאפשר כעת למשתמשים לפתוח תיבת דוא"ל משלהם באתר, שתרכז את כל הפעילות שלהם באתר – תגובות, כתבות, קניות בחנויות המקוונות של ynetshops, וכו'. אני מסכים שזה חשוב – אם לא תהיה לי תיבת דואר שתרכז את הטוקבקים, איך אוכל לזכור ש-13 הוא אידיוט, ובגלל אנשים כמו 132 המדינה שלנו נראית כמו שהיא נראית, וזאת למרות/הגלל החינוך החרדי/החילוני?

בכל אופן, כעת אפשר לפתוח תיבת דוא"ל ב-ynet. כך נראה טופס ההרשמה.

רואים משהו מוזר? תסתכלו טוב. שם, מתחת ל-CAPTCHA.

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

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