זהו המאמר החמישי בסדרה על עיצוב ממשק משתמש מאת רן לירון

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

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

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

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

תצוגה היררכית - המטרה

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

תהליך העבודה בבניית תצוגה היררכית. 

שלב ראשון: זיהוי הצרכים של הלקוח.

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

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

ועוד

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

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

שלב שני: זיהוי צרכי המערכת.

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

שלב שלישי: גיבוש רשימה מתועדפת אחת.

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

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

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

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

שלב רביעי: תכנון פריסה גראפית אפקטיבית

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

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

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

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

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

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

דוגמאות לייצוג אפקטיבי של היררכיה:

תוצאות החיפוש של Google.

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

באתר Doctors, לעומת זאת, קשה לדעת מה חשוב יותר ומה פחות:

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

סיכום:

בשביל לאפשר למשתמש לאתר בדיוק מה שהוא צריך, במינימום זמן ובמינימום מאמץ, חיוני:

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

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

יש לשמור על צמצום ופשטות, כי לפעמים פחות זה יותר, ויותר – זה פחות.