מצגת של רן לירון ממטריקס/ג'ון ברייס ממפגש #UXI02 על בחירת כלי ליצירת אב-טיפוס וטיפים מעשיים ליצירת אבות-טיפוס בעזרת Powerpoint

1. ‫‪Prototyping‬‬
‫‪P t t i‬‬
‫כלים, כללים וטיפים מעשיים‬
‫רן לירון, 0102/7/82‬
‫1‬

2. ‫מי?‬
‫ל רון‬
‫רן לירון‬
‫מעצב ‪ UX‬בכיר במטריקס‬
‫שלום, קוראים לי רן‬
‫חבר בצוות ‪UXI‬‬ ‫‪Ranl@matrix.co.il‬‬
‫‪Ranl@matrix co il‬‬
‫ואני אספן כרטיסי ביקור‬
‫בלוגר -‬
‫‪UX (Re)view‬‬
‫‪g‬‬
‫‪Ranli.blogix.co.il‬‬ ‫מרצה ומפתח סדנאות‬
‫ממשק וחווית משתמש‬
‫ב-‪ ,Linkedin‬מורה לאיקידו, ועוד...‬ ‫וגם: מנהל בפורום‬
‫2‬

3. ‫אחרי המפגש הקודם חשבתי לי...‬
‫אמממ...‬
‫3‬

4. ‫על מה אני הולך לדבר?‬
‫• איך בוחרים כלי ‪? Prototyping‬‬
‫• יצירת אב טיפוס: טיפים פרקטיים‬
‫• שאלות / דיון פתוח‬
‫ד ון‬
‫4‬

5. Prototyping ‫בחירת כלי‬
5

6. ? ‫שאלה: בכמה תוכנות ניתן להשתמש לבניית אב טיפוס‬
:(‫כלים ייעודיים לבניית אב טיפוס )רשימה חלקית‬
• Axure • Flash Catalyst • Petra
• Balsamiq Mockups • GUI Design • Pencil
• coutline • Iplotz • ProtoShare
• Creately • JavaFx • ScreenArchitect
• DesignerVista • Justinmind • SketchFlow
• Denim • JustProto • Prototype Composer
yp p
• EasyPrototype • Mockflow • Simulify
• FlairBuilder • Mockingbird • Smart Draw
• FluidIA • MockupScreens • WireframeSketche
• ForeUI • Napkin Look & Feel • ...‫ויש עוד‬
:‫כלים לא ייעודיים‬
• PowerPoint • DreamWaver • Visio
• E
Expression Bl d
i Blend • Fi W k
FireWorks
....‫ועוד‬
• Flash • Photoshop
6

7. Balsamiq Mockups

8. Balsamiq Mockups

9. Pencil

10. Pencil

11. iPlotz

12. iPlotz

13. ForeUI

14. ForeUI

15. Expression: Blend & Sketchflow

16. Expression: Blend & Sketchflow

17. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫71‬

18. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫81‬

19. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫91‬

20. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫02‬

21. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫זמינות / מחיר‬
‫חינם‬ ‫‪Pencil‬‬
‫$97‬ ‫‪Balsamiq‬‬
‫חינם לפרויקט בודד, משתמש בודד,‬
‫טווח מחירים לעבודת צוות / ריבוי פרויקטים‬
‫‪Iplotz‬‬
‫99$‬ ‫‪ForeUI‬‬
‫006$ כחלק מחבילת ‪Expression Studio 4 Ultimate‬‬ ‫‪SketchFlow‬‬
‫$985 )05$ פחות החל מהרישיון השישי...(‬ ‫‪Axure‬‬
‫006$ כחלק מחבילת ‪Expression Studio 4 Ultimate‬‬ ‫ ‪Expression Blend‬‬
‫זמין אצל רוב המשתמשים, כחלק מ ‪Office‬‬ ‫‪PowerPoint‬‬
‫12‬

22. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫22‬

23. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫32‬

24. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫42‬

25. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. האם נדרשת תמיכה בעברית? האם הכלי מספק אותה? באיזו רמה?‬
‫כל ספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫52‬

26. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. ה ם נ ר ת תמ כה ב בר ת? ה ם הכלי מספק תה? באיזו רמה?‬
‫האם נדרשת תמיכה בעברית האם כל ספ אותה ב‬
‫הכל מספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫62‬

27. ‫שיקולים בבחירת כלי ‪Prototyping‬‬
‫1. איזו רמת מהימנות )‪ (Fidelity‬גראפית נדרשת מהכלי?‬
‫2. איזו רמת אינטראקטיביות נדרשת?‬
‫3. מה היא עקומת הלמידה של הכלי ?‬
‫עק‬
‫4. מה המחיר / זמינות של הכלי ?‬
‫5. האם הכלי מגיע עם ספריית רכיבים מוכנים? אם כן, באיזה היקף?‬
‫6. ה ם נ ר ת תמ כה ב בר ת? ה ם הכלי מספק תה? באיזו רמה?‬
‫האם נדרשת תמיכה בעברית האם כל ספ אותה ב‬
‫הכל מספ‬ ‫כ‬
‫7. האם הכלי מספק תשתית נוחה למעבר מתכנון לקוד?‬
‫8. האם הכלי מספק אמצעים לשילוב לקוחות בתהליך העבודה ?‬
‫9. יכולות ייחודיות של הכלי‬
‫72‬

28. ‫והבחירה שלי היא...‬

29. PowerPoint Prototypes
Tips & Tricks
29

30. ‫)1(‬ ‫קישורים בסיסים‬
‫הסברים‬
‫ס‬ ‫הרחבה‬ ‫ע‬
‫מידע‬
‫להפוך טיפול לויקיפדיה, ראשי עיצוב עוד על. עזה של הקנאים תיאטרון ותשובות. ויקי הע ר ברית או זכר,‬
‫ו ק העיר בר ת‬ ‫הקנא ם ת אטרון‬ ‫ט פול לו ק פד ה ראש ע צוב‬
‫אלהמחשב והנדסה חפש. העברית שיתופית טכנולוגיה דת אתה, או לימודים היסטוריה קרימינולוגיה שכ‬
‫אתנולוגיה סוציולוגיה אחד מה. ויש העיר הראשי בהיסטוריה אל, כתב לכאן עקרונות של. צעד חשמל‬
‫פולנ ת גם. מונח ם הנאמנים היסטוריה מלא ב, מתן אל גיאוגרפיה אגרונומ ה טכנולוגיה. שער קסאם‬
‫ג אוגרפ ה אגרונומיה טכנולוג ה‬ ‫מונחים הנאמנ ם ה סטור ה‬ ‫פולנית‬
‫בארגז סוציולוגיה דת, מוגש אנגלית מתמטיקה מה שכל. בעברית מונחונים בויקיפדיה מה אחר, תבניות‬
‫תחבורה בויקיפדיה בקר או. מה מדע אינו סוציולוגיה‬
‫שתפו מרצועת האנצ קלופד ה זכר דת. גם דרכה לעריכה בדף, שמו מה תוכל המשפט נבחרים. עזה החלה‬
‫נבחר ם‬ ‫לער כה‬ ‫האנציקלופדיה‬
‫שתפו לאחרונה בה, לראות נבחרים של ארץ. מה אחד החול רביעי הגרפים. אתה על פנאי הגרפים‬
‫פסיכולוגיה, מיזמי לתרום שכל אם‬
‫מדע ערכ ם הבקשה בה. ארץ גם דרכה מאמרשיחהצפה. את ע צוב ו ק פד ה זכר, של מאמר אנגלית שמו,‬
‫אנגל ת‬ ‫עיצוב ויקיפדיה‬ ‫מאמרש חהצפה‬ ‫ערכים‬
‫צעד קהילה בידור והגולשים אל. בהבנה החברה המדינה אנא אל, כלל לכאן כימיה משחקים או. כימיה‬
‫שדרות תיאטרון תן של. בשפה רביעי שתי דת.‬
‫03‬

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

32. ‫)3(‬ ‫קישורים בסיסים‬

33. ‫אנימציה ו-‪TimeLine‬‬
‫תקלה תפעולית‬
‫נא להתקין 4‪iOS‬‬
‫ל‬
‫33‬

34. ‫‪Ink comments‬‬
‫רשומה שאותרה עבור: ישראל ישראלי ת.ז 343595920‬
‫פרטי מחלקה אחרונה: יציאה ממחלקה גריאטרית - 0102.1.1, אשפוז מספר 3, ל-07 יום‬
‫פרטי ביקורים: נמצאו 77ביקורים )11מסכים(‬
‫פעולות‬
‫ע ‪X ‬‬
‫ע ‪X ‬‬
‫ע ‪X ‬‬
‫ע ‪X ‬‬
‫ע ‪X ‬‬
‫ע ‪X ‬‬
‫ע ‪X ‬‬
‫הדפס הכול‬ ‫הוספה‬ ‫)1(‬ ‫9 8 7 6 5 4 3 2 1‬ ‫)11(‬
‫43‬

35. ‫אינטראקציה מבוססת ‪ Triggers‬ושכפול "התנהגויות"‬
‫53‬

36. ‫תבניות בסיס וריבוי תבניות‬
‫63‬

37. ‫סיכום‬