1. מאמרים
1.1. "User Interface Design" (2002) Dillon, Andrew
1.1.1. Cognitive science and design
1.1.1.1. user
1.1.1.1.1. psychomotor
1.1.1.1.2. perceptual
1.1.1.1.3. cognitive subsystems
1.1.1.1.4. social context
1.1.2. Human-Computer interaction
1.1.3. Cognitive design guidelines
1.1.3.1. Screen Readability and Image Quality
1.1.3.2. Manipulation and Input Devices
1.1.3.3. Supporting Accurate Mental Model Formation
1.1.3.4. Use of Metaphors to Enhance Comprehension and Learning
1.1.3.5. Learning by Doing
1.1.3.6. Minimizing Attentional and Cognitive Load
1.1.3.7. Using Images and Icons
1.1.4. Cognitive theories and models in HCI
1.1.4.1. Interaction as Serial Information Processing
1.1.4.2. Socio-cognitive analyses of HCI
1.1.4.2.1. Activity Theory
1.1.4.2.2. Acceptance Models
1.1.5. Developing user-centered design methods
1.2. "User Intreface Design" (2002) Opperman, Reinhard
1.3. "On Beyond Help: Meeting User Needs for Online Information" (2001) Quesenbery, Whitney
1.4. Mental Models and Usability (1999) Davidson, Dove,Weltz
2. תאוריות תפיסתיות
2.1. עיבוד לוקאלי מול גלובאלי
2.2. תאוריית גילוי האותות
2.3. מודלים מנטליים
2.4. גשטלט
2.4.1. 1. דמות ורקע
2.4.1.1. עקרון הדמות והרקע הוא הבסיסי בעקרונות הגשטלט. לפיו קיימת נטייה לתפוס את החלל המרחבי כעשוי מדמויות הנתונות על רקע, וכשמתמקדים בדמות, מתעלמים מהרקע. הבה נדגים זאת בעזרת איור 13, שבו הדמות והרקע מתחלפים: באיור 13א, אם מתמקדים באגרטל כ"דמות", לא רואים שהרקע עשוי בעצם משני דיוקנים. לעומת זאת, אם מתמקדים בדיוקנים, נהפך האגרטל לרקע ואי אפשר לזהותו כעצם. גם איור 13ב מדגים את הקושי להחליף בין הדמות לרקע: היכולת לזהות את דמותו של וושינגטון מותנית בהתמקדות בו ובהפיכת העץ לרקע. איור 13ג מדגים איך הרקע משפיע על תפיסת הדמות.
2.4.1.2. מה משמעותו של עקרון הדמות והרקע בעיצוב ממשק המשתמש? אם מתייחסים אל ממשק המשתמש כולו כאל ישות שלמה, אפשר לומר שיש בו שני רבדים: ה"דמות" (הייצוגים הגרפיים), וה"רקע" שעליו מופיעים אותם מרכיבים. במהלך עבודתו בממשק, המשתמש תר אחר הצלמית המייצגת את הפעולה שהוא מבקש לבצע (הדמות), ומנסה להפרידה מן הרקע שבו היא נתונה. עיצוב טוב של ממשק מאפשר למשתמש לאתר במהירות את ה"דמות", להפרידה מהרקע ולהתמקד בה. לפיכך, בעיצוב הממשק יש אתגר הן בעיצוב הדמויות והן בעיצוב המרחב שבו הן מצויות (ה"רקע"). ניגוד (contrast) גדול בין הדמות לרקע יסייע למשתמש לזהות אלמנטים בממשק. כשאין ניגוד טוב בין הדמות לרקע, קשה לזהות את מרכיבי הממשק
2.4.2. 2. סגירות (closure)
2.4.2.1. עקרון הסגירות הוא הנטייה לתפוס חלל התחום על-ידי קווי מִתאר כצורה סגורה, וכשקווי המִתאר אינם רצופים – להשלימם בדמיון כדי לסגור את הצורה ולהפכה ל"נכונה". למשל, באיור 15, המשולש והריבוע ה"ריקים" אינם מצוירים באמת; הם נוצרו מסגירת החלל התחום בין קווי הגבול הצבעוניים על-ידי התבנית התפיסתית שלכם, הנוטה לסגור צורות פתוחות ובכך לצקת בהן משמעות. עקרון הסגירות מתקשר להנחת התיקונים (Pragnanz) של הגשטלט: הוא גורם לנו "לתקן" צורות על-ידי סגירתן והפיכתן ל"צורות טובות" מקובלות ומוכרות (משולש, מרובע, מגן דוד), התואמות את תבניות התפיסה שלנו.
2.4.2.2. באשר לעיצוב ממשקים, המעצב צריך לזכור שמבלי משים הוא עלול ליצור אשליה של אובייקט לא רצוי במרחב שבין צלמיות שונות. קחו לדוגמה את המשולש שראיתם בין ה"פקמנים" איור 12. אילו היה כל פקמן צלמית המייצגת פעולה, סביר שתפיסתו של המשולש הייתה גורמת אי-נחת וקושי בתפעולם של הפקמנים והפעולות שהם מייצגים.
2.4.3. 3. סמיכות (proximity)
2.4.3.1. פי עקרון הסמיכות, יש נטייה לתפוס עצמים המצויים בסמיכות זה לזה כשייכים או קשורים זה לזה. לדוגמה, כשרואים גבר, אשה וילד יושבים ביחד סביב השולחן, מניחים שהם שייכים למשפחה אחת. הקרבה הפיזית של העצמים נתפסת כקרבה סמנטית – קרבה של משמעות משותפת. הבה נדגים זאת באיור 16: כשהריבועים מצויים במרחקים שווים זה מזה, אנו רואים דגם פיזור אחיד ביניהם (איור 16א), אבל כשמצמצמים את המרחק האנכי שבין הריבועים, נוצר דגם של טורים (איור 16ב) וכשמצמצמים את המרחק האופקי ביניהם – נוצר דגם של שורות (איור 16ג). המילים "שורות" או "טורים" מבטאות את הקרבה הסמנטית שהסמיכות יצרה בין הריבועים.
2.4.3.2. היישום של עקרון הסמיכות בעיצוב הממשק מתבטא בקידוד מידע לפי מיקום, נושא שנדון לעיל בפרק על ייצוגי ידע בממשק. המעצב מניח שבתבנית התפיסתית של המשתמש לגבי ממשק מקוּדָד מיקום קבוע לכל פעולה או צלמית, עובדה המייעלת את פעולתו של המשתמש בממשק. עיצוב הממשק צריך לסייע למשתמש לתפוס את הממשק כתבנית עם אזורים פונקציונליים מוגדרים. לפיכך יש לדאוג שעצמים בעלי תפקוד או משמעות דומה, כגון "אזור עריכה" ו"אזור גרפי", יימצאו בסמיכות זה לזה. הדבר ישפר את יכולת ההתמצאות המרחבית של המשתמש ואת יעילות עבודתו בממשק.
2.4.4. 4. דמיון (similarity)
2.4.4.1. לפי עיקרון זה, כאשר כמה עצמים מוצגים זה לצד זה, אנו נוטים לייחס את אלה מביניהם הדומים זה לזה לישות או לקבוצה אחת. כמודגם באיור 19, עקרון הדמיון חל לא רק על צורה אלא על כל תכונה משותפת, כמו צבע או מרקם (טקסטורה). באיור 19א צביעת חלק מהריבועים באדום הובילה ליצירת דגם של שורות
2.4.4.2. ביישום של עקרון הדמיון בעיצוב ממשקים יש ביטוי לשני אופני הקידוד הנפוצים בהצגת מידע: קידוד לפי צבע וקידוד לפי צורה. בפרק ייצוגי ידע בממשק הבאנו ממצאים שלפיהם רבות מהפעולות בממשק מקוּדָדות בתפיסת המשתמש לפי צורה או לפי צבע. ממשק יעיל מנצל צבע וצורה כדי ליצור תבניות תפיסתיות לגבי פעולות שונות בממשק. לדוגמה, התבוננו בדף הבית של אוניברסיטת טנסי (איור 20). שימו לב שהפונקציות השונות בממשק נצבעו בצבעים שונים: כל הנושאים השייכים לאותו תפקוד מופיעים באותו צבע (למשל, הרשמה בצבע אחד, מידע לסטודנט בצבע אחר).
2.4.5. 5. המשכיות (continuity)
2.4.5.1. פי עיקרון זה, עצמים המצויים על גבי רצף אחד נתפסים כשייכים לישות אחת.
2.4.5.2. בנוגע לממשקים, עקרון ההמשכיות חשוב לא לעיצובו של מסך יחיד אלא לקישור בין כמה מסכים השייכים לאותה תוכנה או לאותה סביבת עבודה. המשתמש בממשקי מחשב מצפה שהמסכים שהוא מגיע אליהם מן המסך הראשי יהיו דומים זה לזה, וביחד ייצרו איזה "שלם". מעצב הממשק צריך אפוא לדאוג שיהיה רצף ודמיון בין המסכים המרכיבים את סביבת העבודה.
2.5. תיאורית מערכות הסמלים של סלומון
3. ספר הקורס
3.1. 3.1 מבוא: ממשק המשתמש - ייצוג חזותי של סביבות עבודה
3.2. 3.2 מהו ממשק משתמש?
3.3. 3.3 הממשק כשפת תקשורת
3.3.1. עיצובם של ממשקי המשתמש מבוסס על העיקרון המכונה "שימוש בראייה לשם חשיבה" (using vision to think,). עיקרון זה מניח ש"תמונה אחת שווה אלף מילים", ושאפשר ליצור שפת תקשורת חזותית בעלת כללים ועקרונות מוגדרים, שתשמש לעיצובם של ממשקים יעילים. שפה כזאת נעזרת באמצעים גרפיים לייצוג כל הפעולות שאפשר לבצע בממשק, ומייעלת את עבודת המשתמש בזכות התקשורת הטבעית שהיא מנהלת עם המערכת הקוגניטיבית שלו.
3.3.2. icons
3.3.2.1. ייצוגים מטפוריים
3.3.2.1.1. מטפורה חזקה / חלשה
3.4. 3.4 ייצוגי ידע בממשק
3.4.1. ממשק המשתמש הוא בעצם מערכת של סמלים (symbol system)
3.4.1.1. את תאוריית מערכות הסמלים (symbol systems theory) ניסח סלומון בעקבות מחקריו על השפעת אמצעי התקשורת (המדיה), ובעיקר סרטים ותכניות טלוויזיה (כמו Sesame Street), על תהליכי למידה (Salomon, 1979, 1981; Salomon et al., 1991)
3.4.1.1.1. לפי התאוריה, הסכֶמה שמביא עמו הלומד לסביבת העבודה קובעת במידה רבה כיצד יפרש מסרים חזותיים המופיעים בה.
3.4.1.1.2. משל, סל המִיחזור מיוצג בממשקים רבים על-ידי ציור של סל ניירות ועליו סמל המִיחזור ( ). זוהי מטפורה חזקה שכן היא תואמת את הסכמה שיש למשתמש לגבי המקום בסביבת העבודה שאליו משליכים קבצים שאין בהם עוד צורך, אך עדיין אפשר לשלפם משם (למחזר אותם) אם מתחרטים. השימוש בייצוג גרפי מאפשר לקודד (או להצפין) ידע רב לתוך ייצוג קונקרטי ממוזער, היוצר גירוי במערכת אחסון הידע של המשתמש, ומפעיל שרשרת פעולות אינטואיטיביות בתגובה לגירוי.
3.4.2. הסמלים החזותיים של הפעולות בממשק הם משני סוגים
3.4.2.1. סמלים תמונתיים
3.4.2.1.1. יתרונו של הסמל התמונתי הוא בהיותו טבעי-אינטואיטיבי, אוניברסלי יחסית ובלתי-תלוי בשפה.
3.4.2.2. סמלים מוסכמים לא-תמונתיים
3.4.2.2.1. חסרונם של הסמלים המוסכמים הלא-תמונתיים הוא בהיותם מופשטים ופחות אינטואיטיביים, מה שמקשה על המשתמש לזכור את משמעותם. רבים מהם תלויים בתרבות ובשפה (למשל, צריך לדעת אנגלית כדי להבין את משמעות הסמלים B ו- U). בדרך כלל משתמשים בהם כשקשה לייצג את הפעולה בעזרת תמונה ברורה
3.4.3. קידוד
3.4.3.1. קידוד לפי צבע
3.4.3.2. קידוד לפי צורה
3.4.3.3. קידוד לפי מקום
3.5. 3.5 עיצוב ממשקים ותפיסת המרחב החזותי
3.6. 3.6 כללים בעיצוב ממשקי משתמש
3.7. 3.7 סוגים של ממשקי משתמש
3.8. 3.8 מגמות בהתפתחות של ממשקי מחשב
4. more
4.1. User Interface Design and Implementation course at MIT
4.2. 10 Best App UIs
4.3. Usability in W3C
4.4. דוגמא לשימוש במטאפורות בתכנון ועיצוב ממשק משתמש
4.5. Web Content Accessibility Guidelines (WCAG) 2.0
4.5.1. Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
4.5.2. Principle 2: Operable - User interface components and navigation must be operable.
4.5.3. Principle 3: Understandable - Information and the operation of user interface must be understandable.
4.5.4. Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
4.6. Usability at Smashing Magazine
4.6.1. 30 Usability Issues To Be Aware Of
5. yotube
5.1. 10 Usability Heuristics by Jacob Neilson
5.2. John Underkoffler points to the future of UI
6. שיפור הכלי
6.1. אפשרות להגדיר סוג של תא. כל פעם שמוסיפים תא מסוג מסויים נוסף למעלה ריבוע המאפשר להציג את כל התאים מסוג זה. למשל, במפה הנוכחית הייתי מגידרה את כל העקרונות השימושיות השונים כסוג ואז רואה אותם כרשימה - העקרונות של W3 והעקרונות של נילסון ואחרים.
6.2. חסר חיפוש
6.3. אולי - אפשרות לבועה מרכזית נוספת, כדי שאפשר יהיה להסתכל על הנושא ממבט אחר
7. מצגת
8. עקרונות לעיצוב ממשק משתמש
8.1. 10 היריסטיקות (עקרונות) לעיצוב ממשק משתמש - מאת נילסן
8.1.1. H1 - Visibility of system status
8.1.1.1. המערכת צריכה תמיד ליידע את המשתמש מה קורה, בעזרת משוב ראוי ובזמן סביר.
8.1.1.2. 1. סרגל התמצאות 2. כותרת 3. תפריט --> אזור בו נמצאים מודגש 4. בר התקדמות
8.1.2. H2 - Match between system and the real world
8.1.2.1. ניסוח ברור
8.1.2.2. המערכת צריכה לדבר בשפת המשתמש - מילים, משפטים מוכרים ולא בשפה המרוכזת במערכת. יש לנהוג לפי חוקי העולם האמיתי והמידע צריך להופיע בסדר טבעי והגיוני.
8.1.3. H3 - User control and freedom
8.1.3.1. לדפדפן יש מספר תכונות שליטה וניווט שכל גולש רגיל אליהם וסומך עליהם (כפתורי אחורה קדימה, היסטוריה, סגור חלון, מועדפים, גודל טקסט). פעמים רבות קורה שמשתמשים פועלים בטעות - הם ירצו לראות 'יצאת חרום' בקלות על מנת לצאת ממצבים עמומים. יש לתמוך ב undo redu & cancel
8.1.4. H5 - Error prevention
8.1.4.1. חשוב לנסח הודעות שגיאה טובות, לנסות למנוע אפשרויות לטעות.
8.1.4.2. undo
8.1.5. H6 - Recognition rather than recall
8.1.5.1. יש לגרום לפעולות, אפשרויות ואובייקטים להראות. אסור שיקרה מצב בו המשתמש צריך לזכור מידע ממסך אחד לשני. הנחיות שימוש במערכת צריכות להיות ברורות או נגישות בקלות, לפי הצורך.
8.1.6. H7 - Flexibility and efficiency of use
8.1.6.1. קיצורי דרך (שאינם נראים למשתמש המתחיל) יאיצו את פעולות המשתמש המנוסה. צלמיות, פעולות בתוך התוכנה.
8.1.7. H8 - Aesthetic and minimalist design
8.1.7.1. מידע שולי בתפריטי בתפריטי משנה, הבלטת מידע חשוב, כל מידע מיוצר מפחית את אפקטיביות הממשק - "מעט הוא הרבה".
8.1.8. H9 - Help users recognize, diagnose, and recover from errors
8.1.8.1. יש לנסח בבהירות הודעות שגיאה, לתאר בדיוק את הבעיה, ולהציע דרכי פתרון.
8.1.9. H10 - Help and documentation
8.1.9.1. גם אם המערכת עשויה לפעול היטב ללא תיעוד, יש לספק עזרה ותיעוד הכתובים היטב והניתנים לחיפוש בקלות.
8.2. Web Style Guide Online
8.3. Cognitive design guidelines by Dillon (2002)
8.4. ראיון עם נילסן בנושא כיצד להגביר שימושיות עבור משתמשים ממוצעים
8.5. 5 עקרונות גשטלט
8.6. W3 Standarts
8.7. כללים בארגון מרחבי
8.7.1. אחידות המיקום
8.7.1.1. אחידות המיקום של פעולות, כפתורים, קישורים - יופיעו תמיד באותו מיקום
8.7.1.1.1. עקרון הסמיכות
8.7.2. אחידות העיצוב
8.7.2.1. של ממשקים / תכונות המיוצרות על ידי אותה חברה - סגנון גרפי, מיקום צלמיות, מיקום סרגלי כלים
8.7.2.1.1. עקרון הסמיכות, המשכיות, דמיון
8.7.3. ארגון בגושים (chunking)
8.7.3.1. ארגון המידע לפי גושים להם מכנה משותף מסנטי
8.7.3.1.1. עקרון הסמיכות והדמיון
8.7.4. יישור המידע בעמודות ושורות
8.7.4.1. ייעול הסריקה והאיתור
8.7.4.2. alignment
8.7.5. מרכוז המידע החשוב
8.7.5.1. נקודת הפיקסציה במרכז המסך
8.8. נקודות נוספות בעיצוב ממשקים
8.8.1. סרגל ניווט
8.8.1.1. • תיוג פריטים בסרגל
8.8.1.2. • מיקום בדף
8.8.1.3. • המצאות בכל הדפים הרלוונטיים באתר
8.8.1.4. • מספר תגיות בסרגל (אופטימום 7-10)
8.8.1.5. • סדר פריטים הגיוני
8.8.1.6. • תפעול, תיוג וארגון תפריטי משנה
8.8.2. כותרות
8.8.2.1. • כותרת שונה לכל דף באתר
8.8.2.2. • תיאור מספק של הדף בכותרת
8.8.3. תפריטים
8.8.3.1. • ארגון הפריטים בתפריט לפי סדר הגיוני
8.8.3.2. • תיוג ברור של הפריטים
8.8.3.3. • אבחנה בין סוגי קישורים (פנימי/חיצוני)
8.8.3.4. • קיום תיאור של הקישור במידה ויש צורך בכך
8.8.3.5. • שימוש בתבליטים או בקווים מפרידים לצורך חלוקה והפרדה בין פריטים וקבוצות פריטים
8.8.4. טקסט - כתיבה לרשת
8.8.4.1. • אחידות בעיצוב הטקסטים
8.8.4.2. • שוליים המאפשרים מיקוד בטקסט
8.8.4.3. • מחבר, תאריך, גרסה, מקור (במידה ורלבנטי)
8.8.4.4. • אורך טקסט
8.8.4.5. • התאמה לרזולוציות שונות
8.8.5. גופנים
8.8.5.1. • אחידות בשימוש בגופנים
8.8.5.2. • אפשרות לשלוט בגודל וסוג הגופן
8.8.5.3. • קריאות של הגופנים
8.8.5.3.1. פונט הרצוי - סנס סריף sans serif כמו למשל arial פוטנט לא רצוי - סריף sarif עם צ'ופצ'יקים
8.8.6. צבעים
8.8.6.1. • שימוש בצבעים נוחים לקריאה
8.8.6.2. • רקעים שאינם מפריעים (ניגודיות טובה)
9. keywords
9.1. Usability
9.2. User Experience (UX)
9.2.1. ◦Defining key terms, such as: user experience (UX), usability, utility, usefulness, user centered design (UCD), usability engineering (UE), human factors, ergonomics, human-computer interaction (HCI), computer-human interaction (CHI), user interface (UI), graphical user interface (GUI), natural user interface (NUI), emotional design, information architecture (IA), visual/graphic design, interaction design (IxD), industrial design (ID), search engine optimization (SEO), content strategy, and accessibility