אינפוגרפיקה: הויזואליזציה של מידע – פוסט אורח

אינפוגרפיקה- הויזואליזציה של מידע

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

אנסה להתייחס לדוגמא שעיצבנו בסטודיו שלנו (לחצו להגדלה):

הבריף:

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

לקוחות הקצה:

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

אופן השימוש במערכת:

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

נקודות חשובות:

האתגרים איתם התמודדנו:

תהליך העבודה:

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

טיפים לבניית אינפוגרפיקה טובה:

1. שימוש בצבעים:
צבעים במערכת מידע לא יכולים להיות סתמיים, הם צריכים לשקף את מהות האובייקט ואת המצב שלו, על פי המוסכמות המוכרות למשתמשים (דוגמה מוכרת: בדרך כלל אדום וירוק ישמשו להצגת חיובי ושלילי)
כאשר משתמשים בצבע לאבחנה בין הפריטים – צריך להשתמש גם בסמל כדי לעזור לעיוורי צבעים (כ 5-10% מהמשתמשים הגברים) או לחלופין בטקסטורה שונה.
2. בלי קישוטים, כל אלמנט שמופיע על המסך הוא בעל משמעות.
3. אותיות ומספרים גדולים הם יפים אבל יש לעשות בהם שימוש רק אם יש צורך אמיתי בכך (הקפידו לבדוק שהם אינם מעוותים את ההירארכיה במסך).
4. שימוש באנימציות
אנימציות יכולות לשמש כגורם מסייע בויזואליזציה של מידע כאשר משתמשים בהן בצורה מושכלת, אך יכולות להיות גורם מפריע אם משתמשים בהן בצורה לא נכונה, במיוחד בשימוש קבוע.
בעיצוב הנוכחי, השתמשנו באנימציה על מנת לסייע למשתמש להבין את הקשר בין האוביקט שעליו נמצא העכבר לבין תיבת המידע הנפתחת ממנו

דוגמא בעייתית להצגת מידע ניתן לראות בגרף הבא:

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

‎דוגמא נוספת לבעייתיות בהצגת המידע:

‎כל העיגולים נראים פחות או יותר אותו הדבר, קשה מאוד להבחין בהבדלים בין 67% ובין 73% אם לא קוראים את המספרים.

[sep]

‎דוגמא נכונה להצגת מידע:

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

[sep]

‎והנה עוד כמה דוגמאות מהרשת‫…‬ סתם בשביל הכיף:

The History of the iPod
The History of the iPod

[sep]

WTF is HTML5
WTF is HTML5

[sep]

The Tablet Makeover
The Tablet Makeover

[sep]

The Modern Listener's Guide
The Modern Listener's Guide

[sep]

37min Bus Ride by Lemongraphic
37min Bus Ride by Lemongraphic

[sep]

Nonsensical Infographic No.2 by Chad Hagen
Nonsensical Infographic No.2 by Chad Hagen

[sep]

‎ולסיום, הנה שני אתרים מעולים להשראה לעיצוב ויזואליזצית מידע:
good.is/infographics
infosthetics.com/archives/infographic

 

הפוסט נכתב על ידי:

מתוך לוח הדרושים שלנו:
סגירת תפריט

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

יש למלא את הטופס הבא על מנת לשריין מקום באירוע הקרוב.


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

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


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

×

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: