3יחידה שתמש: שפת התקשורת הדיגיטלית ממשקי מ

תוכן העניינים

2 מבוא: ממשק המשתמש - ייצוג חזותי של סביבות עבודה3.1

4 מהו ממשק משתמש?3.2

5 ממשק ואדם3.2.1

8 הממשק כשפת תקשורת3.3

10 ייצוגי ידע בממשק3.4

15 עיצוב ממשקים ותפיסת המרחב החזותי3.5

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

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

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

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

25 כללים בעיצוב ממשקי משתמש3.6

26 כללי יסוד3.6.1

32 כללים בארגון מרחבי3.6.2

39 סוגים של ממשקי משתמש3.7

39 ממשקי מילוי טופס3.7.1

40 ממשקים גרפיים – מתחביר )סינטקס( למשמעות )סמנטיקה(3.7.2

43 מגמות בהתפתחות של ממשקי מחשב3.8

45 סיכום3.9

46רשימת קריאה

1

ייצוג חזותי של סביבות-מבוא: ממשק המשתמש 3.1עבודה

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

לגלות את הכפתור המתאים ללחיצה?

של מעבד התמלילים שלך כי לאתפריט העזרהכמה פעמים נאלצת לקרוא ב

הצלחת להבין כיצד משנים את הגופן )פונט( או את כיוון הקריאה?

כמה פעמים "נתקעת" באמצע העבודה עם סביבת למידה ממוחשבת כי פשוט

לא הבנת איך להפעיל אותה?

ת העבודה )מכשיר אולסביבבתקשורת שבין האדם דוגמאות אלה מתארות בעיות

, המקשרת בין האדם לתוכנה או למכשיר, נקראתסביבה זותוכנה( שבה הוא עובד.

בין המשתמש,השקהה , אומשום שהיא אזור המגע (user interface)ממשק משתמש

1.הוא עובד בהשלסביבה

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

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

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

תנאי ליכולתם של לומדים להתמודד עם תהליכי למידה מורכבים, ולכן יש חשיבות

רבה להבנת העקרונות המנחים עיצוב זה.

נחקור את ממשקי המשתמש זו לימוד שפת התקשורת המרכזיתבהיותם ביחידת

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

ובניתוחםבעיצוב ממשקי משתמש תחילה. מהו נלמד )ממשק המשתמש ל- לינק

נדון בלאחר מכן. (1.2 המודרניתממשק כשפת התקשורת , ונכיר את(1.3)לינק ל-

) בממשק ייצוג ידע האופנים השונים ל עיצוב ממשקים ותפיסת. בפרק "(1.4לינק ל-

)"המרחב החזותי בהקשר של ממשקים התפיסה החזותיתעלנדון בתאוריות לינק( ,

משתמש" ובפרק ממשקי בעיצוב מ()לינק" כללים נגזור תאוריות כלליםאותן

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

" )הפרק משתמש ממשקי לסיווג מערכת עם בהיכרות שלביחידה נפוצים סוגים

)לינק"(ממשקי משתמש , ובניתוח המגמות העיקריות בהתפתחות עולם הממשקים(

( )לינק"(.מגמות בהתפתחות ממשקי משתמשבעשורים האחרונים )הפרק "

כל הלינקים האלה הם לראשי פרקים בתוך המסמך הזה.

2

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

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

העקרונות והתובנות שלכם בניתוח ממשקי משתמש.

תרגיל חימוםבממשק נתבונן הבה הממשקים, לעולם "נצלול" תוכנההבטרם של משתמש

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

התוכנה בספרPaintשתפתח את המצויה )עליךAccessoriesה יי, שלך שבמחשב

, או בעברית: התחל, תוכניות,Start-Programs-Accessories-Paintללכת בנתיב הבא:

צייר( התוכנה. ה .עזרים, של הראשי במסך פשוטה,היא Paintתבונן ציור תוכנת

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

.1 איור כמו שמראה ,ירוק ושמך כתוב על חזיתו

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

לביצוע המטלה.

חומר למחשבה

ההצגה שלמה באופן .1איור , המוצג בPaint התבונן בממשק המשתמש של התוכנה

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

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

.הקורס

את ביצוע הציור:שהקלו בשורות הבאות מוצגים כמה גורמים אפשריים

( לי" מזכיר déjà"זה vu :) העבודה לךסביבת ביטחוןתתחוש הקנתה

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

ו- Word אחרות, כמו Officeתוכנות PowerPoint,ש אתן התרגלת לעבוד אולי

בעבר.

:הצלמיותאחידות( icons)מצוי ההפעלה והוראות -ות קבועים במקומות

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

לסגירת הקובץXההוראה לפתיחת קובץ מופיעה בצד שמאל למעלה; הסימן

מופיע בצד ימין למעלה.

3

:מפוזרןהצלמיות והוראות ההפעלה אינסדר בפיזור המרחבי על המסךות

מאורגנאלאסדר אי-ב העין לקלוט את הסביבהבשורות, מה שמקל ות על

ולסרוק אותה.

:בהם מרוכזותש אזורים מוגדרים שלושה יש בסביבת העבודה ריכוז בגושים

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

בו בוחרים אתשכתיבה; בתחתית המסך יש סרגל בצלמיות העוסקות בציור ו

הצבעים עבור הציורים או הטקסט, ואילו בראש המסך מופיע גוש של הוראות

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

עם התוכנה.ללמוד ולהבין כיצד עליו לעבוד ומסייע לוהמשתמש,

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

רמזים חזותיים ה"מדברים"הם. הייצוגים (icons)צלמיות על-ידי גרפי-חזותי

עיפרון מייצגת פעולת וברורה למשתמש. למשל: צלמית של בשפה טבעית

וים ישרים, וצלמית של קו עקלתוןוציור; צלמית של קו ישר מייצגת ציור של ק

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

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

בעבודה עם התוכנה.

:קיצורי דרךהןהצלמיות קיצורי דרך לבצעאפשרלרוב הפעולות שבתוכנה.

יעל בכך את העבודה.יפעולות אלה בעזרת לחיצה על הצלמית, ולפשט ול

מרכיביםסביבת העבודה מכילה מעט מאוד בכל רגע נתון,: מיעוט פרטים,

. בשילוב התקשורת שבולזכור את האפשרויותלהתמצא בממשק ומה שמקל

החזותית היעילה, הדבר מסייע לרכוש במהירות שליטה בתוכנה.

:ועזרה "מסייעת" למשתמש הנבוך משוב במהלך עבודתוסביבת העבודה

מצביעיםכש , רמזים ומשובים מילוליים, צליליים או חזותיים. למשלבאמצעות

בועת טקסט המסבירה את פשרה; מבצעים פעולהכשעל צלמית, מופיעה

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

נושא.

מהו ממשק משתמש? 3.2זהו האזור הואממשק המשתמש ה"מעטפת התפעולית" של סביבת העבודה. בוש

סביבת עבודה כלשהי.שהוא עשוי להזדקק לו כדי להפעיל המידעמוצג למשתמש כל

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

לנהג מידע קריטיהוא ממציא הממשק שבין הנהג למכונית:במכונית הוא השעונים ש

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

4

מידע לגבי נתונים המעניינים את הנהג, כגון כיוונים,יש בו בין הנהג לכביש; -ממשק

. ושירותים חשוביםמרחקים

במקרה של תוכנות מחשב, ממשק המשתמש הוא אוסף של פקודות, צלמיות וקיצורי

מסך ומאפשר למשתמש להפעיל את התוכנה ביעילות ובמהירות.על הדרך, המוצג

המשמש , בסביבת העבודההגלומות הרבותזהו ייצוג חזותי ממוזער של האפשרויות

"מתווך" לתוכנה,מעין המשתמש בין עבודהאו סביבות של להפיכתן אמצעי

את להבין למשתמש לאפשר אמור טוב למשתמש. ממשק וידידותיות לשימושיות

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

למידה באמצעות עשייהקריאה, הממשק מבוסס על כדי תוך באמצעותם מתרחשת (learning by doing)רא( הרחבה אצל ו Dillon, 2002גישה זו 4-3' מ, ע .)עולה בקנה

גישות1.1.2)לינק לראש הפרק 1 יחידה ו )רא ת הקונסטרוקטיביסטי ה גיש ה אחד עם

ביחידה ההוראה לעיצוב ובמטלות ש הטוענת (,(1תאורטיות בכלל, עםבלמידה

היבטים יישומיים בפרט, יש יתרון ללמידה המבוססת על פתרון בעיות אותנטיות על

ליחידההפני למידה פסיבית )ממש כפי שתרגיל הפתיחה מנותקת מהקשר מעשי

פעילה הואהנוכחית התנסות כפיהממחישה ואכן, כולה(. ביחידה הלמידה את

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

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

ב עושים שמשתמשים שלובשימוש העזרה עצמן ה תפריט ,Shneiderman)תוכנות

1998).

חומר למחשבהבביתשל התבונן בממשק המשתמש שונים מיקרוגל,ךמכשירים גז, כירת וידאו, :

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

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

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

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

, מכשירי וידאו,palm pilot , מחשבי כף-יד כמולסביבות עבודה מתוחכמות )מחשבים

לוחות שעונים של מכוניות(, המחייבות אותם להשיג במהירות שליטה מלאה

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

5

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

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

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

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

. קל יחסית ללמוד אותןחשמלית מהסוג הישן, הן פעולות ש

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

מפעיל , של המשתמש. למשל"ואפילו "נשגבים מבינתומופשטים מאוד, קשים להבנה,

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

בקרה מרחוק, המקלות אולישל בעזרת מערכות ממוחשבות מפעילים מנופיםכיום

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

המפעיל לוחץ על כפתור במטה נאס"א ומפעיל מנוף זעיר הלוקח דוגמאות סלע על פני

מעשה קסמים ממש!!- הירח, במרחק מיליוני ק"מ

משתמשים רבים רתיעהב עוררוהתחכום והמורכבות של סביבות העבודה המודרניות

מסגרת יעילה שתסייעלשמש(. ממשקי המשתמש אמורים Lazar et al., 2003מפניהן )

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

. מרביתיעילותב ו הקצר ביותרבזמן

סביבת העבודה למספר מצומצם של ייצוגיםלמזער אתהאתגר בעיצוב ממשק הוא

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

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

אפשר לראות.ולמשתמש המנוסה לשפר את ביצועיומלאה בסביבת העבודה,

( האמור לשרת את משתמשיו באופן מיטבי.productבממשק המשתמש "מוצר" )

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

מדווח שרבים ממוצרי הצריכה(Chiang, 2001)מעצבי מוצרי צריכה שונים. צאנג

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

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

על עיצוב. בהיותו סביבת עבודה המופעלת על-ידי בני אדם, הפעלת סביבת העבודה

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

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

הוא האם מערכת הקוגניטיבית של המשתמש?ל מותאםהאם הממשק

בשפת תקשורת המובנת למשתמש? האם היא מותאמת לגילו? האםמשתמש

6

נעשה שימוש במונחים ובמטפורות המסייעים למשתמש להבין את הממשק

ולהשיג בו שליטה מהירה?

עיצוב הממשק ליכולותיו הפיסיות של המשתמש?מותאםהאם הממשק

לעשות בויוכל משתמש כדי שהחייב להתחשב ביכולת הפיסית האנושית,

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

ורמת הדיוק הנדרשת להפעלת הציוד ההיקפי, כגון העכבר,מסוגלת לזהות,

על הבעיותחשבו )צריכה להתאים לזריזות אצבעותיו של המשתמש

התפעוליות שיצרו ממשקי המשתמש בחלק מהטלפונים הסלולריים הזעירים,

