אם הגעתם עד לשורה הזו, השורה השנייה בכתבה אחרי הכותרת, אז אני חייב להגיד לכם תודה! תודה שקראתם גם את המילים הקטנות יותר, הלא מודגשות, אלה שלא צעקו לכם "תקראו אותי, אני מילה גדולה וכתומה שכתובה על תמונה גדולה וצהובה". בתור מי שכותב הרבה, היה לי קשה לקבל את העובדה שאנשים לא ממש יקראו את כל המילים שאני כותב. אבל בתור מאפיין UX מיד שאלתי את עצמי איך מתמודדים עם המצב הזה ומתאימים לו פתרונות? התשובה טמונה בשטח שבין אפיון לעיצוב, וקוראים לה "היררכיה ויזואלית".
הייתם רוצים לקרוא את הכתבה הזו?
הציצו על התמונה למטה. האם היא מושכת אתכם להתעמק ולרצות לקרוא את כולה?
כתבה מתוך הבלוג של חברת הייעוץ לחוויית משתמש – NNG
אם מסתכלים על המאמר שנמצא בצילום המסך כאן למעלה, מרגישים קצת כמו אדם שתקוע בלב ים, בלי אפשרות לדעת איפה הים מתחיל, אם יש איים באמצע למנוחה, ומתי כבר תגיע שוב היבשה המיוחלת.
כשאנשים סורקים עמוד, הם מחפשים עוגנים להישען עליהם – כל דבר שיעזור להם להבין מה חשוב יותר ועל מה אפשר לוותר, בתוך הים האינסופי של מידע שהם חשופים אליו.
הפתרון נמצא בין אפיון לעיצוב
כאן נכנס לסיפור אחד העקרונות הבסיסיים ביותר באפיון ועיצוב חוויית משתמש – היררכיה ויזואלית.
מה זה בכלל "היררכיה ויזואלית"?
היררכיה ויזואלית היא התוצר של ארגון אלמנטים על המסך תוך שימוש בסדר עדיפויות ברור. המטרה היא הבלטה והדגשה בפני המשתמש של מה שחשוב יותר, וכך להדריך אותו בסריקת התוכן ולעזור לו לנווט.
בעברית פשוטה – העובדה שחלק מהאלמנטים נראים אחרת, מקבלים צבעים אחרים ודגשים שונים, מאפשרת להבדיל בין אלמנטים במסך. כך העין שלנו לומדת להתמקד קודם במה שבולט ורק אחר כך במה שקיבל פחות דגש.
האתר של מוזיאון Whitney בניו יורק – ברור מה חשוב יותר ממה
איך עושים את זה נכון?
יש בהיררכיה ויזואלית הרבה common sense, אבל כמו כל עיקרון עיצובי אחר, אפשר ללמוד לעשות את זה נכון, אם מקפידים על החוקים הבסיסיים:
- גודל – גדול יותר כמובן יהיה בולט יותר. זה די הגיוני.
- משקל – טקסט שיופיע במשקל (כלומר קו עבה יותר – כמו bold או black למשל) יהיה בולט יותר. גם זה חוק די בסיסי.
- מיקום בעמוד – מה שחשוב יותר צריך להופיע במקום גבוה יותר בעמוד. חשוב להתייחס כאן גם לגובה ה-fold (ברזולוציות השונות של המסכים).
שימוש בהיררכיה נכונה, ידריך את המשתמש בתוך כל התוכן שאנחנו מציגים לו
- שבירת שגרה – אם כתבתם טקסט שלם בגודל/צבע/משקל מסוים, כל חריגה ממנו, תבליט את הטקסט שחרג. למשל, אנחנו מתייחסים לצבע אפור כצבע שאינו בולט מול כתום שנחשב דווקא כן בולט. אבל התפקידים יכולים להתהפך – במקרה שבו ישנו רקע כתום או הרבה טקסט כתום, דווקא המשפט האחד האפור שיופיע על המסך, הוא זה שיבלוט.
- שימוש בחללים לבנים – חללים לבנים הם המרווחים בין אלמנטים על המסך.
איך אפשר להשתמש בחללים לבנים לטובתנו? קודם כל חשוב לא להתעלם מקיומם. חשוב לדעת למשל, שיותר חלל לבן מסביב לאלמנט כלשהו, ידגיש אותו. חלל לבן נותן "במה" לאותו רכיב ומבליט אותו.
הממשק של גוגל מדגים איך שימוש בחלל לבן נותן במה לפעולה ראשית עיקרית
- גריד קבוע – שימוש במבנה קבוע לעמודים עוזר מאוד ליצירת היררכיה ויזואלית. ברגע שהמשתמש לומד מהו המבנה הקבוע של העמודים, הוא ידע לייחס חשיבות למקומות "חשובים" יותר על העמוד, כלומר כאלה שתשומת הלב אליהם היא גבוה יותר (למשל ימין למעלה בעמודים בעברית). בנוסף, הוא ידע להבחין באלמנטים שבולטים בכך שהם חריגים על פני אותו מבנה קבוע.
- קבלת החלטות – כשאתם מציירים פרמידה, השפיץ העליון שלה בהכרח קטן יותר מהבסיס. בשפיץ העליון יש מקום רק לפריט אחד או כמה בודדים. לכן תזכרו את העיקרון הזה: לא יכול להיות שהכל הכי חשוב. כשאתם חושבים איזה אלמנטים להבליט, תזכרו שאין ברירה, חייבים לקבל החלטות.
בעמוד הבית של האתר של מכון הכושר "קולנוע פאר" (שהוא אתר מקסים וצבעוני מבחינות רבות), נראה כאילו הכל הכי חשוב: הרבה אלמנטים מקבלים דגש – צבעוניות חזקה, פונט בולט ומיקום יחסית דומה בעמוד. הכל כל כך בולט עד שקשה להחליט במה להתמקד קודם.
לכל האלמנטים יש צבעוניות חזקה, פונטים גדולים ומיקום דומה – במה מתמקדים קודם?
רק לא להגזים!
אנשים לא אוהבים להרגיש שדוחפים להם משהו לפנים בכוח. עד כמה הם לא אוהבים את זה? עד שנוצרה תופעה שמוכרת כ-"banner blindness" – התעלמות מודעת (או לא מודעת) מפרסומות שמופיעות בממשקים.
אז מה הקשר בין התעלמות מפרסומות להיררכיה ויזואלית? התופעה הזו סותרת לכאורה, את עקרונות ההיררכיה המקובלים בגלל שהיא אומרת שלא כל מה שגדול, בוהק וזועק, בהכרח יבלוט. חשוב להתחשב בנקודה הזו כשחושבים באיזה אופן להבליט אלמנט מסוים בממשק. מעבר לעקרונות שציינתי, חשוב לזכור גם שהאלמנט צריך להשתלב בעמוד בצורה טבעית, כי המשתמשים מזהים בקלות את מה ש"מריח" מלאכותי.
מאיפה אני יודע את כל זה?
מעולם לא עשיתי תואר בעיצוב, אבל כשנכנסתי לעולם ה-UX, הבנתי שיש לי צורך להבין קצת יותר לעומק את עקרונות העיצוב שאני משתמש בהם ומדבר עליהם ביומיום. לא חיפשתי תואר של 4 שנים, אלא מישהו שיעשה לי סדר בכלי העבודה היומיומיים שלי. רציתי לקבל עוד קצת כלים, כדי שה-wireframes שאני משרטט ייראו יותר טוב ורציתי להבין שיקולים של המעצבים כשאני מדבר איתם עם מסכים. זה בדיוק מה שקיבלתי בסדנת העיצוב למאפיינים ומנהלי מוצר, ואם אתם מתחברים לצרכים שהעליתי כאן, כדאי לכם לקרוא עוד קצת על הסדנה, כאן.
חייה להגיד שלמרות שהנושא עניין אותי ומדבר על רפרוף, פרט לפסקה הראשונה, הכותרות והתמונות רפרפתי הכל. אבל היי! הבנתי את זה והגעתי עד לכאן בשביל התגובה