68
ברק דניןUXschool.co.il אישי, צמוד ומהשטח: חוויית משתמש באתרים לסמארטפון יום ה' 10:00-10:45

Mobile web UX Design - Barak Danin, UXI Live 2011

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Mobile web UX Design - Barak Danin, UXI Live 2011

דניןברק UXschool.co.il

: צמוד ומהשטח, אישי חוויית משתמש באתרים לסמארטפון

10:00-10:45' יום ה

Page 2: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 3: Mobile web UX Design - Barak Danin, UXI Live 2011

דניןברק

Page 4: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 5: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 6: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 7: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 8: Mobile web UX Design - Barak Danin, UXI Live 2011

?מה יש לכם

Page 9: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 10: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 11: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 12: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 13: Mobile web UX Design - Barak Danin, UXI Live 2011

www.flickr.com/photos/33465428@N02/3920962958/

אנחנו עוברים שינוי גדול ומשמעותי

Page 14: Mobile web UX Design - Barak Danin, UXI Live 2011

www.flickr.com/photos/mikebaird/2922788582/

"גולשים באינטרנט"היינו , עד לא מזמן

Page 15: Mobile web UX Design - Barak Danin, UXI Live 2011

פעילות שגרתית בסביבה די צפויה

www.flickr.com/photos/gordon_landon/1385041796//

Page 16: Mobile web UX Design - Barak Danin, UXI Live 2011

על מכשירים מוכרים וידועים (פחות או יותר)מראש

www.flickr.com/photos/lemon/2442665971/

Page 17: Mobile web UX Design - Barak Danin, UXI Live 2011

שנים יותר אנשים ישתמשו באינטרנט דרך מכשירים 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

77%-היה טלפון נייד ל 2010-ב !מכלל אוכלוסיית העולם

www.flickr.com/photos/kahunapulej/3517330518/ מקור:ITU ,http://bit.ly/pkORZZ

Page 19: Mobile web UX Design - Barak Danin, UXI Live 2011

עבור חלק זו הדרך היחידה לגשת לאינטרנט

www.flickr.com/photos/vilseskogen/2629238433/

Page 20: Mobile web UX Design - Barak Danin, UXI Live 2011

.המחירים יורדים כל הזמן שלוש -תוך שנתיים

יחליפו את Smartphones-ה Feature Phones-ה

www.flickr.com/photos/triciawang/2152683240//

Page 21: Mobile web UX Design - Barak Danin, UXI Live 2011

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
Page 23: Mobile web UX Design - Barak Danin, UXI Live 2011

אנחנו מחוברים כל הזמן ומכל מקום

www.flickr.com/photos/vilseskogen/2629238433/

Page 24: Mobile web UX Design - Barak Danin, UXI Live 2011

"אופליין זה כשהסוללה שלי מתה" UXI Live 2010, איל שחר

Page 25: Mobile web UX Design - Barak Danin, UXI Live 2011

Context -הקשר

www.flickr.com/photos/yourdon/4236402727

יד אחת

מסך מגע קטן

מרחב ציבורי

(:?)המסקנה רק . תוכן פשוט ומצומצם

"בשטח"מה שחייבים

מעט זמן פנוי

הסחות דעת מבית ומחוץ

Page 26: Mobile web UX Design - Barak Danin, UXI Live 2011

... כשיש סתם כמה דקות להעביר - 80%

Compete quarterly - http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Page 28: Mobile web UX Design - Barak Danin, UXI Live 2011

על דברים 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 30: Mobile web UX Design - Barak Danin, UXI Live 2011

כך -המאהב הלא כל סודי של אשתי

Page 31: Mobile web UX Design - Barak Danin, UXI Live 2011

הזמנת : Scenario-ה בפייסבוקָחברה לאירוע

Page 32: Mobile web UX Design - Barak Danin, UXI Live 2011

האפליקציה של "היא ... גרועה פייסבוק

ממש מצומצמת לעומת "הרגיל הפייסבוק

הזמנת : Scenario-ה בפייסבוקָחברה לאירוע

Page 34: Mobile web UX Design - Barak Danin, UXI Live 2011

Virgin Atlantic ...הבינו שזו טעות

Fold

Page 35: Mobile web UX Design - Barak Danin, UXI Live 2011

אתר של רשת חנויות בגדים

הם בטח נכנסו : ההקשרכי הם מהסמארטפון

מחפשים את הסניף אז ניתן להם רק . הקרוב

גבי -כתובות וטלפונים על (?)מפה

www.flickr.com/photos/epsos/4444576795/

Page 36: Mobile web UX Design - Barak Danin, UXI Live 2011

Fold

Old Navy , חשוב: איתור חנות

