Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile web UX Design - Barak Danin, UXI Live 2011

5,821 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

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

×