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

1 / 42

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

אורי כוכבי, דודו רשתי

2 / 42

מה בחלק זה:בדיקה היוריסטית: הרחבה

מתודולוגיה1.

Webהכללים המקוריים וכללים נוספים לסביבת 2.

: בעיות אופייניות, מה צריך לבדוקwebשימושיות ב-3.

בדיקת אתר לדוגמא4.

תרגיל בדיקת אתרים של דפי זהב5.

3 / 42

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

בדיקת מעבדה

מדעיאיטייקר

בדיקה היוריסטית בדיקת מומחה

סובייקטיבימהיר

זול

4 / 42

בדיקה היוריסטית - כללי

מתבססת על רשימת כללים (Heuristics)Heuristicאמצעי עזר במחקר = ד"ר ג'ייקוב נילסן שיכלל את בדיקות המומחה(Discount Usability)

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

- בלי נבדקים 'אמיתיים‘- פחות מתאים למערכות ספציפיות לתחום

- מתאים במיוחד למערכות קיימות

5 / 42

בדיקה היוריסטית - מתודולוגיה

בודקים )יותר תוצאות, פחות הטיה(5- 3בין לבודקים אסור לדון בבדיקה או באתר / מערכת עד לסיום

הבדיקה כל אחד מתאר שגיאות שימושיות ורושם לאיזה כלל הן

מתייחסות, ובאיזה מידת חומרהזמן קצר לאחר הבדיקה – תשאול וסיכום ע"י מרכז הבדיקה תוצר הבדיקה ללקוח: דוח הבדיקה ההיוריסטית הכולל

המלצות לשיפור

6 / 42

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

7 / 42

(Heuristics)בדיקה היוריסטית – הכללים

חווי מצב מערכת1.

התאמה בין המערכת לעולם האמיתי2.

שליטת משתמש וחופש פעולה3.

עקביות וסטנדרטים4.

מניעת טעויות5.

זיהוי ולא זיכרון6.

גמישות ויעילות שימוש7.

עיצוב מינימליסטי ואסתטי8.

עזרה בזיהוי, ניתוח והתאוששות מטעויות9.עזרה ותיעוד10.

8 / 42

(Heuristics)בדיקה היוריסטית – הכללים

H1חווי מצב מערכת - המערכת צריכה תמיד לידע את המשתמש מה קורה, בעזרת

משוב ראוי ובזמן סביר

9 / 42

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

10 / 42

(Heuristics)בדיקה היוריסטית – הכללים

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

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

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

11 / 42

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

12 / 42

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

13 / 42

(Heuristics)בדיקה היוריסטית – הכללים

H3שליטת משתמש וחופש פעולה -

פעמים רבות יקרה שמשתמשים יפעלו בטעות – הם ירצו לראות 'יציאות חרום' בקלות על מנת לצאת ממצב בלתי רצוי. יש לתמוך

redo ו undoב

14 / 42

H3שליטת משתמש וחופש פעולה -

רגיללדפדפן יש מספר תכונות שליטה וניווט שכל גולש עליהם:וסומךאליהם

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

אין למנוע או לצמצם את חופש הפעולה של המשתמשולאחר שנשקלו כל ק י צ ו נ י י ם אלא במקרים

החלופות

15 / 42

(Heuristics)בדיקה היוריסטית – הכללים

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

H5מניעת טעויות - חשוב לנסח הודעות שגיאה טובות, טוב עוד יותר למנוע אפשרויות לטעות

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

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

16 / 42

מה הבעיה?

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

17 / 42

מה הבעיה?

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

יש לגרום לפעולות, אפשרויות ואובייקטים

להראות.

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

ממסך אחד לשני.

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

הצורך.

18 / 42

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

19 / 42

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

20 / 42

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

21 / 42

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

22 / 42

(Heuristics)בדיקה היוריסטית – הכללים

H7גמישות ויעילות שימוש - קיצורי דרך )שאינם נראים למשתמש המתחיל( יאיצו את פעולות המשתמש

המנוסה. יש לאפשר למשתמש 'לתפור' פעולות נפוצות

H8עיצוב מינימליסטי ואסתטי - מידע שאינו חשוב לא צריך להימצא בתיבות דיאלוג. כל פיסת מידע מיותר

מפחיתה את אפקטיביות הממשק

H9עזרה בזיהוי, ניתוח והתאוששות מטעויות - יש לנסח בבהירות הודעות שגיאה, לתאר בדיוק את הבעיה, ולהציע דרכי

פתרון

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

הכתובים היטב והניתנים לחיפוש בקלות

23 / 42

(Heuristics)בדיקה היוריסטית – הכללים

H7גמישות ויעילות שימוש - קיצורי דרך )שאינם נראים למשתמש המתחיל( יאיצו את

פעולות המשתמש המנוסה. יש לאפשר למשתמש 'לתפור' פעולות נפוצות

24 / 42

(Heuristics)בדיקה היוריסטית – הכללים

H7 גמישות ויעילות - שימוש

קיצורי דרך )שאינם נראים למשתמש המתחיל( יאיצו את

פעולות המשתמש המנוסה. יש לאפשר למשתמש 'לתפור'

פעולות נפוצות

25 / 42

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

26 / 42

מה חסר בכללים ומרכיבים נוספים

הכללים הקיימים של נילסן פחות מתאימים לWeb – :באתרים יש דגשים אחרים

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

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

27 / 42

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

28 / 42

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

29 / 42

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

30 / 42

תחומים אפורים נוספים

)?כפתור אישור ליד תיבת בחירה )כן / לא

( שימוש בתפריטים נפתחיםDHTML)

- צורות פיזור העמודותLayout

31 / 42

X 600כולם מעוצבים ל 800

?X 1024 768מה קורה ב

32 / 42

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

תומך

כפתור שמתנהג כמו

כפתור

"מספיק טוב"

כפתור שנראה כמו כפתור

מטעה

כותרת שנראית כמו כפתור

33 / 42

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

34 / 42

)רשימה Webבעיות חוזרות ונשנות באתרי חלקית(:

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

35 / 42

הכרחיות רשימת בדיקות

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

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

36 / 42

נושאי בדיקה כללית

כתיבה לרשתגופנים

כותרותטקסט נגלל

קישוריםטפסים

טבלאותצבעים

גרפיקהרזולוציות

הודעות שגיאה404דפי שגיאה

טקסטים

סרגל ניווט

סרגל עזרים

סרגל התמצאות

כותרות דף

דף תפריט

ALT/Tool Tip

חיפוש

חיפוש מתקדם

גלילה

חלון נפתח

טקסט

37 / 42

בדיקה היוריסטית – בדיקות מפורטות )דוגמא(

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

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

סרגל ניווט תיוג פריטים בסרגלמיקום בדף המצאות בכל הדפים הרלוונטיים

באתר קיום תגיותAlt/Tool Tips 7מספר תגיות בסרגל )אופטימום-

10)סדר פריטים הגיוני תפעול, תיוג וארגון תפריטי משנה

38 / 42

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

39 / 42

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

40 / 42

קריאה נוספת

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

41 / 42

מקורות מידע - אתרים

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