מחקר של גרטנר שנערך ב-2010 מראה שעד סוף 2013 רוב הכניסות לאתרים בעולם כולו יהיו דרך סמארטפונים ומכשירים מובילים אחרים בעלי דפדפנים. בשנים האחרונות הושקו מאות אלפי אפליקציות סלולריות למכשירים השונים. בשנה האחרונה התגלתה דרך חדשה להגיע אל ציבור המשתמשים - אתר מותאם לגלישה סלולרית. מה היתרונות של אתר סלולרי אל מול אפליקציה? מתי נכון להתאים אתר לסמארטפון ומתי נכון ליצר אפליקציה חדשה? מה ההבדלים ביניהם? איך ניתן לייצר חווית שימוש טובה באתר המותאם למכשירי הסלולר? על זאת ועוד נדבר בהרצאה.

1. UX in Mobile Web
Lior Yair Israel Web Community | 2011

2. ‫מי אנחנו‬
‫נטקרפאט מתמחה במתן שירותי אפיון,‬
‫עיצוב ופיתוח פתרונות המציעים חווית‬
‫משתמש יוצאת דופן.‬

4. ‫על מה נדבר היום?‬
‫מה נראה היום?‬
‫התפתחות עולם המוביל והתאמות התוכן‬ ‫1‬
‫למה שנשקיע בהתאמות?‬ ‫2‬
‫מה האפשרויות העומדות בפנינו?‬ ‫3‬
‫יצירת חווית משתמש טובה, כללים מנחים (קצת)‬ ‫4‬

5. ‫קצת הסטוריה‬

6. ‫מה נראה היום של המכשירים‬
‫האבולוציה ?‬

7. ‫מה נראה היום של התוכן‬
‫האבולוציה ?‬

8. ‫מה נראה היום של התוכן‬
‫האבולוציה ?‬
‫השתלטות‬
‫האפליקציות‬
‫7002‬

9. ‫מה נראה היום של התוכן‬
‫האבולוציה ?‬
‫גלישה‬ ‫השתלטות‬
‫סלולרית‬
‫האפליקציות‬
‫‪Mobile Web‬‬
‫9002‬ ‫7002‬

10. ‫מה נראה היום של התוכן‬
‫האבולוציה ?‬
‫עיצוב מגיב‬ ‫גלישה‬ ‫השתלטות‬
‫‪Responsive‬‬ ‫סלולרית‬
‫האפליקציות‬
‫‪Design‬‬ ‫‪Mobile Web‬‬
‫1102‬ ‫9002‬ ‫7002‬

11. ‫דוגמאות‬

12. ‫אפליקציה‬
‫מה נראה היום?‬

13. ‫אתר מותאם (‪)Mobile Web‬‬
‫מה נראה היום?‬

14. ‫אתר מותאם (‪)Mobile Web‬‬
‫מה נראה היום?‬

15. ‫אתר מותאם (‪)Mobile Web‬‬
‫מה נראה היום?‬

