דבק, נייר ומספריים – איך לא לעצב אייקונים בממשק?

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

תמונה שווה 1000 מילים… אלא אם זה אייקון

אייקונים, מתברר, הם לא תמיד הדרך הכי יעילה להעביר למשתמש מידע, למרות שיש להם יתרונות רבים:

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

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

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

בחזרה למקורות

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

הסימנים מחולקים לשלושה סוגים

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

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

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

אייקונים מוסכמים

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

מילה אחת שווה 1000 תמונות

לפעמים מילה אחת שווה 1000 תמונות. כך גורס ברוס טוגנזיני. טוגזיני, מחלוצי תחום חוויית משתמש ומהראשונים שעסקו בתחום ב-Apple, טוען שבמידה ואנחנו לא בונים על תהליך למידה ממושך של אייקונים לא מוכרים, לפעמים הפתרון היעיל ביותר הוא להוסיף תווית ליד האייקון. אמנם זה פתרון לא אופטימלי מבחינה אסתטית, אבל הוא פונקציונלי מאוד – האייקון עצמו יאפשר זיהוי מהיר ואילו הטקסט יאפשר היכרות עם אייקון לא מוכר.
מחקר שמישות של חברת User Testing בדק קבוצה של 35 משתמשים שניסו לנחש מה יקרה בעקבות לחיצה על אייקון. קבוצת האייקונים שנבחרה הכילה כ-190 אייקונים, חלקם מוכרים וחלקם ייחודיים. התוצאות ברורות:

• כאשר לאייקונים הוצמדה תווית, המשתמשים הצליחו לנחש בהצלחה מה יקרה, ב-88% מהמקרים.
• כאשר האייקונים הוצגו ללא תווית, המשתמשים הצליחו ב-60% מהניסיונות בלבד.
• בבדיקה של אייקונים ייחודיים שהוצגו ללא תווית – המספר צנח ל34%!

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

מספר המלצות לשימוש באייקונים

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

 

ומה לגבי ה-"גזור והעתק" באנדרואיד?

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