על הספרות(.מפריעים ללחיצהבהם המקשים הזעירים ש

-עלתרבותי של המשתמש?ההאם יש בממשק ביטוי לרקע הגאוגרפי

התרבותיים והאתניים שהמשתמש מביאבמטעניםמעצבי הממשק להתחשב

סורקבאיזה כיוון האדם בחשבון להביאעמו אל סביבת העבודה. למשל, יש

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

כן יש את ממשק המשתמש בכיוונים שונים בגלל הרגלי הקריאה שלהם.

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

מידות ומשקלות.

כרטיס לחו"להזמן –תרגיל: רקע תרבותי כרטיסי טיסה הזמן לעצמך של אמזוןבאתר האינטרנט ליציאה בתאריך 2, 2.11.02

. כיצד רשמת את התאריך?12.3.02ולחזרה בתאריך

p1

לב שים השונותמוסכמותהבגלל ש רישום אופן של היציאהיובןתאריך, ה תאריך

כ-2-כבארצות-הברית בישראל ואילו בנובמבר, בפברואר!!! 11 יוםזהו של הבדל

שיש )ואכן, בו להתחשבולילה, המשתמש של ההקלדה לבשיםבעיצוב ממשק

(.MM/DD/YYבממשק מודגם פורמט ההקלדה המחייב: ש

מחקריםהאם יש בעיצוב הממשק התייחסות להעדפות אישיות של המשתמש?

יכולתם של משתמשים לעבוד עם ממשקים ותוכנות מושפעת במידהש מעידיםרבים

;Nielsen, 1993רבה מאישיותם ומשלל העמדות שהם מביאים עמם לסביבת העבודה )

7

Shneiderman, 1998 מדיום טכנולוגי מדי המנוכרמ חוששיםמנוסים לא-(. משתמשים

לעולם ההתייחסות שלהם. הדבר מתבטא באמירות כמו "מה יקרה אם אבצע בחירה

,.Lazar et al ו )רא"ממנו יצאתי?ששגויה בממשק? לאן אגיע? איך אדע לחזור למקום

(. אפילו בקרב "פריקים" של מחשב, שאינם מביעים בדרך כלל חשש משימוש2003

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

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

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

ניכרת בעיצוב ממשקי המשתמש ומהיר של משימות מקצועיות. בשנים האחרונות

מוצג 3 איור למשל, ב. ממשקים המיועדים לאוכלוסיות מוגדרותלעצבמגמה ברורה

לילדיםהדמיה ממוחשבת בגיאולוגיה המיועדתהממשק של ( message in a fossil.)

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

ילדים.-משתמשים

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

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

וה לגיליםאחרתלילדים התאמה מבטא הממשקים של בעיצובם מה למבוגרים.

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

ארגון מרחבי שלהם.ה והמרכיבים, כמות סגנון צילומי(

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

מגדרם. הדבר מחייב את מעצבי הממשק לשאול את עצמם אם משובעל-פיאליהם

נשים בגלל השימושב פוגע שברצונך למחוק את הקובץ?" אינו אתה בטוחכגון "האם

זה. למשל, מחקרהממשק יש חשיבות רבה בהקשר של הבמין זכר. אפילו למינוח

עלול לתיאור פעולות עם תוכנת מחשב ABORTשימוש במונחים כמו שהראה כי

מינולעתים מקבל . (Huff & Cooper, 1987 )נשיםבקרב שלילית, במיוחד לעורר תגובה

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

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

מרכיב נכבד בצבא. באותה מידה, אתר האופנה הואהן שחיילות -על-פילחלוטין אף

שהוא פונה גם לגברים... -על-פי"נשי" לחלוטין אף

: התאמת ממשק לאדםתרגיל

8

וענה באופן מידי-אינטואיטיבי:6איור התבונן ב יש ל את הכוסהעמידהיכן לדעתך

3 המים שבתמונה כדי לקבל מים קרים?במתקן

הממשק כשפת תקשורת 3.3

"שימוש בראייה לשםמבוסס על העיקרון המכונהממשקי המשתמש עיצובם של

אחתש"תמונה עיקרון זה מניח (. using vision to think( )Mullet & Sano, 1995חשיבה" )

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

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

לבצע בממשק, ומייעלת את עבודת המשתמש בזכותשאפשרלייצוג כל הפעולות

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

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

של מילים ומשפטים, כתובהרגילה: בשפה 2איור בעזרת שלט הדרכים המופיע ב

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

שעות ביממה, מוכרת סולר מוזל ודלק מסוג מסוים, ויש בה מתקן24הפתוחה

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

להבין את המסרים החזותיים הטמונים בשלט?הנחוץ לו כדיהעין

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

תקשורת חזותית יעילה בין המשתמש לסביבה זו.ליצור ומיועדבסביבת העבודה,

בממשקי מחשב, התקשורת בממשק מתבצעת בעזרת ייצוגים גרפיים )צלמיות -

icons לבצע בהם. למשל, הצלמית שאפשר(, המייצגים פעולות ,p2 מייצגת את

מעידיםפעולת ההדפסה, ובחירתה תוביל לשליחת קובץ למדפסת. מחקרים

שהשימוש בצלמיות בממשק מקצר במידה רבה הן את הזמן הנדרש למשתמש חדש

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

(. Margono & Shneiderman, 1987פעולות בתוכנה )

רבים לייצוג פעולות בממשק או לשיפורבייצוגים מטפוריים ממשקי משתמש נעזרים

מונח "שולחןה היאבממשק מוצלחת מטפורה להבנת מהותו של הממשק. דוגמה

דרך לתוכנותהבה מצויים קיצורי ש הסביבה בממשק המתאר את (,(desktopעבודה" ה

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

9

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

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

עליוושעליו מצויים כלי העבודה היומיומיים שלנו שאותו מקום - העבודה הפיזי שלנו

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

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

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

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

return-שקדם ל( enter )מקורו במונח,בממשק carriage return כתיבה,ה במכונות

במעבד תמלילים אין צורך לפתוח אבל התחלת שורה חדשה. הפעולה של המציין את

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

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

ערכה את אחד המחקרים החשובים ביותר שבחנו את ,((Smilowitz, 2001 סמילוביץ

אפקט השימוש במטפורות על טיב עבודת המשתמש בממשק. תוצאות המחקר

הצביעו על שיפור משמעותי בתקשורת החזותית ובביצועי המשתמשים בתוכנות

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

הבנה של מבנה התוכנה. לעומת זאת, שימושבבזכירה ווגם עם הממשק, יםהמשתמש

במטפורות חלשות היה חסר השפעה, או אף הוביל לירידה בביצועי המשתמשים.

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

יעיל. העזר בממצאי מחקרהלא-במטפורה לשיפור הבנת מבנה הממשק. מצא שימוש

והסבר את הקריטריונים לקביעת יעילותה של מטפורה בממשק. ,של סמילוביץ

במידה רבה עלהיא תמונתית-חזותית בעיקרה, ונשענתתקשורת בממשק ה כיום,

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

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

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

)חוקי הניסוח(את המשתמש לזכור בעל-פה את תחבירןאפוא ממשקי מחשב חייבה

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

עם. :Copy A:*.* B, היה על המשתמש להקליד במדויק את הפקודה: B לכונן Aבכונן

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

10

(, התאפשר לראשונה לשלב בממשק קיצורי דרך לפעולות בצורתחלונותההפעלה

ייעלו את עבודת המשתמש במידה רבה. מגמה זו הגיעה לשיאה עםשייצוגים גרפיים,

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

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

מאפשרת בממשקים. מגמה זו המשמשתבשפת התקשורת החזותית האחדה

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

":Office ומשפחה הולכת וגדלה של תוכנות שממשקיהן "תואמי Office תוכנות הןלכך

ילמד, ומי שהכיר את שתיהן, PowerPoint, קל לו ללמוד את Wordמי שהכיר את

ממשקי, המצביע על הדמיון במבנה היסוד של7איור . הדבר מומחש בExcel בקלות

Word-ו PowerPointיה י היא תוכנה לעיבוד תמלילים, והשנהראשונה ש-על-פי, אף-

תוכנה לבניית מצגות.

ייצוגי ידע בממשק 3.4

בעצםהואסביבת עבודה המבוססת על תקשורת חזותית, ממשק המשתמש בהיותו

שבממשק הם סמלים המייצגים אתצלמיות: הsymbol system)סמלים )מערכת של

ניסח סלומון (4symbol systems theory) את תאוריית מערכות הסמליםידע הטמון בו.ה

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

Salomon, 1979, 1981; Salomon et(, על תהליכי למידה )Sesame Streetיזיה )כמו ווטל

al., 1991 של ייצוגים חזותייםהשפעתם(. בין השאר, התאוריה מנסה להסביר את

ובכך מקצרים את ביעילות מייצגים תוכן בעובדה שהםבמדיה על תהליכי רכישת ידע

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

יפרש מסרים חזותייםכיצדעמו הלומד לסביבת העבודה קובעת במידה רבה

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

יתאימו ליכולתו הקוגניטיבית של המשתמש ולסכמות שיש לו לגבי סביבת העבודה

לבצע בה. שאפשרופעולות שונות

עליו סמלו סל ניירותשל ציור מיוצג בממשקים רבים על-ידיחזור ילמשל, סל המ

סכמה שיש למשתמשה שכן היא תואמת את חזקה מטפורה זוהיp3 .(חזור )יהמ

עדיין קבצים שאין בהם עוד צורך, אך משליכיםאליו שלגבי המקום בסביבת העבודה

גרפי מאפשרבייצוג . השימוש מתחרטים אותם( אםלמחזרלשלפם משם ) אפשר

11

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

תגובה לגירוי. איכותהב המשתמש, ומפעיל שרשרת פעולות אינטואיטיביות שלהידע

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

. יכול לפרש אותוהמשתמשוהאינטואיטיביות שבה ולפי מידת הטבעיות סמל,בכל

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

. מקודדת מהןתכל אחשאת האינטואיציה שלך ובדוק את יכולתך לפענח את הפעולות

הצבע על כל צלמית ובדוק את עצמך. נסה להסביר מה בעיצובה של כל צלמית עשה

( עבורך.-מובנתאותה מובנת )או לא

p4 p5 p6 p7 p8

5 6 7 8 9

)פתקית( לכל אייקוןtooltipאורית: כאן )למעלה( צריך

)למשל, תמונתיים סמלים הם משני סוגים: החזותיים של הפעולות בממשק הסמלים

מוסכמיםסמליםו למילוי בצבע צהוב"(, מייצג את ההוראה "הקש עלי p9 הסמל

מציין B הסימן ; כיוון הכתיבהמציין את p10 )למשל, הסימןלא-תמונתיים

התמונתי הוא בהיותוהסמליתרונו של (.[boldface] אות עבהכתיבה ב

הסמלים בשפה. חסרונם של ובלתי-תלויטבעי-אינטואיטיבי, אוניברסלי יחסית

המוסכמים הלא-תמונתיים הוא בהיותם מופשטים ופחות אינטואיטיביים, מה שמקשה

שפה )למשל, צריךבתרבות וים ב תלוירבים מהםעל המשתמש לזכור את משמעותם.

(. בדרך כלל משתמשים בהםUו- B הסמליםלדעת אנגלית כדי להבין את משמעות

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

חודרים לעולם הממשקים סימנים מוסכמים שמקורם בממשקי מכשירים ומכונות,

(, העושה שימוש בממשק9איור )Windows של CD Playerכדוגמת ממשק ה-

המשתמש של מכשירי סטראו ביתיים.

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

10ב. כיצד היית מתקן את השגיאות?10השגיאות בעיצוב הצלמיות באיור

12

אמצעותמיוצג בו הידע ב, המשתמשתפיסת הממשק על-ידי במטרה לייעל את

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

את מספר הטעויות שהוא עושה בעבודה.ולמשתמש

תהליך של אחסון מידע בזיכרון לפי קודים המצויים בהתאמה הוא( encoding) קידוד

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

אסוציאטיבית בעת הצורך, ובכך הוא מייעל ומזרז את שליפת המידע בעקבות הפעלת

גרפיים ייצוגים באמצעותבעיקר מקודדים מידע ממשקי משתמש גירוי רלוונטי.

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

שימוש בסכמה שיש לנו לגבי צבע מסוים לשם כאן נעשה: קידוד לפי צבע

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

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

אפשר", "הכל בסדר", "קדימה", "OK"במשמעות של האסוציאטיבית שלנו

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

בו הצבע האדום מורה "עצור!"שובשלטי הדרכים, כמודגם באיור שלפניך,

והירוק "סע":

p11

להזהיר אתבמטרה לפי צבע בעיקר מקודדים מידעבממשקי משתמש

(. א8איור הפיכות כמו מחיקת קובץ )לא-המשתמש מפני ביצוע פעולות

חומר למחשבה התבונן בקטע הממשק שלפניך, המתריע בפני המשתמש מפני מחיקה שגויה של

צבע? חשוב על הסכמה שלנו לגבי צבעקידוד לפיקובץ. מה השגיאה שנעשתה כאן ב

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

11בצבע במקרה זה?

13

p12

:בקידוד לפי צורה נוצרת אצל המשתמש זיקה אוטומטית בין קידוד לפי צורה

שלט "עצור"הפעולה מסוימת לבין צורה גרפית המייצגת אותה. באיור שלעיל,

במשמעות של הוראההמתומן טבוע כבר במערכת האסוציאטיבית של נהגים

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

המופיעות, )Office )Word, PowerPoint, Excel, הצלמיות של תוכנות מחשב

עיצוב צורני ייחודייש להן(, ב8איורבסרגל הכלים של סביבת "חלונות" )

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

(.multitasking תוכנות )כמהמשתמשים נוהגים לעבוד במקביל עם

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

לבין מקום קבוע בממשק, מהבין הפעולהביצוע פעולה מסוימת, היא ליצור זיקה

כבר,שמקצר את תהליך קבלת ההחלטות של המשתמש בעבודתו. למשל

מצויה בקצה השמאלי של p13, התרגלנו שהצלמית לפתיחת קובץ חדש

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

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

הצלמית בכל פעם במקום אחר?

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

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

לגלות ששגיתם באיות אחד השמות!! כדי לעקוף את הבעיות הנובעות מהכנסת מידע

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

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

עמודהשוליים שלאלה: הגדרת ערך למשתנה )למשל קביעת גודל ה משיטות הבחירה

