Zoom sur le mobile : Ne pas y perdre ses utilisateurs

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
September 05, 2015

Zoom sur le mobile : Ne pas y perdre ses utilisateurs

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.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

September 05, 2015
Tweet

Transcript

  1. Zoom sur le mobile Ne pas y perdre ses utilisateurs

    Stéphanie Walter — Optiday 2015
  2. www.inpixelitrust.fr @WalterStephanie Designer web et mobile, spécialisée en interface et

    expérience utilisateurs
  3. Le Google Mobilegeddon ?

  4. Le site mobile dédié Et les pièges à éviter

  5. Adaptation « sur mesure » du design et de l’expérience

    (menus, fonctionnalités, etc.) Optimisation sur-mesure
  6. Sur optimisation = perte de repères pour l’utilisateur Attention à

    la sur-optimisation
  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. Duplicate content : pensez canonical (et attention au redirections multiples

    ) Gestion des URLs Image Nick Royer
  9. Pensez à détecter dans les 2 sens ! Gestion des

    URLs
  10. Gestion des URLs

  11. Une solution à plus ou moins court terme

  12. Le responsive au chausse pied Ou comment faire renter 1500L

    dans sa baignoire.
  13. Un retrofitting du site qui date de 2009 Adaptation en

    surface
  14. None
  15. None
  16. Le responsive mobile first Avec des bouts d’adaptive dedans Poupée

    Russe via Shutterstock
  17. On repart de zéro et on refond tout le site

    avec une approche Mobile First
  18. On part du plus petit dénominateur commun et on enrichi

    l’interface au fur et à mesure. Décisions de design mobile first
  19. 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 »
  20. Points d’attention et limites

  21. Une stratégie mixte Pour une transition en douceur

  22. D’une beta disponible uniquement sur mobile à un site responsive

    pour tous BBC news beta responsive
  23. Bonnes pratiques mobiles Petits conseils et adaptations faciles à mettre

    en place
  24. tK Karen McGrane

  25. Aujourd’hui presque 3 milliards d’abonnement internet sur mobile dans le

    monde Des utilisateurs mobile only Image Clemens Löcker
  26. Taille des boutons + Feedback utilisateur Optimisation visuelle des éléments

    cliquables
  27. Repenser l’interface au touch pour les petits écrans Repenser certains

    éléments au survol
  28. Une bonne idée en théorie, en pratique ils posent des

    soucis d’utilisabilité Navigation, les faux amis
  29. Proposer des actions au swipe, pinch, etc. pour améliorer l’expérience

    Profiter des interactions au touch
  30. <a href=“tel : 03 88 23 02 71”> Composer le

    numéro en un clique
  31. Adieu l’interstitiel d’installation d’app

  32. Vers les fonctionnalités native like Une barrière de plus en

    plus floue entre applications et sites
  33. Disponible sur iOS, Android et Windows. Pour les générer :

    realfavicongenerator.net (fav)icône de lancement sur l’accueil
  34. Changer la couleur de la barre du site (Android), lancer

    en plein écran et plus encore … Personnalisation et plein écran
  35. Pensez à un fallback (si l’utilisateur refuse, en cas de

    soucis de GPS, etc.) La Géolocalisation
  36. Grâce à une API HTML5 (Push et Notification API) Arrivée

    des notifications et du push
  37. À 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.
  38. Une formation pour aller plus loin …

  39. Partagé sous licence CC- BY-NC-SA licence inpx.it/sw-optiday2015 www.inpixelitrust.fr @WalterStephanie