1. ‫אבות טיפוס‬
‫רקע ומתודולוגיה‬
‫ליאור יאיר, ראש תחום חווית משתמש‬
‫1‬

2. ‫מהו הרכיב הפשוט ביותר?‬
‫2‬

3. 3

4. ‫אבא ?‬
‫4‬

5. ‫אב טיפוס-‬
‫טיפוס-‬
‫ראשונ המדג ם עיצוב רע ון‬
‫מוצר ראשוני המדגים ע צוב או רעיון‬ ‫"‬
‫על מנת לבחון ולשפר את המוצר‬
‫ן‬
‫הסופי‬
‫"‬
‫5‬

6. ‫בהרמת יד‬
‫כמה מכם יצרו אבות‬
‫טיפוס בעבר?‬
‫בעבר?‬
‫9002‬ ‫6‬

7. ‫אבות טיפוס מתחומים שונים‬
‫7‬

8. ‫אבות טיפוס מתחומים שונים‬
‫8‬

9. ‫אבות טיפוס מתחומים שונים‬
‫9‬

10. ‫אבות טיפוס מתחומים שונים‬
‫ ‪Snowwhite Mac‬‬
‫)3891(‬
‫01‬

11. ‫אבות טיפוס מהעולם שלי‬
‫מ צג ם גרסה ראשונ ת של המוצר.‬
‫ראשונית‬ ‫מייצגים‬ ‫‪‬‬
‫מדגימים צורה ופונקציונליות בדרך ויזואלית.‬ ‫‪‬‬
‫יכולים להכיל רק חלק מההתנהגות של המוצר האמיתי.‬ ‫‪‬‬
‫לעיתים שונים מהמימוש הסופי.‬ ‫‪‬‬
‫זולים לייצור. )זמן ומשאבים(‬ ‫‪‬‬
‫11‬

12. ‫אבות טיפוס מהעולם שלי‬
‫מ צג ם גרסה ראשונ ת של המוצר.‬
‫ראשונית‬ ‫מייצגים‬ ‫‪‬‬
‫מדגימים צורה ופונקציונליות בדרך ויזואלית.‬ ‫‪‬‬
‫יכולים להכיל רק חלק מההתנהגות של המוצר האמיתי.‬ ‫‪‬‬
‫לעיתים שונים מהמימוש הסופי.‬ ‫‪‬‬
‫זולים לייצור. )זמן ומשאבים(‬ ‫‪‬‬
‫עוזרים לי לייצר חווית משתמש טובה יותר ל ידי בדיקות‬
‫על‬ ‫לל‬
‫21‬

13. ‫מטרות‬
‫31‬

14. ‫מטרות‬
‫1 בדיקות שמישות ועמידה במטרות הפרויקט‬
‫ל‬
‫לא עובד‬ ‫עובד‬
‫41‬

15. ‫מטרות‬
‫2 קבלת פידבק בשלב מוקדם של התהליך‬
‫"ליאור פעם אחרונה שאתה מנסה‬
‫לאפיין מכונת זמן שמעדכנת את‬
‫"‬
‫הטוויטר"‬
‫מחברי צוות‬
‫51‬

16. ‫מטרות‬
‫2 קבלת פידבק בשלב מוקדם של התהליך‬
‫"זה בדיוק מה‬
‫שרציתי!"‬
‫שרצ ת !‬
‫ק‬
‫מהלקוח‬
‫61‬

17. ‫מטרות‬
‫2 קבלת פידבק בשלב מוקדם של התהליך‬
‫"תודה, זה האתר שתמיד רציתי!‬
‫עכשיו אפשר לחזור לפייסבוק?"‬
‫מהמשתמשים‬
‫71‬

18. ‫מטרות‬
‫3 זיהוי בעיות לפני שלב העיצוב וכתיבת הקוד!‬
‫"שינוי לפני כתיבת הקוד זול פי 001‬
‫"‬
‫משינוי לאחר הכתיבה"‬
‫ל‬
‫81‬

19. ‫יתרונות ומוקשים‬
‫91‬

20. ‫יתרונות‬
‫תהליך איטרטיבי מהיר של שינויים ושיפורים.‬
‫ל‬ ‫ל‬ ‫‪‬‬
‫מאפשר בדיקות שמישות כחלק מתהליך הפיתוח.‬ ‫‪‬‬
‫בודק דברים שלא ניתן לבדוק בתהליך האפיון )סלולר, תנועה(.‬ ‫‪‬‬
‫משפר את התקשורת מול אנשי הצוות, הלקוח והמשתמשים.‬
‫ק‬ ‫ק‬ ‫‪‬‬
‫מתאים את המוצר למשתמשים ומפחית את הסיכון לטעויות בחווית‬ ‫‪‬‬
‫המשתמש.‬
‫02‬

21. ‫יתרונות‬
‫תהליך איטרטיבי מהיר של שינויים ושיפורים.‬
‫ל‬ ‫ל‬ ‫‪‬‬
‫מאפשר בדיקות שמישות כחלק מתהליך הפיתוח.‬ ‫‪‬‬
‫בודק דברים שלא ניתן לבדוק בתהליך האפיון )סלולר, תנועה(.‬ ‫‪‬‬
‫משפר את התקשורת מול אנשי הצוות, הלקוח והמשתמשים.‬
‫ק‬ ‫ק‬ ‫‪‬‬
‫מתאים את המוצר למשתמשים ומפחית את הסיכון לטעויות בחווית‬ ‫‪‬‬
‫המשתמש.‬
‫יצירת מוצר טוב יותר‬
‫12‬

22. ‫ממה להיזהר‬
‫‪‬מורכבות יתר.‬
‫22‬

23. ‫ממה להיזהר‬
‫‪‬מורכבות יתר.‬
‫‪‬להיקשר רגשית לאב הטיפוס.‬
‫32‬

24. ‫מאפיינים עיקריים‬
‫לאבות טיפוס‬
‫ל בת פס‬
‫42‬

25. Evolutionary
Vs
Throwaway
Th
25

26. Fidelity
(‫)נאמנות‬
‫מ‬
26

27. Fidelity
Fid li
(‫)נאמנות‬
Functional Fidelity
y Visual Fidelity
y
27

28. ‫‪Visual Fidelity‬‬
‫‪Low Fidelity‬‬
‫‪Low Fidelity‬‬
‫ציור על נייר או על לוח‬
‫‪ ‬מהיר.‬
‫‪ ‬זול.‬
‫‪ ‬פרקטי.‬
‫‪ ‬קל לעשות שינויים.‬
‫82‬

29. ‫‪Visual Fidelity‬‬
‫‪Low Fidelity‬‬
‫‪Low Fidelity‬‬
‫ציור על נייר או על לוח‬
‫‪ ‬מהיר.‬
‫‪ ‬זול.‬
‫‪ ‬פרקטי.‬
‫‪ ‬קל לעשות שינויים.‬
‫רחוק מהמוצר האמיתי‬
‫92‬

30. ‫‪Visual Fidelity‬‬
‫‪Medium Fidelity‬‬
‫‪Medium Fidelity‬‬
‫שימוש בתוכנת אפיון‬
‫‪ ‬מתקרב למוצר האמיתי.‬
‫‪ ‬דורש ניסיון‬
‫ן.‬
‫‪ ‬לוקח זמן.‬
‫03‬

31. ‫‪Visual Fidelity‬‬
‫‪High Fidelity‬‬
‫‪High Fidelity‬‬
‫כולל עיצוב גרפי‬
‫‪ ‬מדמה מוצר גמור.‬
‫‪ ‬דורש השקעה גדולה.‬
‫ק‬
‫‪ ‬מיומנויות עיצוביות.‬
‫13‬

32. ‫זיהוי הדרישות‬ ‫תהליך העבודה‬
‫בניית אב הטיפוס‬
‫ק‬
‫פידבק‬
‫שינויים ותוספות‬
‫23‬

33. ‫אבות טיפוס מנייר‬
(Paper prototyping)
(Paper prototyping)
33

34. Paper prototyping
34

35. ‫‪Paper prototyping‬‬
‫?‬
‫למה נייר?‬
‫ל‬
‫‪ ‬כולם אוהבים נייר.‬
‫‪ ‬זול ומהיר.‬
‫ומה ר‬
‫‪ ‬קל לעשות שינויים תוך כדי תהליך.‬
‫53‬

36. Paper prototyping
?‫מה אפשר לעשות עם נייר‬
?‫נ ר‬
drop downs + Tabs
36

37. Paper prototyping
?‫מה אפשר לעשות עם נייר‬
?‫נ ר‬
Dynamic panel
37

38. Paper prototyping
?‫מה אפשר לעשות עם נייר‬
?‫נ ר‬
Pop‐ups
38

39. ‫‪Paper prototyping‬‬
‫מה אי אפשר?‬
‫א אפשר?‬
‫גלילה.‬ ‫‪‬‬
‫מעברי עכבר.‬ ‫‪‬‬
‫הדמיה לזמני תגובה.‬ ‫‪‬‬
‫התייחסות לעיצוב. )תמונות, אייקונים(‬ ‫‪‬‬
‫תוכן דינמי שתלוי בקלט.‬ ‫‪‬‬
‫93‬

40. Paper prototyping
?‫איך‬
?‫א ך‬
40

41. Paper prototyping
?‫איך‬
?‫א ך‬
41

42. Paper prototyping
?‫איך‬
?‫א ך‬
42

43. Paper prototyping
?‫איך‬
?‫א ך‬
43

44. ‫בנק הפועלים | מצגת מחקר‬
‫עולם הבנקאות והפיננסים‬
‫44‬
‫5‬

45. ‫תשתמשו, זה מגניב!‬
‫54‬

46. 46

47. Axure
47

48. Thanks!
www.netcraft.co.il
/ g
www.netcraft.co.il/blog
lior@netcraft.co.il
lior@netcraft co il
48