אפשרויותכמה תאו בחירבחירת אפשרות אחת מבין כמה )כפתורי רדיו( טקסט(,

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

אפשרויות הבחירה בעזרת מספר סופי )וקטן( של בחירות.

: מה לא בסדר כאן?חומר למחשבה

14

בו על המשתמש לציין את מינו. מהי הטעות שנעשתה בעיצובשהתבונן בממשק

12ממשק הבחירה? כיצד היית משפר את עיצוב הממשק?

p14

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

מקובל לוותר על קיצור הדרך, ולדרוש מהמשתמש לכתוב את הפקודה המלאה המורה

היאאינה אינטואיטיבית, זו שיטה ואולם,למערכת לבצע את הפעולה הנדרשת.

והיא מועדת( שלהן, syntaxמחייבת לזכור אוסף רב של פקודות ואת התחביר )

מדויקת של הפקודה. גישה זו הייתה נפוצה עד-לשגיאות רבות הנובעות מהקלדה לא

, טרםDOS ו-CPMאמצע שנות השמונים בממשקי מערכות ההפעלה הישנות מסוג

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

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

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

:DOSלכתוב בסביבת

העתקת כל הקבצים בדיסקט בכונןA לדיסקט בכונן B: Copy A:*.* B:

פרמוט של דיסקט בכונןB: Format B:

ה בשם ייצירת ספריInterface בכונן C: C:\ md c:\interface

תרגיל לזכור פקודותך יכול לזכור בבת אחת? ממה נובע הקושי שלהכמה פקודות כאלה את

לשפר את עיצוב הממשק כך שיסייע בזכירתן?אפשררבות? כיצד

עיצוב ממשקים ותפיסת המרחב החזותי 3.5

15

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

קריטריונים מוחלטים.עםאינטואיטיבי של ערכים אסתטיים, ולא כ"תורה קשיחה"

)למשלבהם נהוגים כללים נוקשים ומוגדריםשלהבדיל מתחומים כמו הנדסת חשמל,

, הנשענים עללגבי עוביו של חוט החשמל המותר לשימוש במערכת חשמל ביתית(

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

מוחלטים באותה מידה, ומותירים למעצב מקום רב לדמיון ויצירתיות. הדבר נובע

והמשתמשים בו. לכן,שלו וממגוון היישומים העיצובמטבעו ה"אמנותי" של תחום

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

חוקים מוחלטים. עקרונות אלה והביסוסמיותר - (heuristics היריסטיקות )מנחים -

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

.לראש הפרק(

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

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

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

אתלצמצםתשובות לשאלות כגון: כיצד הציע יכולים להםמתכנני ממשקים ומעצבי

משתמש לביצוע פעולה בממשק? מהו העיצובל הנחוציםמספר שלבי העבודה

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

לכלול במסך אחד? אפשרכמה ייצוגי ידע

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

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

ת חובהקריא רשימת הקריאה ליחידה.מ( (Dillon, 2002 דילוןלפני שתמשיך, קרא את מאמרו של

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

העיצוב הנגזריםעקרונותממשק ואת העיצוב הכלליים של טוב יותר את העקרונות

מהם.

16

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

של גירויים חזותיים הערוכים במרחב המסך באופןתמורכבערכת מהואהממשק

אפשראפשר למשתמש לאתר בקלות את הפעולה המתבקשת בכל רגע נתון. המ

רבים,גירויים, או מעין "שלם" המורכב מחלקיםכממשק המשתמש את לראות

)קבוצות של צלמיות וצלמיות בודדות(. עבודת המשתמש בממשק היא תהליך מתמיד

הצלמית המייצגת אתששל סריקה, זיהוי והתמקדות: סריקת המרחב לאיתור האזור

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

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

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

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

להגדיר מראשאינו מאפשר להגדיר פעולות שכיחות, אך הוא מאפשר בכך שמתייחד

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

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

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

( בסרגל הכלים, ובאותו זמן נהפך כל הממשק לרקע, והפקודה המבוקשתformatאו

היא העיקר - ה"דמות". ואילו לאחר שבחרנו בפקודה המתאימה )פיסקה(, אנחנו

מתמקדים בממשק חדש - זה של תפריט הפיסקה - ובו העיקר הן הפעולות המדויקות

שיש לבחור, וכל השאר הוא רקע. המשתמש בממשק עובר אפוא הלוך ושוב מהכלל

אל הפרט ומדמות לרקע.

( שלusability )שמישותחוקרי הבגלל הצורך להבין את עבודת המשתמש בממשק,

את אופני התפיסה והעדפות התפיסה של משתמשים לגביממשקי המשתמש בוחנים

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

לתפוס את הממשק כיחידה שלמה, ורק אחר כך להתמקד בפרטים המרכיבים אותו

(. ממצא זה עולה בקנה אחד עםShneiderman, 1998; Dillon, 2002 ))הצלמיות(

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

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

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

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

א11באיור . 11איור (, ומומחש בNavon, 1977 נבון )שערךהדבר הוכח בסדרת ניסויים

. אצל רוב המתבוננים יש העדפהL המורכבת מאותיות קטנות בצורת Tרואים צורת

ב,11. באיור - כלומר, לתפיסה גלובלית(L )חלקיה לפני (T) השלמה הצורה תלקליט

17

( או18 )השלמה קודם? את הדמות ם מורכב מבננות ותותים. מה תפסת18המספר

)תותים ובננות(? מרכיביהאת

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

ךאת הפרטים שבו. האם יש ל- תופס את מבנה הממשק הכללי, וכיצד הכיצד את

העדפה גלובלית או לוקלית?

,Wordבעבודה עם ממשק, למשל של תוכנת מהעדפת התפיסה הגלובלית משתמע ש

שהממשק בנוי מסרגל עליון ומסרגל,המשתמש יזהה קודם את התכונה הגלובלית

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

לתפיסה הלוקלית - לזהות רק אחר כך "יתפנה" .עריכה גרפיתשל פקודות ישהתחתון

עוברמשתמש הבמהלך עבודתו ש מכאן המייצגות כל פעולה. הבודדות הצלמיות את

אפשר ברמה הלוקלית. לסריקה ואיתור ברמה הגלובלית מסריקה ואיתור הלוך ושוב

ומתמקד בו,במרחבמסוים אובייקט מאתר נוף במשקפת, הסורק לדמות זאת לאדם

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

עיצוב המרחבי )ארגון הצלמיות במרחב הממשק( והצורני )צורתה שלנובע שה

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

המוכרים למשתמש, כדי להקל עליו בזיהוי מרכיבי הממשק. עיצוב טוב של ממשק

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

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

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

: על המשתמש כבלשתאוריית גילוי האותות 3.5.2 לדמות את המשתמש בממשק לבלש הסורק בתשומת לב מרחבאפשרכאמור,

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

(signal detection theory( )Macmillan & Creelman, 1991) תאוריית גילוי האותות

גירויים מסוימים מתוך שלל הגירוייםמאתרים בני אדם מסייעת לנו להבין כיצד

, ובה בעת בוחרים להזניח גירויים ומגיבים להם תגובות רצויותבמרחב החזותיש

,העשריםבאותו אופן(. התאוריה פותחה באמצע המאה אליהם )לא להגיב אחרים

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

תגובהמחייבים שמקצתם מגוון רב של גירויים, ישתופעות במצבים ובהתאוריה,

18

הגירוי המחייב תגובה מכונה "אות" או תגובה. מחייבים אינם ומקצתםמסוימת

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

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

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

י שחור ושמו משה. לפניכם עוברים המוני אנשים: גבוהים שחורו שיער,שהוא גבוה

- ונמוכים שאינם שחורי שיער,שאינם שחורי שיער, גבוהים י שיער, נמוכים שחורשיער

אתם מחכים לוש המסוים "רעש", ומקשים עליכם לזהות את האדם כולם מבחינתכם

"(. במקרה זה תיאלצו לאתר את כל הגבוהים בעלי השיער השחור מתוךאות"ה)

היותולע: "האם אתה במקרה משה?" אבל אם נוסף ולשאול כל אחד מהםהקהל,

, קטוע יד ובעל זקן עבות, ייקל עליכם40 בן הוא משהשגם תדעו שחור שיער וגבוה

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

השיער השחור(. עם )האנשים הגבוהים הרלוונטייםמשאר הגירויים

מתוךאותאיתורו של שתאוריית גילוי האותות והמחקרים שבאו בעקבותיה מלמדים

מובחן משארשהאותר יותר ועם פחות איתורים שגויים( ככל ירעש יעיל יותר )מה

.(Macmillan & Creelman, 1991הגירויים )הרעש( )

מבחיןבמהלכה הוא ופעילות המשתמש בממשק היא בעיקרה עבודה של גילוי אותות,

)הפעולה המבוקשת( מתוך הרעש )שלל הגירויים בממשק(. על הארגון המרחביבאות

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

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

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

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

)כמו מחיקת קובץ(.

חומר למחשבה מיושמים בעיצובוהאם . Windowsהתבונן בעיצוב הממשק בשולחן העבודה של

עקרונות הנגזרים מתאוריית גילוי האותות? למשל: השווה בין עיצובה של צלמית

Microsoft Outlook לזו של Microsoft Excell . אובחנה ביניהןלהמפריע האם עיצובן

מסייע לה?

, ד', בקורס "יסודות הפסיכולוגיהקרא הרחבה על תאוריית גילוי האותות אצל זכאי

.66-64' מ ע,4כרך ג, יחידה , 2002 הקוגניטיבית"

19

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

האות יעיל של מודל מנטלי לומר שיש לנו אפשרמכונאי המבין את פעולת המנוע(,

מופשט, דינמיפנימי ייצוג הואזה? מודל מנטלי כתופעה או מערכת. מה טיבו של מודל

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

ובפתרון בעיותזכירתהב ,תופעה או מערכת, ועשוי לסייע לנו בהבנתהאותה שלנו עם

כשאדם טוען שהוא מכיר, למשל,(. כךJonassen & Henning, 1999) הנוגעות אליה

היטב את מנוע המכונית, הוא לא מתכוון בהכרח לומר שהוא יכול לשחזר בצורה

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

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

. מודלים מנטליים אינם ישויות סטטיות; הם מתפתחים ומתעדנים עם הזמןופעולתל

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

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

ככלומתעצמיםהולכים ה מודלים מנטליים נשענת על לפתור בעיות מורכבות נויכולת

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

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

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

ייצוגים פנימיים אפואמניפולציות מנטליות. מודלים מנטליים הםאותן האפשריות של

של המציאות. במהלך האינטראקציה שלנו עם הסביבה ועם עצמיםושימושיים

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

בתנאיםהשתנותהלהבין טוב יותר את מבנה הסביבה, לשלוט בה ולחזות את

ומסבירים המבנה הבסיסי של ההכרה הםמודלים מנטליים שמסוימים. יש הטוענים

(.Jonassen & Henning, 1999חשיבה )של כל תהליך

שיהיה צריך שיוכל לעבוד ביעילות בתוכנה או בכל סביבה דיגיטלית אחרת, כדי

:, מודל שיענה לשאלות של מבנה הממשק המפעיל אותהיעילמשתמש מודל מנטלי ל

העיצוב החזותי? מהן יחידות המבנה הבסיסיות בממשק? היכן הןשלמהו הרציונל

מצויות? כיצד תגיב המערכת על פעולות שונות שיבצע המשתמש בממשק? כיצד הוא

ג'ונסן ושל2002( ,Dillon דילון )יכול לשלוט בממשק ולשנותו לצרכיו? מחקריהם של

יחס ישר בין רמת המודל המנטלי שיששיש הראו (Jonassen & Henning, 1999והנינג )

מהו המודללמשתמשים לגבי הממשק לבין יעילות עבודתם עם סביבת העבודה.

?אתהאתה עובד ש שיש לך לגבי מערכת עיבוד התמלילים המנטלי

20

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

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

Vision and Pattern Perception( בספר 132-171' מ )עPerception )Sekuler & Blake,

, בקורס "יסודות הפסיכולוגיהא גם אצל זכאיו לקראפשרברשימת הקריאה(. ) )1990

, ובתקליטור "פסיכולוגיה קוגניטיבית"235-232' מ ע,5 יחידה (,2002 )הקוגניטיבית"

של האוניברסיטה הפתוחה.

וחוקרים של ביצועי משתמשים בממשקים תרים אחרממשקים כאמור, מעצבי

, המתבונןבהכרתו של המידע החזותי שבממשק מעובד שיסבירו כיצדעקרונות

13, הגשטלט אסכולת עיצוב הממשק. כאן באה לעזרתם ללגזור כללים ושמהם יוכלו

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

המילה "גשטלט" פירושה בגרמנית(. Wertheimerידי מקס ורטהיימר )על- העשרים

תבנית, וטענתה העיקרית של תורת הגשטלט היא שאנו תופסים אובייקטים

אסכולת - ולא כאוסף של חלקים. תבניתמלכתחילה כמשהו שלם ומאורגן - כ

הנחות מרכזיות לגבי תהליכי הקליטה והעיבוד של מידע חזותי: שתיהגשטלט הניחה

תבניות מולדות שללאדם שיש הגשטלט מניח דות:להנחת התבניות המו

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

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

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

ממשק בהתאם.את ה, ולעצב המאורגנים במרחב

:שלפניך:באוסף הנקודות התבונן השלם גדול מסכום חלקיו

p15

כלומר: השלם שראיתולא אוסף נקודות. עקלתון כאן קו ת הסיכויים שראירוב

כאן )קו העקלתון( הוא יותר מסכום חלקיו )אוסף של כעשרים נקודות בדידות

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

אצל האדם גורמת בדרך כלל להעדפה של תפיסת השלם על פני תפיסת

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

)תפיסה גלובלית( צורות שלמותלתפוס רוב בני האדם שלזה, לגבי ההעדפה

. בנפרד )תפיסה לוקלית( מרכיביהןולא את

21

כשהקלט מהחושים אינו תואם את הקריטריונים של התבנית, מתרחש בתפיסה

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

עיגול מושלם.ו"נראה"וחסרה אך קשת קטנה להשלמתו, נשלים את החסר בתפיסתנו

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

צורה "טובה" יותר.ל תיקון תפיסתי קטן יותר ונחשבת מצריכה

: צורות טובות יותר או פחות חומר למחשבה

? סביר שכן. אלא שבאמת אין כאן כל ציור של12איור בהאם אתה רואה משולש

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

, היא תיקנה והשלימה אותה למשולש,כזאתהתפיסתית שלך אינה מכירה צורה

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

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

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

ממשק?ה עקרון התיקונים בעיצוב של

p16

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

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

התפיסהעקרונותהכללים בעיצוב הממשקים. מעצבי ממשקים נעזרים במרבים

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

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

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

,Sekuler & Blake) סקולר ובלייקהשלכותיהם לעיצוב ממשקי משתמש. במאמרם שלב

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

.כל עקרון לעיצוב ממשקים

22

דמות ורקע(figure and ground):עקרון הדמות והרקע הוא הבסיסי בעקרונות

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

,13 איור. הבה נדגים זאת בעזרת מתעלמים מהרקעמתמקדים בדמות, וכשרקע,

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

,יוקנים. לעומת זאת, אם מתמקדים בדני דיוקניםרואים שהרקע עשוי בעצם מש

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

דמות לרקע: היכולת לזהות את דמותו של וושינגטון מותניתלהחליף בין ה

ג מדגים איך הרקע משפיע על תפיסת13 איור הפיכת העץ לרקע.בבהתמקדות בו ו

הדמות.

משתמש? אם מתייחסים אלהמה משמעותו של עקרון הדמות והרקע בעיצוב ממשק

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

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

המשתמש תר אחר הצלמית המייצגת את הפעולה שהוא מבקש לבצע,בממשק

. עיצוב טוב של ממשק מאפשרנתונהבו היא ש הרקע מןלהפרידה ומנסה , )הדמות(

למשתמש לאתר במהירות את ה"דמות", להפרידה מהרקע ולהתמקד בה. לפיכך,

בו הן מצויותשאתגר הן בעיצוב הדמויות והן בעיצוב המרחב בעיצוב הממשק יש

משתמש לזהות אלמנטיםיסייע לרקע ל( גדול בין הדמות contrast ). ניגוד)ה"רקע"(

ורקע, קשה לזהות את מרכיבי הממשק )ראלדמות ה טוב בין ניגודאין כשבממשק.

(.14 איורלמשל

סגירות (closure): ויוידי ק- לתפוס חלל התחום עלהוא הנטייה עקרון הסגירות

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

אינםה"ריקים" , המשולש והריבוע 15 איור. למשל, באת הצורה ולהפכה ל"נכונה"

ידי-וי הגבול הצבעוניים עלומצוירים באמת; הם נוצרו מסגירת החלל התחום בין ק

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

הוא גורם לנו :( של הגשטלטPragnanzהנחת התיקונים )מתקשר לעקרון הסגירות

)משולש,ומוכרותידי סגירתן והפיכתן ל"צורות טובות" מקובלות -"לתקן" צורות על

.נו שלה תבניות התפיסהתואמות אתמרובע, מגן דוד(,

23

. עקרון הסגירות15איור

אשליה של ליצורמבלי משים הוא עלול ש המעצב צריך לזכור באשר לעיצוב ממשקים,

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

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

הי אייהמשולש גורמת והפעולות -תה הפקמנים של בתפעולם וקושי הםשנחת

מייצגים.

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

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

שהשלם גדול מסכום חלקיו:

סמיכות (proximity) : ,עצמים המצוייםס נטייה לתפוישלפי עקרון הסמיכות

לדוגמה, כשרואים גבר, אשה וילדזה לזה. שייכים או קשורים בסמיכות זה לזה כ

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

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

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

בין הריבועים,האנכי שמצמצמים את המרחק כשא(, אבל 16איור )אחיד ביניהם

- נוצר ביניהםאופקיכשמצמצמים את המרחק הב( ו16איור טורים )של נוצר דגם

המילים "שורות" או "טורים" מבטאות את הקרבהג(.16איור שורות )של דגם

הסמנטית שהסמיכות יצרה בין הריבועים.

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

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

ד מיקום קבוע לכלדמניח שבתבנית התפיסתית של המשתמש לגבי ממשק מקו

פעולה או צלמית, עובדה המייעלת את פעולתו של המשתמש בממשק. עיצוב הממשק

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

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

24

שלאת יכולת ההתמצאות המרחבית הדבר ישפר . יימצאו בסמיכות זה לזה,גרפי"

ואת יעילות עבודתו בממשק. המשתמש

(: בממשק17 איור )Wordהבה נדגים זאת על ממשק המשתמש של מעבד התמלילים

זה מרוכזות הצלמיות בסמיכות זו לזו לפי תפקודן: כל הפקודות והצלמיות המשמשות

מצויות בסרגל )כגון גופן, פסקה, יישור(הטקסטטיפוגרפי של עיצוב טיפול בקובץ ולל

מצויות בסרגלקובץפקי בראש המסך. לעומתן, הצלמיות המשמשות לטיפול גרפי בוא

גוש :מובחנים מבחינת המיקום גושים שניפקי בתחתית המסך. כך נוצרו בממשק וא

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

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

אפואבשלב הבא, השלב ההכרתי, קל . לא בחירהב מודעות ובלאבמהירות,

משתמש לייחס תפקיד מוגדר לכל גוש.ל

חומר למחשבה. (18איור )www.chronicle.comהתבונן בממשק האינטרנט

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

( דמיוןsimilarity :)מוצגים זה לצד זה, אנו נוטיםעצמים כמהקרון זה, כאשר ילפי ע

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

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

א צביעת חלק מהריבועים באדום הובילה ליצירת דגם19מרקם )טקסטורה(. באיור

ב מדגים את עליונותה של תפיסת הצבע על תפיסת הצורה:19של שורות. איור

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

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

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

עוד יותר בולט וברור נעשהבזכות הקרבה הפיסית ביניהם )עקרון הסמיכות(,

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

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

דגם. מהן וליצורהצורות הדומות

הנפוצים הקידוד אופני לשני ביטוי יש בעיצוב ממשקים הדמיון עקרון של ביישום

)לינק . בפרק על ייצוגי מידע בממשקוקידוד לפי צורה קידוד לפי צבעבהצגת מידע:

מקודדותשק מ מהפעולות במשלפיהם רבות ממצאים הבאנו (לראש הפרק הרלוונטי

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

25

שונות בממשק. פעולות לגבי הבית שלנודוגמה, התבונלתבניות תפיסתיות בדף

לב מו(. שי20 איוראוניברסיטת טנסי ) צבעיםנצבעו בהפונקציות השונות בממשק ש

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

בצבע אחד, מידע לסטודנט בצבע אחר(.

תרגיל )אתר החדשות של "ידיעות אחרונות"( Ynet:14התבונן בדף הבית של האתר

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

.ממצאיך

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

אצלנו כקוס, רצף הנקודות הבודדות נתפ21 איורכשייכים לישות אחת. למשל, ב

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

הגלובלית )העדפה לתפיסת השלם על פני תפיסת חלקיו( המאפיינת את רוב בני

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

כמה מסכים השייכים לקישור בין לא לעיצובו של מסך יחיד אלאההמשכיות חשוב

סביבת עבודה. המשתמש בממשקי מחשב מצפהלאותהתוכנה או לאותה

דומים זה לזה, וביחד ייצרו יהיו מן המסך הראשיאליהם הוא מגיעשהמסכים ש

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

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

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

.ממשקי משתמש"

תרגיל ש אל מקומות שונים באתר. אילו ביטויים שלובו קודם. גל ביקרתש Ynet15 לאתר חזור

? בו לזהות אפשרעקרון ההמשכיות

בעיצוב ממשקי משתמש כללים3.6

26

ומתבררמהדיון בעיצוב ממשקים עד כה עולה המורכבות הרבה של תהליך העיצוב,

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

אוממשקים עיצוב הממשקים. אלא שמעצבי של התשתית התאורטית הןהקודם

שיאפשרו להם לקבללכללים מוגדרים זקוקיםמנתחי ממשקים זקוקים ליותר מכך; הם

כיצדעליהם להחליט, למשל, .החלטות מושכלות במהלך העיצוב הפיזי של הממשק

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

כללים כאלה יסייעו .איזה "עומק" יהיה להיררכיה בממשקו ,מידע להציג במסך אחד

וקווסנברי )(Dillon, 2002) דילון.לעצב ממשקים יעילים, המתאימים למשתמש

Quesenbery, 2001ראו מאמרי החובה לקריאה ביחידה( מטפלים באופן מפורט( )

במגוון ההיבטים שעל מעצב הממשק להביא בחשבון בעת העיצוב, ומציעים כללים

.(Nielsen, 1993) בספרו של נילסן 3בעיצוב ממשקים. כללים אלה מפורטים גם בפרק

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

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

או מנתחהממשק מעצב ו, (heuristics ) היריסטייםבכללים בדרך כלל מחייבים, אלא

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

יחידה. הלשאתכם בעת ביצוע המטלת המסכמת

הנדונים בפרק הנוכחי נחלקים לשתי קבוצות:הכללים ש המכנים סביבה זו גם בשם "מנשק משתמש", משום שבה נושקים זה לזה המשתמש והסביבהי1

שהוא עובד בה. ביחידה זו נשתמש במונח "ממשק" מאחר שהוא השתרש כבר בקרב העוסקים

בתחום.

2http://www.amazon.com/exec/obidos/tg/browse/-/605012/ref%3Dgw%5Fbr%5Ftr/103-1177258-3853436

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

המשתמש. כיצד היית משפר את ממשק המכשיר?Symbol Systems Theory: http://tip.psychology.org/salomon.htmlראה הסבר קצר על 4 בטוריםטקסטעמד 5 מעוצבעמודהצג 6מחק 7 אלפביתי עולהבסדרסדר 8תרשיםצור 9

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

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

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

בעזרת צלמית גרפית במקום טקסט.המיניםמלבד זאת, היה אפשר לייצג את שני http://tip.psychology.org/wertheim.html הגשטלט:אסכולתראה תיאור קצר על 1314 http://www.ynet.co.il/home/0,7340,L-8,FF.html15 http://www.ynet.co.il/home/0,7340,L-8,FF.html

27

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

תקשורת בשפת המשתמש, הקטנת העומס על זיכרון המשתמש, מתן משוב ועזרה

, יציאה ברורה ממצבים עמומים ושימוש בקיצורי דרך.למשתמש

נוגעים לארגון מרכיבי הממשק במרחב המסךכללים ה בעיצוב מרחבי: כללים .2

לתכנון היררכיית התפריטים בממשק.ו

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

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

להבדלים בגישותיהם של המאמרים כלפי עיצוב הממשק אף-על-פי שהם דנים באותם

. המאמרים לקריאה הם:כללים

Opperman, 2002

Quesenbery, 2001

Dillon, 2002

כללי יסוד3.6.1(consistency). עקביות 1

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

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

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

"ללכת לאיבוד" או לאבד שליטה עלבלא חששנוח לנסות חלקים שונים של הממשק, ב

כלתחול על מיקום ב העקביות יש לדאוג שכן(. Lewis et al., 1989העבודה בסביבה )

לביסוס הרקע התאורטיבממשק )ש( dialog boxes תיבות השיחה )ועל כלהמסכים

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

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

הבנתם.ל הנחוץהקוגניטיבי

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

עשוי לבלבל את המשתמשלאחר דעבודה אחממצע עצם המעבר שמחקרים הראו

משתמשים מתבלבליםש מצא ((Kellog, 1989 קלוג (.Lazar et al., 2003)למשל,

מרכזי ממחשבלעבוד אתההם עוברים כשבשימוש בממשק של אותה תוכנה

mainframe))מחשב אישי לPC).)

28

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

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

http://www. ,)לבחירת תת-תפריטים מתוך סרגל הכלים בסביבת "חלונות",התקן

בתפריטי(checkboxes) תיבות סימון לגבי תפקודם של "כפתורי רדיו" אווהתקן

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

.22 איורב

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

עקביות. ציין אלמנטים בממשק המעוצבים לפיה של יישום עקרון ביטוייםשלושה

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

אלה.הלתוכנה עצמה. נמק מה הייחודיות באלמנטים

. דיאלוג פשוט וטבעי2

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

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

לטעות,אפשרי לחפש בממשק, עוד מקור פריט שעליושהמשתמש צריך ללמוד, עוד

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

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

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

הדפסת קובץ, מאפשרים למשתמששל למשל, בממשק .האפשר לרצף ההגיוני הצפוי

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

. וכדומה(

למשתמשותעיצוב חזותי המסייעשל בשיטותעזר יכחלק מפישוט הממשק, נהוג לה

הבלטה,למשל - שבממשק;עדיפותהסדרי את והמבנה את אינטואיטיבית להבין

דמות"הארה או הבהוב של אלמנטים רלוונטיים. בכך נוצרת הפרדה טובה יותר בין "

", ולמשתמש קל יותר לקבל החלטות לגבי הפעולות שיינקטו בכל שלבו"רקע

בעבודתו.

תרגיל

29

(,17 איורמעבד תמלילים למבוגרים )של ממשק שני ממשקים: התבונן בעיצוב של

.יםהממשקכל אחד מ(. אפיין 10איור אוויר לילדים )הממשק של תוכנה ללימוד מזג ו

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

עבודה המעדיפה את האלמנטים החשובים על פני הטפלים.

המידע החשובמהו: על המעצב לזהות "מעט הוא הרבה"בעיצוב ממשק, יש לזכור כי

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

את יכולת המשתמש למצוא את מבוקשו. למשל, במחקר שנערךניכרתמאט במידה

נמצא, שכאשר מספרי הטלפוןעל מרכזניות המוסרות מספרי טלפון למתקשרים

20%מופיעים על כל שטח המסך, המרכזנית משקיעה בחיפוש המספר זמן ארוך ב-

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

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

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

,Durett & Trezona צבעים11 זוכר לכל היותר צבעים, ואילו המשתמש המומחה7-5מ-

1982)) .

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

יותרשיתנוככל שלמשתמש. אחת המכשלות של מעצבים רבים היא ההנחה

)ר פתוחה( את כולם. אלא שבמציאותירצואפשרויות ודרכים לביצוע אותה פעולה, כך

כמה מבין יוצרת מבוכה ובלבול, כי המשתמש צריך לבחור כל הזמן כזאתסביבה

, אלאחלופותאפשרויות שההבדל ביניהן אינו מובחן דיו. אין זה אומר שלא צריך להציע

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

כדי בעבודה בממשק, ("מומחה" או "מתחיל" רמתו ) למשתמש לאפיין אתלהציעהוא

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

בשפת המשתמשתקשורת. 3

צריכה להיות שפת התקשורת שלו ולכןתרבות, סביבת עבודה תלויתמשרתהממשק

במונחיםתשתמש אפוא. שפת הממשק ולתרבותםמשתמשיםה תלשפמותאמת

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

המקובלותקילומטרים ומטרים, במידות עשרוניות של בריטיות כמו מייל ואינץ', אלא

תיעזרבריטים...(. באותה מידה, תוכנה לילדים ה למעטנהגים האירופים )ה על

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

30

הנובעות משימוש בשפה שאינה טבעית למשתמש שכיחותשל המשתמשים. בעיות

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

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

בלבול. הם ”, אינו ברור למשתמשים רבים וגורם לlayout המונח האנגלי “המתרגם את

הדרישה מהממשק לדבר בשפתו הטבעית של המשתמש תקפה גם עבור ייצוגים

להתאים גם הם צריכים ;לא-מילוליים של השפה, כגון צלמיות וסימנים מוסכמים

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

לאפשר לו להתבטא באופןעליה , ו מוסכמות רבות מדיהאפשר מלכפות על המשתמש

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

הקלהזוהיקובץ שם בכל אורך שירצה. ל תת למשתמש ללאפשרבסביבת "חלונות",

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

. נתינת שמות ארוכים ותיאוריים לקבצים מקלה על לכל היותרויםו ת8 שאורכם

המשתמש לזהות בקלות את מהות הקובץ.

דרך יעילה נוספת "לדבר" בשפת המשתמשהואהשימוש במטפורות בשפת הממשק

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

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

גם בעיצוב החזותי של ייצוגים גרפיים רבים נעשה שימוש מטפורי בעולמו של (. לעיל

לאחסון קבציםp17 סל ניירותהמשתמש. למשל, השימוש בציור של

"(."ייצוג ידע בממשקשהמשתמש מחק )ראה לעיל, הפרק

כרוןיזה. הקטנת העומס על 4

אני יודע את המילה אך איני,כלומר- ?מכירים את הביטוי "עומד על קצה הלשון"

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

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

זה, ו"להזכיר" לו את הפעולה שתתבצעהפער ה למשתמש לגשר על יםהמסך, מסייע

ברוב( RENAMEאנו בוחרים באפשרות "שנה שם קובץ" )כשעם בחירתה. למשל,

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

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

להקלידו מחדש. לעתים מתבקש המשתמש להקליד מידע למערכת. במקרה זה,

31

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

:בערך כךלמשל, בהקלדת תאריך, יוצג הפורמט

enter date )DD/MM/ YY, e.g., 28.05.03(.

: ממשק וזיכרון חומר למחשבה

(.ב23 איור )16בזקחיפוש מספרי טלפון של של תוכנת התבונן בממשק

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

.המשתמש. הצע דרכים לשיפור הממשק

. משוב ועזרה 5

של שאחד התסכולים הגדולים מדווחים( Lazar et al., 2003מחקרים )למשל,

כיצד להמשיך או כיצדולא לדעת "תקועים" במצב כלשהו להיותמשתמשים הוא

משובאלה בעזרת מערכת ה מענה לתסכולים נותניםלפתור את הבעיה. הממשקים

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

למיין את המשובים לשלושאפשרתוצאות חמורות של פעולה שהוא עומד לבצע.

קבוצות עיקריות:

מזהיר מפני תוצאותיה של פעולה כגון מחיקת קובץ; סגירת קובץזהרה:המשוב

)קודמתהתוך "דריסת" גרסה חדשה כתיבת ללא שמירה, פרמוט דיסקט או

