ממשק המשתמש שימושיות UI – User Interface

1. ממשק המשתמש שימושיות UI – User Interface

2. מה זה בעצם, UI ? • אבחנה בין: • עיצוב ← שיקולים אסתטיים • לבין • ממשק משתמש ← הנדסת אנוש • הנדסת אנוש :Human Engineering • התאמה בין: האדם-המשתמש-בעת התפקיד לבין מערכת המידע • תקנים = יצירה של סביבה דומה, מוכרת: • נוהל Microsoft for 32Bit • תקן נגישות http://www.w3.org/TR/WCAG10/

3. חשיבותו של ה-UI • נקודת המבט של הלקוח/המשתמש • KISS – Keep It Simple, Stupid • חוסר הסבלנות של הדור הצעיר, המשתמש • הפחד הקדום "לא רוצה לקלקל" • רק UI נכון מביא לעבוד "עם" ולא "ליד" • הורדה של עלויות הטמעה, הדרכה, אחזקה • UI נכון: קל לשימוש, מובן ואמין

4. התקנה Setup והסרה Un Install של המערכת • המפגש הראשון • You never get a second chance for first chance • "עשה": מעט בחירה, הרבה ברירות מחדל • "אל תעשה": Reboot, Readme, הנחיות • התקנות בספריות מערכת ההפעלה • החלפה של ספריה דינמית פעילה DLL • או קבצי הפעלה EXE • הפעלה קלה מייד לאחר התקנה • להרבות ב- TIPS, FAQ, WIZARD • תוכנית ההסרה חשובה כמו ההתקנה ← • הקפדה על קבצים נסתרים

5. המלצה למיקום קבצים • תכנון נכון של הספרייה המתאימה • העדפה ל-My Document • קבצי תוכניות: • Program Files • או Application Data • לא ב- Root • שמות קבצים: • ברורים ומשמעותיים • סיומות מקבלות • קישור עם יישום הפותח סוג קובץ זה

6. ממשק משתמש גרפי GUI(1) • עקביות • התאמה לשולחן העבודה של מערכת ההפעלה WIN • יצירת ICON לפי העדפת המשתמש • שילוב ב-START רק של המערכת הראשית • ללא כיתוביות, BANNERS, דו שיח • שימוש מושכל באזור ההודעות אשר בשורת המצב, • ב- Quick Launch • הודעות שגיאה: • מעטות - להמעיט באפשרויות בחירה • ניסוח המכבד את המשתמש • ללא הודעות מתפרצות

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

8. עקרונות עיצוב ממוקד-משתמש • שליטת המשתמש • האפשרות להתאמה אישית • הידודית interactive ולא בדפוס פעולה mode קבוע • חלונות משניים Modeless • אוביקטי תוכנה לוגיים: הדפסה, שמירה • הליכי batch ברקע • דימויים נכונים • עקביות • סלחנות • משוב • אסתטיקה • פשטות

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

10. קלט - עקרונות בסיסיים • קלט העכבר (עמ' 283) • הסמן • פעולות נפוצות • הנדסת אנוש • קלט המקלדת (עמ' 286) • פעולות נפוצות • מקשי טקסט • מקשי גישה • מקשי מצב • מקשים לקיצור דרך

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

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

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

14. שימושיות ב-WEB • האתר המערכת עסקית • לא רק עבור פרסום, PR • האתר כשער הכניסה המרכזי של המערכת • העיקרון החשוב מכול: פשטות

15. טעויות נפוצות במהלך פרויקט WEB

16. הנחיות כלליות לעיצוב WEB(1) • יחס נכון בן שטחי תכנים וניווט • עיצוב עבור סביבות רבות: • PLATFORMS • דפדפנים • מכשירי גישה: מחשבים, טלפונים ניידים, PDA • RESOLUTIONS • תמיכה בטכנולוגיה הנפוצה, לאו דווקא האחרונה • הפרדה של המשמעות/תכנים מהתצוגה • הצפייה המיידית בדף הראשון

17. מהירות (2) • זמני תגובה: • 10 שניות הוא גבול הריכוז • 0.1 הגבול בו המשתמש חש בתגובה מיידית • 1 שניה הוא גבול הזמן בו שטף המחשבה אינו נפגע • לשמור על אחידות זמני התגובה • הגורמים המשפיעים: • השרת • חיבור השרת ל-INTERNET • ה-INTERNET עצמן • חיבור המשתמש ל-INTERNET • מהירות העיבוד של מחשב המשתמש והדפדפן • הפיתוח: מעט גרפיקה ו-MULTIMEDIA, מספר עותקים של • אותה תמונה (ניצול CACHE), שימוש חוזר באותה תמונה

