1 / 41

בדיקות היוריסטיות ושימושיות ממשקי web

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

granville-hamon
Download Presentation

בדיקות היוריסטיות ושימושיות ממשקי web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. בדיקות היוריסטיות ושימושיות ממשקי web אורי כוכבי, דודו רשתי

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

  3. בדיקה היוריסטית לעומת אחרות בדיקת מעבדה מדעי איטי יקר בדיקה היוריסטית בדיקת מומחה סובייקטיבי מהיר זול

  4. בדיקה היוריסטית - כללי • מתבססת על רשימת כללים(Heuristics) • Heuristic = אמצעי עזר במחקר • ד"ר ג'ייקוב נילסן שיכלל את בדיקות המומחה (Discount Usability) • שאיפה לאובייקטיביות • מתודולוגיה סדורה (פחות או יותר) • גישה פרקטית וחסכונית: מקסימום תוצאות במינימום הוצאות • בלי ציוד מיוחד, בלי נבדקים, זמן קצר • חסרונות / מגבלות:- בלי נבדקים 'אמיתיים‘- פחות מתאים למערכות ספציפיות לתחום- מתאים במיוחד למערכות קיימות

  5. בדיקה היוריסטית - מתודולוגיה • בין 3- 5 בודקים (יותר תוצאות, פחות הטיה) • לבודקים אסור לדון בבדיקה או באתר / מערכת עד לסיום הבדיקה • כל אחד מתאר שגיאות שימושיות ורושם לאיזה כלל הן מתייחסות, ובאיזה מידת חומרה • זמן קצר לאחר הבדיקה – תשאול וסיכום ע"י מרכז הבדיקה • תוצר הבדיקה ללקוח: דוח הבדיקה ההיוריסטית הכולל המלצות לשיפור

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

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

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

  9. H1 - חווי מצב מערכת

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

  11. H2 - התאמה בין המערכת לעולם האמיתי

  12. H2 - התאמה בין המערכת לעולם האמיתי

  13. בדיקה היוריסטית – הכללים (Heuristics) • H3 - שליטת משתמש וחופש פעולהפעמים רבות יקרה שמשתמשים יפעלו בטעות – הם ירצו לראות 'יציאות חרום' בקלות על מנת לצאת ממצב בלתי רצוי. יש לתמוך בundo ו redo

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

  15. בדיקה היוריסטית – הכללים (Heuristics) • H4 - עקביות וסטנדרטיםיש להשתמש בשפה, מצבים ופעולות באופן אחיד למנוע בלבול • H5 - מניעת טעויותחשוב לנסח הודעות שגיאה טובות, טוב עוד יותר למנוע אפשרויות לטעות • H6 - זיהוי ולא זיכרוןיש לגרום לפעולות, אפשרויות ואובייקטים להראות. אסור שיקרה מצב בו המשתמש צריך לזכור מידע ממסך אחד לשני. הנחיות שימוש במערכת צריכות להיות ברורות או נגישות בקלות, לפי הצורך.

  16. מה הבעיה? • עקביות וסטנדרטים • מניעת טעויות • זיהוי ולא זיכרון

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

  18. H4 – זיהוי ולא זיכרון

  19. H3 – מניעת טעויות

  20. H3 – מניעת טעויות

  21. H3 – מניעת טעויות

  22. בדיקה היוריסטית – הכללים (Heuristics) • H7 - גמישות ויעילות שימושקיצורי דרך (שאינם נראים למשתמש המתחיל) יאיצו את פעולות המשתמש המנוסה. יש לאפשר למשתמש 'לתפור' פעולות נפוצות • H8 - עיצוב מינימליסטי ואסתטימידע שאינו חשוב לא צריך להימצא בתיבות דיאלוג. כל פיסת מידע מיותר מפחיתה את אפקטיביות הממשק • H9 - עזרה בזיהוי, ניתוח והתאוששות מטעויותיש לנסח בבהירות הודעות שגיאה, לתאר בדיוק את הבעיה, ולהציע דרכי פתרון • H10 - עזרה ותיעודגם אם המערכת עשויה לפעול היטב ללא תיעוד, יש לספק עזרה ותיעוד הכתובים היטב והניתנים לחיפוש בקלות

  23. בדיקה היוריסטית – הכללים (Heuristics) • H7 - גמישות ויעילות שימושקיצורי דרך (שאינם נראים למשתמש המתחיל) יאיצו את פעולות המשתמש המנוסה. יש לאפשר למשתמש 'לתפור' פעולות נפוצות

  24. בדיקה היוריסטית – הכללים (Heuristics) • H7 - גמישות ויעילות שימושקיצורי דרך (שאינם נראים למשתמש המתחיל) יאיצו את פעולות המשתמש המנוסה. יש לאפשר למשתמש 'לתפור' פעולות נפוצות

  25. H9 – עזרה בזיהוי, ניתוח והתאוששות מטעויות

  26. מה חסר בכללים ומרכיבים נוספים • הכללים הקיימים של נילסן פחות מתאימים לWeb – • באתרים יש דגשים אחרים: • ניווט • התמצאות • מידע (כמויות טקסט, חיפוש) • קריאות • חברות UI יוצרות רשימות כללים משלהן • בדיקת מתחרים, אופנות, עיצוב גרפי • Best practice • סביבת דפדפן לעומת רמת מערכת הפעלה • האינטרנט הוא תחום דינאמי (מה שהיה 'נכון' אתמול..)

  27. בדיקה היוריסטית – כללים נוספים Best practice

  28. "נכון" מול "סטנדרט דה פקטו"

  29. "נכון" מול "סטנדרט דה פקטו"

  30. תחומים אפורים נוספים • כפתור אישור ליד תיבת בחירה (כן / לא?) • שימוש בתפריטים נפתחים (DHTML) • צורות פיזור העמודות - Layout

  31. כולם מעוצבים ל 600 X800 מה קורה ב 768 X 1024?

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

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

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

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

  36. כתיבה לרשת גופנים כותרות טקסט נגלל קישורים טפסים טבלאות צבעים גרפיקה רזולוציות הודעות שגיאה דפי שגיאה 404 טקסטים סרגל ניווט סרגל עזרים סרגל התמצאות כותרות דף דף תפריט ALT/Tool Tip חיפוש חיפוש מתקדם גלילה חלון נפתח טקסט נושאי בדיקה כללית

  37. טבלאות עיצוב טבלאות בצורה אחידה וקריאה אורך סביר לטבלאות עיצוב טקסטים בטבלה הפרדה בין נתונים (אבחנה בין שורות, כותרות, סוגי נתונים) יישור טקסט בהתאם לנתונים סידור העמודות בצורה הגיונית אפשרויות מיון וסינון (אם רלוונטיות) התאמה לרזולוציות שונות סרגל ניווט תיוג פריטים בסרגל מיקום בדף המצאות בכל הדפים הרלוונטיים באתר קיום תגיות Alt/Tool Tips מספר תגיות בסרגל (אופטימום 7-10) סדר פריטים הגיוני תפעול, תיוג וארגון תפריטי משנה בדיקה היוריסטית – בדיקות מפורטות (דוגמא)

  38. בדיקה היוריסטית - דוגמאות

  39. בדיקה היוריסטית - דוגמאות

  40. קריאה נוספת • עיצוב ממשק באינטרנט \ ג'ייקוב נילסן • Don’t make me think / Steve Krug • About Face / Alan Cooper • The design of everyday things / Don Norman

  41. מקורות מידע - אתרים • www.useit.com - Jakob Nielsen website • www.usableweb.com - Mainly about usability but contains lots of info on IA • http://www.aifia.org/-AIfIA advancing and promoting information architecture

More Related