ספט' 13 2009
הכללים #3: ממשק אפקטיבי מחייב היררכיה
כמה פעמים שמעתם מלקוח את המשפט: “מה זאת אומרת מה חשוב? הכול חשוב!”
זהו משפט מספר 2 ברשימת “משפטי הלקוח הקטלניים”
(מה הוא לדעתך משפט #1 ? אני מתכנן להרחיב עליו בהזדמנות אחרת )
לפעמים מרוב יער לא רואים את העצים.
מה חשוב באמת במערכת?
מה קריטי למשתמש?
מה חשוב למנהלי המערכת שהמשתמש יראה?
מה עדיף להצניע?
כל אלו שאלות שחייבים לענות עליהן כשניגשים לתכנן מערכות מידע.
משתמשים לא קוראים הכול – הם סורקים בזריזות, מנסים לזהות מה רלוונטי, ולהתעלם ממה שלא.
זה נכון במערכות מידע “קלאסיות”, ונכון שבעתיים ב-Web.
אם לא נבטיח שהתכנים החשובים יוגשו למשתמש באופן אפקטיבי, המשתמש עשוי לפספס אותם.
(גם על נושא הסריקה בכוונתי להרחיב באחד הפוסטים הבאים.)
הפתרון: ניתוח, תכנון וייצוג אפקטיביים של היררכית מידע.
איך עושים את זה?
לכל מערכת יש, מצד אחד, תכנים שקריטי למנהליה שהמשתמש יקלוט ומצד שני תכנים שמעניינים את המשתמשים. לעיתים מדובר באותם תכנים, ולעיתים קיים ניגוד אינטרסים. ייצוג נכון של היררכיית המידע יחשוף למשתמש את התכנים שחשובים לו. כמו גם התכנים שחשובים למנהלי המערכת, במינימום מאמץ. אנחנו צריכים לוודא שהמידע הקריטי הועבר למשתמש.
תהליך העבודה לבניית תצוגה היררכית
את המידע על הלקוח ניתן לאסוף ממגוון ערוצים:
- תקשורת ישירה עם המשתמשים, במסגרות שונות, כגון כנסים מקצועיים.
- אנשי מכירות
- פורומים
- פניה יזומה ללקוחות באמצעות שאלונים וראיונות וסקרי שוק
- פניות לתמיכה הטכנית
- ועוד
מידע על הרגלי העבודה של הלקוח ניתן לאסוף גם ע"י חקר מתחרים; אם כבר קיימת מערכת או אתר פופולאריים שמציעים משהו דומה למערכת שלכם, סביר להניח שהם התרגלו לצפות לזמינות התכנים שמוצגים שם. כדאי לקחת בחשבון בתכנון הממשק את הדברים אליהם רגיל המשתמש.
שלב שני: זיהוי צרכי המערכת.
איסוף המידע בשלב זה פשוט יותר, אבל גם כאן נידרש לא פעם לקבל החלטה לא פשוטה. מה חשוב יותר? "חיפוש" או "חדשות המערכת" ? "כלים שימושיים" או "פעולות" ?
שלב שלישי: גיבוש רשימה מתועדפת אחת.
זהו אחד השלבים הקשים ביותר בתהליך. בשלב זה נדרש לא פעם קבל החלטה – האם להעדיף את צרכי המשתמש או את צרכי המערכת? אחת הדוגמאות הבולטות לדילמה הזו היא הפרסום. עבור אתרים רבים, לפרסומת תפקיד קריטי במודל הכלכלי. עבור רוב המשתמשים הפרסומות מהוות מטרד.
על ארכיטקט המידע לקבל החלטה אסטרטגית אלו תכנים נכון יותר להבליט.
רצוי מאוד לתת את מירב המשקל לתכנים שמעניינים את משתמש, בכדי לא ליוצר תסכול אצל המשתמשים.
בסופו של שלב זה צריכה להיות בידכם רשימה ממוספרת אחת, שמרכזת את כל התכנים של המערכת, ומציינת בבירור את סדר העדיפויות של היחסי של תכני המערכת.
שלב רביעי: תכנון פריסה גראפית אפקטיבית
בשלב זה יש לפרוס את התכנים על המסך בצורה שתבטיח שהמשתמש לא יפספס את התכנים הקריטיים, ושיגיע לנושאים החשובים לפני הנושאים המשניים. פריסה זו מתבססת על שורה ארוכה של כללים, כשהעיקריים שהם:
- גודל: רכיבים גדולים בולטים יותר מרכיבים קטנים.
- מיקום בציר הגובה: רכיבים שנמצאים בראש המסך בולטים יותר מרכיבים שנמצא בתחתית המסך.
- מרכז מול שוליים: רכיבים שנמצאים במרכז המסך בולטים יותר מרכיבים שנמצאים בשוליים
- כיוון קריאה: תכנים שנמצאים בתחילת אזורי טקסט בולטים יותר מתכנים שנמצאים בסוף הטקסט.
- הבלטה דרך שוני: רכיבים שנראים שונה משאר הממשק מושכים תשומת לב.
- ניגודיות: טקסט שקונטראסטי לרקע (כהה על בהיר – ולהיפך) ימשוך יותר תשומת לב מטקסט שקרוב בכהות או בגוון שלו לרקע.
שילוב של אמצעים אלו יוכל לשמש לבניית תצוגה היררכית.
מה שחשוב יותר צריך להיות גדול יותר ולהיות ממוקם גבוהה יותר במסך ומה שחשוב פחות צריך להיות קטן יותר, או פחות קונטראסטי לרקע. יש לעשות שימוש בכלים אלו באופן זהיר ומינימליסטי. ככול שמרבים בהדגשות והבלטות, כך יורדת האפקטיביות של כל הדגשה.
דוגמאות לייצוג אפקטיבי של היררכיה – תוצאות החיפוש של Google.
- הנושאים המרכזיים מוצגים מימין, כיון תחילת הקריאה בעברית.
- הפרסומות מוצמדות לשמאל – האזור החשוב פחות בעברית.
- הפסקה החשובה ביותר נמצאת בחלק העליון, הכותרת גדולה ומדגשת.
בגרסה הישנה של אתר Doctors, לעומת זאת, קשה לדעת מה חשוב יותר ומה פחות:
איפה מתחילים לקרוא? באיזה כיוון? מה חשוב?
כיוון שאין קוו עיצוב בסיסי, אלא "הכול שונה", אין שום דבר שמתבלט ע"י חריגה מהקו. הכול מנסה לתפוס את תשומת הלב, ולכן הכול נכשל. נוצרת תחושה של "רעש" בלי הבחנה ברורה בין עיקר לטפל.
אגב, קוריוז מעניין (בעיני): צילום המסך הנ"ל ישן. האתר כבר לא נראה כך. כשניגשתי לעדכן את הפוסט הזה לקראת פרסום, חיפשתי אתר שפועל כיום בעיצוב שמדגים היטב את הבעיה הזו. חפשתי, חיפשתי ו… לא מצאתי. הממשק באינטרנט משתפר כל הזמן. כמו שנילסן ציין פעם, ההחזר על השקעה בשיפור ממשק נמוך כיום מבעבר, פשוט מכיוון שהממשקים כיום כבר יותר טובים מבעבר. עם זאת יש עוד הרבה מה לשפר.
סיכום:
בשביל לאפשר למשתמש לאתר בדיוק מה שהוא צריך, במינימום זמן ובמינימום מאמץ, חיוני:
- לזהות במדויק את צרכי המשתמש
- לבצע שיקול אסטרטגי כיצד לאזן את צרכי המשתמש עם צרכי המערכת
- ולוודא שהתכנים החשובים יבלטו באמצעות הייצוג הגראפי
אי אפשר לברוח מההכרע הזו, כי אם הכול מובלט – שום דבר לא בולט.
אם לא תקבלו החלטה מודעת ונכונה עבורכם ועבור הלקוח המערכת שלכם תהיה פחות אפקטיבית.
כל אלמנט שנוסף למערכת מעמיס על ומקשה על ייצוג ההיררכיה, מה שמחזיר אותי להנחיה בה דנתי במאמר קודם: יש לשמור על צמצום ופשטות, כי לפעמים פחות זה יותר, ויותר – זה פחות
מריץ FireStats
תודה על הפוסט המעניין, רן. היררכיה גראפית היא מושג יסוד בעיצוב, וההשלכות שלה על האינטראקציה הן קריטיות.
אחד מהכללים שהזכרת, "רכיבים שנמצאים במרכז המסך בולטים יותר מרכיבים שנמצאים בשוליים", לא ברור לי כל-כך. אם תיקח את דף התוצאות של גוגל שנתת כדוגמא, מרכז המסך בכלל לא מושך תשומת לב. הדף מעוצב בצורה שמותאמת לצורה הטיפוסית של סריקת המסך – בצורת F. צורת ה-F של סריקת דף נכונה גם לגבי אתרים רבים אחרים – כפי שאתה בוודאי יודע:
http://www.useit.com/alertbox/reading_pattern.html
אז מה היתה כוונת המשורר?
[תגובה]
הי ברק.
בגוגל אזור התוכן תפוס גם את צד ימין של המסך וגם את המרכז.
מודל הקריאה אכן מתנהל בצורת F (או F הפוך בעברית), מתחילת הטקסט לסופו
ומלמעלה למטה, אבל למיטב זיכרוני אובייקטים נמצאים במרכז חלקו העליון של המסך יש נטייה לבלוט.
אני לא ממש זוכר מאיפה הגעתי לזה – זה רשום אצלי כבר זמן רב.
עכשיו אני צריך ללכת לחפש סימוכין מחקריים לטענה הזו.
קול קורא לקרואים:
מישהו מכיר סימוכין שכאלו –
או סימוכין שסותרים את הטענה שמרכז המסך נוטה לבלוט יותר מהשוליים?
[תגובה]