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