מעצבים רבים אוהבים את האסתטיקה של infographics
עיצוב נקי, שטוח, וכרגע גם מאוד טרנדי.
החוכמה היא להשתמש בסגנון הזה בצורה נכונה.
אחד האתגרים שלנו הוא להציג מידע באופן גרפי ובצורה נכונה.
הצגה נכונה היא הצגה המאפשרת הבנה מהירה של האינפורמציה, המתאימה לצרכים של המשתמש, בהתאם לחשיבות היחסית של פרטי המידע השונים שאנו מציגים.
אנו חייבים להתאים את התצוגה ליכולת הראייה והתפיסה של המוח האנושי.
אנסה להתייחס לדוגמא שעיצבנו בסטודיו שלנו (לחצו להגדלה):
הבריף:
הצגת עץ היררכיה של מערכת חומרה בארגון בעזרת כלי פיתוח שמאפשר דינאמיות (SilverLight) באופן אטרקטיבי,
כאשר השאיפה היא להציג את המידע בצורה שונה מאופן הצגתו במערכות הפעלה ובאפליקציות "רגילות".
לקוחות הקצה:
עסקים קטנים ובינוניים, משתמשים טכניים אבל לא בהכרח מומחים
אופן השימוש במערכת:
במעבר עכבר מעל אובייקט בפאנל המרכזי נפתחת מתחת האובייקט תיבת מידע נוסף המוצגת מתחתיה, תוך כדי אנימציה.
מדדים מספריים מוצגים באמצעות גרפים דינאמיים (ראו פאי ובר גרף ליד המספרים)
נקודות חשובות:
האתגרים איתם התמודדנו:
תהליך העבודה:
בתהליך העבודה מעורבים שני אנשי מקצוע, איש הנדסת אנוש ומעצב גרפי
שילוב זה נדרש בשל השוני בהגדרת המשימות של שני הצדדים וכן בשל השוני ברקע ובהכשרה של כל אחד מהם. רק שילוב של שני אנשי מקצוע יכול לתת פתרון מקיף לשלל האתגרים בעיצוב אפליקציות בכלל ובעיצוב אינפוגרפיקה בפרט.
טיפים לבניית אינפוגרפיקה טובה:
1. שימוש בצבעים:
צבעים במערכת מידע לא יכולים להיות סתמיים, הם צריכים לשקף את מהות האובייקט ואת המצב שלו, על פי המוסכמות המוכרות למשתמשים (דוגמה מוכרת: בדרך כלל אדום וירוק ישמשו להצגת חיובי ושלילי)
כאשר משתמשים בצבע לאבחנה בין הפריטים – צריך להשתמש גם בסמל כדי לעזור לעיוורי צבעים (כ 5-10% מהמשתמשים הגברים) או לחלופין בטקסטורה שונה.
2. בלי קישוטים, כל אלמנט שמופיע על המסך הוא בעל משמעות.
3. אותיות ומספרים גדולים הם יפים אבל יש לעשות בהם שימוש רק אם יש צורך אמיתי בכך (הקפידו לבדוק שהם אינם מעוותים את ההירארכיה במסך).
4. שימוש באנימציות
אנימציות יכולות לשמש כגורם מסייע בויזואליזציה של מידע כאשר משתמשים בהן בצורה מושכלת, אך יכולות להיות גורם מפריע אם משתמשים בהן בצורה לא נכונה, במיוחד בשימוש קבוע.
בעיצוב הנוכחי, השתמשנו באנימציה על מנת לסייע למשתמש להבין את הקשר בין האוביקט שעליו נמצא העכבר לבין תיבת המידע הנפתחת ממנו
דוגמא בעייתית להצגת מידע ניתן לראות בגרף הבא:
מצד אחד הגרף באמת יפה – התצוגה עדינה, הצבעים נעימים ונוצרת צורת פרח תלת מימדי, מצד שני לא מתקבלת תמונה ברורה של האינפורמציה. אפשר לחקור את התמונה ולהשיג את האינפורמציה אבל קשה להבין אותה במבט חטוף.
דוגמא נוספת לבעייתיות בהצגת המידע:
כל העיגולים נראים פחות או יותר אותו הדבר, קשה מאוד להבחין בהבדלים בין 67% ובין 73% אם לא קוראים את המספרים.
[sep]
דוגמא נכונה להצגת מידע:
בדוגמא זו אפשר להבין במבט חטוף את התמונה הכללית ולאחר מכן ניתן להתעמק באינפורמציה, המוצגת בפורמט מיוחד, ברור לקריאה ונכון.
[sep]
והנה עוד כמה דוגמאות מהרשת… סתם בשביל הכיף:
[sep]
[sep]
[sep]
[sep]
[sep]
[sep]
ולסיום, הנה שני אתרים מעולים להשראה לעיצוב ויזואליזצית מידע:
good.is/infographics
infosthetics.com/archives/infographic
