Zoom sur le mobile : Ne pas y perdre ses utilisateurs

557 vues

Publié le

J'ai passé en revue différentes stratégies mobiles disponibles aujourd'hui : du site mobile dédié au mobile first (ou adaptive design) en passant par le "responsive retrofitting" (aussi connu sous le nom de "responsivisation de mon site au chausse pied"). Le but était de mieux en appréhender les avantages et limites des différentes techniques et permettre aux participants de proposer à leurs clients et utilisateurs la stratégie mobile la plus adaptée à leurs besoins (de temps, budget, ergonomie, etc.).
La seconde partie de ma présentation est dédiée aux petites adaptations rapides et faciles à mettre en place qui améliorent l'expérience utilisateur et l'ergonomie (taille des boutons, interractions au touch, etc.) ainsi qu'à toutes les fonctionnalités qui rapprochent l'expérience des sites d'une expérience native : lancement en plein écran depuis une icône sur l'écran d'accueil, personalisation de la barre de statut, et bientôt notifications push directement dans le navigateur.

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
557
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Zoom sur le mobile : Ne pas y perdre ses utilisateurs

  1. 1. Zoom sur le mobile Ne pas y perdre ses utilisateurs Stéphanie Walter — Optiday 2015
  2. 2. www.inpixelitrust.fr @WalterStephanie Designer web et mobile, spécialisée en interface et expérience utilisateurs
  3. 3. Le Google Mobilegeddon ?
  4. 4. Le site mobile dédié Et les pièges à éviter
  5. 5. Adaptation « sur mesure » du design et de l’expérience (menus, fonctionnalités, etc.) Optimisation sur-mesure
  6. 6. Sur optimisation = perte de repères pour l’utilisateur Attention à la sur-optimisation
  7. 7. Deux bases de code, deux équipes, deux expériences : où est la liste d’envies sur desktop ? Attention à la continuité de l’expérience
  8. 8. Duplicate content : pensez canonical (et attention au redirections multiples ) Gestion des URLs Image Nick Royer
  9. 9. Pensez à détecter dans les 2 sens ! Gestion des URLs
  10. 10. Gestion des URLs
  11. 11. Une solution à plus ou moins court terme
  12. 12. Le responsive au chausse pied Ou comment faire renter 1500L dans sa baignoire.
  13. 13. Un retrofitting du site qui date de 2009 Adaptation en surface
  14. 14. Le responsive mobile first Avec des bouts d’adaptive dedans Poupée Russe via Shutterstock
  15. 15. On repart de zéro et on refond tout le site avec une approche Mobile First
  16. 16. On part du plus petit dénominateur commun et on enrichi l’interface au fur et à mesure. Décisions de design mobile first
  17. 17. Revoir les fonctionnalités « We removed a lot of things that are sometimes valid for e-commerce stores, but simply weren’t used by Skinny Ties customers (…)This helped reduce clutter at key points in the purchase flow »
  18. 18. Points d’attention et limites
  19. 19. Une stratégie mixte Pour une transition en douceur
  20. 20. D’une beta disponible uniquement sur mobile à un site responsive pour tous BBC news beta responsive
  21. 21. Bonnes pratiques mobiles Petits conseils et adaptations faciles à mettre en place
  22. 22. tK Karen McGrane
  23. 23. Aujourd’hui presque 3 milliards d’abonnement internet sur mobile dans le monde Des utilisateurs mobile only Image Clemens Löcker
  24. 24. Taille des boutons + Feedback utilisateur Optimisation visuelle des éléments cliquables
  25. 25. Repenser l’interface au touch pour les petits écrans Repenser certains éléments au survol
  26. 26. Une bonne idée en théorie, en pratique ils posent des soucis d’utilisabilité Navigation, les faux amis
  27. 27. Proposer des actions au swipe, pinch, etc. pour améliorer l’expérience Profiter des interactions au touch
  28. 28. <a href=“tel : 03 88 23 02 71”> Composer le numéro en un clique
  29. 29. Adieu l’interstitiel d’installation d’app
  30. 30. Vers les fonctionnalités native like Une barrière de plus en plus floue entre applications et sites
  31. 31. Disponible sur iOS, Android et Windows. Pour les générer : realfavicongenerator.net (fav)icône de lancement sur l’accueil
  32. 32. Changer la couleur de la barre du site (Android), lancer en plein écran et plus encore … Personnalisation et plein écran
  33. 33. Pensez à un fallback (si l’utilisateur refuse, en cas de soucis de GPS, etc.) La Géolocalisation
  34. 34. Grâce à une API HTML5 (Push et Notification API) Arrivée des notifications et du push
  35. 35. À vous de jouer ! C’est que le début (d’accord d’accord) * * En manque d’inspiration pour l’image de conclusion j’ai décidé de mettre un jouet robot et une blague pour faire rire Thomas.
  36. 36. Une formation pour aller plus loin …
  37. 37. Partagé sous licence CC- BY-NC-SA licence inpx.it/sw-optiday2015 www.inpixelitrust.fr @WalterStephanie

×