Hebrew presentation - Basics of UX UI

1. UX UI

2. UX UI
User Experience = ‫משתמש‬ ‫חווית‬ User Interface = ‫משתמש‬ ‫ממשק‬
‫של‬ ‫ורגשותיו‬ ‫תחושתיו‬ ‫סיכום‬ ‫היא‬ ‫המשתמש‬ ‫חווית‬
‫מוצריה‬ ,‫החברה‬ ‫עם‬ ‫אינטרקציה‬ ‫לאחר‬ ‫הצופה/המשתמש‬
.‫ושירותיה‬
‫או‬ ‫המכונה‬ ‫בין‬ ‫החיבור‬ ‫נקודת‬ ‫הוא‬ ‫משתמש‬ ‫ממשק‬
.‫כלשהי‬ ‫מטרה‬ ‫השגת‬ ‫לשם‬ ‫אותה‬ ‫שמפעיל‬ ‫לאדם‬ ‫המערכת‬
‫בעצם‬ ‫הממשק‬
‫ממשק‬ .‫מכונה‬ ‫לשפת‬ ‫האדם‬ ‫פעולות‬ ‫את‬ ‫מתרגם‬
‫עולם‬ ‫של‬ ‫הגדול‬ ‫בפאזל‬ ‫אחד‬ ‫חלק‬ ‫רק‬ ‫הוא‬ ‫המשתמש‬
‫שכולל‬ ‫המשתמש‬ ‫חווית‬
,‫אסטרטגיה‬ ,‫המידע‬ ‫ארכיטקטורת‬ ,‫העיצוב‬ ‫את‬ ‫בנוסף‬
.‫וטכנולוגיה‬ ‫שיווק‬

3. UX UI

4. User Experience Vs User Interface

5. ‫משתמשים‬ ‫מחקר‬ ‫ממשק‬ ‫עיצוב‬
‫מקדים‬ ‫מחקר‬
‫אינטרנטי‬ ‫מחקר‬
‫מתחרים‬ ‫מחקר‬
‫בעזרת‬ ‫הידע‬ ‫העברת‬
Wireframes
Look & Feel
guidelines -‫ו‬ ‫מיתוג‬
(Moodboards) ‫השראה‬ ‫לוחות‬
‫סגנון‬
Layout & Responsiveness
‫משתמשים‬ ‫בדיקת‬
‫עיצובי‬ ‫מפרט‬
UI Prototypes
‫עיצובי‬ ‫מפרט‬
Look & Feel
‫למפתחים‬ ‫עיצוב‬ ‫מפרט‬
‫איורים/תמונות‬ /‫אייקונים‬ ‫סט‬
‫שונות‬ ‫לרזולוציות‬ ‫אדפטציה‬
‫ביצוע‬
‫למפתחים‬ ‫מול‬ ‫עבודה‬
‫היישום‬ ‫על‬ ‫עיצובית‬ ‫ביקורת‬
‫עניין‬ ‫בעלי‬ ‫מול‬ ‫תיאום‬
‫סופי‬ ‫לעיצוב‬ ‫מעבר‬
‫המחקר‬ ‫ניתוח‬
‫וממצאים‬ ‫תובנות‬
(‫)משתמשים‬ ‫מסע‬ ‫מפת‬
‫פרסונות‬
‫אמפתיה‬ ‫מפות‬
‫אתר/אפליקציה‬ ‫מפת‬
Task Flows
User Flows
‫העיצובי‬ ‫הרעיון‬
‫רעיוניות‬ ‫סקיצות‬
wireframes
Prototypes
‫משתמשים‬ ‫בדיקת‬
‫ביצוע‬
‫עניין‬ ‫בעלי‬ ‫מול‬ ‫תיאום‬
(UI) ‫לעיצוב‬ ‫מעבר‬
‫המעצבים‬ ‫עם‬ ‫פעולה‬ ‫שיתוף‬
‫וסיסטמטית‬ ‫קריאיטיבית‬ ‫חשיבה‬‫וביקורתית‬ ‫קריאיטיבית‬ ‫חשיבה‬
‫מוצר‬
‫סופי‬

6. UX

