••Hagai Jacobsonhagaijhagaij@realcommerce.co.il054-6599379
–-iFrames
–Mobile first
–-CClarityConventionsNo learning CurveConvenient
←
–
–
–
Dumb tv-> Smart TV
Youtube
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
מצגת לכנס Multiscreen
Upcoming SlideShare
Loading in...5
×

מצגת לכנס Multiscreen

58

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
58
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • שקף כותרת
  • מי אני
  • מה היה לנו עד היום -
  • אתר – קשר בין אתר, לאתר מובייל לאפליקציה
  • חוויה end to end
  • כאן מסבירים על הסינון שבצד שמאל, ואיך בגרסה המותאמת הוא הוסתר, ומוצג רק שצריך אותו, כמו כן להדגיש על חשיבות ההתאמה למובייל ומתן אינדיקציה לגולש
  • גודל המסך, ומה זה אומר
  • בהירות (Clear) - הלקוח צריך להבין מיד מה מטרת העמוד ואיך לבצע את המשימה שמופיעה בוConvenient - נוח לביצוע בכמה שפחות קליקים וכמה שפחות הקלדות. כל הקלה נחשבת כאן, למשל הגדרה של שדה של email ככזה ולא כשדה טקסט כללי תוסיף את כפתור ה @ למקלדת. זה נוח וזה טוב ללקוח.קונבנציונאלי - שימוש בפקדים סטנדרטיים היכן שניתן מקצר מאוד את עקומת הלמידה של הלקוח ומאפשר לו להבין בדיוק מה צריך לעשות בלי לחשוב.וכמובן no learning Curve - העקרון המוביל הוא Don;t make me think (יש ספר UI כזה לדעתי)
  • אפליקציה או אתר
  • כאן מסבירים על היתרונות שאפשר למצוא בסביבה מובייליתניווט Click 2 call
  • חשיבות הנוחות של איתור המידע
  • Do nothingPros:Easy to implement- you can implement your large-screen site almost as-is.No Javascript dependencies – ensuring maximum compatibilityNo back-breaking CSS maneuvers requiredNo tripping over your source order – no need to jump through hoops to shift nav lists around in the source. It flows au naturel.ConsHeight issues- Height matters in mobile. As Luke’s book explains, content-first, nav-second is preferred for mobile web experiences. You want to get the users to the meat-and-potatoes content as quickly as possible. That means getting the navigation out of user’s way so they can focus on the core information on the page. It can also be confusing when all the core content is cut off:The site doesn't look different from page to page and doesn't expose the core content soon enoughNot scalable – What happens when you want to add a new section to your site? Where the nav fits neatly on one line now, what happens when your client says you need to add “products and services” to the nav? Or when you need to translate the menu to German?Fat Fingers – Cramming links too closely together can easily result in unwanted proximity clicksCross-device issues – While text might look great on an iPhone, devices have different ways of rendering fonts. Sites can look great on an iPhone but break when viewed on other platforms:
  • prosEasy to implement- Simple anchor on top. Nav list on the bottom. That’s pretty damn easy.No Javascript dependency- which means less testing and far better support.Little CSS work required to scale up – Thanks to absolute or fixed positioning, moving the footer nav up to the top for large screens is a piece of cake.Single button in header- A simple menu icon or link takes up very little room in the header, which frees up plenty of space for the core contentconsAnchor jump can be awkward/disorienting – Quickly jumping to the footer of the site can be a bit disorientating.Not elegant- this seems weird to say, but other methods like the toggle methodhave a bit of sexy to them. A jarring jump, while awesomely practical, isn’t the elegant interaction mobile users have gotten used to from interacting with those highly-polished native apps.
  • prosLots of space- While other nav techniques don’t work very well if you have a lot of list items, this approach provides a lot of space to expand. I think that’s why Facebook took to it.Good looking- This menu is very sophisticated and advanced, so it definitely has a wow factor to it.Facebook conventions - Facebook mobile users will be used to this pattern already since the web and native Facebook mobile apps utilize this left tray system.consAdvanced- While the other methods modify simple elements, this shelf method has a lot of moving parts. As Stephanie Rieger pointed out, the Obama site navigation broke on everything but the most sophisticated devices. If your project is meant for a broader audience, you want to be very careful if choosing this approach.Doesn’t scale well- this method is quite unique to mobile and doesn’t necessarily scale up to large screens easily. You can run a risk of essentially maintaining two separate navs for small and large screens.Potentially confusing- When I first saw Facebook’s new mobile nav, I actually thought it was broken. Keeping a hint of the content on the right seems a bit weird to me, but this is all personal preference.
  • חשיבות השימוש באותה שפה בכל הערוצים
  • מצגת לכנס Multiscreen

    1. 1. ••Hagai Jacobsonhagaijhagaij@realcommerce.co.il054-6599379
    2. 2. –-iFrames
    3. 3. –Mobile first
    4. 4. –-CClarityConventionsNo learning CurveConvenient
    5. 5.
    6. 6.
    7. 7.
    8. 8.
    9. 9. Dumb tv-> Smart TV
    10. 10. Youtube
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×