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

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

למי שתוהה, לא, הסקס הזה לא עוסק בפוסט. להיפך.

עדכון 5/11/2009: החלק השני כאן.

ריווח

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

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

עוד על whitespace

חצים

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

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

בפרסומת שמופיעה למעלה בניו יורק טיימס (פינה ימנית עליונה), יש שימוש בחץ אדום וגדול – הוא תופס חצי משטח ההודעה!

הנה דוגמא של ממשק שעושה שימוש בחץ – תודה לרן לירון:

מסגרות

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

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

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

ניגוד – Contrast

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

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

עוד על ניגוד (הראשון ברשימה)

ניגוד – contrast. הניגוד בצד השמאלי חזק בהרבה מזה שבצד ימין.

בפוסטים הבאים

זה הכל לחלק הזה של הסדרה. בחלקים הבאים אזכיר את הכלים הבאים:

• צבע
• משקל גופן ("bold")
• גודל
• קו תחתון
• פָּנים
• תמונות ואיורים
• אנימציה
• סאונד

ֹ