7. KIDS REACT TO WALKMANS (Portable Cassette Players)
https://www.youtube.com/watch?v=Uk_vV-JRZ6E

8. 1995- ‫ב‬ ‫קבע‬ ‫משתמש‬ ‫חוויית‬ ‫המדוייק‬ ‫המונח‬ ‫את‬
‫הפסיכולוגיה‬ ‫בתחום‬ ‫חוקר‬ ,("‫שימושיות‬ ‫)"מר‬ ‫נורמן‬ ‫דון‬
‫התפקיד‬ ‫בהגדרת‬ ‫בו‬ ‫השתמש‬ ‫כאשר‬ ,‫הקוגניטיבית‬
.‫משתמש‬ ‫חוויית‬ ‫ארכיטקט‬ : Apple ‫בחברת‬ ‫שלו‬

9. ‫טכנולוגיה‬ ‫משתמשים‬ ‫צרכי‬
‫המותג‬ ‫יעדי‬
UX

10. ‫המשתמש‬ ‫חווית‬ ‫מרכיבי‬
‫שליטת‬
‫משתמש‬
‫זמינות‬
‫המידע‬
‫אסתטיקה‬
‫שמישות‬
‫שימושיות‬ ‫נגישות‬
‫הנאה‬

11. ‫המטרות‬ ‫על‬ ‫עונה‬ ‫המערכת‬ ‫האם‬
?‫טובה‬ ‫בצורה‬ ‫שהוגדרו‬
?‫במערכת‬ ‫להשתמש‬ ‫ניתן‬ ‫האם‬ .1
?‫במערכת‬ ‫להשתמש‬ ‫נוח‬ ‫האם‬ .2
?‫במערכת‬ ‫להשתמש‬ ‫נעים‬ ‫האם‬ .3
‫שמישות‬Usebility

12. ‫שמישות‬Usebility

13. ‫שמישות‬Usebility

14. ‫העיקריים‬ ‫השמישות‬ ‫מדדי‬
.‫המערכת‬ ‫לתפעול‬ ‫הנדרשים‬ ‫והפיזי‬ ‫הקוגניטיבי‬ ‫המאמץ‬ ‫מידת‬ - ‫יעילות‬
?‫הנדרשת‬ ‫התוצאה‬ ‫את‬ ‫בדיוק‬ ‫מפיקה‬ ‫המערכת‬ ‫האם‬ - ‫תועלת‬
.‫במערכת‬ ‫להשתמש‬ ‫כיצד‬ ‫להבין‬ ‫בכדי‬ ‫נדרש‬ ‫ומאמץ‬ ‫זמן‬ ‫כמה‬ - ‫למידה‬ ‫עקומת‬
?‫טעויות‬ ‫למניעת‬ ‫מסייעת‬ ‫המערכת‬ ‫כמה‬ ‫עד‬ - ‫ותיקונן‬ ‫טעויות‬ ‫מניעת‬
.‫המשתמש‬ ‫של‬ ‫הסובייקטיבית‬ ‫החוויה‬ - ‫סיפוק‬
‫שמישות‬Usebility

15. ‫למשתמשים‬ ‫המערכת‬ ‫מספקת‬ ‫אותו‬ ‫הערך‬
‫שימושיות‬Usefulness

16. ‫למשתמשים‬ ‫המערכת‬ ‫מספקת‬ ‫אותו‬ ‫הערך‬
‫שימושיות‬Usefulness

17. ‫קודם‬ ‫לניסיון‬ ‫התאמה‬‫ברורות‬ ‫הנחיות‬ ‫ע״י‬ ‫טעויות‬ ‫מניעת‬
‫משתמש‬ ‫שליטת‬
‫טובה‬ ‫שימוש‬ ‫לחווית‬ ‫וביטחון‬ ‫אמון‬ ‫יצירת‬
12
User Control

18. ‫משתמש‬ ‫שליטת‬
‫טובה‬ ‫שימוש‬ ‫לחווית‬ ‫וביטחון‬ ‫אמון‬ ‫יצירת‬
‫המשתמש‬ ‫מיקום‬ ‫של‬ ‫ברורה‬ ‫תצוגה‬ 3
User Control

19. ‫נגישות‬Accessibility
‫ויזואלי‬ ‫שמיעתי‬ ‫וזריזות‬ ‫ניידות‬ ‫קוגניטיבי‬

20. ‫יוצרים‬ ‫שאנו‬ ‫הראשוני‬ ‫הרושם‬
‫אמון‬ ‫יצירת‬
‫מתח‬ ‫יוצר‬ ‫אסתטיקה‬ ‫חוסר‬
‫אסתטיקה‬Esthetics
‫גאומטריות‬ ‫בצורות‬ ‫שימוש‬
‫מדויק‬ ‫ריווח‬
‫יישור‬
‫סימטריה‬

21. ‫עולה‬ ‫כך‬ ‫נגיש‬ ‫יותר‬ ‫יהיה‬ ‫שהמידע‬ ‫ככל‬
.‫ימומשו‬ ‫המערכת‬ ‫שיעדי‬ ‫הסיכוי‬
‫המידע‬ ‫זמינות‬Information Availability
?‫המבוקש‬ ‫המידע‬ ‫את‬ ‫לאתר‬ ‫קל‬ ‫האם‬
?‫אותו‬ ‫לזהות‬ ‫ניתן‬ ‫מידה‬ ‫באיזו‬
?‫אליו‬ ‫לגשת‬ ‫נוח‬ ‫האם‬
‫המידע‬ ‫בחיפוש‬ ‫מסייעים‬ ‫אלמנטים‬ ‫שילוב‬ 1

22. ‫מהירה‬ ‫לגישה‬ ‫כלים‬ ‫מתן‬
‫תוכן‬ ‫הבלטת‬ 3
2
‫המידע‬ ‫זמינות‬Information Availability

23. ‫להנעה‬ ‫כמקור‬ ‫הנאה‬
The fun theory
‫הנאה‬Fun

24. UI

25. ‫נכון‬ ‫אינטראקטיבי‬ ‫לעיצוב‬
‫עקרונות‬ 10

26. ‫פשטות‬Keep it simple
01

27. ‫בעיות‬ ‫פתרון‬Keep your problems to
yourself
02

28. ‫שליטה‬User Control
03

29. ‫קוגניטיבי‬ ‫עומס‬ ‫מזעור‬Reduce cognitive Clutter
04

30. 05
‫מורכבות‬ ‫מול‬ ‫בהירות‬Clarity over complexity
https://www.lemonade.com/ Vs. https://www.fnx.co.il/

31. ‫אנושיים‬ ‫תהיו‬Be Human
06

32. ‫לפרטים‬ ‫ירידה‬Details
07

33. ‫עקביות‬Consistency
08

34. ‫טעויות‬ ‫מניעת‬Error prevention
09

35. 10
‫הדרגתית‬ ‫חשיפה‬Progressive disclosure

36. ‫לסיכום‬
The goal for interface design is to allow the user
to easily explore the interface without fear of a
negative consequence.
‫לפחד‬ ‫מבלי‬ ‫הממשק‬ ‫את‬ ‫בקלות‬ ‫לחקור‬ ‫למשתמש‬ ‫לאפשר‬ ‫היא‬ ‫הממשק‬ ‫עיצוב‬ ‫מטרת‬
.‫שליליות‬ ‫מתופעות‬
‫הם‬ ‫שגם‬ ‫המשתמשים‬ ‫מצד‬ ‫וגדלות‬ ‫ההולכות‬ ‫הציפיות‬ ‫על‬ ‫לענות‬ ‫בהדרגה‬ ‫מתפתחים‬ ‫ממשקים‬
.‫יותר‬ ‫רבות‬ ‫דרישות‬ ‫ובעלי‬ ‫מתוחכמים‬ ‫ליותר‬ ‫בהדרגה‬ ‫הופכים‬
.‫ואנושיים‬ ‫מפתים‬ ,‫וברורים‬ ‫צפויים‬ ,‫אינטואיטיבים‬ ‫יותר‬ ‫להיות‬ ‫הופכים‬ ‫ממשקים‬
.‫נכון‬ ‫ממשק‬ ‫לעיצוב‬ ‫הבסיסיים‬ ‫העקרונות‬ ‫הן‬ ‫שסקרנו‬ ‫הנקודות‬ 10