ארכיון פוסטים עם התג "טפסים"

טעות נפוצה

יום שלישי, 20 בדצמבר, 2011

image

ברור, שם המשפחה שלי שגוי. איזה אידיוט אני שהשתמשתי בו כבר יותר משלושים שנה. ומה שבאמת מוזר זה שאף אחד לא העמיד אותי על טעותי! מזל שיש את חברת הוט!

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

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

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

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

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

המצגת שלי ושל שאר המרצים באירוע UX on Beer השני.

המצגת שלי באירוע UX on Beer הראשון.

פוסטים קשורים

יש מצב לפוסטינור

יום שבת, 5 בנובמבר, 2011

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

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

(המשך…)

פוסטים קשורים

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

יום רביעי, 3 בנובמבר, 2010

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

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

סרגל פיקסלים

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

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

(המשך…)

פוסטים קשורים

הטאב של מרקו

יום שישי, 24 בספטמבר, 2010

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

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

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

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

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

טופס הרשמה

ובכן, בפועל, אם תתחילו משדה ה-Username בעמודה השמאלית, ותשתמשו במקש ה"טאב", המסלול שתעשו ייראה כך:

מסלול הטאב

לדעתי זה נותן מימד חדש לפוסטר שזכה בתחרות הפוסטרים של UXI (הפוסטר העליון).

וכפי שציינתי פעם, היית חושב שיש דברים מובנים מאליהם.

פוסטים קשורים

הדרך לאבסורד רצופה כוונות טובות

יום שלישי, 3 באוגוסט, 2010

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

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

כך נראה הטופס במתכונת המצומצמת.

טופס שליחת פקס - מצומצם

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

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

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

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

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

פוסטים קשורים

טופס בסגנון "השלמת מילים" הגדיל המרת משתמשים ב-25-40%

יום שבת, 10 ביולי, 2010

תירגמתי מאמר מעניין של לוק ורובלוסקי עבור UXI – באתר UXI. יש גם דיון מעניין בתגובות.

שני מאמרים קודמים שתרגמתי עבור חברת אינקוד-הייפרה.

הממשקים "המרושעים" של פייסבוק.

ההבדל בין שימושיות וחוויית משתמש.

פוסטים קשורים

נתבאג

יום רביעי, 28 באפריל, 2010

השבוע, באדיבות אייפייליוקול (הר הגעש בעל השם הלא יוזבילי), נאלצתי לבקר באתר נתב"ג, שזו תמיד חוויה די מפוקפקת. קודם כל, כן חייבים להודות שהאתר מושקע. רואים שהוא מושקע. אחד הדברים שתמיד אהבתי בו זה ההודעה על זה שהוא לא תומך בדפדפנים אחרים מלבד אקספלורר. אני אומר את זה ללא טיפה של ציניות -– אם כבר החלטתם לעשות אתר מוגבל, כנראה עקב סיבות של עלות וזמן פיתוח, אז מן הראוי לחסוך מהמשתמשים את החוויה המעיקה של השימוש בדפדפנים לא נתמכים, ולהגיד להם את זה על ההתחלה. בצורה כזו המשתמש לא יצטרך לקלל ולהיאבק באתר, ויסתפק רק בלקלל (וגם זה רק האידיאולוגיים שביננו). אין הרבה אתרים שיש להם את האומץ לחסום לחלוטין את הגישה לדפדפנים לא נתמכים, הרוב אומרים שהמשתמש יסתדר, ואולי הוא בכלל לא ישים לב. ייתכן שהאומץ נובע מן העובדה שהאתר הוא למעשה מונופול ואין דרך נוחה אחרת להשיג את המידע, וייתכן גם שההחלטה לחסום נובעת ממחיר הטעות – האתר מספק מידע בעל חשיבות רבה, ואם משהו יתפקשש בגלל חוסר תאימות דפדפנים, זה לא ייגמר טוב, וראשים יעופו. נו טוב, שום ראשים לא יעופו, אבל יפרסמו כתבה ב-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, מה שהעלה אצלי שאלה אחרת – איך אני אמור לדעת את זה? לא הצלחתי להקליד בגוגל חיפוש שייתן לי את הכתובת הזו, וגם לא באתר עצמו. כנראה שזו כתובת חד-כיוונית – אתה יכול להקליד אותה, אבל לא למצוא אותה.

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

image

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

image

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

image

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

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

ולקינוח, קבלו הודעת שגיאה מנצחת מהאתר:

image

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

ועוד כמה דברים שהצטברו:

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

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

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

פוסטים קשורים

התנועה כפתרון

יום רביעי, 31 במרץ, 2010

אחת השאלות הנפוצות ביותר בנוגע לעיצוב טפסים היא לגבי המיקום האופטימלי של תוויות השדות. אם נדבר על טפסים באנגלית, the labels obviously will be to the left of the כמובן שהתוויות יהיו משמאל לשדות, אך השאלה היא האם עליהן להיות מיושרות לשמאל (האותיות הראשונות של התויות נמצאות על אותו קו אנכי), לימין (האותיות האחרונות יהיו צמודות לתחילת השדה), ושמא הן יהיו מעל השדות.

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

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

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

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

image

מגניב, לא?

פוסטים קשורים

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

יום רביעי, 24 במרץ, 2010

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

ניתוחי UI

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

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

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

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

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

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

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

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

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

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

canvas

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

פוסטים קשורים

אדון/גברת נכבד/ה

יום ראשון, 21 בפברואר, 2010

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

התפריט נראה כך:

Title selection menu at boden.co.uk

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

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

אגב, לא ברורה לי כל כך המשמעות של כל תארי ה-The X of, כי הם לא פותחים תיבה נוספת שבה ניתן להזין of what, זה פשוט נשאר The Duke of.

פוסטים קשורים