16. ‫מה נראהמגיב?)‪(Responsive Design‬‬
‫עיצוב היום‬

17. (Responsive Design)?‫מה נראהמגיב‬
‫עיצוב היום‬
Desktop
NoteBook
Mobile
Responsive Design

18. ‫למה להשקיע?‬

19. ‫להקשיב טוב‬
‫מה נראה היום?‬
‫עד שנת 3102 מחצית מהגולשים‬
‫בעולם יגלשו דרך מכשירים ניידים.‬
‫על פי חברת המחקר העולמית – ‪.Gartner‬‬

20. ‫מה נראה מהסלולר מול גלישה מהמחשב האישי‬
‫גלישה היום?‬
‫000,2‬
‫משתמשי אינטרנט‬
‫‪Mobile‬‬
‫006,1‬ ‫‪Internet‬‬
‫‪Users‬‬
‫002,1‬
‫008‬
‫‪Desktop‬‬
‫‪Internet‬‬
‫004‬
‫‪Users‬‬
‫7002‬ ‫9002‬ ‫1102‬ ‫3102‬ ‫5102‬

21. ‫להקשיב טוב‬
‫מה נראה היום?‬
‫%05‬
‫מחיפושים בעולם מבוצעים על ידי‬
‫מכשירים ניידים‬

22. ‫איך?‬

23. ‫מה נראה היום? העומדות בפנינו‬
‫האפשרויות‬
‫3‬ ‫2‬ ‫1‬
‫עיצוב מגיב‬ ‫התאמת אתר‬ ‫אפליקציה‬
‫‪Responsive Design‬‬ ‫לגלישה סלולרית‬
‫‪Mobile Web‬‬

24. ‫אפליקציה‬
‫מה נראה היום?‬
‫יתרונות‬
‫1 אין צורך בחיבור לרשת.‬
‫2 עובד מהר (תנועות, אנימציות, סרטונים).‬
‫3 יש אפשרות להשתמש ביכולות המכשיר.‬
‫4 נמצא תמיד מול המשתמש.‬

25. ‫אפליקציה‬
‫מה נראה היום?‬
‫חסרונות‬
‫1 כפוף לחוקים ולשפות שונות.‬
‫2 נדרשת התאמה לכל מערכת הפעלה.‬
‫3 לא נגיש למשתמש שלא הוריד את האפליקציה.‬
‫4 אין צורך להוריד אפליקציה (או לחפש).‬

26. ‫‪Mobile Web‬‬
‫מה נראה היום?‬
‫יתרונות‬
‫1 פיתוח יחיד לכל המכשירים.‬
‫2 לא כפוף לחוקים (הגן הסגור).‬
‫3 שימוש בטכנולוגיה מוכרת.‬
‫4 אין צורך להוריד אפליקציה (או לחפש).‬

27. ‫‪Mobile Web‬‬
‫מה נראה היום?‬
‫חסרונות‬
‫1 אין אפשרות להשתמש בכל יכולות המכשיר.‬
‫2 תלוי בחיבור לרשת.‬
‫3 זמני תגובה וטעינה. ארוכים יחסית‬

28. ‫מה נראהתגובתי )‪(Responsive‬‬
‫עיצוב היום?‬
‫יתרונות‬
‫1 מוצר סופי מרשים.‬
‫2 פיתוח לכל סוגי הפלטפורמות.‬

29. ‫מה נראהתגובתי )‪(Responsive‬‬
‫עיצוב היום?‬
‫חסרונות‬
‫1 השקעה גדולה יחסית בפיתוח ובעיצוב.‬
‫2 זמני תגובה וטעינה ארוכים יחסית.‬
‫3 תלוי בחיבור לרשת.‬

30. ‫יצירת חווית משתמש טובה‬

31. ‫מה נראהאת ההקשר (‪)Context Of Use‬‬
‫הבינו היום?‬
‫מה זה הקשר?‬ ‫1‬
‫• מי האנשים שישתמשו במוצר?‬
‫• מה המטרה שלהם?‬
‫• מתי הם ישתמשו במוצר?‬
‫• איפה הם ישתמשו במוצר?‬
‫• מה מאפיין את אותם מקומות?‬
‫• באיזה מכשיר? (גרסה)‬
‫• באיזו סיטואציות?‬

32. ‫ההקשר‬
?‫מה נראה היום‬
Apple Voice Memos iTalk

33. ‫ההקשר‬
?‫מה נראה היום‬
Apple Voice Memos iTalk

34. ‫מה נראה | דוגמה טובה‬
‫ההקשר היום?‬
‫‪Type n Walk‬‬

35. ‫הבינו את ההקשר (‪)Context Of Use‬‬
‫מה נראה היום?‬
‫חשוב לזכור‬
‫לא כל התוכן והשירותים‬
‫המופיעים באתר הרגיל צריכים‬
‫להיכנס לאתר הסלולרי‬

36. ‫מה נראה היום אתר האינטרנט‬
‫ביטוח ישיר | ?‬

37. ‫מה נראה היוםאתר מותאם‬
‫ביטוח ישיר | ?‬

38. ‫ללא שימוש בזום‬
‫מה נראה היום?‬

39. ‫היתרון על המחשב האישי‬
‫מה נראה היום?‬
‫נצלו את האפשרויות הבנויות‬ ‫2‬
‫במכשירים הניידים‬
‫סריקת‬ ‫איתור‬ ‫לבצע‬ ‫שימוש‬
‫מידע‬ ‫מיקום‬ ‫שיחות‬ ‫במפות‬

40. ‫היתרון היוםהמחשב האישי‬
‫מה נראה על ?‬
‫שימוש במפות‬

41. ‫היתרון היוםהמחשב האישי‬
‫מה נראה על ?‬
‫לבצע שיחות‬

42. ‫מה נראהעל המחשב האישי‬
‫היתרון היום?‬
‫איתור מיקום‬

43. ‫מה נראהעל המחשב האישי‬
‫היתרון היום?‬
‫סריקת מידע בצורות חדשות‬

44. ‫היתרון היוםהמחשב האישי‬
‫מה נראה על ?‬

45. ‫היה מוכן‬
‫מה נראה היום?‬
‫תמיד תהיה מוכן שיעצרו אותך.‬ ‫3‬
‫פגישות‬ ‫שיחה‬ ‫‪SMS‬‬ ‫בטריה‬
‫נכנסת‬

46. ‫מה נראהנתונים‬
‫הזנת היום?‬
‫אל תבקשו מהמשתמשים להזין המון‬ ‫4‬
‫מידע לפני חשיפת ערך ממשי.‬
‫למה?‬

47. ‫מה נראה להקליד‬
‫הקושי היום?‬
‫משתמשים ינסו להימנע מלהקליד כמה‬
‫שיוכלו. אפיון ועיצוב מוצלחים יימנעו מלדרוש‬
‫הקלדה.‬

48. ‫מה נראה להקליד‬
‫הקושי היום?‬
‫קיימים לא מעט פתרונות יצירתיים שיכולים לעזור:‬
‫השלמה אוטומטית‬ ‫בחירה מרשימה‬ ‫הצפת תכנים חכמה‬

49. ‫מה נראה מנחים לעיצוב‬
‫כללים היום?‬
‫הזהרו מהאצבע השמנה‬ ‫5‬
‫אפקט "האצבע השמנה" מתאר חוסר היכולת ללחוץ‬
‫על כפתור בגלל גודלו ו/או הקרבה שלו לכפתורים‬
‫אחרים.‬

50. ‫מה נראה מנחים לעיצוב‬
‫כללים היום?‬
‫דוגמה רעה‬

51. ‫כללים מנחים?לעיצוב‬
‫מה נראה היום‬
‫דוגמה טובה‬
‫גודל מינימלי של 7 מ"מ על 7 מ"מ.‬
‫ריווח של לפחות 2 מ"מ בין אלמנטים לחיצים.‬

52. ‫כללים מנחים?לעיצוב‬
‫מה נראה היום‬
‫גם שמנה וגם מסתירה‬

53. ‫מה לא כדאי לעשות!‬
‫מה נראה היום?‬
‫לייצר מסכים עמוסים.‬
‫‪Fish Supplies‬‬
‫‪Bump‬‬

54. :) ‫תודה‬
lioryair@gmail.com
Uxhero.co.il