מאמר ותיק (מ 2004) שכתבתי בשיתוף עם רייצ'ל ענבר.

מהם אייקונים?

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

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

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

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

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

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

ישנן מטאפורות שהפכו לחלק מהתרבות של כולנו:

• זכוכית מגדלת לחיפוש
• איור של מדפסת להדפסה
• דיסקט לשמירה (מי מאיתנו עוד משתמש באביזר הזה?)

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

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

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

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

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

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

• הדפסה

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

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


מקורות: