מפת נושאי הספר:

מפת הספר
 

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

זיהוי

מבניות

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

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

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

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

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

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

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

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

    (מיתוג, מצב רוח וכו').
5. מידע מובנה:
    יותר קל למוח שלנו לקרוא ולעבד פסקאות של טקסט שמנוסחות ככותרות ושדות, מאשר

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

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

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

    רווח/מקף/נקודה. כנ"ל, עדיף להפריד למרכיביהם כתובות מייל או תכנים אחרים בעלי מבניות.

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

    בנוסף, הראייה המרחבית שלנו מוגבלת, ויש להתחשב במגבלה זו בתכנון, ובמיוחד בתכנון הודעות:
1. מיקום: יש לשים את הודעות השגיאה במקום שבו סביר שהמשתמש מסתכל.
2. סימון: יש לסמן הודעות שגיאה.
3. סימול: מומלץ ללוות הודעות שגיאה בסימול (icon) כדי להגביר את הנראות שלה.
4. צבע: מומלץ לשמור את השימוש בצבע האדם עבור הודעות שגיאה, ועבורן בלבד.
5. הדגשת הודעה: כדי להדגיש הודעה, ניתן להציפה כחלונית נפרדת , ללוותה בקול ו/או

   להשתמש בתנועה (flash).

    חזרה

טקסט

Johson מפתיע אותנו; קריאה, כך הוא מלמד אותנו, אינה פעולה טבעית לאדם. משחר ההיסטוריה דיברנו, אך הכתיבה והקריאה הינם חדשים יחסית, ולמרות שאנו מדחיקים/מכחישים, לא קלים לנו. ישנו ויכוח מעמיק בספרות האם קריאה היא תהליך Top-Down (קוראים משפטים שלמים ואת הקשריהם) או Bottom-Up  (מרכיבים מילות מפתח). לאחר דיון מעמיק, מספר Johnson שיותר יעיל דווקא לקרוא Bottom-Up, אך קריאה כזו אפשרית רק כאשר ישנה מיומנות גבוהה בקריאה ובשפה.
המלצות עיצוביות הנגזרות מכך:
1. אוצר מילים: יש לעשות שימוש באוצר מילים מוכר ושכיח.
2. דרך כתיבת התווים: יש להשתמש בפונטים נעימים, להימנע מהדגשות כפולות

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

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

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

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

חזרה

צבע

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

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

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

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

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

המלצות עיצוביות:
1. הפרדת צבעים במספר ממדים:
    מומלץ להפריד צבעים גם ב- saturation (רוויה) , ב brightness (בהירות) , מעבר כמובן

    להפרדה ב - hue (גוון).
2. שימוש בצבעים שונים בערוצים נפרדים:
    כלומר- יש להרבות להשתמש בשחור, לבן, אדום, ירוק, צהוב וסגול, ופחות בצבעים אחרים.
3. זוגות צבעים:
    הימנעות משימוש בזוגות צבעים שעיוורי צבעים לא מבחינים ביניהם.
4. רב חושיות:
    בצד ההפרדה של צבע, מומלץ לשקול חיוויים משלימים של חושים אחרים (צורה/ icon-ים).
5. הפרדת צבעים עם ניגודיות גבוהה:
    כאשר יש ניגודיות גבוהה בין צבעים, עדיף להרחיק אותם זה מזה, כדי להקל על התפיסה.

חזרה

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

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

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

ההמלצות העיצוריות הנובעות מכך:
1. בהירות:
    יש להימנע מ אי בהירות: יש לוודא שמשתמשים שונים מבינים את התצוגה בדרך דומה.
2. עקביות:
    יש לשמור על עקביות: מיקומים קבועים, שימוש עקבי בצבעים, ב- icon-ים ועוד.
3. מטרות:
    • יש להביו את המטרות אותן רוצה המשתמש להשיג בהגיעו ליישום, ולוודא שקיימים תרחישים

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

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

    (cleanup steps) כי הן אינן במרכז תשומת הלב הטבעית להשגת המטרה.

בנוסף, התפיסה שלנו מבוססת יותר על זיהוי (Recognition)  ופחות על היזכרות (Recall).
המלצות עיצוביות נגזרות:
1. בחירה:
    לאפשר יותר בחירה בין אפשרויות ופחות בקשה מאנשים לזכור את הפעולות ולהקליד אותן.
2. תמונות:
    שימוש בתמונות היכן שאפשר ומתאים, לצד פונקציות. קל יותר לזהות אותן מאשר את המלל.
    ככל שיותר אנשים יעשו שימוש בתמונה, יש לתכנן אותה באופן יותר ויזואלי.
3. Thumbnails:
    שימוש ב Thumbnails  (תמונה ממוזערת) כדי לרמז על תוכן המסך המלא.
4. סימנים:
    שימוש בסימנים ויזואליים המזכירים למשתמש את מיקומו במערכת/אתר.
5. מידע מזהה:
    הקלה על המשתמש שצריך לזכור סיסמאות או מידע מזהה אחר; גמישות בבחירה ורמזים

    מסייעים היכן שאפשר.

חזרה

זיכרון

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

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

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

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

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

    שישמשו לאימות.
2. עקביות: כדי להקל על המשתמש שמתקשה לזכור, מומלץ להשתמש בפעולות עקביות, שתמנענה ממנו

    את הצורך להפעלת הזיכרון הארוך.

חזרה

למידה

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

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

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

    2 רמות תעדוף במקום תעדוף מלא וכו'; עקביות תסייע אף היא לפשטות הנתפסת.
2. ניסוחים:
    ניסוחים שמוכווני מטרה בעיני המשתמש (ולא בעיני המתכנן/ מתכנת); שימוש בניסוחים

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

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

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

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

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

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

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

   חישוב. למשל- לאפשר למשתמש לדפדף לאמצע המסמך ע"י הזזת ה BAR הימני שליד

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

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

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

   בקלות יחסית.

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

חזרה

תגובתיות

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

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

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

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

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

    שמתבצעת.
5. ציון התקדמות:
    אפשרות למשתמש לדעת עד כמה המערכת מתקדמת ביחס לביצוע הפעולה המתארכת.
6. חופש לפעולות אחרות:
    מתן חופש למשתמש לבצע פעולות אחרות בעת שהמערכת עסוקה.
7. ביטול:
    אפשרות למשתמש להתחרט ולהפסיק פעולה שאורכת זמן רב באמצעיתה.

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

    מלכתחילה; יש להגביל כמות והיקף תמונות, יש לאפשר הצגת Thumbnails והצגה

    הדרגתית חכמה של תמונות, יש להשתמש במרכיבים שפחות גוזלי זמן (למשל בדפדפנים

    יש פעולות שהינן Built-in בדפדפנים וככאלה זולים יותר בזמנים) ועוד.

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

חזרה