top of page
  • תמונת הסופר/תHadas Shezaf

צבעים ונהנים - המדריך לצבע בדאטה ויז. חלק ראשון: איך צבע עוזר לנו


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

יותר מדי צבע - מבלבל את המשתמש ומבזבז זמן



אז איך צבע יכול לעזור לנו?


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


______________


1. פוקוס


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


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


עומס צבע שמסיט את תשומת הלב מהסיפור. Andy Cotgreave, Tableau Public



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


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



שימוש בצבע אחד כדי לפקס את הצופה על מה שחשוב .Andy Cotgreave, Tableau Public



______________



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


דשבורד של Zencity מראה את השיח על העיר בסושיאל - אדום שלילי וירוק חיובי


______________



2. סף או טווח


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


סימון סף שעוזר לנו לענות על שאלה במהירות


______________


3. אזהרה


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


אזהרה על ידי שימוש בסקלת ירוק-צהוב-אדום בגרף Gauge (מימין) או בעיגולים (משמאל)


______________


4. בידול בין קטגוריות


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


א. הבחנה בין קבוצות נתונים

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


שימוש בצבע כדי להבחין בין קבוצת הנשים לקבוצת הגברים, מקור: Highcharts.com


ב. חלוקה לקטגוריות שונות

צבע יכול להיות הפתרון גם כאשר נרצה לייצר הבחנה מהירה בין קטגוריות שונות. בדוגמה הבאה אפשר לראות גרף המציג מקורות טראפיק מתוך הדשבורד של חברת Similarweb. במטרה לייצר בידול מהיר בין כל אחד מהמקורות, בחרו בחברה לצבוע כל מקור בצבע אחר (Direct - כחול כהה, Social - ירוק, Search - ורוד וכן הלאה). כאשר כל עמודה צבועה בצבע אחר, קל להבין שמדובר במקורות שונים גם בלי לקרוא את הכותרת של הגרף.


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


דשבורד של Similarweb - צבע שונה לכל מקור טראפיק שונה, מקור: Similarweb


______________



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

בחלקים הבאים של המדריך נדבר על:

  • בניית צבעוניות לויזואליזציה שלנו - חלק שני

  • טיפים שימושיים ששווה לזכור - חלק שלישי


______________





bottom of page