כמה פעמים ישבתם מול הודעה שאומרת לכם – "[משהו] עומד לקרות. האם להמשיך?", עם כפתורי "המשך" ו"בטל"? כמה פעמים מתוכן קראתם את ההודעה שוב ושוב והתלבטתם על מה ללחוץ, וכמה פעמים פשוט לחצתם על "בטל" או "המשך" בלי לחשוב?

על הודעות אישור פעולה (confirmation messages), מתי להשתמש בהן ומתי ממש לא.

דוגמה

כולנו נתקלנו בהודעות כמו זו מג'ימייל:

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

עדיף לא להסתכן בטעות

מאיר אריאל שר "טעות במחשב עלתה לי מיליון…" – ויטלי כתב על מקרה מהשבוע האחרון שבו זה באמת קרה: סוחר בבורסה לחץ בטעות על הכפתור הלא נכון, והזרים הוראה לרכישה של מיליארדי (ביליונֵי) מניות, במקום מיליונים. הבורסה הגיבה בנפילה. האם המשתמש טעה ולחץ על "b" (עבור billion) במקום על "m" (עבור million)? כנראה שלא נדע. אבל בכל מקרה שבו מציבים מכשול, מקום שבו משתמשים עשויים לטעות, יהיו כאלה שיטעו בו. אפשר לשאול את המשתמש "האם אתה בטוח?", אבל יותר כדאי לעצב את המערכת כך שלא יהיה סיכוי לטעות.

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

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

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

סכנה 1: הטרדה

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

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

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

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

סכנה 2: ניסוח

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

לא הבנתם? הנה, אריק איינשטיין יסביר לכם:

אז האם זה "Document Recovery task pane" במובן של "גרופן" או במובן של "גראפן"?

אם נשים לרגע את הצחוק בצד, למי מכם שלא יודע, ה"Document Recovery task pane" זו החלונית שבה מופיעים כל המסמכים ש-Powerpoint שמר אוטומטית עבורכם לפני שהתוכנה התרסקה. כלומר, אלה גרסאות של מצגות שלא שמרתם בפעם האחרונה שעבדתם עליהן, וזו ההזדמנות האחרונה להציל אותן. האם אי אפשר היה לכתוב משהו שאומר את זה?

סכנה 3: עיצוב גראפי

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

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

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

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

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

סכנה 4: ברירות מחדל וכפתורי פעולה

ההודעה הלקויה של Powerpoint הופכת לקריטית הרבה יותר כשלוקחים בחשבון שברירת המחדל של כפתורי האפשרויות היא "No", כלומר אם לחצתם באופן אוטומאטי OK, שמסומן גם הוא כברירת מחדל, הקבצים שלכם הלכו. נמחקו. נעלמו. לנצח. כפי שכבר כתבנו קודם, רוב האנשים לא קוראים מה כתוב בהודעה, ולכן הם פשוט ילחצו על הדבר הראשון שנראה שיקדם אותם הלאה – כפתור ה-OK. הסכנה ברורה?

סיכום

כדאי לתכנן את המערכת כך שהיא לא תכשיל את המשתמש ותגרום לו לבצע פעולות שהוא לא מעוניין בהן (action slips). פתרונות עיצוביים שונים עשויים לבטל את הצורך בהודעות כאלה בכלל, או לצמצם אותו משמעותית. אם מחליטים להציג הודעות כאלה, כדאי:

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

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

התמונה שלמעלה: CC by adobemac

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

כמה מחשבות שלי על whitespace – הריווח הזה שתופס את תשומת הלב שלנו, ועל ארגון מידע בדף.

צילום המסך השבועי לילד

כך נראה הדף של גוגל כשהוא נטען:

הממשק הנעלם: ככה הדף נטען (לחצו להגדלה)

וככה זה אחרי שהעכבר עובר עליו – העמוד שאנחנו רגילים אליו:

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

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

גימיק או שינוי אמיתי?

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

העובדה שהדף לבן למעט תיבת החיפוש מושכת את העין בצורה מאוד משמעותית. יש פה שימוש יפה של אפקט ה-whitespace על משיכת תשומת לב, כפי שהזכרתי בפוסט השערורייתי סקס!!! ואיך למשוך תשומת לב: חלק 1 מתוך 3. טוב, אולי לא כל-כך שערורייתי העובדה שאין כמעט כלום על הדף מייצרת קשב למקום שיש בו תוכן.

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

עדכון 9/12: משיכת תשומת הלב לתיבת החיפוש היא רק חצי מהעניין. אחרי שגוגל וידאו שאנחנו ממוקדים על המטרה שלנו, תיבת החיפוש, הם השתמשו ב-fade-in כדי למשוך את תשומת הלב שלנו לכל הכלים האחרים שיש על הדף. אנשים רבים לא מודעים לכלים האלה בכלל: יומן הפגישות, מפות, חיפוש וידאו ועוד אחרים. האנימציה של ה-fade-in מפעילה את האיזורים בראיה ההיקפית שלנו; אלה רגישים לתנועה, שריד לתקופה הלא מאוד רחוקה שבה היינו צריכים להתגונן מפני חיות טרף מהירות שקפצו עלינו מהשיחים בזמן שאנחנו קטפנו תותי יער או שוקולד מהעצים. תזכירו לי לא לכתוב יותר פוסטים כשאני רעב. ותודה לעליזה על ההערה.

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

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

צפוף וחמים בואלה (לחצו להגדלה)

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

אמזון - מרווח ואוורירי (לחצו להגדלה)

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

