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