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

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

צבע

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

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

color1

דוגמא: thepixel

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

דוגמא: PageLime

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

color2

צבע אדום בטפסים: לשגיאות בלבד

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

דוגמא: רישום ל-boingo

בטופס הרישום ל-boingo. הכותרות באדום, בהתאם למיתוג של החברה (ליחצו כדי להגדיל):

boingo1

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

boingo2

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

עיוורון צבעים

בהדגשה בעזרת צבע בממשק (ובכלל) חשוב לשים לב לעוורי צבעים. 8% מהגברים ו-0.5% מהנשים בעולם הם עוורי צבעים, רובם מתקשים להבדיל בין אדום לירוק. אחת הדרכים להתמודד עם הקושי הזה היא להשתמש בהדגשה כפולה: שימוש בצבעים מנוגדים ביחד עם גודל, או בהדגשה משולשת: גם צבע, גם גודל, וגם משקל גופן. בדוגמא מאמזון למטה אפשר לראות הדגשה מרובעת עם "Shop All Departments".

משקל גופן

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

בעולם העיצוב (ליתר דיוק – הטיפוגרפיה) יש עושר יותר גדול מאשר Bold, כתב רגיל, איטליקס והשילובים שביניהם. מה שרוב האנשים קוראים לו “פונט” או “גופן” בעברית, נקרא בעולם הטיפוגרפיה “משפחה” או “משפחת גופנים” (או “משפחת פונטים” בעברית). הם נקראים כך בגלל שבכל משפחה יש כמה “משקלים” של אותו גופן, כל משקל נראה מודגש יותר או פחות מהשני, חלקם נטויים (italics) וכו’.

דוגמא: Myriad Pro

הנה למשל דוגמא של כמה משקלים מהפונט Myriad Pro של Adobe:

font

השימוש במשקלים שונים עוזר למשוך את העין של הצופה לחלק החשוב של המסר. כך בסריקה מהירה אנחנו קוראים רק את מה שהמעצב כיוון אותנו לקרוא. הנה שוב ב-pagelime, המילים Free, Fast, Easy ו-Fun ממש קופצות מהדף. Free הוא במשקל “Bold” (וגם ירוק – הדגשה כפולה), Fast, Easy ו-Fun הם ב-Semibold, והשאר ב-Light.

font2

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

CSS Awards

גודל

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

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

amazon

באותו מסך של אמאזון אפשר לראות איך Shop All Departments מקבל הדגשה מרובעת: גודל כתב, משקל גופן (bold), צבע ומסגרת. מאוד מתאמצים למשוך אותנו לשם ומסיבה ברורה: כדי שנראה שהם מוכרים גם צעצועים, מצלמות, תכשיטים, ועוד (ולא רק ספרים ודיסקים).

קו תחתון Underline

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

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

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

להתחרות עם עצמכם

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

marketing1

אכן תמונות קשות. שימו לב לכמות ההדגשות:

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

למעשה, הטקסט היחיד שלא מודגש באיזושהי דרך הוא “יש לי 4 דקות שידהימו אותך” ו”קישור להרצאה”.

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

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

אפשר לראות דוגמא יפה להיררכיה ויזואלית בציור של ברויחל (Breugel) בבלוג החדש של ישי כהן (בהצלחה, ישי!) ומממשק בבלוג "In the Woods".

מונטי פייטון הדגימו מצויין את החשיבות של ניגוד בקטע הזה מתוך הסרט “בריאן כוכב עליון” – כולם צועקים: !Yes, we’re all different, והיחיד שבולט הוא האחד שאומר – !I’m not :-)

בפוסט הבא

בחלק הבא אזכיר את הכלים הבאים למשיכת תשומת לב:

  • פָּנים
  • תמונות ואיורים
  • אנימציה
  • סאונד