UX in Mobile WebLior Yair   Israel Web Community | 2011
‫מי אנחנו‬‫נטקרפאט מתמחה במתן שירותי אפיון,‬ ‫עיצוב ופיתוח פתרונות המציעים חווית‬         ‫משתמש יוצאת דופן.‬
‫על מה נדבר היום?‬                               ‫מה נראה היום?‬      ‫התפתחות עולם המוביל והתאמות התוכן‬     ‫1‬         ...
‫קצת הסטוריה‬
‫מה נראה היום של המכשירים‬           ‫האבולוציה ?‬
‫מה נראה היום של התוכן‬        ‫האבולוציה ?‬
‫מה נראה היום של התוכן‬        ‫האבולוציה ?‬           ‫השתלטות‬          ‫האפליקציות‬                       ‫7002‬
‫מה נראה היום של התוכן‬            ‫האבולוציה ?‬     ‫גלישה‬           ‫השתלטות‬   ‫סלולרית‬                    ‫האפליקציו...
‫מה נראה היום של התוכן‬                                 ‫האבולוציה ?‬ ‫עיצוב מגיב‬               ‫גלישה‬           ‫השתלטו...
‫דוגמאות‬
‫אפליקציה‬‫מה נראה היום?‬
‫אתר מותאם (‪)Mobile Web‬‬             ‫מה נראה היום?‬
‫אתר מותאם (‪)Mobile Web‬‬             ‫מה נראה היום?‬
‫אתר מותאם (‪)Mobile Web‬‬             ‫מה נראה היום?‬
‫מה נראהמגיב?)‪(Responsive Design‬‬                    ‫עיצוב היום‬
(Responsive Design)?‫מה נראהמגיב‬                     ‫עיצוב היום‬Desktop                   NoteBook                      ...
‫למה להשקיע?‬
‫להקשיב טוב‬                                  ‫מה נראה היום?‬  ‫עד שנת 3102 מחצית מהגולשים‬‫בעולם יגלשו דרך מכשירים ניידים...
‫מה נראה מהסלולר מול גלישה מהמחשב האישי‬                          ‫גלישה היום?‬                 ‫000,2‬‫משתמשי אינטרנט‬   ...
‫להקשיב טוב‬                            ‫מה נראה היום?‬                  ‫%05‬‫מחיפושים בעולם מבוצעים על ידי‬             ...
‫איך?‬
‫מה נראה היום? העומדות בפנינו‬                             ‫האפשרויות‬                    ‫3‬              ‫2‬           ‫...
‫אפליקציה‬                              ‫מה נראה היום?‬                               ‫יתרונות‬              ‫1 אין צורך ב...
‫אפליקציה‬                                      ‫מה נראה היום?‬                                  ‫חסרונות‬              ‫1...
‫‪Mobile Web‬‬                              ‫מה נראה היום?‬                             ‫יתרונות‬         ‫1 פיתוח יחיד לכ...
‫‪Mobile Web‬‬                                 ‫מה נראה היום?‬                               ‫חסרונות‬‫1 אין אפשרות להשתמש...
‫מה נראהתגובתי )‪(Responsive‬‬                     ‫עיצוב היום?‬                    ‫יתרונות‬         ‫1 מוצר סופי מרשים.‬...
‫מה נראהתגובתי )‪(Responsive‬‬                            ‫עיצוב היום?‬                           ‫חסרונות‬‫1 השקעה גדולה ...
‫יצירת חווית משתמש טובה‬
‫מה נראהאת ההקשר (‪)Context Of Use‬‬                     ‫הבינו היום?‬                 ‫מה זה הקשר?‬           ‫1‬       ‫...
‫ההקשר‬                     ?‫מה נראה היום‬Apple Voice Memos   iTalk
‫ההקשר‬                    ?‫מה נראה היום‬Apple Voice Memos    iTalk
‫מה נראה | דוגמה טובה‬      ‫ההקשר היום?‬       ‫‪Type n Walk‬‬
‫הבינו את ההקשר (‪)Context Of Use‬‬                    ‫מה נראה היום?‬                     ‫חשוב לזכור‬      ‫לא כל התוכן ...
‫מה נראה היום אתר האינטרנט‬           ‫ביטוח ישיר | ?‬
‫מה נראה היוםאתר מותאם‬        ‫ביטוח ישיר | ?‬
‫ללא שימוש בזום‬  ‫מה נראה היום?‬
‫היתרון על המחשב האישי‬                     ‫מה נראה היום?‬        ‫נצלו את האפשרויות הבנויות‬    ‫2‬                 ‫במכ...
‫היתרון היוםהמחשב האישי‬          ‫מה נראה על ?‬          ‫שימוש במפות‬
‫היתרון היוםהמחשב האישי‬          ‫מה נראה על ?‬           ‫לבצע שיחות‬
‫מה נראהעל המחשב האישי‬         ‫היתרון היום?‬           ‫איתור מיקום‬
‫מה נראהעל המחשב האישי‬         ‫היתרון היום?‬‫סריקת מידע בצורות חדשות‬
‫היתרון היוםהמחשב האישי‬          ‫מה נראה על ?‬
‫היה מוכן‬                              ‫מה נראה היום?‬         ‫תמיד תהיה מוכן שיעצרו אותך.‬      ‫3‬‫פגישות‬       ‫שיחה...
‫מה נראהנתונים‬                         ‫הזנת היום?‬ ‫אל תבקשו מהמשתמשים להזין המון‬      ‫4‬        ‫מידע לפני חשיפת ערך ...
‫מה נראה להקליד‬                            ‫הקושי היום?‬    ‫משתמשים ינסו להימנע מלהקליד כמה‬‫שיוכלו. אפיון ועיצוב מוצלחי...
‫מה נראה להקליד‬                                      ‫הקושי היום?‬        ‫קיימים לא מעט פתרונות יצירתיים שיכולים לעזור:‬...
‫מה נראה מנחים לעיצוב‬                                 ‫כללים היום?‬                 ‫הזהרו מהאצבע השמנה‬              ‫5‬...
‫מה נראה מנחים לעיצוב‬        ‫כללים היום?‬         ‫דוגמה רעה‬
‫כללים מנחים?לעיצוב‬         ‫מה נראה היום‬                   ‫דוגמה טובה‬          ‫גודל מינימלי של 7 מ"מ על 7 מ"מ.‬‫ריוו...
‫כללים מנחים?לעיצוב‬       ‫מה נראה היום‬‫גם שמנה וגם מסתירה‬
‫מה לא כדאי לעשות!‬              ‫מה נראה היום?‬          ‫לייצר מסכים עמוסים.‬              ‫‪Fish Supplies‬‬‫‪Bump‬‬
:) ‫תודה‬lioryair@gmail.com   Uxhero.co.il
Ux in mobile web
Upcoming SlideShare
Loading in...5
×

