ויזואליזציה של נתונים – גם כמותי וגם איכותי

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

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

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

booking.com: הצגה חזותית של נתונים איכותיים וכמותיים

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

קיאק: עלות, חברה מטיסה וסימון טיסת לילה

תצלום הוא אלמנט ויזואלי שצריך להועיל

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

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

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

היכן תבחרו לנפוש: פוינט-ימו או הרודס?

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

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

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

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

מדד ה- BMI: צבעוניות המקלה על פענוח הנתונים

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

NASDAQ לעומת תל אביב:


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

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

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

הכותב הינו יועץ וארכיטקט ממשקי משתמש.