UXtasy
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
UXtasy
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
ראשי » תקנים

תקנים

These are not the droids you are looking for

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

מסך טיסות יוצאות

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

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

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

מקור - https://www.flickr.com/photos/huangjiahui/4209682803
מקור – https://www.flickr.com/photos/huangjiahui/4209682803

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

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

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

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

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

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

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

ינואר 9, 2016 אין תגובות

על הסוואה

image

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

–המשך קריאה–

ינואר 7, 2011 10 תגובות

ספינות ושמלות

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

–המשך קריאה–

דצמבר 11, 2010 17 תגובות

כשהיא אומרת "לא", למה היא מתכוונת?

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

זה צילום של אשף ההתקנה:

סרגל פיקסלים

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

ה-X מסמן את ה-V.

–המשך קריאה–

נובמבר 3, 2010 8 תגובות

גנטיקה בממשקים

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

אם ניכנס ל-yad2, לאזור הנדל"ן, נראה סרגל חיפוש שנראה כך:

האתר יד2 - חיפוש נדל"ן

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

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

האתר יד2 - חיפוש על מפה

בעצם לא, סליחה, הטעתי אתכם, המשפט הקודם אינו נכון. זה רק נראה שמה שנשאר הוא שתי הלשוניות המקוריות. למעשה אלה הם טאבים אחרים, שרק נראים דומה למקוריים. איך אני יודע? פשוט מאוד. אם הייתם לוחצים על אחד משני הטאבים הראשונים לפני שלחצתם על השלישי, הייתם רואים אותו שם מימין, כפי שאפשר לראות בצילום המסך העליון. ואילו עכשיו, אחרי שלחצנו פעם אחת על השלישי, לא משנה כמה נשחק עם שני הראשונים, הוא כבר לא יופיע. במילותיו של מרסלוס וואלס, When you're gone, you stay gone.

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

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

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

האתר יד 2 - חיפוש נדל"ן

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

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

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

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

האתר יד2 - תצוגת גלריה

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

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

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

ואיך אפשר היה לפתור את כל הבלאגן הזה? זו דרך אחת:

קונספט ניווט חלופי

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

אוגוסט 20, 2010 11 תגובות

על צ'קבוקסים ועל פְרסים

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

ניתוחי UI

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

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

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

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

אפשרויות גופן בוורד

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

הגדרת כללים באוטלוק

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

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

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

canvas

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

מרץ 24, 2010 4 תגובות

2 דרכים להרוס כפתור ווליום

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

The Tonight Show video player

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

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

…

…

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

Connection details

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

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

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

מרץ 6, 2010 6 תגובות

פתרונות להזנת שדות סיסמא

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

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

הפתרון המקובל, בהגשה גרועה במיוחד

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

פתרון שנותן למשתמש להחליט

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

כפתור "קפיצי" לחשיפת הסיסמא

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

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

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

הפתרון שלא פותר כלום

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

פברואר 14, 2010 3 תגובות

Weston's

סיידר

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

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

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

דצמבר 2, 2009 תגובה אחת

ux_by_examples

www.bit.ly/uxbe8

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

מנהל, חוקר ומאפיין חוויית משתמש, עוסק בתחום משנת 2006 וכותב עליו מ-2007.

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

ממייסדי UXI -- חוויית משתמש ישראל.

מנטור UX ב-Google for Startups.

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

יצירת קשר
UXtasy
עדכונים באימייל

uxtasy.com © כל הזכויות שמורות.
We WordPress
גלילה לראש העמוד