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

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

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

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


מפת הרכבות של ה london tube כיום.

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

Web Trends

אינפוגרפיקה מושקעת מאוד המסכמת את 333 הדומיינים המשפיעים ביותר ברשת האינרנט לשנת 2008 מבית IA.

Musicovery

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

Air New Zealand

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

NewMap

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

NewYorkTimes

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

HeatMaps

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

Virtual Water poster

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

אינפוגרפיקה כחלק מתהליך האפיון והעיצוב

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

אינפוגרפיקה לשיפור הסריקות

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

דוגמה נוספת אפשר למצוא באתר digg המשתמש בקוביות צבעוניות ובטקסט מוגדל כדי לאפשר סריקה מהירה של כמות ההצבעות של כל פריט באתר.

אדום זה רע

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

שימוש בגרפים

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


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

פופולארי וגדול

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


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

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



6 תגובות לפוסט ”דברו בצורות ובצבעים“

  1. יש תחום כזה גם בארכיטקטורה, הוא נקרא data generated architecture.
    נהנתי לקרוא, כמו תמיד.

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

  3. הזכרת לי נשכחות עם כל העניין של הטיוב בהתחלה……

    יש לכם אחלה של אתר באמת

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

  5. מעניין מאד. תודה רבה.

    יש לך את זה במתן הרצאות מרתקות, בהעברת הידע שלך.
    כיף שאתה משתף ומלמד את כולנו.

    תודה.

  6. תודה רבה גילי.

    מאת ליאור יאיר

לכתוב תגובה

(חובה לפחות לרשום שם!!!)

(...אף אחד לא יראה את זה)

(תפרסם/י את עצמך! שידעו מאיפה את/ה!)