ההיסטוריה של עיצוב ממשקי משתמש מאופיינת בהתקדמות הדרגתית לכיוון ריאליסטי יותר. בזמן שמחשבים, גאדג'טים וכמובן אתרי אינטרנט הופכים מהירים, חזקים ומורכבים יותר, מעצבי ממשקי משתמש מעמיקים ומרחיבים את השימוש בכלים שיוצרים אפקט ריאליסטי יותר, כגון: אפקטים היוצרים תחושת עומק ותלת מימד, משחקי צבע, רקעים והצללות, אפקטים של שקיפויות ועוד. חלק מהכלים האלו תורמים רבות לשמישות (Usability), לדוגמה אנחנו יודעים לאיזו חלונית או פריט מידע אנחנו צריכים להתייחס כאשר במעבר עכבר (Mouse Over) מופיע רקע או הדגשה מסוימת. אך לא בכל סיטואציה השימוש באלמנטים עיצוביים מהסוג שציינתי באמת אפקטיביים ותורמים לאיכות השמישות.
ממשקי משתמש עמוסים כיום בסמלים גראפיים שמטרתם היחידה היא לייצג רעיון. איכות הסמלים הגראפיים נמדדת במהירות ההבנה של הרעיון אותו הוא מייצג, ז"א את רמת האינטואיטיביות שלו, לדוגמה: האייקון של הבית שנמצא על שולחן העבודה או בממשקים רבים אינו מייצג באמת בית אלא כפתור שלחיצה עליו תעביר את המשתמש לעמוד הבית (או לזירת התוכן המרכזית). סימן הכפפה שמופיע כשאנחנו מעבירים את העכבר על פריט תוכן לא מייצג פריט אופנה אלא מסמל קישור לאזור תוכן מקביל (היפר קישור). אם כן, עיצוב ממשקים המתבססים על פרטים מדוייקים וריאליסטיים יכולים דווקא לפגוע באיכות השמישות.
…………………………………………
התבננו למשל בתמונה הבאה:

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

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

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

……………………………………………………

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

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

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

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

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

About עומר מילויצקי

אסטרטגיה דיגיטלית שיווקית רב ערוצית | הערכים המקצועיים שמנחים אותי: Smart, Simple & Social.