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.

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
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