Web in - Mobile First: créer une bonne expérience mobile

2,144 views

Published on

Comme l'industrie du mobile explose et que le support pour de nouvelles technologies est maintenant disponible sur les principales plateformes, nous devons arrêter de prendre les téléphones mobiles comme des appareils de second plan. La philosophie mobilité en premier (Mobile First) nous force à penser, à designer et à créer pour les appareils mobiles en premier lieu. Utiliser cette technique nous forces à focalisés sur ce qui est vraiment important pour nos utilisateurs, nos clients, sans négliger pour autant les autres appareils, tels que les PCs.

Published in: Technology

Web in - Mobile First: créer une bonne expérience mobile

  1. 1. 2012-11-1Mobile First: créer unebonne expérience mobileFrédéric HarperTechnical Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
  2. 2. le problème
  3. 3. le Web d’avant, la perception actuelle
  4. 4. le Web d’aujourd’hui
  5. 5. Fundamentally, there’s just one World WideWeb, but it can be experienced in different wayson different devices.- Luke Woblewski, Mobile First, A Book Apart
  6. 6. donc, trop souvent… les mobiles sont pris en considération comme un élément à part les mobiles ne sont tout simplement pas pris en considération l’expérience Web n’est pas très bonne sur les appareils mobiles
  7. 7. l’anti expérience
  8. 8. la solution
  9. 9. une solution
  10. 10. Mobile firstLuke Wroblewski bloguait à ce sujet le 3 novembre 2009
  11. 11. L’expérience
  12. 12. les raisons
  13. 13. la croissance
  14. 14. mobilité en croissance• D’ici 2014 = mobile > desktop• Aux É-U, 25% = mobile seulement!• Exemple (sous peu): 50% mobile des vidéos sur YouTube Sources: http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic http://crave.cnet.co.uk/software/google-is-now-a-mobile-first-company-execs-say-50009727/ http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  15. 15. en perspectiveSource: http://lukew.com/
  16. 16. N’utilise-t-on pas tous des apps? 347% d’augmentation sur le navigateur mobile (4.7 million) en janvier 2010Source: http://www.lukew.com/
  17. 17. N’utilise-t-on pas tous des apps? 112% d’augmentation sur l’utilisation du navigateur mobile (251 million) en janvier 2010Source: http://www.lukew.com/
  18. 18. les contraintes
  19. 19. les capacités
  20. 20. les capacités des appareils mobiles• Détection de la geolocalisation - GPS• Orientation de l’appareil – Accéléromètre• Écran tactile• NFC (Near Field Communications)• et plus…
  21. 21. le contexte
  22. 22. la mobilité n’est pas que mobileSouvent pris comme des inconvénients, il faut savoir en tirerprofit!
  23. 23. les avantages
  24. 24. Mobile First• Prépare le site aux nouvelles opportunités mobiles• Nous force à prioriser et à nous concentrer sur le contenu/contenant• Permet de créer de meilleures experiences Web mobile• Permet de créer des experiences innovantes
  25. 25. l’inverse fonctionne bien non?
  26. 26. la réalitéSource: http://xkcd.com/773/
  27. 27. les inconvénients
  28. 28. les désavantages• Changement dans la façon • de penser le design/la création • de créer les sites• On doit vraiment connaître les besoins et/ou les produits/services de ses clients
  29. 29. implémentation
  30. 30. redéfinir l’expérience
  31. 31. UI  NUI – Natural User Interface  Touch  Espace facile ou difficile à atteindre  Limité à l’essentiel
  32. 32. Touch  Recommandé = 9mm/34px  Minimum = 7mm/26px  Espace minimum = 2mm/8px  Grandeur de l’élément visuel = 60- 100%Source: Windows Phone UI Design and Interaction Guide v2.0
  33. 33. le code1. Éliminer les redirections2. Utiliser Application Cache pour le stockage de contenu local3. Utiliser CSS3 et les Canvas au lieu d’images quand c’est possible4. …
  34. 34. fonctionnalités1. Utiliser la géolocalisation 1. Location et direction2. Utiliser l’appareil photo et/ou le micro3. Utiliser le RFID/NFC
  35. 35. se résume…Expérience mobile = capacités – contraintes + priorisation contextes
  36. 36. ressources
  37. 37. Screenfly
  38. 38. http Luke W post: http://www.lukew.com/ff/entry.asp?933 Mobile First book: http://www.abookapart.com/products/mobile-first Luke W presentation: http://vimeo.com/38187066 A list Apart: http://www.alistapart.com/ Tapworthy: http://shop.oreilly.com/product/0636920001133.do Screenfly: http://quirktools.com/screenfly/
  39. 39. en résumé, Mobile First c’est• Penser à la croissance des appareils mobiles• Minimiser les contraintes• Maximiser les capacités et les contextes• Généralement une meilleure expérience pour l’utilisateur• Pas nécessairement facile comme approche au début
  40. 40. aussi…• Mobile First <3 Responsive Web Design• Responsive Web Design != Mobile First• Content First est la clé• Ce n’est que le début…
  41. 41. …every desktop UI should be designed for touchnow. When any desktop machine could have atouch interface, we have to proceed as if they alldo.- Josh Clark, http://globalmoxie.com/blog/desktop-touch-design.shtml
  42. 42. Every UI should be designed for touch now!- Frédéric Harper, conférence Web-In, 2012-11-12
  43. 43. questionsFrédéric Harperfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net

×