overwriting).

:מודיע על מצב כלשהו בעבודת המשתמש: הדיסקט מלא; אין קשרמשוב מידע

לשרת הדואר.

:הנחוץ לו להמשך העבודה. למשל: הקשמעשי למשתמש מידע נותן משוב הדרכה

Ctrl Alt Delלכניסה לרשת .

המערכת מפרשת אותן.שמשתמש על פעולותיו או על האופן מיידע את ההמשוב

משוב בדמותמקבלמשתמש וה, אמיתילמשל, בעת כתיבת טקסט האיות נבדק בזמן

contentתוכן ) מתחת למילה השגויה. מכיוון שעל המשוב להיות תלוי מסולסלקו אדום

specificים אחרות( ולא כללי מדי, המערכת מציעה למשתמש את האיות הנכון או מיל.

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

שוב. על המשובאותםלהבהיר למשתמש את משמעות מעשיו, ולבקש ממנו לשקול

16 http://www.144.bezeq.com

32

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

(color coding צבע )לפיבניגוד לכוונתו. במשובים מסוג זה מקובל להיעזר בקידוד

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

מה שגוי כאן? :חומר למחשבה ביקש המשתמש למחוק רשומות ממאגר מידע. המערכת( 24)איור בדוגמה שלפניך

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

17.שגיאה בעיצוב. נסה לזהותה

p18

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

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

אוטומטית ברגע שנוסיף נייר. לעומת זאת, ישנם משובים "נודניקים", שלא ייעלמו עד

שתתקבל התייחסות מהמשתמש. למשל: כשהדפסתו של הקובץ שנשלח להדפסה לא

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

משובים קבועים, המופיעים כל הזמן ומספקים למשתמש מידע שוטף ושמיש, כגון

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

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

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

בחירתך.

ממצבים עמומיםה ברורה. יציא6

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

.Yesכמשוב של אזהרה, היה צריך להשתמש באדום עבור

33

משתמשים חווים את העבודה בסביבות מחשב,שמחקרים רבים שעסקו באופן

(.Lazar et al., 2003 שהמשתמשים אינם אוהבים לחוש לכודים בידי המערכת )מראים

מנוסים הן: "איך אדע לצאת ממצבים שללא-הבעיות העיקריות המטרידות משתמשים

,Nielsenממנו יצאתי"? )שתפעול התוכנה?", או: "איך אדע לחזור למקום שגיאה ב

מערכת פשוטה ומפורטת שלולכלול לצורך הזהענות הי(. ממשק טוב אמור ל1993

לשגרתולחזור בהם הסתבך שלהיחלץ ממצבים למשתמש שיאפשרו"יציאות",

למשתמש להתחרטהמאפשר -Cancel הביטול - פעולתעבודתו. יציאה נפוצה היא

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

למשתמש לבטל פעולה מיותרת שביצע.

חומר למחשבה השימוש שנעשה בצבע הצהוב בהודעה זו, המציעה למשתמש אפשרותהסבר את

. ממצב "מסוכן"לצאת

P19

. קיצורי דרך7

,ויים מבוססים על "מאיצי פעולה" בדמותם של קיצורי דרךוממשקי המשתמש העכש

בלי לכתוב את הפקודותפקודות ה יכול להפעיל ישירות אתמשתמש ה שבאמצעותם

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

p20 להפעלת התוכנה(ICQאו פעולות שונות בתוך התוכנה )למשל, הצלמית ,

p21למרכוז טקסט(. סביבות ההיפרמדיה המודרניות מאפשרות שימוש בקיצורי

(, המקשרים בין מסמכים או בתוכם )למשל, קישורlinksדרך המכונים "קישורים" )

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

מחקרים שבדקו את השפעתם של קיצורי הדרך על עבודת המשתמשמסוים בו(.

(. Margono & Shneiderman, 1987! )70% מ-ביותרהם מקצרים אותה שהראו

: קיצורי דרךחומר למחשבה

34

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

תשובתך.את ? נמק תעדיף להשתמשקיצורי דרך של איזה סוג ב

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

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

הדו-ממדימרחב המסך- להבחין בין מרחב אופקי אפשרממשק בעיצוב ולזהותם.

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

להציג בתפריט? היכןאפשרבעזרת צלמיות?( ושל ארגון )למשל, כמה פריטים

מבנהתכנון של היסודיות מתמקד בשאלות אנכיהמרחב הארגון למקמם?(.

יהיו בממשק? מהו הסדר המועדף בהצגת שלביההממשק, כגון: כמה רמות היררכי

המשתמש בביצוע פעולה? הצעדים שעושהעבודה בממשק? כיצד להקטין את מספר

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

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

לעשות במטלת המסכמת ליחידה.

היכן מצויה צלמית ההדפסה? איך משנים את הפונט? היכןאחידות המיקום: . 1

נתקלתם בהן בעבודתכם עם תוכנות אלה שאלות שבוודאי מקישים לקבלת עזרה?

שהממשק מכיל אלמנטים רבים )לעתים עשרות(,הן נובעות מהעובדהמחשב.

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

קיצורי הדרך לביצוע פעולה מסוימת תמיד באותו מקום במסך. מחקרים שונים )

Aspillaga, 1991 המיקום הקבוע של מרכיבי הממשק משפר במידהש( הראו

ידי- אחידות המיקום נתמך עלכלל( את ביצועי המשתמש. 60%משמעותית )כ-

של הגשטלט, שתואר לעיל; הוא מסייע למשתמש ליצור לעצמועקרון הסמיכות

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

החשובים ביותר בעיצוב ממשק המשתמש.הכללים הוא אחדאחידות המיקום

הפרתו גורמת לפגיעה בשטף העבודה ומקטינה את יעילותה.

תרגיל

35

(. נסה לזהות, ורשום לפניך, יישומים7איור של תוכנות "חלונות" )יםהתבונן בממשק

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

בחירתך. את

האחדת על-ידי לשפר את ביצועי המשתמש אפשר,זה כלללפי אחידות העיצוב: . 2

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

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

הגרפי )עיצוב צלמיות, שימוש בצבע( והן במבנה הממשק )מיקום הצלמיות,

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

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

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

מיקומן שללאתר את משמעותן של צלמיות, להבין אתברורה של סביבת העבודה,

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

הרגשה שהסביבה, נוחות וביטחוןתחושתיצירת ממשקים המעבירים למשתמש

מוכרת לו, ושיוכל "להשתלט" עליה בקלות.

ייצור" של מאגרי מידעה פסמוצגים שני ממשקים הלקוחים מ" 25 איורדוגמה, בל

ידי אותה חברה. שים לב לאחידות העיצובית, המקנה למשתמש-פותחו עלש ,לילדים

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

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

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

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

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

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

Ynet )"18)פורטל החדשות של "ידיעות אחרונות

19 תפוז

20(פורטל חינוכי) סנונית

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

בחירתך.את 18 http://www.ynet.co.il/home/0,7340,L-8,FF.html19 http://www.tapuz.co.il20 www.snunit.k12.il

36

,Nielsen & Tahir, )למשל כמתואר בספרות הענפה העוסקת בעיצוב ממשקי אינטרנט

(, המבנה האחיד המאפיין את רוב אתרי האינטרנט כולל בדרך כלל סרגל אופקי2002

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

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

. מבנה זה)26 איוראתר )כל לייחודיים הים ואופקיים,אנכימשנה יסרגלמכיל הדף

