Mobile web UX Design - Barak Danin, UXI Live 2011

5,596 views

Published on

Shown at UXI Live 2011, the premier UX conference in Israel, by Barak Danin, founder of UXI and UXSchool.co.il

Published in: Design
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
5,596
On SlideShare
0
From Embeds
0
Number of Embeds
3,212
Actions
Shares
0
Downloads
53
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile web UX Design - Barak Danin, UXI Live 2011

  1. 1. ‫אישי, צמוד ומהשטח:‬ ‫חוויית משתמש באתרים לסמארטפון‬ ‫ברק דנין‬ ‫‪UXschool.co.il‬‬‫יום ה 54:01-00:01‬
  2. 2. ‫ברק דנין‬
  3. 3. ‫מה יש לכם?‬
  4. 4. ‫אנחנו עוברים שינוי‬ ‫גדול ומשמעותי‬‫/8592690293/20‪www.flickr.com/photos/33465428@N‬‬
  5. 5. "‫עד לא מזמן, היינו "גולשים באינטרנט‬ www.flickr.com/photos/mikebaird/2922788582/
  6. 6. ‫פעילות שגרתית בסביבה די צפויה‬ www.flickr.com/photos/gordon_landon/1385041796//
  7. 7. ‫על מכשירים מוכרים וידועים‬‫מראש (פחות או יותר)‬ ‫/1795662442/‪www.flickr.com/photos/lemon‬‬
  8. 8. ‫"תוך 5 שנים יותר אנשים ישתמשו באינטרנט דרך מכשירים‬ ‫ניידים מאשר דרך מחשבים ביתיים"‬‫מורגן סטנלי, 0102‬ ‫אותו הדבר, אבל עד 3102‬‫גרטנר, 0102‬ ‫0102 ,4‪ :Q‬יותר סמארטפונים ממחשבים אישיים‬‫לוק רובלוסקי, מאי 1102‬‫(כנס ‪)Mobilism‬‬ ‫‪Gartner: http://bit.ly/nrR5qQ, Shmidt+Morgan: http://bit.ly/qqp9iI‬‬
  9. 9. 77%-‫ב-0102 היה טלפון נייד ל‬ !‫מכלל אוכלוסיית העולם‬http://bit.ly/pkORZZ , ITU:‫מקור‬ www.flickr.com/photos/kahunapulej/3517330518/
  10. 10. ‫עבור חלק זו הדרך‬ ‫היחידה לגשת לאינטרנט‬‫/3348329262/‪www.flickr.com/photos/vilseskogen‬‬
  11. 11. .‫המחירים יורדים כל הזמן‬ ‫תוך שנתיים-שלוש‬‫ יחליפו את‬Smartphones-‫ה‬ Feature Phones-‫ה‬ www.flickr.com/photos/triciawang/2152683240//
  12. 12. $80 smartphone has found its way“So far, thisinto the hands of 350,000+ Kenyans,an impressive sales number in a country where40% of the population lives onless than two dollars a day. “ Article: http://bit.ly/nLR9C8 Tag: www.flickr.com/photos/abbyladybug/1253054966/
  13. 13. ‫אנחנו מחוברים כל הזמן ומכל מקום‬ www.flickr.com/photos/vilseskogen/2629238433/
  14. 14. ‫"אופליין זה כשהסוללה שלי מתה"‬ ‫איל שחר, 0102 ‪UXI Live‬‬
  15. 15. ‫הקשר - ‪Context‬‬‫מסך מגע קטן‬‫יד אחת‬‫מרחב ציבורי‬‫מעט זמן פנוי‬‫הסחות דעת מבית ומחוץ‬‫המסקנה (?):‬‫תוכן פשוט ומצומצם. רק‬‫מה שחייבים "בשטח"‬ ‫7272046324/‪www.flickr.com/photos/yourdon‬‬
  16. 16. ...‫%08 - כשיש סתם כמה דקות להעביר‬Compete quarterly - http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
  17. 17. ‫%93 בשירותים‬Google Mobile Movement: http://bit.ly/olzEGL www.flickr.com/photos/paulk/5217304095/
  18. 18. ‫%39 מהבית‬ ‫%68 בזמן שצופים בטלוויזיה‬ ‫מתוכם %52 על דברים‬ ‫שקשורים לתוכן שצופים בו‬Google Mobile Movement: http://bit.ly/olzEGLYahoo Mobile Shopping Framework: http://yhoo.it/qDNNpF www.flickr.com/photos/modenadude/5310990259/
  19. 19. ‫%96 מחקר בזמן קניה בחנות‬Compete quarterlyhttp://bit.ly/pq2El9/ www.flickr.com/photos/paulk/5217304095/
  20. 20. ‫המאהב הלא כל-כך‬ ‫סודי של אשתי‬
  21. 21. ‫ה-‪ :Scenario‬הזמנת‬‫חברה לאירוע בפייסבוק‬ ‫ָ‬
  22. 22. ‫ה-‪ :Scenario‬הזמנת‬‫חברה לאירוע בפייסבוק‬ ‫ָ‬ ‫"האפליקציה של‬ ‫פייסבוק גרועה... היא‬‫ממש מצומצמת לעומת‬ ‫הפייסבוק הרגיל"‬
  23. 23. ‫אתר לסמארטפון של חברת תעופה‬ ‫ההקשר: הם בטח נכנסו‬ ‫מהסמארטפון כי הם רוצים‬ ‫לעשות צק אין. לכן אין‬ ‫צורך בהזמנת כרטיסים (?)‬ ‫ארזת לבד?‬‫/‪http://mark-kirby.co.uk/2011/the-mobile-context‬‬ ‫/166396835/‪www.flickr.com/photos/noodlepie‬‬
  24. 24. Virgin Atlantic ...‫הבינו שזו טעות‬Fold
  25. 25. ‫אתר של רשת חנויות בגדים‬ ‫ההקשר: הם בטח נכנסו‬ ‫מהסמארטפון כי הם‬ ‫מחפשים את הסניף‬ ‫הקרוב. אז ניתן להם רק‬ ‫כתובות וטלפונים על-גבי‬ ‫מפה (?)‬ ‫/5976754444/‪www.flickr.com/photos/epsos‬‬
  26. 26. ‫‪Old Navy‬‬ ‫איתור חנות: חשוב,‬ ‫אבל יש גם את כל‬ ‫הקטגוריות‬‫איתור חנות‬ ‫קטגוריות יורדות‬‫קטגוריות‬ ‫למטה, אבל עדיין‬‫‪Fold‬‬ ‫מעל ל-‪Fold‬‬
  27. 27. ‫אל תנסו לקרוא את מחשבות‬ ‫המשתמשים. בצעו מחקר‬ ‫וסננו/תעדפו לפי תוצאותיו‬‫לא בהכרח נדרשים פחות תוכן או‬ ‫יכולות באתר לסמארטפון,‬ ‫בהחלט נדרש תיעדוף‬ ‫1705116575/40‪/www.flickr.com/photos/33498942@N‬‬
  28. 28. ‫סמארטפון: פלטפורמה ל-‪Web‬‬ ‫אין ‪ ,Hover‬יש מגע‬ ‫נדרש משוב‬ ‫/6984060754/‪www.flickr.com/photos/remus‬‬
  29. 29. ‫סמארטפון: פלטפורמה ל-‪Web‬‬ ‫אין ‪ ,Hover‬יש מגע‬ ‫נדרש משוב‬ ‫גודל מינימלי למגע‬ ‫/6984060754/‪www.flickr.com/photos/remus‬‬
  30. 30. ‫גודל מינמאלי למגע‬ ‫7 מ"מ, מומלץ 9 מ"מ‬http://www.flickr.com/photos/lapideo/5401015128/
  31. 31. ‫שמאלה‬ ‫ימינה‬
  32. 32. ‫שמאלה‬ ‫ימינה‬
  33. 33. ‫סמארטפון: פלטפורמה ל-‪Web‬‬ ‫אין ‪ ,Hover‬יש מגע‬ ‫נדרש משוב‬ ‫גודל מינימלי למגע‬ ‫מחוות?‬‫התייחסות למערכת‬ ‫ספריות: ‪,jQuery Mobile ,Sencha‬‬ ‫הפעלה ספציפית‬ ‫‪Titanium Mobile , jQTouch‬‬
  34. 34. ‫סמארטפון: פלטפורמה ל-‪Web‬‬ ‫אין ‪ ,Hover‬יש מגע‬ ‫נדרש משוב‬ ‫גודל מינימלי למגע‬ ‫מחוות?‬‫ספריות: ‪,jQuery Mobile ,Sencha‬‬ ‫‪Titanium Mobile , jQTouch‬‬ ‫סיבוב, מיקום‬
  35. 35. ‫סמארטפון: פלטפורמה ל-‪Web‬‬ ‫גדלי מסך שונים‬ ‫/9431411406/‪www.flickr.com/photos/jpott‬‬
  36. 36. http://theme.fm/2011/07/mobile-user-interface-design-considerations-837/
  37. 37. Web-‫סמארטפון: פלטפורמה ל‬ ‫גדלי מסך שונים‬ Responsive Design www.flickr.com/photos/jpott/6041141349/
  38. 38. ‫סמארטפון: פלטפורמה ל-‪Web‬‬ ‫גדלי מסך שונים‬ ‫‪Responsive Design‬‬ ‫מהירות משפיעה על רווח‬ ‫/9431411406/‪www.flickr.com/photos/jpott‬‬
  39. 39. ‫מהירות משפיעה על רווח‬ ‫אמזון: 1.0 שניה = %1 ירידה בהכנסות‬ ‫יאהו: 4.0 שניה = %9-5 יותר נוטשים לפני‬ ‫טעינה מלאה של העמוד‬ ‫גוגל: 5.0 שניה = %02 ירידה בהכנסות‬‫‪slideshare.net/stubbornella/designing-fast-websites-presentation‬‬ ‫/7664115394/‪www.flickr.com/photos/jondresner‬‬
  40. 40. ‫אל תשכחו את העיצוב...‬
  41. 41. http://moiremarketing.mobi
  42. 42. www.quaintology.com/mobile
  43. 43. http://m.creativecarlos.com
  44. 44. www.hobsonrealtors.com/mobile
  45. 45. m.panerabread.com
  46. 46. ‫איך עוברים מאתר דסקטופ לאתר מובייל?‬
  47. 47. ‫איתור חנויות: יותר גבוה בהיררכיה, פעמיים‬
  48. 48. ‫ניווט גלובאלי מצומצם‬
  49. 49. ‫לוגו בסמארטפון - רק בניווט הגלובאלי‬
  50. 50. ‫רוב שטח העמוד מוקדש לקטגוריות, משוטחות‬
  51. 51. ‫מבצעים מהאתר הרגיל לא מופיעים בסמארטפון‬
  52. 52. ‫חיפוש: מפורש, פעמיים, בראש ובתחתית‬
  53. 53. ‫הפניה לאתר המובייל ובחזרה‬
  54. 54. ‫ותרו בשמחה על פרסומות,‬‫אימגים קישוטיים ועומס חזותי‬‫רבים יגללו למטה אבל ה-‪Fold‬‬ ‫עדיין חשוב (היררכיה)‬ ‫חיפוש בתחתית כל עמוד –‬ ‫במיוחד באתרי ‪browsing‬‬‫תנו גישה לאתר המלא ובחזרה‬ ‫/2455866604/‪www.flickr.com/photos/photocrusher‬‬
  55. 55. !‫תודה‬ www.uxschool.co.ilbarak@uxschool.co.il

×