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