(Nielsen & Tahir, 2002סקרים )ש כדי כךכבש את העיצוב של ממשקי האינטרנט עד

שעיצובםמממשקי אינטרנט אינם שבעי רצון מרבית המשתמשים כי מדווחים

האתר ללימוד אותיותכדוגמת דינמייםFlash מדי )כמו עיצובי מתוחכם

bemboszoo21.)

יש לארגן את מרכיבי הממשק במספר קטןזה כלללפי (: chunkingארגון בגושים ) .3

ליצורמכנה משותף, ובכך לסייע למשתמש שלמרכיביהם ( chunksשל גושים )

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

עקרונות )ראה דיון על אחתעצמים הסמוכים או הדומים זה לזה כשייכים לישות

הארגון בגושים מציעכלל. בהתאם לכך, ) של אסכולת הגשטלטהדמיון והסמיכות

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

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

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

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

גושיבכמה המעוצבים Chronicle,23 ושל העיתון 22אוניברסיטת טנסיהבית של

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

בשני גושים ברורים: גושWordמודגם כיצד מעוצב ממשק מעבד התמלילים 17

טקסט וגוש עיצוב גרפי.טיפול בקבצים וב

תרגיל בעיצובומצוא. נסה ל(27 איור )24הציפורים הנודדות אינן יודעות גבולותהתבונן באתר

