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

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

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

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

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

בגלל הצורך להבין את עבודת המשתמש בממשק, חוקרי השמישות (usability) של ממשקי המשתמש בוחנים את אופני התפיסה והעדפות התפיסה של משתמשים לגבי מרחב הממשק ומרכיביו. ממחקרים אלה עולה שמשתמשים מעדיפים בדרך כלל לתפוס את הממשק כיחידה שלמה, ורק אחר כך להתמקד בפרטים המרכיבים אותו (הצלמיות) (Shneiderman, 1998; Dillon, 2002). ממצא זה עולה בקנה אחד עם ממצאים מתחום הפסיכולוגיה הקוגניטיבית, שלפיהם יש שני אופנים לתפיסת המרחב: תפיסה גלובלית ותפיסה לוקלית. בראשונה קולטים קודם כל את התבנית השלמה על חשבון החלקים המרכיבים אותה, ובשנייה תופסים את החלקים תחילה ורק אחר כך את השלם. מסתבר שרוב האנשים מבטאים העדפה לתפיסה גלובלית. הדבר הוכח בסדרת ניסויים שערך נבון (Navon, 1977), ומומחש באיור 11.

באיור 11א רואים צורת T המורכבת מאותיות קטנות בצורת L. אצל רוב המתבוננים יש העדפה לקליטת הצורה השלמה (T) לפני חלקיה (L) – כלומר, לתפיסה גלובלית. באיור 11ב, המספר 18 מורכב מבננות ותותים. מה תפסתם קודם? את הדמות 18 או את מרכיביה (תותים ובננות)?

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

תאוריית גילוי האותות: על המשתמש כבלש

תאוריית גילוי האותות והמחקרים שבאו בעקבותיה מלמדים שאיתורו של אות מתוך רעש יעיל יותר (מהיר ועם פחות איתורים שגויים) ככל שהאות מובחן משאר הגירויים (הרעש) (Macmillan & Creelman, 1991).

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

מודלים מנטליים מסייעים בתפיסת מבנה הממשק

כדי שיוכל לעבוד ביעילות עם תוכנה או בכל סביבה דיגיטלית אחרת, צריך שיהיה למשתמש מודל מנטלי יעיל של מבנה הממשק המפעיל אותה, מודל שיענה לשאלות: מהו הרציונל של העיצוב החזותי? מהן יחידות המבנה הבסיסיות בממשק? היכן הן מצויות? כיצד תגיב המערכת על פעולות שונות שיבצע המשתמש בממשק? כיצד הוא יכול לשלוט בממשק ולשנותו לצרכיו? מחקריהם של דילון (Dillon, (2002 ושל ג'ונסן והנינג (Jonassen & Henning, 1999) הראו שיש יחס ישר בין רמת המודל המנטלי שיש למשתמשים לגבי הממשק לבין יעילות עבודתם עם סביבת העבודה. מהו המודל המנטלי שיש לך לגבי מערכת עיבוד התמלילים שאתה עובד אתה?

גשטלט: החוקיות שבתפיסה החזותית

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

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

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

 

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

• דמות ורקע (figure and ground): עקרון הדמות והרקע הוא הבסיסי בעקרונות הגשטלט. לפיו קיימת נטייה לתפוס את החלל המרחבי כעשוי מדמויות הנתונות על רקע, וכשמתמקדים בדמות, מתעלמים מהרקע. הבה נדגים זאת בעזרת איור 13, שבו הדמות והרקע מתחלפים: באיור 13א, אם מתמקדים באגרטל כ"דמות", לא רואים שהרקע עשוי בעצם משני דיוקנים. לעומת זאת, אם מתמקדים בדיוקנים, נהפך האגרטל לרקע ואי אפשר לזהותו כעצם. גם איור 13ב מדגים את הקושי להחליף בין הדמות לרקע: היכולת לזהות את דמותו של וושינגטון מותנית בהתמקדות בו ובהפיכת העץ לרקע. איור 13ג מדגים איך הרקע משפיע על תפיסת הדמות.

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

• סגירות (closure): עקרון הסגירות הוא הנטייה לתפוס חלל התחום על-ידי קווי מִתאר כצורה סגורה, וכשקווי המִתאר אינם רצופים – להשלימם בדמיון כדי לסגור את הצורה ולהפכה ל"נכונה". למשל, באיור 15, המשולש והריבוע ה"ריקים" אינם מצוירים באמת; הם נוצרו מסגירת החלל התחום בין קווי הגבול הצבעוניים על-ידי התבנית התפיסתית שלכם, הנוטה לסגור צורות פתוחות ובכך לצקת בהן משמעות. עקרון הסגירות מתקשר להנחת התיקונים (Pragnanz) של הגשטלט: הוא גורם לנו "לתקן" צורות על-ידי סגירתן והפיכתן ל"צורות טובות" מקובלות ומוכרות (משולש, מרובע, מגן דוד), התואמות את תבניות התפיסה שלנו.
  
  איור 15. עקרון הסגירות

  
  

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

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

• סמיכות (proximity): לפי עקרון הסמיכות, יש נטייה לתפוס עצמים המצויים בסמיכות זה לזה כשייכים או קשורים זה לזה. לדוגמה, כשרואים גבר, אשה וילד יושבים ביחד סביב השולחן, מניחים שהם שייכים למשפחה אחת. הקרבה הפיזית של העצמים נתפסת כקרבה סמנטית – קרבה של משמעות משותפת. הבה נדגים זאת באיור 16: כשהריבועים מצויים במרחקים שווים זה מזה, אנו רואים דגם פיזור אחיד ביניהם (איור 16א), אבל כשמצמצמים את המרחק האנכי שבין הריבועים, נוצר דגם של טורים (איור 16ב) וכשמצמצמים את המרחק האופקי ביניהם – נוצר דגם של שורות (איור 16ג). המילים "שורות" או "טורים" מבטאות את הקרבה הסמנטית שהסמיכות יצרה בין הריבועים.
  
  איור 16. עקרון הסמיכות

  

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

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

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

  
  

ביישום של עקרון הדמיון בעיצוב ממשקים יש ביטוי לשני אופני הקידוד הנפוצים בהצגת מידע: קידוד לפי צבע וקידוד לפי צורה. בפרק ייצוגי ידע בממשק הבאנו ממצאים שלפיהם רבות מהפעולות בממשק מקוּדָדות בתפיסת המשתמש לפי צורה או לפי צבע. ממשק יעיל מנצל צבע וצורה כדי ליצור תבניות תפיסתיות לגבי פעולות שונות בממשק. לדוגמה, התבוננו בדף הבית של אוניברסיטת טנסי (איור 20). שימו לב שהפונקציות השונות בממשק נצבעו בצבעים שונים: כל הנושאים השייכים לאותו תפקוד מופיעים באותו צבע (למשל, הרשמה בצבע אחד, מידע לסטודנט בצבע אחר).

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