mobile web ux design - barak danin, uxi live 2011
DESCRIPTION
Shown at UXI Live 2011, the premier UX conference in Israel, by Barak Danin, founder of UXI and UXSchool.co.ilTRANSCRIPT
![Page 1: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/1.jpg)
דניןברק UXschool.co.il
: צמוד ומהשטח, אישי חוויית משתמש באתרים לסמארטפון
10:00-10:45' יום ה
![Page 2: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/2.jpg)
![Page 3: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/3.jpg)
דניןברק
![Page 4: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/4.jpg)
![Page 5: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/5.jpg)
![Page 6: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/6.jpg)
![Page 7: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/7.jpg)
![Page 8: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/8.jpg)
?מה יש לכם
![Page 9: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/9.jpg)
![Page 10: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/10.jpg)
![Page 11: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/11.jpg)
![Page 12: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/12.jpg)
![Page 13: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/13.jpg)
www.flickr.com/photos/33465428@N02/3920962958/
אנחנו עוברים שינוי גדול ומשמעותי
![Page 14: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/14.jpg)
www.flickr.com/photos/mikebaird/2922788582/
"גולשים באינטרנט"היינו , עד לא מזמן
![Page 15: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/15.jpg)
פעילות שגרתית בסביבה די צפויה
www.flickr.com/photos/gordon_landon/1385041796//
![Page 16: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/16.jpg)
על מכשירים מוכרים וידועים (פחות או יותר)מראש
www.flickr.com/photos/lemon/2442665971/
![Page 17: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/17.jpg)
שנים יותר אנשים ישתמשו באינטרנט דרך מכשירים 5תוך " "ניידים מאשר דרך מחשבים ביתיים
2010, מורגן סטנלי
Q4, 2010 : ממחשבים אישיים סמארטפוניםיותר 2011מאי , רובלוסקילוק
(Mobilismכנס )
2013אבל עד , אותו הדבר 2010, גרטנר
Gartner: http://bit.ly/nrR5qQ, Shmidt+Morgan: http://bit.ly/qqp9iI
![Page 18: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/18.jpg)
77%-היה טלפון נייד ל 2010-ב !מכלל אוכלוסיית העולם
www.flickr.com/photos/kahunapulej/3517330518/ מקור:ITU ,http://bit.ly/pkORZZ
![Page 19: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/19.jpg)
עבור חלק זו הדרך היחידה לגשת לאינטרנט
www.flickr.com/photos/vilseskogen/2629238433/
![Page 20: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/20.jpg)
.המחירים יורדים כל הזמן שלוש -תוך שנתיים
יחליפו את Smartphones-ה Feature Phones-ה
www.flickr.com/photos/triciawang/2152683240//
![Page 21: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/21.jpg)
Article: http://bit.ly/nLR9C8 Tag: www.flickr.com/photos/abbyladybug/1253054966/
“So far, this $80 smartphone has found its way
into the hands of 350,000+ Kenyans,
an impressive sales number in a country where
40% of the population lives on less than two dollars a day. “
![Page 22: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/22.jpg)
![Page 23: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/23.jpg)
אנחנו מחוברים כל הזמן ומכל מקום
www.flickr.com/photos/vilseskogen/2629238433/
![Page 24: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/24.jpg)
"אופליין זה כשהסוללה שלי מתה" UXI Live 2010, איל שחר
![Page 25: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/25.jpg)
Context -הקשר
www.flickr.com/photos/yourdon/4236402727
יד אחת
מסך מגע קטן
מרחב ציבורי
(:?)המסקנה רק . תוכן פשוט ומצומצם
"בשטח"מה שחייבים
מעט זמן פנוי
הסחות דעת מבית ומחוץ
![Page 26: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/26.jpg)
... כשיש סתם כמה דקות להעביר - 80%
Compete quarterly - http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
![Page 27: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/27.jpg)
בשירותים 39%
Google Mobile Movement: http://bit.ly/olzEGL www.flickr.com/photos/paulk/5217304095/
![Page 28: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/28.jpg)
על דברים 25%מתוכם שקשורים לתוכן שצופים בו
Google Mobile Movement: http://bit.ly/olzEGL Yahoo Mobile Shopping Framework: http://yhoo.it/qDNNpF www.flickr.com/photos/modenadude/5310990259/
מהבית 93% בזמן שצופים בטלוויזיה 86%
![Page 29: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/29.jpg)
מחקר בזמן קניה בחנות 69%
Compete quarterly http://bit.ly/pq2El9/ www.flickr.com/photos/paulk/5217304095/
![Page 30: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/30.jpg)
כך -המאהב הלא כל סודי של אשתי
![Page 31: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/31.jpg)
הזמנת : Scenario-ה בפייסבוקָחברה לאירוע
![Page 32: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/32.jpg)
האפליקציה של "היא ... גרועה פייסבוק
ממש מצומצמת לעומת "הרגיל הפייסבוק
הזמנת : Scenario-ה בפייסבוקָחברה לאירוע
![Page 33: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/33.jpg)
של חברת תעופה לסמארטפוןאתר
הם בטח נכנסו : ההקשרכי הם רוצים מהסמארטפון
לכן אין . ק אין'לעשות צ (?)צורך בהזמנת כרטיסים
www.flickr.com/photos/noodlepie/538693661/
?ארזת לבד
/context-mobile-/the2011kirby.co.uk/-http://mark
![Page 34: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/34.jpg)
Virgin Atlantic ...הבינו שזו טעות
Fold
![Page 35: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/35.jpg)
אתר של רשת חנויות בגדים
הם בטח נכנסו : ההקשרכי הם מהסמארטפון
מחפשים את הסניף אז ניתן להם רק . הקרוב
גבי -כתובות וטלפונים על (?)מפה
www.flickr.com/photos/epsos/4444576795/
![Page 36: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/36.jpg)
Fold
Old Navy , חשוב: איתור חנות
אבל יש גם את כל הקטגוריות
קטגוריות יורדות
אבל עדיין , למטה Fold-מעל ל
קטגוריות
איתור חנות
![Page 37: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/37.jpg)
/www.flickr.com/photos/33498942@N04/5756115071
אל תנסו לקרוא את מחשבות בצעו מחקר . המשתמשים
לפי תוצאותיו תעדפו/וסננו
נדרשים פחות תוכן או לא בהכרח , לסמארטפוןיכולות באתר
תיעדוףבהחלט נדרש
![Page 38: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/38.jpg)
Web-פלטפורמה ל: סמארטפון
יש מגע, Hoverאין
נדרש משוב
/4570604896www.flickr.com/photos/remus/
![Page 39: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/39.jpg)
Web-פלטפורמה ל: סמארטפון
/4570604896www.flickr.com/photos/remus/
יש מגע, Hoverאין
נדרש משוב
גודל מינימלי למגע
![Page 40: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/40.jpg)
למגע מינמאליגודל
/5401015128www.flickr.com/photos/lapideo/http://
מ"מ 9מומלץ , מ"מ 7
![Page 41: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/41.jpg)
ימינה שמאלה
![Page 42: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/42.jpg)
ימינה שמאלה
![Page 43: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/43.jpg)
Web-פלטפורמה ל: סמארטפון
יש מגע, Hoverאין
נדרש משוב
גודל מינימלי למגע
?מחוות
, Sencha ,jQuery Mobile: ספריותjQTouch ,Titanium Mobile
, Sencha ,jQuery Mobile: ספריותjQTouch ,Titanium Mobile
התייחסות למערכת הפעלה ספציפית
![Page 44: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/44.jpg)
Web-פלטפורמה ל: סמארטפון
יש מגע, Hoverאין
נדרש משוב
גודל מינימלי למגע
?מחוות
, Sencha ,jQuery Mobile: ספריותjQTouch ,Titanium Mobile
מיקום, סיבוב
![Page 45: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/45.jpg)
![Page 46: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/46.jpg)
![Page 47: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/47.jpg)
Web-פלטפורמה ל: סמארטפון
/6041141349www.flickr.com/photos/jpott/
גדלי מסך שונים
![Page 48: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/48.jpg)
http://theme.fm/2011/07/mobile-user-interface-design-considerations-837/
![Page 49: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/49.jpg)
/6041141349www.flickr.com/photos/jpott/
Web-פלטפורמה ל: סמארטפון
גדלי מסך שונים
Responsive Design
![Page 50: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/50.jpg)
/6041141349www.flickr.com/photos/jpott/
Web-פלטפורמה ל: סמארטפון
מהירות משפיעה על רווח
גדלי מסך שונים
Responsive Design
![Page 51: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/51.jpg)
presentation-websites-fast-/designingstubbornellaslideshare.net/
מהירות משפיעה על רווח
ירידה בהכנסות 1%= שניה 0.1: אמזון
יותר נוטשים לפני 5-9%= שניה 0.4: יאהו טעינה מלאה של העמוד
ירידה בהכנסות 20%= שניה 0.5: גוגל
/4935114667www.flickr.com/photos/jondresner/
![Page 52: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/52.jpg)
...אל תשכחו את העיצוב
![Page 58: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/58.jpg)
?איך עוברים מאתר דסקטופ לאתר מובייל
![Page 59: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/59.jpg)
![Page 60: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/60.jpg)
פעמיים, יותר גבוה בהיררכיה: חנויותאיתור
![Page 61: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/61.jpg)
ניווט גלובאלי מצומצם
![Page 62: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/62.jpg)
רק בניווט הגלובאלי - בסמארטפוןלוגו
![Page 63: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/63.jpg)
משוטחות, רוב שטח העמוד מוקדש לקטגוריות
![Page 64: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/64.jpg)
בסמארטפוןמבצעים מהאתר הרגיל לא מופיעים
![Page 65: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/65.jpg)
בראש ובתחתית, פעמיים, מפורש: חיפוש
![Page 66: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/66.jpg)
הפניה לאתר המובייל ובחזרה
![Page 67: Mobile web UX Design - Barak Danin, UXI Live 2011](https://reader030.vdocuments.site/reader030/viewer/2022020306/54847a4ab4af9f690d8b4bdb/html5/thumbnails/67.jpg)
www.flickr.com/photos/photocrusher/4066685542/
–חיפוש בתחתית כל עמוד browsingבמיוחד באתרי
, ותרו בשמחה על פרסומות קישוטיים ועומס חזותי ים'אימג
Fold-רבים יגללו למטה אבל ה (היררכיה)עדיין חשוב
תנו גישה לאתר המלא ובחזרה