18. קישורים (3) • צורות של קישורים: • ניווט מבני בתוך האתר • קישורי תוכן HYPERTEXT אל דפים מפורטים יותר • רשימות התייחסות see also, more of the same • ללא הוראות "הקלד" אלא רק סימון • צביעת הקישורים (טרם ביקרו, כבר ביקרו) • אותוURL לאותו קישור • קישורי חוץ: • צבע אחר לקישור אל החוץ • לאפשר יציאה מחוץ לאתר • לא לפתוח חלונות נוספים (מנטרל את ה-BACK) • POP UP MENU - "תפריט קופץ"

19. גיליונות סגנון: CSS - Cascading Style Sheets(4) • הפרדה של התצוגה [עליה לפעול באינסוף תשתיות] מן התוכן • סוגים: • Embedded- מוטמע: שורות קוד כחלק מן הדף • Linked - מקושר: נפרד, מופעל בקישור • יתרונות הסגנון הקשור • עיצוב אחיד לכול הדפים (קל לשנות רק במקום אחד) • הדף קטן יותר, לכן נטען מהר יותר • הסגנון נטען רק פעם אחת • לא יותר משני גופנים • גדלים PROPORTIONAL לא FIXED • אותם שמות בסגנונות שונים לאותו אתר

20. אמינות (5) • עיצוב המשדר אמינות • ליצירת הרגשה של אמינות: העיצוב חשוב מן הגרפיקה • תעודת זיהוי/מקור • HTTPS

21. עריכה של התוכן - הפירמידה ההפוכה(1) המשתמש בוחן האתר על פי הכותרות, ההדגשים, המספור, התבליטים מהירות הקריאה ממסך איטית ב-25% מאשר מחומר מודפס • הכתיבה באתר שונה מן הכתיבה לדפוס: • תמצות - לא יותר מ-50% של הכיתוב לדפוס • משפטים פשוטים, קצרים, כותרות משנה, מספור, תבליטים • חלוקה למספר דפים על ידי קישורי טקסט • הקריאה היא יותר סריקה Scanning או רפרוף Skimming • כותרות משמעותיות • 2-3 רמות של כותרות • תבליטים Bullets • הארה והדגשה • סיכום "תכל'ס" • המשפט הראשון

22. עריכה של התוכן - הפירמידה ההפוכה(2) • חלוקה לדפים: • כול נושא בדף, לא סתם פרק אחד ארוך • לתכנן את ההדפסה • הכותרת היא זו הנמצאת במנועי החיפוש, תפריטי ניווט • לכול דף כותרת נפרדת • כול כותרת ממתחילה במילה נפרדת • המונח החשוב בתחילת הכותרת, ללא מילות חיבור • 2-6 מילים • עומדת בפני עצמה • כוללת Micro content • ללא Teasers • לא טוב: "ברוכים הבאים לאתר של חברת אושיות" • טוב: "אושיות"

23. קריאות Legibility(3) • ניגוד חזק של צבעים: • שחור על רקע לבן Positive text • לבן על רקע שחור Negative textקצת מסיח את הדעת • לתכנן את ההדפסה • רקע עם צבע פשוט • גופנים גדולים • טקסט יציב: לא מהבהב או משתנה • יישור לימין או לשמאל • להימנע מ- Capital Letters לועזיות (הקריאות יורדת)

24. תיעוד מקוון • תיעוד הוא בעיקר ל-Intranet ו- Extranet • גולשי Internet לא יטרחו לקרוא תיעוד • ההנחיה כי הפניה לתיעוד רק כאשר הגולש נתקל בבעיה: • לכלול חיפוש • דוגמאות רבות • הנחיות "עשה" • קישורים למילון מונחים • תמציתיות

25. Multimedia • ניתוח trade off בין זמן התגובה ליתרונות • הקטנת תמונות • הנפשה מסיחה את הדעת, לכן השימוש שלה: • לתחושת רצף במעברים • למיון ממדים, כולל זמן • ריבוב התצוגה: הצגה של כמה אוביקטים, Imagemap • העשרה כולל המחשה D3 • משיכת תשומת לב • וידיאו • קול Audio • גרפיקה תלת ממדית: • קשה להבנה וניווט • רק ביישומים בהם יש ממש צורך

26. חומר עזר • ניתוח מערכות מידע פרקים 1-10, 1-11 • רשימת תיוג לבניית של ממשק טוב עמ' 271 • תקן נגישות http://www.w3.org/TR/WCAG10 • http://www.upaisrael.org/Services/Resources.htm • דוגמאות: • www.c4sa.com • www.alfa.com • www.2train.com • www.sini.com • www.gismo.co.il • www.ncc.co.il • www.hvr.co.il • www.info@gilperetz.com

27. שאלות ?