ממשק בנק הפועלים

PRODUCT REDESIGN

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

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

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

עיצוב ממשק אפליקטיבי לאתר בנק פיננסי המציג דשבורד נתונים. product design ux/ui accessible interface
עיצוב מחדש של אתר בנק הפועלים

מחקר: מוסכמות צבעוניות ושְמִישוּת

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

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

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

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

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

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

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

תצוגת גווני ירוק-אדום לעומת עיוורון לירוק deuteranopia

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

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

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

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

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

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

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

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

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

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

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

הפתרון שלנו

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

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

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

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

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

עיצוב הדמיית נתונים לממשק בנק פיננסי. product design ux/ui accessible interface and data visualization

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

העיצוב הסופי

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

עיצוב ממשק אפליקטיבי לאתר בנק פיננסי המציג דשבורד נתונים. product design ux/ui accessible interface

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

אתם יכולים לקרוא את עבודת המחקר המלאה גם בבלוג שלנו - התנור:
מוסכמות צבעוניות ושְמִישוּת