25 הארגון בגושים.כלליישום של

21 http://www.bemboszoo.com/22http://www.utk.edu /?

23http://chronicle.com /?

24 http://www.birds.org.il/ הנודדות" מעוצב בגושים סמנטיים, המציינים את הפונקציות העיקריות של האתר: גושהציפוריםאתר "? 25

של מעקב אחרי ציפורים; גוש של תצפיות בקיני ציפורים, וגוש של מעקב באמצעות לוויין.

37

אנשים המתבוננים בתצוגות המכילות מספר רב של גירויים(: alignment. יישור )4

לגלות בו אתו לסרוק את המרחב במהירות וביעילות, מתקשים לעתים קרובות

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

ואף תיאר את הבעיה( Williams, 1994) במרחב(. ויליאמסעצמיםסריקה וגילוי של

- כלומר,במערך מיושרהממשק העצמים במרחב את לארגן הציע לה פתרון:

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

נוחות והבלבול-איההמזרז זיהוי עצמים במרחב, לעומת תחושת ואופטימלי,

היישור מיישםכלל(. kitchen effect"")עצמים המפוזרים במרחב באי-סדר שמשרים

(Shneiderman, 1998 שניידרמן ).של ויליאמס בעיצוב הממשקאלה את הנחותיו

.60%הדבר עשוי לקצר את הזמן הנדרש לזיהוי אובייקט בממשק בכ- שמדווח

: ארגון28 איור דרכים, כמודגם בכמהמעצבי ממשקים יוצרים מערך מיושר ב

Web Style Guide26)ראה אחר מייצגת נושא שכל אחת מהן אלמנטים בעמודות,