תעמדו בטור ישר

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

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

היה מעניין לשמוע, אם מישהו ב-ynet קורא את המילים האלה, מה השיקולים מאחורי ההחלטה הזו.

הצילום בראש הכתבה הוא של LWY והטיגריסים של fPat

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

כמה אסוציאציות על זכרון מהעולם שמסביב, וכמה מילים על עקרון הזכירוּת – memorability, מדד חשוב של שמישות (usability).

כתבנו יצא לשופינג

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

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

הנה דוגמא:

מה קשור?

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

רמז: התמונות לא צולמו באותה הקומה. כבר יותר ברור?

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

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

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

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

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

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

אני זוכר אותה קונה שם סולת

יש עוד כלים שמסייעים לזכור.

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

llaves הם כמובן מפתחות, בספרדית.

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

ובעולם הממשק?

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

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

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

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

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

סיכום

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

והנה קטע מעולה מסיינפלד על לזכור את מקום החניה (גם לג'ורג' אין עט!), תודה לעמית יונגר:

הגשטאלטיסטים היו שלושה פסיכולוגים גרמניים, Koffka, Köhler ו-Wertheimer שפעלו בשנות ה-30 וה-40 של המאה העשרים. הם פיתחו מספר כללים שמתארים את האופן שבו המוח שלנו מפענח את הצורה והארגון של אובייקטים. הכללים שהם פיתחו נכונים גם היום, ואפשר לראות ולבחון אותם בכל ממשק משתמש ואתר אינטרנט. הבנה ושימוש נכון בכללי הגשטאלט מאפשר שליטה יותר טובה בארגון של הממשק, בעומס הקוגניטיבי שהוא יוצר אצל הצופה, ובמה שהוא משדר.

כללי הגשטאלט

5 עיגולים פשוטים או אוסף צורות מורכבות אחרות?

כללי הגשטאלט מבוססים כולם על כלל אחד בסיסי: Prägnanz – מילולית "תמציתיות". המשמעות שלו היא שבהינתן קבוצת אובייקטים, נשאף לתפוס אותם בצורה הפשוטה, הטובה והיציבה ביותר. לדוגמא, את התמונה שמשמאל נפרש כ-5 עיגולים שמשולבים אחד בשני, למרות שאפשר היה באותה מידה לפענח אותה כאוסף של צורות מורכבות רבות.

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

1. קירבה – Proximity
2. דמיון – Similarity
3. המשכיות – Continuity
4. סגירה – Closure
5. סימטריה – Symmetry
6. גורל משותף – Common Fate

כלל 1: קירבה -  Proximity

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

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

אפשר לראות כאן איך הכלל הזה בא לידי ביטוי בממשק המשתמש (מתוך MS Office 2007). אנחנו רואים קבוצה אחת של 3 אפשרויות:

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

זה נראה אולי ברור מאליו, אבל בעיצוב ממשק משתמש זהו כלי בעל עוצמה רבה. כאן למטה, למשל, אפשר לראות שימוש שעשו בו בעיצוב של ג'ימייל. במבט אחד ברור לנו שיש כאן 3 קבוצות של פעולות: Compose (יצירת דוא"ל חדש), תיקיות הדוא"ל השונות, ואנשי הקשר:

כלל 2: דמיון – Similarity

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

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

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

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

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

כלל 3: המשכיות – Continuity

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

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

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

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

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

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

כלל 4: סגירה

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

הנה דוגמא טיפוסית שמדגימה את העקרון הזה:

במבט ראשון, נראה כאן עיגול שלם, למרות שהוא פתוח. העקרון הזה מרמז על השאיפה שלנו לִצְפּוֹת בצורות סגורות. אם נסייע לממשק להיראות כצורה סגורה, נתמוך בשאיפה הזו. מסגרות יכולות להיות דרך אחת ליצור צורה סגורה כמו למשל ב-New York Times, אבל גם ארגון של אלמנטים יכול לתת תחושה של צורה סגורה, כמו בעמוד הבית של אורנג' (למעט הרווח בסוף האיזור הירוק):

כלל 5: סימטריה – Symmetry

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

הנה דוגמא:

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

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

כלל 6: גורל משותף – Common Fate

אובייקטים הנעים באותו הכיוון נתפסים כקבוצה אחת.

בממשק אפשר לראות איך Drag and Drop משתמש בכלל הזה. אנו תופסים אובייקט באמצעות העכבר, ומאותו הרגע לסמן העכבר ולאובייקט שצמוד אליו יש "גורל משותף", ממש כמו רות ונעמי במגילת רות ("באשר תלכי אלך ובאשר תליני אלוּן", וכו'). יש כאלה שמייחסים את הכלל הזה גם לאלמנטים סטטיים; למשל, אובייקטים שמיושרים לאותו כיוון (ימין/שמאל) ייתפסו כקבוצה אחת, כלומר היישור נתפס כסוג של תנועה.

סיכום

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

עוד על גשטאלט

• בוויקיפדיה בעברית אין הרבה, הנה הערך באנגלית – Gestalt Psychology.
• PDF של מצגת מקורס HCI באוניברסיטת Rutgers.
• מצגת PowerPoint על 4 מתוך עקרונות הגשטאלט, עם דוגמאות ממשק מעט מיושנות בעיצוב שלהן, אבל מעניינות.
• סדרת פוסטים קצרים על כללי הגשטאלט. מאוד שיווקיים ("המומחים שלנו בדקו במשך 8 שנים…"), אבל עם הרבה קישורים למידע נוסף ואיורים טובים.