Ux in mobile web

1,390

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,390
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ux in mobile web

  1. 1. UX in Mobile WebLior Yair Israel Web Community | 2011
  2. 2. ‫מי אנחנו‬‫נטקרפאט מתמחה במתן שירותי אפיון,‬ ‫עיצוב ופיתוח פתרונות המציעים חווית‬ ‫משתמש יוצאת דופן.‬
  3. 3. ‫על מה נדבר היום?‬ ‫מה נראה היום?‬ ‫התפתחות עולם המוביל והתאמות התוכן‬ ‫1‬ ‫למה שנשקיע בהתאמות?‬ ‫2‬ ‫מה האפשרויות העומדות בפנינו?‬ ‫3‬‫יצירת חווית משתמש טובה, כללים מנחים (קצת)‬ ‫4‬
  4. 4. ‫קצת הסטוריה‬
  5. 5. ‫מה נראה היום של המכשירים‬ ‫האבולוציה ?‬
  6. 6. ‫מה נראה היום של התוכן‬ ‫האבולוציה ?‬
  7. 7. ‫מה נראה היום של התוכן‬ ‫האבולוציה ?‬ ‫השתלטות‬ ‫האפליקציות‬ ‫7002‬
  8. 8. ‫מה נראה היום של התוכן‬ ‫האבולוציה ?‬ ‫גלישה‬ ‫השתלטות‬ ‫סלולרית‬ ‫האפליקציות‬‫‪Mobile Web‬‬ ‫9002‬ ‫7002‬
  9. 9. ‫מה נראה היום של התוכן‬ ‫האבולוציה ?‬ ‫עיצוב מגיב‬ ‫גלישה‬ ‫השתלטות‬‫‪Responsive‬‬ ‫סלולרית‬ ‫האפליקציות‬ ‫‪Design‬‬ ‫‪Mobile Web‬‬ ‫1102‬ ‫9002‬ ‫7002‬
  10. 10. ‫דוגמאות‬
  11. 11. ‫אפליקציה‬‫מה נראה היום?‬
  12. 12. ‫אתר מותאם (‪)Mobile Web‬‬ ‫מה נראה היום?‬
  13. 13. ‫אתר מותאם (‪)Mobile Web‬‬ ‫מה נראה היום?‬
  14. 14. ‫אתר מותאם (‪)Mobile Web‬‬ ‫מה נראה היום?‬
  15. 15. ‫מה נראהמגיב?)‪(Responsive Design‬‬ ‫עיצוב היום‬
  16. 16. (Responsive Design)?‫מה נראהמגיב‬ ‫עיצוב היום‬Desktop NoteBook Mobile Responsive Design
  17. 17. ‫למה להשקיע?‬
  18. 18. ‫להקשיב טוב‬ ‫מה נראה היום?‬ ‫עד שנת 3102 מחצית מהגולשים‬‫בעולם יגלשו דרך מכשירים ניידים.‬‫על פי חברת המחקר העולמית – ‪.Gartner‬‬
  19. 19. ‫מה נראה מהסלולר מול גלישה מהמחשב האישי‬ ‫גלישה היום?‬ ‫000,2‬‫משתמשי אינטרנט‬ ‫‪Mobile‬‬ ‫006,1‬ ‫‪Internet‬‬ ‫‪Users‬‬ ‫002,1‬ ‫008‬ ‫‪Desktop‬‬ ‫‪Internet‬‬ ‫004‬ ‫‪Users‬‬ ‫7002‬ ‫9002‬ ‫1102‬ ‫3102‬ ‫5102‬
  20. 20. ‫להקשיב טוב‬ ‫מה נראה היום?‬ ‫%05‬‫מחיפושים בעולם מבוצעים על ידי‬ ‫מכשירים ניידים‬
  21. 21. ‫איך?‬
  22. 22. ‫מה נראה היום? העומדות בפנינו‬ ‫האפשרויות‬ ‫3‬ ‫2‬ ‫1‬ ‫עיצוב מגיב‬ ‫התאמת אתר‬ ‫אפליקציה‬‫‪Responsive Design‬‬ ‫לגלישה סלולרית‬ ‫‪Mobile Web‬‬
  23. 23. ‫אפליקציה‬ ‫מה נראה היום?‬ ‫יתרונות‬ ‫1 אין צורך בחיבור לרשת.‬‫2 עובד מהר (תנועות, אנימציות, סרטונים).‬‫3 יש אפשרות להשתמש ביכולות המכשיר.‬ ‫4 נמצא תמיד מול המשתמש.‬
  24. 24. ‫אפליקציה‬ ‫מה נראה היום?‬ ‫חסרונות‬ ‫1 כפוף לחוקים ולשפות שונות.‬ ‫2 נדרשת התאמה לכל מערכת הפעלה.‬‫3 לא נגיש למשתמש שלא הוריד את האפליקציה.‬ ‫4 אין צורך להוריד אפליקציה (או לחפש).‬
  25. 25. ‫‪Mobile Web‬‬ ‫מה נראה היום?‬ ‫יתרונות‬ ‫1 פיתוח יחיד לכל המכשירים.‬ ‫2 לא כפוף לחוקים (הגן הסגור).‬ ‫3 שימוש בטכנולוגיה מוכרת.‬‫4 אין צורך להוריד אפליקציה (או לחפש).‬
  26. 26. ‫‪Mobile Web‬‬ ‫מה נראה היום?‬ ‫חסרונות‬‫1 אין אפשרות להשתמש בכל יכולות המכשיר.‬ ‫2 תלוי בחיבור לרשת.‬ ‫3 זמני תגובה וטעינה. ארוכים יחסית‬
  27. 27. ‫מה נראהתגובתי )‪(Responsive‬‬ ‫עיצוב היום?‬ ‫יתרונות‬ ‫1 מוצר סופי מרשים.‬‫2 פיתוח לכל סוגי הפלטפורמות.‬
  28. 28. ‫מה נראהתגובתי )‪(Responsive‬‬ ‫עיצוב היום?‬ ‫חסרונות‬‫1 השקעה גדולה יחסית בפיתוח ובעיצוב.‬ ‫2 זמני תגובה וטעינה ארוכים יחסית.‬ ‫3 תלוי בחיבור לרשת.‬
  29. 29. ‫יצירת חווית משתמש טובה‬
  30. 30. ‫מה נראהאת ההקשר (‪)Context Of Use‬‬ ‫הבינו היום?‬ ‫מה זה הקשר?‬ ‫1‬ ‫• מי האנשים שישתמשו במוצר?‬ ‫• מה המטרה שלהם?‬ ‫• מתי הם ישתמשו במוצר?‬ ‫• איפה הם ישתמשו במוצר?‬ ‫• מה מאפיין את אותם מקומות?‬ ‫• באיזה מכשיר? (גרסה)‬ ‫• באיזו סיטואציות?‬
  31. 31. ‫ההקשר‬ ?‫מה נראה היום‬Apple Voice Memos iTalk
  32. 32. ‫ההקשר‬ ?‫מה נראה היום‬Apple Voice Memos iTalk
  33. 33. ‫מה נראה | דוגמה טובה‬ ‫ההקשר היום?‬ ‫‪Type n Walk‬‬
  34. 34. ‫הבינו את ההקשר (‪)Context Of Use‬‬ ‫מה נראה היום?‬ ‫חשוב לזכור‬ ‫לא כל התוכן והשירותים‬‫המופיעים באתר הרגיל צריכים‬ ‫להיכנס לאתר הסלולרי‬
  35. 35. ‫מה נראה היום אתר האינטרנט‬ ‫ביטוח ישיר | ?‬
  36. 36. ‫מה נראה היוםאתר מותאם‬ ‫ביטוח ישיר | ?‬
  37. 37. ‫ללא שימוש בזום‬ ‫מה נראה היום?‬
  38. 38. ‫היתרון על המחשב האישי‬ ‫מה נראה היום?‬ ‫נצלו את האפשרויות הבנויות‬ ‫2‬ ‫במכשירים הניידים‬‫סריקת‬ ‫איתור‬ ‫לבצע‬ ‫שימוש‬‫מידע‬ ‫מיקום‬ ‫שיחות‬ ‫במפות‬
  39. 39. ‫היתרון היוםהמחשב האישי‬ ‫מה נראה על ?‬ ‫שימוש במפות‬
  40. 40. ‫היתרון היוםהמחשב האישי‬ ‫מה נראה על ?‬ ‫לבצע שיחות‬
  41. 41. ‫מה נראהעל המחשב האישי‬ ‫היתרון היום?‬ ‫איתור מיקום‬
  42. 42. ‫מה נראהעל המחשב האישי‬ ‫היתרון היום?‬‫סריקת מידע בצורות חדשות‬
  43. 43. ‫היתרון היוםהמחשב האישי‬ ‫מה נראה על ?‬
  44. 44. ‫היה מוכן‬ ‫מה נראה היום?‬ ‫תמיד תהיה מוכן שיעצרו אותך.‬ ‫3‬‫פגישות‬ ‫שיחה‬ ‫‪SMS‬‬ ‫בטריה‬ ‫נכנסת‬
  45. 45. ‫מה נראהנתונים‬ ‫הזנת היום?‬ ‫אל תבקשו מהמשתמשים להזין המון‬ ‫4‬ ‫מידע לפני חשיפת ערך ממשי.‬‫למה?‬
  46. 46. ‫מה נראה להקליד‬ ‫הקושי היום?‬ ‫משתמשים ינסו להימנע מלהקליד כמה‬‫שיוכלו. אפיון ועיצוב מוצלחים יימנעו מלדרוש‬ ‫הקלדה.‬
  47. 47. ‫מה נראה להקליד‬ ‫הקושי היום?‬ ‫קיימים לא מעט פתרונות יצירתיים שיכולים לעזור:‬‫השלמה אוטומטית‬ ‫בחירה מרשימה‬ ‫הצפת תכנים חכמה‬
  48. 48. ‫מה נראה מנחים לעיצוב‬ ‫כללים היום?‬ ‫הזהרו מהאצבע השמנה‬ ‫5‬‫אפקט "האצבע השמנה" מתאר חוסר היכולת ללחוץ‬ ‫על כפתור בגלל גודלו ו/או הקרבה שלו לכפתורים‬ ‫אחרים.‬
  49. 49. ‫מה נראה מנחים לעיצוב‬ ‫כללים היום?‬ ‫דוגמה רעה‬
  50. 50. ‫כללים מנחים?לעיצוב‬ ‫מה נראה היום‬ ‫דוגמה טובה‬ ‫גודל מינימלי של 7 מ"מ על 7 מ"מ.‬‫ריווח של לפחות 2 מ"מ בין אלמנטים לחיצים.‬
  51. 51. ‫כללים מנחים?לעיצוב‬ ‫מה נראה היום‬‫גם שמנה וגם מסתירה‬
  52. 52. ‫מה לא כדאי לעשות!‬ ‫מה נראה היום?‬ ‫לייצר מסכים עמוסים.‬ ‫‪Fish Supplies‬‬‫‪Bump‬‬
  53. 53. :) ‫תודה‬lioryair@gmail.com Uxhero.co.il

×