רשתשל (, או ארגון בגושים היוצרים דגם 27אוניברסיטת טנסיאו אתר הבית של

של האוניברסיטה הפתוחה(.29תל"ם או אתר 28,סנונית)ראה אתר

יש קישורים לאינטרנט גם מתוך האיורים.28אורית, שימי לב, באיור

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

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

באתר.

אחד הנושאים ה"מטרידים" ביותר את המעצבים הוא השאלה היכןרכוז המידע: מ. 5

, יש הדבריםלמקם במסך את שלל האובייקטים המרכיבים את הממשק. מטבע

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

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

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

26http://info.med.yale.edu/caim/manual/contents.html ?

27http://www.utk.edu?

28 http://www.snunit.k12.il29 http://telem.openu.ac.il

30 http://www.ynet.co.il/home/0,7340,L-8,FF.html

38

שמוקד ההתבוננות מראים(, Sekuler & Blake, 1990, Chapter 5של קליטה חזותית )

(fixation point ) מצוי במרכז המסך, בעיגול שקוטרו כ- משתמש ממוצע במחשבשל

להשתדל, ככליש עצמים בממשק, שכאשר מארגנים ס"מ. משתמע מכך 4.2

זה את מרכיבי הממשק החשובים. ההאפשר, להציב באזור

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

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

? האם יש בו רמזיםאת החיפוש להתחיל האם הוא עוזר לך להבין איך ?החשובים לך

לגבי האלמנטים החשובים יותר והחשובים פחות? באיזו מידה הם מרוכזים סביב

?מוקד ההתבוננות

כיצד היית משפר את הממשק בעניין זה?

מרחבל שנגעועקרונות עיצוב ב דנועד כה . שיטוח המידע ודילמת ההיררכיה:6

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

מהמילה) ניםנמבוססים על מערכת ענפה של תפריטים מקו ייםוהממשקים העכשו

(. כמעט בכל שלב בעבודה בממשק נפתחים בפני המשתמשnested menusקן,

המובילות אותו לרמת הבחירה הבאהבוחר אפשרויות הוא שמהם ,תפריטי משנה

(. תהליך זה יוצר רצף מסועף ומורכב מאוד של בחירה וקבלת29 איור)כמודגם ב

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

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

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

ומהלך העבודה בממשק חבויים מעין המשתמש, ונגלים לו רק במהלך ביצוע

הבחירות בתפריטים השונים. עקב כך, ממשק היררכי מקשה על המשתמש לגבש

לעצמו מודל מנטלי או תבנית תפיסתית ברורה של סביבת העבודה ושל המהלכים

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

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

(. Shneiderman, 1998 לבצע בהן )שאפשר

חומר למחשבה

31 http://www.snunit.k12.il

39

על Wordנסה לשחזר במדויק את כל פעולות הבחירה שיש לבצע כדי להדפיס קובץ

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

שיהיה קל יותרכדי לחפשה? כיצד היית משפר את הממשק התבקשתיודע עליה לולא

לגלותה?

בחנו במחקרים רביםבעיות בעבודת משתמשים בממשקי תפריטים היררכיים נה

בדרךממליצים ש, [(Pap & Roske-Hofstrand, 1988)למשל, פאפ ורוסקה-הופסטרנד ]

להימנע ככל האפשר מיצירת היררכיה מיותרת בממשקי מחשב, ולנסות "לשטח"כלל

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

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

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

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

שאף היאכל רמה בממשק, פרטים רבים על העומק ההיררכי המובילה להעמסת

Information בהקשר זה, ראוי לציין את תפיסת ה-32.(30איור ) על המשתמשמכבידה

Visualizationשניידרמן ועמיתיו של (et al., 1999 Shneiderman;) פיתחו אתהם

GRIDL33 - כמויות מידע גדולותלהציגמנוע המשטח את אופן הצגת המידע ומאפשר

. ה היררכיבלי

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

יותר ויותר במרכזיות בהםאנו נתקלים שקולייםהתפריטים השמיעה. הכוונה ל

. באמצעות כמה שלבים היררכיים שבהםאוטומטיות המנתבות שיחות ליעדים שונים

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

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

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

כמעט לחלוטין, ויכולתו של המשתמש לשלוט בנתיבי התקדמותו מוגבלת ביותר

ה...(.י למרכזי0)למעט ההיחלצות הידועה ממעגל החיוג דרך הקשת

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

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

המוצג למשתמש בכל מהלך גדולה מאוד, ולכן המידע "קשה לעיכול".

33http://www.cs.umd.edu/hcil/west-legal/gridl ?

40

ביחידהו. ריכוז הכללים בעיצוב ממשקים שנידונ1טבלה

כלל לשבץ לינק

מכל כלל לתחילת

הסעיףהרלוונטי לו

דוגמה תיאור לשבץ לינק בכל איור

בטבלה לאיורהרלוונטי

כללי יסוד להקפיד על עקביות בעיצובעקביות

הגרפי, בעיצוב הסמנטי ובמיקום המרחבי של

מרכיבי הממשק.

25איור

דיאלוג פשוטוטבעי

הממשק צריך לקיים עם המשתמש דיאלוג פשוט

המובן באופן אינטואיטיבי.

2איור

תקשורת בשפת

המשתמש

הממשק ישתמש במונחיםהמוכרים למשתמש.

א10איור

הקטנת העומסעל הזיכרון

להימנע מריבוי פרטים המעמיסים על זיכרון

המשתמש.

27איור

להרבות במשוב ספציפימשוב ועזרה לבעיות שהמשתמש נתקל

בהן.

24איור

יציאה ברורה ממצביםעמומים

לסייע למשתמש להיחלץ מ"הסתבכויות" בעבודה עם

התוכנה.

cancel, undo שימוש במקשי

לאפשר קיצורי דרךקיצורי דרךכתחליף לכתיבת פקודות.

שימוש בצלמיות בממשק

כללים בארגוןמרחבי אחידותהמיקום

לכל מרכיב ופונקציה בממשק צריך להיות מיקום

קבוע במרחב המעוצב.

7איור

לשמור על אחידות מושגיתאחידות העיצוב בעיצוב של מסכים שונים

באותה סביבת עבודה.

25איור

27איור סידור מרכיבים בממשק)ארגון בגושים

41

chunking)בגושים מוגדרים מסייע בזכירת מיקומם.

)יישור alignment)

אי-סדר בארגון מרכיבי הממשק פוגע ביכולת

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

הוא לאורך קווים ישרים.

28איור

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

בתוך שדה הראייה של המשתמש, ולא יחייבו אותו

לסרוק את הממשק.

2איור

שיטוח המידע ודילמת

ההיררכיה

בעיצוב ממשק יש לבחור בין ממשק היררכי לבין

ממשק שטוח, שיש בו רמותהיררכיה מעטות.

30איור

סוגים של ממשקי משתמש 3.7 ממשקי מילוי: משתמש ממשקים שלכיום נפוצים במערכות המחשב בעיקר שני סוגי

graphic user) ממשקים גרפייםו (Nielsen, 1993) (form-filling interfaces )טופס

interfaces( )Shneiderman, 1998).לכל סוג אפיונים משלו, והוא מתאים למטרות

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

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

. הממשקבשמישותלמשתמש לגבי סביבת העבודה, ופוגעת

קריאת חובה ,3 את פרק(Nielsen, 1993) בספרו של נילסןבמקביל לקריאת הטקסט הנוכחי, קרא

Generations of interfaces 'סוגי הממשקים המוביליםהעוסק ב(, 70-49)עמ

.התפתחותם לאורך הדורותוב

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

משתמשים שונים יאייתו את שמו של מקום מסוים אםשלכם. מה לדעתכם יקרה

הרי המערכת תזהה שני יישובים?(פנה וראש פינה )נניח, ראש בדרכים שונות?

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

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

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

42

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

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

מראש.שאי אפשר להגדירןאת הבחירות רק המשתמש בממשק, ולאפשר לו להקליד

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

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

לפשט את התהליך?אפשר

לבחור יעדים לחופשה. המשתמש יכול לבחור לעצמו אתאפשר 34 זהבאתר תיירותא.

א(. 23יעדיה בעזרת שילוב של בחירה והקלדה )איור את מועדה ואת סוג החופשה,

מקלידים את השם המבוקש ובוחרים מתוך רשימה35איתור מספרי טלפוןב. בממשק

.ב(23אזור החיוג )איור את את היישוב ו

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

.ג(23המוצא, וכן את היום והשעה הרצויים )איור את נקודת ו

בממשק מילוי טופס באה לידי ביטוי הדילמה של המעצב בין פתיחת הממשק לשליטה

(inputהנתונים )מלאה של המשתמש לבין הצורך בבקרה של המערכת על טיב

מוגבל לשדותבאינטראקציה המשתמש חלקו של, מצד אחד. מזיןהמשתמשש

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

ומייעלת את העבודהלמערכתההגדרה מראש של הבחירות מונעת הכנסת מידע שגוי

. בממשק

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

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

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

,בהן קשה לצפות מראש את החלטות המשתמש )למשלשבסביבות גמישות ופתוחות,

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

34 http://www.amazon.com/exec/obidos/tg/browse/-/605012/ref%3Dgw%5Fbr%5Ftr/002-9607771- ?

4662437 35 http://www.144.bezeq.com/36 www.egged.co.il/egged/info/index.asp

43

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

וקל להשתמש בהם, ובזה יתרונם.

למשמעות )סמנטיקה(( מתחביר )סינטקס–ממשקים גרפיים 3.7.2 תוכנה מתנהלתלבהם התקשורת בין המשתמש שממשקים גרפיים הם ממשקים

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

,העשרים של המאה השמונים. ראשיתם של הממשקים הגרפיים בסוף שנות העבודה

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

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

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

בהם בחירה של אלמנט בתפריט מובילהש(, nested menusנים )נתפריטים מקו

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

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

PowerPoint. שקופית חדשה. שים לבפתח קובץ חדש, ובתוכו היכנס לתוכנה, פתח

פה? שים-. האם היית מסוגל לזכור רצף זה בעל דרכםאתה עוברשלרצף התפריטים

הרצף באופן אינטואיטיבי:לך לזכור אתלב כיצד העיצוב החזותי מסייע

Desktop p22 מתפריט הצלמיות ב-PowerPointבחירת צלמית . 1

p23 בחירת צלמית "קובץ חדש" מתפריט "סרגל הכלים" . 2

מתאר השקופיתבחירת סוג השקופית המבוקש מתפריט . 3

p24

משתמש? מהו החיסרון?מבחינת השיטת התפריטים של יתרונהמהו לדעתך

44

ממשקיםתכונות, שבזכותן הם נהפכו להממשקים הגרפיים מאופיינים בשלוש

(:Shneiderman, 1998המובילים ברוב סביבות העבודה המודרניות )

בממשקים אלה מגיעה התקשורת בעזרת ייצוגים גרפיים:-גרפיתתקשורת חזותית

. פוחת במידה רבהטקסטהמבוססת על הצורך בתקשורת ולרמה גבוהה ביותר,

:אפשר , התקשורת החזותיתה הגבוהה של רמתבזכות הפעלה אינטואיטיבית

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

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

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

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

של הייצוגים הגרפיים שלהן.(סמנטיקההמשמעות )הבנת

:של המשתמשחלקו אם בממשק מילוי הטופס הפעלה אינטראקטיבית

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

. היאבהרבהגבוהה של הממשקים הגרפיים מוגדרות מראש, האינטראקטיביות

מוגבלת של המשתמש לשוטט ולנוע במערכת באופן-מתבטאת ביכולת בלתי

מסך המחשב, והן במעמקי המבנה ההיררכי שלשל ממדי, הן במרחב -תלת

תוכנותבהממשק. האינטראקטיביות הגבוהה מתבטאת בתוכנות רבות )למשל

officeגם ביכולתו של המשתמש לעצב לעצמו את סביבת העבודה בהתאם )

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

, מקבל ביטוימילוליותבסרגל. חלק גדול מהפעולות, שבעבר נעשו בעזרת הגדרות

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

מילוליותידי כתיבת פקודות -תמלילים. בעבר נעשה הדבר עלההשוליים במעבד

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

p25כיצד משתנה עיצוב הדף בהתאם. מיד המסך, ולראות על גבי

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

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

שתי קבוצות עיקריות, המכוונות ליישומים ולסוגי משתמשים שונים:

:אלה הם ממשקי משתמש גרפיים המורכבים מתפריטיםממשקי תפריטים

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

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

ניסיון להציע למשתמש דרךיש. בממשקי התפריטים PowerPoint בפתיחת קובץ

הדרך סמויה מעיניו ונחשפת שלב אחר שלב עםומובנית לבצע פעולות,

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

45

המוצגת בכל שלב בעבודת המשתמש, וחוסכת ממנו את הצורך לזכור מראש את

,Office נתיב ההתקדמות שלו בין התפריטים. ממשקי תפריטים, כגון ממשק כל

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

עבודת המשתמש.ב

:בממשקים מסוג זה, במקום צלמיות וסרגלי כלים המצוייםממשקי סצנה

