כשמעצבים ממשק משתמש נדרשים לא פעם למשוך את תשומת הלב לאיזור חשוב: טופס להשארת פרטים, אזהרות ושגיאות, מסרים שיווקיים ועוד. בחלק הראשון של הסדרה הזכרתי סקס, ריווח, חצים, מסגרות וניגוד (קונטרסט). ניגוד הוא הבסיס לכל הכלים המוזכרים בסידרה הזו.
בחלק הזה של הסדרה אזכיר עוד כמה דרכים למשוך את העין: צבע, משקל גופן (“bold”), גודל וקו-תחתון, ואת החשיבות של היררכיה כהמשך של מושג הניגוד.
צבע
לצבעים יש השפעה גדולה עלינו, והם כלי עיצובי חשוב: צבעים מסויימים עשויים לגרום לנו להרגיש שחלל הוא גדול יותר, ואחרים – קטן יותר; יש צבעים שמרגישים “קרים” ואחרים שמרגישים “חמים”; הם משפיעים על מצב הרוח שלנו, צבעים מסויימים מרגישים שמחים ואחרים עצובים, יש צבעים שנותנים תחושה אנרגטית ופעילה, ויש אחרים שעושים את ההיפך.
ניגוד בין צבעים, כשהוא עשוי נכון, עשוי למשוך את העין בצורה חזקה מאוד. כשהוא לא עשוי נכון הוא יכול ממש להציק.
דוגמא: thepixel
בתמונה שמשמאל קשה שלא להימשך לאיזור שבצבע מג’נטה (ורוד), כותרת המשנה. היא כל-כך בולטת, עד כדי כך שבכלל לא שמים לב לכותרת שמעליה במבט ראשון, גם כשמסתכלים על האתר בגודל מלא. נראה שהמעצב קצת נסחף פה, באתר שנראה ממש נפלא בכל מובן אחר.
דוגמא: PageLime
ב-pagelime משתמשים בצבע ירוק על רקע כחול כדי להדגיש את כפתור ההרשמה לאתר, שימוש מאוד נפוץ לצבע. גם בפינה הימנית למעלה, כפתור ה-Sign Up בולט בגלל הכפתור האפור שצמוד, ובגלל הסביבה הלבנה.
צבע אדום בטפסים: לשגיאות בלבד
אפשר להשתמש בכל צבע בממשק, אבל לצבע האדום יש מקום מיוחד: הודעות שגיאה. הדבר נכון במיוחד בטפסים, שם מופיעות הרבה פעמים הודעות שגיאה. אם תשתמשו באדום לכותרות, למשל, הודעות השגיאה שלכם יבלטו הרבה פחות.
דוגמא: רישום ל-boingo
בטופס הרישום ל-boingo. הכותרות באדום, בהתאם למיתוג של החברה (ליחצו כדי להגדיל):
והנה אותו המסך, עם הודעת שגיאה. תנסו למצוא אותה תוך כדי שימוש באתר (או פה למטה). מאתגר מאוד.
על הדרך boingo עברו על עוד חוק בסיסי של שמישות: הם שמו radio button בודד ללא קבוצה. לא ברור לי מה היתה כוונתו של המשורר פה, אולי להראות שיש רק אפשרות אחת בתוכנית הזאת. מוזר.
עיוורון צבעים
בהדגשה בעזרת צבע בממשק (ובכלל) חשוב לשים לב לעוורי צבעים. 8% מהגברים ו-0.5% מהנשים בעולם הם עוורי צבעים, רובם מתקשים להבדיל בין אדום לירוק. אחת הדרכים להתמודד עם הקושי הזה היא להשתמש בהדגשה כפולה: שימוש בצבעים מנוגדים ביחד עם גודל, או בהדגשה משולשת: גם צבע, גם גודל, וגם משקל גופן. בדוגמא מאמזון למטה אפשר לראות הדגשה מרובעת עם "Shop All Departments".
משקל גופן
מי לא שמע על Bold? דרך מוכרת ונפוצה להבלטה של מילים, משפטים ואפילו פסקאות שלמות במקרים מסויימים.
בעולם העיצוב (ליתר דיוק – הטיפוגרפיה) יש עושר יותר גדול מאשר Bold, כתב רגיל, איטליקס והשילובים שביניהם. מה שרוב האנשים קוראים לו “פונט” או “גופן” בעברית, נקרא בעולם הטיפוגרפיה “משפחה” או “משפחת גופנים” (או “משפחת פונטים” בעברית). הם נקראים כך בגלל שבכל משפחה יש כמה “משקלים” של אותו גופן, כל משקל נראה מודגש יותר או פחות מהשני, חלקם נטויים (italics) וכו’.
דוגמא: Myriad Pro
הנה למשל דוגמא של כמה משקלים מהפונט Myriad Pro של Adobe:
השימוש במשקלים שונים עוזר למשוך את העין של הצופה לחלק החשוב של המסר. כך בסריקה מהירה אנחנו קוראים רק את מה שהמעצב כיוון אותנו לקרוא. הנה שוב ב-pagelime, המילים Free, Fast, Easy ו-Fun ממש קופצות מהדף. Free הוא במשקל “Bold” (וגם ירוק – הדגשה כפולה), Fast, Easy ו-Fun הם ב-Semibold, והשאר ב-Light.
משקלי גופן עוזרים גם להפריד בין חלקים צמודים של טקסט, למשל כאן, המילה CSS מופרדת אך ורק באמצעות משקל הגופן:
גודל
זה די ברור, גדול יותר, מושך את העין יותר. בדיוק כמו בכותרת שפה מעל.
Tag Cloud (ענן תגיות) מדגים את העניין הזה מצויין. העין נמשכת לאותיות הגדולות, ואנחנו גם מבינים אינטואיטיבית שהטקסט הגדול יותר הוא חשוב יותר. הנה זה של אמאזון:
באותו מסך של אמאזון אפשר לראות איך Shop All Departments מקבל הדגשה מרובעת: גודל כתב, משקל גופן (bold), צבע ומסגרת. מאוד מתאמצים למשוך אותנו לשם ומסיבה ברורה: כדי שנראה שהם מוכרים גם צעצועים, מצלמות, תכשיטים, ועוד (ולא רק ספרים ודיסקים).
קו תחתון Underline
קו תחתון, underline, הוא אמצעי מוכר להדגשה של מילים בודדות ובעיקר כותרות, עוד מלפני עידן האינטרנט.
אם יש איזשהו אמצעי למשיכת תשומת לב שמנוצל לרעה ברשת, זה הקו תחתון. רבים משתמשים בהם באתרים ובאימיילים כדי להדגיש מילים שהן לא לא קישורים (לינקים).
ההמלצה שלי: אל תשתמשו בקו תחתון לשום דבר חוץ מאשר קישורים. החיבור בין קו-תחתון לקישור הוא מאוד חזק. אם תשימו קו תחתון על טקסט באתר או באימייל, יהיו בוודאות אנשים שינסו להקליק עליו. הם יתבלבלו ויתאכזבו כשהוא לא יפעל. לא חבל? נילסן כתב על זה כאן (ב-bullet השלישי).
להתחרות עם עצמכם
שימוש מוגזם באמצעי הדגשה יכול להיגמר רע. הנה דוגמא ממייל שיווקי שקיבלתי:
אכן תמונות קשות. שימו לב לכמות ההדגשות:
- הכותרת (שלום ברק דנין) מודגשת בגופן במשקל כבד.
- “לחץ כאן לשמוע את ההרצאה” מודגש בצהוב בוהק, קו תחתון, גופן גדול ובמשקל כבד, בשתי הפעמים שהוא מופיע.
- הטקסט “בסיגנונו הטיפוסי…” מודגש בגופן במשקל כבד.
- הקישור להרצאה מודגש בקו תחתון ובצבע כחול – מתאים לקישור.
- "הטקסט “אם נהניתם תעבירו הלאה” מודגש בגופן במשקל כבד ובצבע אדום.
למעשה, הטקסט היחיד שלא מודגש באיזושהי דרך הוא “יש לי 4 דקות שידהימו אותך” ו”קישור להרצאה”.
כתבתי בכותרת “להתחרות עם עצמכם”, כי זה בדיוק מה שהכותבת עשתה במייל הזה. כל אחת מההדגשות גונבת תשומת לב מהשניה, כי הכותבת כנראה הרגישה שהכל חשוב. כשכולם מדברים ביחד, מי שרוצה לבלוט צריך לצעוק, וזה בדיוק מה שעושה ההדגשה הצהובה. היא אמנם מאוד בולטת, אבל לא היה בה שום צורך אם שאר הטקסט לא היה כל-כך מובלט.
כפי שציינתי מוקדם יותר, כל אחד מהכלים למשיכת תשומת הלב פועלים על עקרון הניגוד. כשאין ניגוד, כולם בולטים, ואף-אחד לא בולט. עקרון מרכזי בעיצוב גראפי שמרחיב את המושג של ניגוד הוא היררכיה. כשיש היררכיה ויזואלית נוצר מסלול צפיה שמוליך את העין של הצופה מהאלמנט הבולט ביותר בעמוד עד למקום העיקרי שאליו רצה המעצב שהצופה יגיע.
אפשר לראות דוגמא יפה להיררכיה ויזואלית בציור של ברויחל (Breugel) בבלוג החדש של ישי כהן (בהצלחה, ישי!) ומממשק בבלוג "In the Woods".
מונטי פייטון הדגימו מצויין את החשיבות של ניגוד בקטע הזה מתוך הסרט “בריאן כוכב עליון” – כולם צועקים: !Yes, we’re all different, והיחיד שבולט הוא האחד שאומר – !I’m not :-)
בפוסט הבא
בחלק הבא אזכיר את הכלים הבאים למשיכת תשומת לב:
- פָּנים
- תמונות ואיורים
- אנימציה
- סאונד
בכלל קו תחתי זו רעה חולה.
המציאו אותו בשביל להדגיש דברים במכונת כתיבה (שלא יכולה להחליף לפונט מודגש כמובן) ומאז אנחנו תקועים איתו.
אנשים מתעקשים להשתמש בו למרות שהוא מקשה על הקריאה. לך תבין.
גם כן, אנשים. :-)
את חושבת שאנשים לא השתמשו בקו מתחת לכותרת לפני המצאת מכונת הכתיבה? בספרים מודפסים, או בכתב יד? כשכתבתי את הפוסט ניסיתי להתחקות ברשת אחרי מקורות ה-underline ולא הצלחתי למצוא משהו ברור.
בספרי הלכה לפעמים מדגישים בעזרת כתב רש"י.
ברש"י עצמו בהוצאת וילנא זה בגופן כבד (באותו פונט ספרדי המכונה "כתב רשי")
בתוספות זה כתב מרובע וגדול ושאר התוכן בכתב רש"י
ב"משנה ברורה" מדגישים בעזרת הקפה בסוגריים מרובעות.
לפעמים יוצא לי להגיע לאתר בערבית עם מילים באותיות לטיניות, זה כל כך בולט..
יש שני סוגים של הדגשות: הדגשות של כותרות והדגשות בתוך טקסט רץ, נגיד ה"ההמלצה שלי:" בטקסט שלך הוא כותרת, אבל אם הית מדגיש "לא" באחד המשפטים אז זה הדגשה מסוג אחר. אשמח לשמוע איזה הדגשה מתאימה למה.
היי שמוליק,
השימוש בגופן שונה (רש"י) דומה לשימוש במשקל שונה של גופן, שניהם נותנים הדגשה.
אני לא בטוח שיש לי תשובה לשאלה שלך (אני לא בטוח לגמרי שהבנתי אותה).
הכוונה שלי כאן היא בעיקר למשוך את תשומת הלב של הקוראים לדברים שמושכים תשומת לב :-) לכלים הגראפיים שמסייעים ליצור קשב.
שתי ההדגשות שציינת מושכות תשומת לב, כל אחת בדרכה.
בטקסט רץ ההדגשה תהיה בדרך-כלל למילה בודדת או לכמה מילים שהן המסר העיקרי בפיסקה או במשפט. כשסורקים טקסט רץ במהירות הדגשות כאלה עוזרות להבין מה המסר העיקרי בלי לקרוא את כל הפרטים. יש כאלה שמדגישים את כל הטקסט הרץ, כמו בדוגמאות של הטקסט השיווקי שנתתי בפוסט.
בכותרת בדרך-כלל ההדגשה לא תבוא לבד, היא תלווה גם בפונט גדול יותר, וריווח בעיקר מעל הכותרת, אבל גם מתחת לה. זהו ה-whitespace או ריווח שהזכרתי בחלק הקודם בסידרה.
המממ… אין חלק שלישי? דווקא קיוויתי. נשמע מעניין.
:)