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

מוסכמות צבעוניות ושְמִישוּת

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

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

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

אך מה קורה כאשר שמירה על מוסכמה צבעונית פוגמת בשְׁמִישׁוּת של מוצר ובאיכות האינטראקציה בין המוצר למשתמש?

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

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

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

אולם, השימוש במוסכמה זו מתעלם מפלח אוכלוסיה אשר אינו יכול לפענח נכון את מערכת היחסים שבין הירוק לאדום כשהם מופיעים יחדיו. עיוורי הצבעים מהווים כ-4.5% מהאוכלוסיה, כאשר מבין הגברים מדובר ברמה של בין 8%-10% ואילו אצל הנשים - פחות מאחוז.[2] הליקוי הנפוץ ביותר הוא חסר בצבע אדום-ירוק. משמעות הדבר שפלח זה של האוכלוסיה, שבדרך כלל לא מאופיין בנפרד כקהל המשתמשים או הצרכנים - לא יוכל להבחין בין שני הצבעים ולפענח את הקידוד הצבעוני והמשמעות שלו.

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

א. פרוטנופיה (Protanopia) - לקות הנגרמת כתוצאה ממחסור בקולטנים האדומים ברשתית.
ב. דיוטרנופיה (Deuteranopia) - לקות שבה חסרים הקולטנים הירוקים ברשתית.
ג. טריטנופיה (Tritanopia) - לקות נדירה יותר מפרוטנופיה ומדיוטרנופיה שבה חסרים הקולטנים הכחולים.

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

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

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

css framework - מערכות css מציגות למשתמשים קידודי צבע מוכנים לשימוש. בדוגמא מוצגים (1) קידודי הצבע של bootstrap. משתמשים הלוקים בעיוורון צבעים יתקשו להבחין בין מצבי ה׳הצלחה׳ ו׳סכנה׳ בעיוורון ירוק (2) ובין מצבי ׳הצלחה׳ ו׳אזהרה׳ בעיוורון אדום (3), במידה והם מופיעים במקביל באותו שטח תצוגה.

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

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

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

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

הפתרון שלנו

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

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

ב. בחירת סקאלה צבעונית אחרת (שבירת המוסכמה): (2) התרחקות מהגוון האדום הנקי ומהירוק הנקי - יוצרת רמת ניגודיות גבוהה. (3) בחירת שני גוונים המנותקים לחלוטין מהמוסכמה הצבעונית. (4) שינוי הגוון הירוק לכחול יוצרת רמת ניגודיות גבוהה.

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

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

הטמעת הצבעוניות במודולים תוך עיצובם מחדש:

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

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

העיצוב הסופי

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

סיכום

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

[1] האנציקלופדיה של הרעיונות | דוד גורביץ', דן ערב
[2] www.colourblindawareness.org/colour-blindness
• פרויקט זה אינו פרויקט מסחרי. הפרויקט נעשה כחלק מתהליך מחקרי בנושא נגישות.

• בדיקות הנגישות הצבעונית בוצעה באמצעות אתר color-blindness.com
• כלי לבדיקת ניגודיות צבעונית: colorable.jxnblk.com
• כלי לבדיקת ניגודיות צבעונית: marijohannessen.github.io/color-contrast-checker
• ניתן לבצע בדיקת נגישות צבעונית גם בפוטושופ: תפריט view > proof setup + proof colors
• כמו כן קיימים פלאגאינים כדוגמת getstark.co לסקצ, אדובי XD ופיגמה לבדיקת הצבעוניות