במקומות מוגדרים וידועים, מוצגת למשתמש סביבה גרפית-תמונתית, מעין סצנה

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

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

, המשמשת לעיצוב במת תאטרון. שים לבStage Struck ממשק סצנה מהתוכנה

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

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

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

המטלה. יש בהם מידה רבה של עמימות לגבי מהותה של סביבת העבודה, ודרכי

העבודה בהם סמויות מעין המשתמש. ברובם יש בדרך כלל דרכים מגוונות לביצוע

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

, למשל, איןStage Struckלמשתמש להגדיר מטרות ואסטרטגיות ביצוע. בסביבת

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

המתאימה לו.

ממשקי סצנה מתאימים למשתמשים בעלי תפיסהש( הראה Eshet, 2004עשת )

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

משתמשללטענתו, ממשקי הסצנה מייצגים גישה חדשה בעולם הממשקים, המניחה ש

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

באמצעותללמוד ,ממשקה פענוחבהרפתקה של מוזמן להשתתף משתמש ה. בממשק

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

חופש הפעולה של(, מה שמגדיל במידה רבה את virtual realityמציאות מדומה )

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

אך הגישה חודרת יותר ויותר גם לסביבות עבודה של מבוגרים, הרואות בגישה

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

תלת-ממדית, המבוססת על מטפורה של משרד )Officeמייקרוסופט לעצב גרסת

Office)תלת-ממדיחלל בלפצח את הממשק תוך שיטוט אמור המשתמש , שבה

(32 איורמשרד )כהמעוצב

46

ממשקי מחשבשל מגמות בהתפתחות 3.8

שהתרחשו בממשקי המחשב במהלך העשורים האחרונים,יםלפני שננתח את השינוי

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

את קפיצת הדרך שעבר עולם הממשקים בעשוריםלהבין לנוהשוואה זו תסייע

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

:תחביר, ואילו בממשקים של היום מודגשת הבנת הלוגיקה הפנימית

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

C:\format A:

,ימני בעכברהמקש על ה, להקיש My Computerב- Aואילו היום, די להצביע על כונן

. כל השאר נעשה מעצמו.Formatולבחור

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

lh 2.איינשטיין(, היינו כותבים:

ואילו היום פשוט בוחרים "עיצוב", "פיסקה", ושם בוחרים את הרווח המבוקש.

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

, ולעבוד עם כולן במקביל ) בו-בזמן להחזיק תוכנות רבות פתוחותאפשרואילו היום

multitasking.)

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

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

קפיצת דרך זו.

:בהם היה המשתמש פסיבי לחלוטין, שמעבר מממשקיםמפסיביות לאקטיביות

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

מאפשרים לו לשוטט בכל מרחב סביבת העבודה ולעצבה לפי צרכיו )והמשתמש,

Nielsen, 1993 שלתוכנותה(. הדבר בא לידי ביטוי בממשקי משפחת Office ,בהםש

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

בהם התנהלש מעבר מממשקים אינטואיטיבי וטבעי:דיאלוג מדיאלוג פורמלי ל

הדיאלוג באופן פורמלי ולא טבעי, בעזרת פקודות והודעות טקסטואליות, לממשקים

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

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

47

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

נדונוש( graphic user interfacesה לשיאה בממשקי המשתמש הגרפיים )עמגי

.(31 איור למשל ו ממשקי משתמש" )ראם שלבסעיף "סוגי

( סינטקסמתחביר)הפחתה בצורך בזכירת התחביר של:(סמנטיקהמשמעות ) ל

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

גרפיים. הביטוי הבולט למגמה זו הוא השימוש בצלמיות בממשקי המשתמש

(.א10איור הגרפיים )ראה למשל

:ממשקים דלי משובממעבר מתמיכה כללית לתמיכה הקשרית-ספציפית

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

או לפעולה שהוא עומד לבצע.שנתקל בה לבעיה ייחודיהמשתמש ולספק לו משוב

צלמית בשעה של משמעותה"בועות" המסבירות את ה הןביטוי למגמה זו

.מעבד התמליליםשל בממשק יה, עלמצביע שהמשתמש

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

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

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

p26 לסגירת מסך, או הסימן p27 גבוהה יותררמה אחת ללמעבר

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

של בעיצוב האחדההגרפיים הראשונים. בעשורים האחרונים אנו עדים למגמה של

(. בתהליך זה, תפקודים דומים במערכותShneiderman, 1998ממשקי המחשב )

פתיחת קובץ, שמירה, העתקה, הדבקה( מקבלים ביטוי חזותי דומה,:שונות )למשל

למטרות שונות לחלוטין. הללו נועדומערכות -על-פי שהאף

:"עד הופעת מערכות ההפעלה של "חלונות"מ"כל דבר בזמנו" ל"הכל פתוח

בסוף שנות השמונים )ומקינטוש עוד לפני כן, במהלך שנות השמונים(, התוכנות לא

)למשל,בו-בזמן להשתמש בכמה תוכנות אפשר כך לא היה ועקבברו" זו עם זו, י"ד

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

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

טקסט של מעבד תמלילים תמונה שהוכנה במעבד תמונות(. התפתחותל להוסיף

סביבת "חלונות", אפשרהשל בעיצוב היטבת ההיפרמדיה, המבוטאת סתפי

)בזמןד עם כולם בו-ולראשונה להחזיק כמה יישומים פתוחים, ולעבלמשתמש

multitasking( וכן לשלב חומרים שנוצרו ביישומים שונים ,)Dillon, 2002).

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

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

"משחקיים". ממשקים אלה פונים אל משתמשיםאך טכניים במהותם, לממשקים

48

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

(.31 ו-30)איורים

סיכום 3.9 שפת התקשורת שהתפתחה בסביבות הדיגיטליות: שפתהכרתם אתביחידה זו

,העשריםהתפתחה החל מסוף המאה שממשקי המשתמש. שפה ייחודית זו,

מאפשרת לשפר את יכולתו של המשתמש להפעיל סביבות עבודה דיגיטליות

ביןיעילות, תוך שימוש באמצעים חזותיים ליצירת תקשורת יעילה וטבעית בבמהירות ו

משתמש.ל המחשב

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

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

התשתיתמספקים את תאוריות אלה מושגים ו הגשטלט. תאורייתגילוי האותות ו

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

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

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

בניתוח של ממשק.

49

רשימת קריאהחובה

Dillon, A. )2002(. User Interface Design. In: MacMillan Encylopedia of Cognitive Science. http://www.ischool.utexas.edu/~adillon/publications/CogSciEncy.pdf.

Nielsen, J. )1993(. Usability Engineering. San Diego: Morgan Kaufma. Chap. 3: Generations of user interfaces, pp. 49-70.

Opperman, R. )2002(. User interface design. In Adelsberger, H.H., Collis, B. and Pawlowski, J.M. )Eds.(, Handbook on Information, Technologies for Education and Training )pp. 233-248(. Berlin: Springer-Verlag.

Quesenbery, W. )2001(. On beyond help: Meeting user needs for online information. Technical Communication, 48 (2), 182-189.

רשות

הזיכרון המוצהר., 3 יחידה , קוגניטיבית ה פסיכולוגיה יסודות ה. (2002) ' וזכאי, ד'גושן, יהאוניברסיטה הפתוחה.

235-232, עמ' 5, יחידה יסודות הפסיכולוגיה הקוגניטיבית .(2002) 'זכאי, דהאוניברסיטה הפתוחה.

.66-64' מע, 4יחידה , יסודות הפסיכולוגיה הקוגניטיבית (.2002, ד' )זכאיהפתוחה.האוניברסיטה

Aspillaga, M. )1996(. Perceptual Foundations in the Design of Visual Displays. Computers in Human Behavior, 12 (4), 587-600.

Chiang, W.C. )2001(. Designing and manufacturing consumer products for functionality: A literature review of current function, definitions and support tools. Integrated Manufacturing Systems, 12 (6), 430-448.

Durett, H.J. and Trezona, J. )1982(. How to use color displays effectively? BYTE, 7 (4), 50-53.

Eshet, Y. )2004(. Digital literacy: A conceptual framework for survival skills in the digital era. Journal of Educational Multimedia and Hypermedia, 13 (1), 93-106.

Huff, C.W. and Cooper, J. )1987(. Sex bias in educational software: The effect of designers’ stereotype on software they design. Journal of Applied Social Psychology, 17 (6), 519-532.

Jonassen, D.H. and Henning, P. )1999(. Mental models: Knowledge in the head and knowledge in the world. Educational Technology, 39 (3), 37-42.

Kellog, W.A. )1989(. The dimension of consistency. In Nielsen, J. )Ed.(, Coordinating User Interfaces for Consistency )pp. 9-20(. Boston, MA.: Academic Press.

50

Lazar, J., Bessiere, K., Ceaparu, I., Robinson, J., Shneiderman, B. )2003(. Help! I'm lost: User frustration in web navigation. IT & Society, 1, 18-26 )also at: www.ITandSociety.org(.

Lewis, C., Hair, D., and Schoenberg, V. )1989(. Generalization, consistency and control. Proc. ACM CHI’89 Conf. (Austin, TX), 1-5.

Macmillan, N.A. and Creelman, C D. )1991(. Detection theory: A user guide. Cambridge, England: Cambridge University Press.

Margono, S. and Shneiderman, B. )1987(. A study of file manipulation by novices using direct command versus direct manipulation. 26th Annual Technical Symposium, ACM Washington DC (June, 1987), 154-159.

Mullet, K. and Sano, D. )1995(. Designing Visual Interfaces. N.J.: Prentice Hall.

Navon, D. )1977(. Forest before trees: The precedence of global features in visual perception. Cognitive Psychology, 9, 353-383.

Nielsen, J. )1993(. Usability Engineering. San Diego: Morgan Kaufma. Chap. 5: Usability Heuristics, pp. 115-163.

Nielsen, J. and Tahir, M. )2002(. Homepage Usability. New York, New Riders Publishing.

Norman, D., and Draper, S. )1986(. User Centered System Design : New Perspectives on Human-Computer Interaction. London: Lawrence Erlbaum.

Pap, K.R. and Roske-Hofstrand, R.J. )1988(. Design of Menus. In Helander, M. )ed.(, Handbook of Human-Computer Interaction )pp. 205-235(. Amsterdam: North Holland.

Salomon, G. )1979(. Interaction of Media, Cognition, and Learning. San Francisco: Jossey-Bass.

Salomon, G. )1981(. Communication and Education. Beverly Hills, CA: Sage.

Salomon, G., Perkins, D., and Globerson, T. )1991(. Partners in cognition: Extending human intelligence with intelligent technologies. Educational Researcher, 20 (4), 2-9.

Sekuler, R., and Blake, R. )1990(. Spatial vision and pattern perception. In: Perception )pp. 132-171(. New York: McGraw-Hill.

Shneiderman, B. )1998(. Designing the User Interface )pp. 67-78(. N.Y: Addison Wesley.

Shneiderman, B., Feldman, D., Rose, A., and Ferre Grau, X. )1999(. Visualizing Digital Library Search Results with Categorical and Hierarchial Axes. CS-TR-3992 , UMIACS-TR-99-12, ISR-TR.

Smilowitz, E. )2001(. Do Metaphors Make Web Browsers Easier to Use? http://www.baddesigns.com/mswebcnf.htm.

Springer, C.J. )1987(. Review of information from complex alphanumeric displays: Screen formatting variables’ effects on target identification time. In Salvendy, G.

51

)Ed.(, Cognitive Egineering in the Design of Human-Computer Interaction and Expert Systems )pp. 375-382(. Amsterdam: Elsvier Science Publishers.

Williams, R. )1994(. The Non-Designers Design Book. Berkeley, Ca.: Peachpit Press.

52