אבל יש גם את כל הקטגוריות

קטגוריות יורדות

אבל עדיין , למטה Fold-מעל ל

קטגוריות

איתור חנות

Page 37: Mobile web UX Design - Barak Danin, UXI Live 2011

/www.flickr.com/photos/33498942@N04/5756115071

אל תנסו לקרוא את מחשבות בצעו מחקר . המשתמשים

לפי תוצאותיו תעדפו/וסננו

נדרשים פחות תוכן או לא בהכרח , לסמארטפוןיכולות באתר

תיעדוףבהחלט נדרש

Page 38: Mobile web UX Design - Barak Danin, UXI Live 2011

Web-פלטפורמה ל: סמארטפון

יש מגע, Hoverאין

נדרש משוב

/4570604896www.flickr.com/photos/remus/

Page 39: Mobile web UX Design - Barak Danin, UXI Live 2011

Web-פלטפורמה ל: סמארטפון

/4570604896www.flickr.com/photos/remus/

יש מגע, Hoverאין

נדרש משוב

גודל מינימלי למגע

Page 41: Mobile web UX Design - Barak Danin, UXI Live 2011

ימינה שמאלה

Page 42: Mobile web UX Design - Barak Danin, UXI Live 2011

ימינה שמאלה

Page 43: Mobile web UX Design - Barak Danin, UXI Live 2011

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

Web-פלטפורמה ל: סמארטפון

יש מגע, Hoverאין

נדרש משוב

גודל מינימלי למגע

?מחוות

, Sencha ,jQuery Mobile: ספריותjQTouch ,Titanium Mobile

מיקום, סיבוב

Page 45: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 46: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 47: Mobile web UX Design - Barak Danin, UXI Live 2011

Web-פלטפורמה ל: סמארטפון

/6041141349www.flickr.com/photos/jpott/

גדלי מסך שונים

Page 48: Mobile web UX Design - Barak Danin, UXI Live 2011

http://theme.fm/2011/07/mobile-user-interface-design-considerations-837/

Page 49: Mobile web UX Design - Barak Danin, UXI Live 2011

/6041141349www.flickr.com/photos/jpott/

Web-פלטפורמה ל: סמארטפון

גדלי מסך שונים

Responsive Design

Page 50: Mobile web UX Design - Barak Danin, UXI Live 2011

/6041141349www.flickr.com/photos/jpott/

Web-פלטפורמה ל: סמארטפון

מהירות משפיעה על רווח

גדלי מסך שונים

Responsive Design

Page 52: Mobile web UX Design - Barak Danin, UXI Live 2011

...אל תשכחו את העיצוב

Page 53: Mobile web UX Design - Barak Danin, UXI Live 2011

http://moiremarketing.mobi

Page 54: Mobile web UX Design - Barak Danin, UXI Live 2011

www.quaintology.com/mobile

Page 56: Mobile web UX Design - Barak Danin, UXI Live 2011

www.hobsonrealtors.com/mobile

Page 57: Mobile web UX Design - Barak Danin, UXI Live 2011

m.panerabread.com

Page 58: Mobile web UX Design - Barak Danin, UXI Live 2011

?איך עוברים מאתר דסקטופ לאתר מובייל

Page 59: Mobile web UX Design - Barak Danin, UXI Live 2011
Page 60: Mobile web UX Design - Barak Danin, UXI Live 2011

פעמיים, יותר גבוה בהיררכיה: חנויותאיתור

Page 61: Mobile web UX Design - Barak Danin, UXI Live 2011

ניווט גלובאלי מצומצם

Page 62: Mobile web UX Design - Barak Danin, UXI Live 2011

רק בניווט הגלובאלי - בסמארטפוןלוגו

Page 63: Mobile web UX Design - Barak Danin, UXI Live 2011

משוטחות, רוב שטח העמוד מוקדש לקטגוריות

Page 64: Mobile web UX Design - Barak Danin, UXI Live 2011

בסמארטפוןמבצעים מהאתר הרגיל לא מופיעים

Page 65: Mobile web UX Design - Barak Danin, UXI Live 2011

בראש ובתחתית, פעמיים, מפורש: חיפוש

Page 66: Mobile web UX Design - Barak Danin, UXI Live 2011

הפניה לאתר המובייל ובחזרה

Page 67: Mobile web UX Design - Barak Danin, UXI Live 2011

www.flickr.com/photos/photocrusher/4066685542/

–חיפוש בתחתית כל עמוד browsingבמיוחד באתרי

, ותרו בשמחה על פרסומות קישוטיים ועומס חזותי ים'אימג

Fold-רבים יגללו למטה אבל ה (היררכיה)עדיין חשוב

תנו גישה לאתר המלא ובחזרה