היררכיה, קונטרסט וסדר: שלוש מילים שמסבירות למה עיצוב עובד

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

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

היררכיה: מה רואים ראשון

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

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

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

קונטרסט: מה בולט ומה נסוג

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

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

ויש גם צד מעשי מאוד: אנשים צריכים להצליח לקרוא. הנחיות הנגישות של W3C ממליצות על יחס ניגודיות של לפחות 4.5:1 בין טקסט רגיל לרקע שלו, ו-3:1 לטקסט גדול (WCAG 2.2, דצמבר 2024). לא צריך לחשב את זה בראש, יש בודקי ניגודיות חינמיים ברשת. אבל אפשר גם פשוט להסתכל על המודעה בטלפון, בחוץ, באור יום. טקסט אפור בהיר על רקע בז' שנראה עדין במסך של המחשב, הופך שם לבלתי נראה.

סדר: הכל במקום שלו

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

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

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

איך שלושתן עובדות יחד

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

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

רשימה קצרה לפני שמעלים מודעה

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

לא צריך להיות מעצב

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

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