שפה חזותית לאתר: צבעים, טיפוגרפיה ורכיבים שנשארים קריאים

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

התחילו בתפקידים, לא במספר צבעים

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

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

בדקו ניגודיות בתוכן האמיתי

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

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

בחרו טיפוגרפיה לפי עברית ותוכן

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

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

תכננו רכיבים שחוזרים באתר

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

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

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

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

הכינו דוגמה קיצונית לפני שמאשרים

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

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

מה מעבירים לפיתוח ולעריכה

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

תרגיל בדיקה עם חמישה מצבי תוכן

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

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

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

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

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

מי מאשר חריגה מהמערכת החזותית?

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

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

כך אפשר לתת לעמודים אופי משלהם בלי ליצור אתר שכל מסך בו דורש מהמשתמש ללמוד מחדש איך לבצע פעולה.

הצעד הבא

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

מקורות

• W3C: Contrast Minimum
• W3C: מבנה עמוד וכותרות

שאלות ותשובות

IBASTOM.CO.IL

כמה צבעים צריכה פלטה של אתר?

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

איך בודקים ניגודיות?

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

גופן לטיני יפה מתאים גם לעברית?

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

המעצב שלח עיצוב מושלם עם טקסט קצר. מה הבעיה?

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

מה למסור למפתח?

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