יו איי על אנשים וממשקים

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

הוצא מהקשרו

 

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

כל העניין הזה די צרם לי, אבל ראיתי כבר דברים גרועים בהרבה, אז לא התרגשתי יותר מדי. אבל בעמוד החיפוש עצמו נתקלתי באתגר שהיה לי חדש. הזנתי את מילת החיפוש, לחצתי enter במקלדת, וראיתי למטה את התוצאות. כשלא ראיתי בהן את מה שחיפשתי אחריו, חזרתי לתיבת ההזנה, והופתעתי לגלות שאין שם כפתור אישור. שום דבר שרשום עליו OK  או Go או Search או כל דבר אחר. עם זאת, ממש מתחת לתיבה היו הוראות הפעלה בזו הלשון: Think it... Type it... Find it.... שמחתי לגלות את שורת החיפוש היחידה בעולם שיש לה סלוגן פרסומי פומפוזי משלה. הרי ידוע שחובבי הקומיקס הם לרוב אנשים רחוקים מעולם הטכנולוגיה, אין להם מושג מהי שורת חיפוש באינטרנט, וללא הוראות שמנוסחות לפי מיטב כללי הז'אנר, הם לעולם לא יצליחו למצוא משהו באתר.

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

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

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

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

 

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

http://i272.photobucket.com/albums/jj170/uicoil/engine2.jpg

ואיזה ממשקים שהוצאו מהקשרם אתם מכירים?

 

 

תוכן התגובה

ברק דנין כתב/ה:

את אותה בעיה של סינון ראיתי באתר ישראלי חדש -

http://www.misma.co.il

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

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

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

# May 3, 2009 11:38 AM

vitalym כתב/ה:

הי ברק,

תודה על הלינק! עושה רושם של אתר מועיל ביותר.

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

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

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

# May 3, 2009 8:10 PM

ד כתב/ה:

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

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

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

אז יכול להיות שזו טעות, אבל זו טעות שלא הם המציאו.

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

# May 3, 2009 8:13 PM

vitalym כתב/ה:

הי ד.,

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

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

# May 3, 2009 8:43 PM

ברק דנין כתב/ה:

ויטלי,

הכוונה היתה ספציפית לתיבת החיפוש בגוגל, בפינה הימנית העליונה של FireFox (לא זאת שבאתר גוגל).

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

www.usable.co.il/.../suggest.png

לגבי החיפוש בתוך עמוד - מסכים, כמובן.

# May 4, 2009 10:39 AM

vitalym כתב/ה:

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

# May 4, 2009 9:26 PM
שלח תגובה

(שדה חובה)  

(שדה חובה)  

(אופציונלי)

(שדה חובה) 

Please add 3 and 7 and type the answer here:


Enter the numbers above: