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

הייתם רוצים לקרוא את הכתבה הזו?

הציצו על התמונה למטה. האם היא מושכת אתכם להתעמק ולרצות לקרוא את כולה?

 

 

הסנדלר הולך יחף - כתבה מתוך הבלוג של חברת הייעוץ לחוויית משתמש - NNG

כתבה מתוך הבלוג של חברת הייעוץ לחוויית משתמש – NNG

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

 

הפתרון נמצא בין אפיון לעיצוב

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

מה זה בכלל "היררכיה ויזואלית"?

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

האתר של מוזיאון Whitney בניו יורק - ברור מה חשוב ממה

האתר של מוזיאון Whitney בניו יורק – ברור מה חשוב יותר ממה

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

איך עושים את זה נכון?

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

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

 

 


שימוש בהיררכיה נכונה, ידריך את המשתמש בתוך כל התוכן שאנחנו מציגים לו

שימוש בהיררכיה נכונה, ידריך את המשתמש בתוך כל התוכן שאנחנו מציגים לו

 

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

Google

הממשק של גוגל מדגים איך שימוש בחלל לבן נותן במה לפעולה ראשית עיקרית

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

 


קולנוע פאר

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



 

רק לא להגזים!

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

 

מאיפה אני יודע את כל זה?

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

 

שייך לנושאים: , , , , , ,