הנושאים החמים
GRN
משתמש סופר מקצוען
מנהל קבוצה
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
צילום מקצועי
עיצוב ואדריכלות פנים
•
- הוסף לסימניות
- #1
הגֶשטָאלט של הממשק
<small>13 ביוני, 2009 | 20 תגובות | מתוך: בית-הספר לחוויית משתמש, ממשק המשתמש UI, פסיכולוגיה קוגניטיבית.</small>
הגשטאלטיסטים היו שלושה פסיכולוגים גרמניים, Koffka, Köhler ו-Wertheimer שפעלו בשנות ה-30 וה-40 של המאה העשרים. הם פיתחו מספר כללים שמתארים את האופן שבו המוח שלנו מפענח את הצורה והארגון של אובייקטים. הכללים שהם פיתחו נכונים גם היום, ואפשר לראות ולבחון אותם בכל ממשק משתמש ואתר אינטרנט. הבנה ושימוש נכון בכללי הגשטאלט מאפשר שליטה יותר טובה בארגון של הממשק, בעומס הקוגניטיבי שהוא יוצר אצל הצופה, ובמה שהוא משדר.
כללי הגשטאלט
5 עיגולים פשוטים או אוסף צורות מורכבות אחרות?
כללי הגשטאלט מבוססים כולם על כלל אחד בסיסי: Prägnanz – מילולית "תמציתיות". המשמעות שלו היא שבהינתן קבוצת אובייקטים, נשאף לתפוס אותם בצורה הפשוטה, הטובה והיציבה ביותר. לדוגמא, את התמונה שמשמאל נפרש כ-5 עיגולים שמשולבים אחד בשני, למרות שאפשר היה באותה מידה לפענח אותה כאוסף של צורות מורכבות רבות.
אלה הם 6 מכללי הגשטאלט (יש עוד כמה שפחות רלוונטיים לממשק המשתמש):
אנו תופסים אובייקטים סמוכים כשייכים לקבוצה אחת.
בתמונה הזו אנחנו רואים בקלות שתי קבוצות של 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 שנה, ממשיכים להשפיע על עיצוב אתרים וממשקי משתמש גם היום. שימוש נכון בהם יכול לסייע למשתמשים לפענח את הממשק מהר יותר ובקלות רבה יותר.
<small>13 ביוני, 2009 | 20 תגובות | מתוך: בית-הספר לחוויית משתמש, ממשק המשתמש UI, פסיכולוגיה קוגניטיבית.</small>
הגשטאלטיסטים היו שלושה פסיכולוגים גרמניים, Koffka, Köhler ו-Wertheimer שפעלו בשנות ה-30 וה-40 של המאה העשרים. הם פיתחו מספר כללים שמתארים את האופן שבו המוח שלנו מפענח את הצורה והארגון של אובייקטים. הכללים שהם פיתחו נכונים גם היום, ואפשר לראות ולבחון אותם בכל ממשק משתמש ואתר אינטרנט. הבנה ושימוש נכון בכללי הגשטאלט מאפשר שליטה יותר טובה בארגון של הממשק, בעומס הקוגניטיבי שהוא יוצר אצל הצופה, ובמה שהוא משדר.כללי הגשטאלט
כללי הגשטאלט מבוססים כולם על כלל אחד בסיסי: Prägnanz – מילולית "תמציתיות". המשמעות שלו היא שבהינתן קבוצת אובייקטים, נשאף לתפוס אותם בצורה הפשוטה, הטובה והיציבה ביותר. לדוגמא, את התמונה שמשמאל נפרש כ-5 עיגולים שמשולבים אחד בשני, למרות שאפשר היה באותה מידה לפענח אותה כאוסף של צורות מורכבות רבות.
אלה הם 6 מכללי הגשטאלט (יש עוד כמה שפחות רלוונטיים לממשק המשתמש):
- קירבה – Proximity
- דמיון – Similarity
- המשכיות – Continuity
- סגירה – Closure
- סימטריה – Symmetry
- גורל משותף – Common Fate
אנו תופסים אובייקטים סמוכים כשייכים לקבוצה אחת.
בתמונה הזו אנחנו רואים בקלות שתי קבוצות של 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 שנה, ממשיכים להשפיע על עיצוב אתרים וממשקי משתמש גם היום. שימוש נכון בהם יכול לסייע למשתמשים לפענח את הממשק מהר יותר ובקלות רבה יותר.
