SlideShare une entreprise Scribd logo

Comment optimiser sa stratégie web pour les tablettes ?

Données chiffrées sur le marché des tablettes - Quels impacts sur la stratégie web des marques ? Responsive, desktop first, tablet first... quelle stratégie de mise en œuvre adopter pour les tablettes ? Comment concevoir son site web adapté aux tablettes ? Backelite et la direction digitale Air France ont déroulé cette présentation lors d'une Matinée Backelite le 11 décembre 2014

1  sur  54
Télécharger pour lire hors ligne
Comment optimiser sa stratégie web pour les tablettes ? 
Matinée Backelite – 11 décembre 2014
Sommaire 1. Données chiffrées sur le marché des tablettes 2. Quels impacts sur la stratégie web des marques ? 3. Stratégie de mise en oeuvre pour les tablettes 4. Concevoir son site web adapté aux tablettes 5. Retour d’expérience du projet « Tablet First » Air France
Données chiffrées sur le marché des tablettes
Les ventes de tablettes sont aussi importantes que celles de PC 
Ventes mondiales en 2014 (Gartner) 
229M 
1860M 
314M 
Une base installée de 285M de tablettes dans le monde fin 2013 (ABI) versus 1,6 milliard de PC
L’adoption des tablettes est bien plus rapide que celle des smartphones 
35% des foyers français équipés en tablette contre 4% en 2011 (GfK) 
6,1M de tablettes vendues en France en 2013 contre 4,7M de PC (GfK)
Ventes dominées par Android iOS toujours en tête des usages 
VENTES 
PARC 
USAGES 
69% du trafic web tablette est généré par l’iPad aux Etats-Unis 56% en France 
Sources : IDC (ventes), ABI (base installée), StatCounter novembre 2014 (trafic)
La fin de la croissance du web « classique » 
Source : ComScore Media Metrix Multi-Plateform & Mobile Metrix, U.S, June 2013 – June 2014 
DONNÉES AUX U.S
La fin de la croissance du web « classique » 
Source : AT Internet 
DONNÉES EN FRANCE
Transfert du trafic web des desktops vers les smartphones et les tablettes 
Source : AT Internet 
DONNÉES EN FRANCE
38% de l’audience du web en France provient des smartphones et des tablettes 
62% du trafic internet total provient DES ORDINATEURS (fixes ou portables) 
28% du trafic internet total provient DES SMARTPHONES 
10% du trafic internet total provient DES TABLETTES 
Source : eStat’Web, Les chiffres clés de la mesure web analytics de Médiamétrie en septembre 2014
Quels impacts sur la stratégie web des marques ?
Multiplication des points de contact entre la marque et ses utilisateurs 
La multiplication des écrans donne à l’utilisateur la possibilité d’interagir de façons différentes avec une marque, de manière quasiment continue : « always on » L’utilisateur consomme ainsi davantage de temps au contact des dispositifs web d’une marque.
L’expérience des utilisateurs influencée par le mobile et les applications
Vers une conception en 3 dimensions : smartphone, tablette, desktop 
Ces évolutions des habitudes des clients impactent l’exercice de conception des marques 
•conception de dispositifs à plusieurs dimensions 
•réflexion sur l’offre de services : besoins par canal 
•cohérence de l’expérience utilisateur multicanal 
•une conception qui nécessite plus de temps
Observer et ajuster en phase de conception 
Les marques doivent être capables d’identifier les impacts de leurs choix de conception en observant et en monitorant des variables multiples A/B testing, user tests, analytics en ajustant leurs choix de conception en conséquence
Augmentation du trafic tablette = augmentation des revenus ? 
La croissance des audiences web est entièrement portée par le smartphone et la tablette. Pourtant cette augmentation du trafic ne se retrouve pas dans les taux de conversion et revenus générés. 
MOBILE 55% du trafic de Vente-privée Mais 35% du chiffre d’affaires seulement 8% de taux de conversion moyen, divisé par 2 sur mobile
« plus l’écran est petit, plus le taux de conversion est petit » Ilan Benhaim, cofondateur de vente-privée.com et directeur de l’innovation
Identifier la cause d’un taux de conversion plus faible 
PREMIER RÉFLEXE : le taux de conversion est moins bon sur une tablette Les photos sont de moins bonne qualité, le temps de chargement est plus long, le paiement sur mobile est laborieux… Est-ce que le taux de conversion n’est pas plutôt réparti entre 3 devices différents, ce qui entraîne une baisse de la valeur générée par session ?
Identifier la cause d’un taux de conversion plus faible 
IMPORTANCE DES ANALYTICS : Monitorer la performance multicanal Trafic et taux de conversion par device, observation des ruptures de parcours sur tablette Soit cette baisse de la valeur générée par session est « normale » Soit elle traduit une mauvaise conception des parcours et écrans
Stratégie de mise en oeuvre pour les tablettes
Les stratégies web pour adresser la tablette 
SMARTPHONE 
TABLETTE 
DESKTOP 
site mobile 
site desktop, responsive ou pas 
site mobile 
site desktop 
site responsive 
site mobile 
site desktop 
site tablette 
y compris phablets 
Les stratégies web pour adresser la tablette
SMARTPHONE 
TABLETTE 
DESKTOP 
site mobile 
site desktop, responsive ou pas
site responsive 
SMARTPHONE 
TABLETTE 
DESKTOP
SMARTPHONE 
TABLETTE 
DESKTOP 
site mobile 
site desktop
SMARTPHONE 
TABLETTE 
DESKTOP 
site mobile 
site desktop 
site tablette
Quel site web pour adresser la tablette ? 
LES UTILISATEURS ONT DES ATTENTES TRES PROCHES ENTRE TABLETTE ET DESKTOP Ils recherchent la même offre de services sur tablette que sur desktop UN SITE QUI ADRESSE LA TABLETTE ET LE DESKTOP C’est le cas le plus courant, qu’il soit responsive ou non L’enjeu est donc de proposer un site adapté pour la tablette Un minimum de responsive peut être une bonne solution
Il n’y a pas de réponse universelle ! Chaque acteur doit déterminer le bon mix qui correspond à son activité, son audience, ses objectifs et les usages constatés (importance des analytics) 
EN SYNTHÈSE
Mobile first, tablet first, desktop first ? la préoccupation principale doit être user first en prenant en compte les interfaces tactiles avec un effort de simplification des contenus et des parcours 
EN SYNTHÈSE
Concevoir son site web adapté aux tablettes
Préambule 
CONNAITRE SON SECTEUR D’ACTIVITE DEPUIS UNE TABLETTE Pour évaluer et positionner son dispositif existant REPARTIR DE L’EXISTANT ET DES ANALYTICS Identifier notamment les points faibles observés sur une tablette, les ruptures qui ne se produisent pas sur desktop 1 VISITEUR SUR 2 PASSERA PAR UNE TABLETTE Concevoir pour la tablette, mais Tablet First n’est pas PC less
3 niveaux d’exigence pour définir l’expérience utilisateur sur tablette : 
Compatibilité tablette 
Optimisation tablette 
Tablet First
Compatibilité tablette 
OBJECTIF : Rendre praticable l’ensemble des contenus et des services sur tablette 
Adaptations ergonomiques mineures pour un meilleur confort de navigation
Site praticable sans contenu en Flash
Composants et zones de saisies cliquables
OBJECTIF : Privilégier des composants et des modes d’affichage plus adaptés à la tablette que ceux habituellement utilisés sur le web 
Optimisation tablette 
• Amélioration page par page • Allègement et simplification du contenu des pages • Remplacement des composants web par des composants « tablette »
Oubliez le pinch et le zoom
Optimisez les zones de touch
Oubliez les popin dont la position est aléatoire…
Préférez les volets et bandeaux qui s’ouvrent
Simplifiez les contenus
Favorisez les visuels pour rythmer le contenu
OBJECTIF : Refondre l’UX de son site pour proposer une expérience plus adaptée aux besoins des utilisateurs 
Tablet First 
• Simplification des contenus, des parcours et de l’architecture de l’information • Refonte de l’ergonomie, des interfaces et des interactions
Pensez l’architecture de l’information en fonction des besoins utilisateur
Accès rapide à l’information recherchée et simplification des contenus
Focus sur une activité, un besoin
Focus sur une activité, un besoin
Facilitez et simplifiez le parcours d’achat
Guider le regard de l’utilisateur par la couleur
Privilégiez de grandes zones tactiles
Des animations qui produisent du sens
Des animations qui produisent du sens
Se nourrir des ergonomies tablettes
EN SYNTHÈSE 
Si le Tablet First constitue une cible à long terme, chaque marque peut adopter une démarche plus progressive : une home Tablet First les principaux parcours optimisés la compatibilité appliquée à l’ensemble des pages C’est la démarche adoptée par Air France.
Merci ! Des questions ?

Recommandé

Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Idean France
 
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...Patrice Pena
 
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...
Cocoaheads Montpellier Meetup : L'analyse de Code Statique avec Objective-C /...Idean France
 
Opérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserOpérer un unbundling : 6 questions que les marques doivent se poser
Opérer un unbundling : 6 questions que les marques doivent se poserIdean France
 
Les 9 Tendances Tech en 2016
Les 9 Tendances Tech en 2016Les 9 Tendances Tech en 2016
Les 9 Tendances Tech en 2016Idean France
 
Les 5 Tendances de la Performance Digitale en 2016
Les 5 Tendances de la Performance Digitale en 2016Les 5 Tendances de la Performance Digitale en 2016
Les 5 Tendances de la Performance Digitale en 2016Idean France
 
FLUPA UX-Days 2016 - "Quand les militaires se prennent au jeu du Design Sprin...
FLUPA UX-Days 2016 - "Quand les militaires se prennent au jeu du Design Sprin...FLUPA UX-Days 2016 - "Quand les militaires se prennent au jeu du Design Sprin...
FLUPA UX-Days 2016 - "Quand les militaires se prennent au jeu du Design Sprin...Flupa
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Idean France
 

Contenu connexe

Tendances

Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Idean France
 
L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches  L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches Idean France
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Net Design
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017NiceToMeetYou
 
Work'n Coffee : back from CES Las Vegas 2018 by ND
Work'n Coffee : back from CES Las Vegas 2018 by NDWork'n Coffee : back from CES Las Vegas 2018 by ND
Work'n Coffee : back from CES Las Vegas 2018 by NDNet Design
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousKiss The Bride
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guillaume Abel
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoTUX REPUBLIC
 
L'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseUX REPUBLIC
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence BackeliteIdean France
 
Le social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieLe social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieUX REPUBLIC
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonHETIC
 
WUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesWUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesFrederic CAVAZZA
 
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPAMutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPAChristophe Cotin Valois
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Microsoft
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceMarc Wabnitz
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupThiga
 

Tendances (20)

Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015Les 10 tendances de la User Experience en 2015
Les 10 tendances de la User Experience en 2015
 
L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches  L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
Work'n Coffee : back from CES Las Vegas 2018 by ND
Work'n Coffee : back from CES Las Vegas 2018 by NDWork'n Coffee : back from CES Las Vegas 2018 by ND
Work'n Coffee : back from CES Las Vegas 2018 by ND
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013
 
L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 
L'UX au coeur de l'entreprise
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entreprise
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
 
Le social coding pour la Creative Technologie
Le social coding pour la Creative TechnologieLe social coding pour la Creative Technologie
Le social coding pour la Creative Technologie
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Formation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizonFormation UX Design, introduction et tour d'horizon
Formation UX Design, introduction et tour d'horizon
 
WUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobilesWUD 2010 Paris : Applications mobiles
WUD 2010 Paris : Applications mobiles
 
SQLI - Club des DSI - Mobilité
SQLI - Club des DSI - MobilitéSQLI - Club des DSI - Mobilité
SQLI - Club des DSI - Mobilité
 
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPAMutation des usages > Mutation des métiers - UXdays16 - FLUPA
Mutation des usages > Mutation des métiers - UXdays16 - FLUPA
 
Tendances Web Design 2017/2018
Tendances Web Design 2017/2018Tendances Web Design 2017/2018
Tendances Web Design 2017/2018
 
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...Conception d’expériences multi-supports, nouveaux modes de consommation de co...
Conception d’expériences multi-supports, nouveaux modes de consommation de co...
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
Les applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - MeetupLes applications de News d’aujourd’hui et de demain - Meetup
Les applications de News d’aujourd’hui et de demain - Meetup
 

En vedette

So smilemaking#5 by_marques&tongs
So smilemaking#5 by_marques&tongsSo smilemaking#5 by_marques&tongs
So smilemaking#5 by_marques&tongsMarques & Tongs
 
Digital Retail - Cross agency - Conference eCOM - 22.04.2015
Digital Retail - Cross agency - Conference eCOM - 22.04.2015Digital Retail - Cross agency - Conference eCOM - 22.04.2015
Digital Retail - Cross agency - Conference eCOM - 22.04.2015Pascal Escarment
 
6. formes de destruction des tissus
6. formes de destruction des tissus6. formes de destruction des tissus
6. formes de destruction des tissusAbdeldjalil Gadra
 
Tp abbe simon power pointe 2
Tp abbe simon power pointe 2Tp abbe simon power pointe 2
Tp abbe simon power pointe 2Simon NGOY ILUNGA
 
Libqual+, l'expérience alsacienne
Libqual+, l'expérience alsacienneLibqual+, l'expérience alsacienne
Libqual+, l'expérience alsacienneNicolas Alarcon
 
Desartistesephemeres
DesartistesephemeresDesartistesephemeres
Desartistesephemereskarkany
 
Le pronom relatif dont
Le pronom relatif dontLe pronom relatif dont
Le pronom relatif dontAncuta Nistor
 
Le volcan piton de la fournaise c
Le volcan piton de la fournaise cLe volcan piton de la fournaise c
Le volcan piton de la fournaise cbrigitteyb
 
Pourquoi faisons nous les choses que l'on fait
Pourquoi faisons nous les choses que l'on faitPourquoi faisons nous les choses que l'on fait
Pourquoi faisons nous les choses que l'on faitSSRF Inc.
 
Financer votre entreprise avec le crowd funding
Financer votre entreprise avec le crowd fundingFinancer votre entreprise avec le crowd funding
Financer votre entreprise avec le crowd fundingAri Massoudi
 
E-Réputation - Conférence Media Days
E-Réputation - Conférence Media DaysE-Réputation - Conférence Media Days
E-Réputation - Conférence Media DaysAlexandre Villeneuve
 
Edicion de imagenes
Edicion de imagenesEdicion de imagenes
Edicion de imagenes140597
 

En vedette (20)

So smilemaking#5 by_marques&tongs
So smilemaking#5 by_marques&tongsSo smilemaking#5 by_marques&tongs
So smilemaking#5 by_marques&tongs
 
Digital Retail - Cross agency - Conference eCOM - 22.04.2015
Digital Retail - Cross agency - Conference eCOM - 22.04.2015Digital Retail - Cross agency - Conference eCOM - 22.04.2015
Digital Retail - Cross agency - Conference eCOM - 22.04.2015
 
Surprise Solutions Profile
Surprise Solutions ProfileSurprise Solutions Profile
Surprise Solutions Profile
 
Sexpotit@
Sexpotit@Sexpotit@
Sexpotit@
 
6. formes de destruction des tissus
6. formes de destruction des tissus6. formes de destruction des tissus
6. formes de destruction des tissus
 
Espace(s) partagé(s)
Espace(s) partagé(s)Espace(s) partagé(s)
Espace(s) partagé(s)
 
Tp abbe simon power pointe 2
Tp abbe simon power pointe 2Tp abbe simon power pointe 2
Tp abbe simon power pointe 2
 
Raccourcis clavier
Raccourcis clavierRaccourcis clavier
Raccourcis clavier
 
Libqual+, l'expérience alsacienne
Libqual+, l'expérience alsacienneLibqual+, l'expérience alsacienne
Libqual+, l'expérience alsacienne
 
Desartistesephemeres
DesartistesephemeresDesartistesephemeres
Desartistesephemeres
 
Sexpotit@
Sexpotit@Sexpotit@
Sexpotit@
 
Le pronom relatif dont
Le pronom relatif dontLe pronom relatif dont
Le pronom relatif dont
 
Le volcan piton de la fournaise c
Le volcan piton de la fournaise cLe volcan piton de la fournaise c
Le volcan piton de la fournaise c
 
Pourquoi faisons nous les choses que l'on fait
Pourquoi faisons nous les choses que l'on faitPourquoi faisons nous les choses que l'on fait
Pourquoi faisons nous les choses que l'on fait
 
Financer votre entreprise avec le crowd funding
Financer votre entreprise avec le crowd fundingFinancer votre entreprise avec le crowd funding
Financer votre entreprise avec le crowd funding
 
E-Réputation - Conférence Media Days
E-Réputation - Conférence Media DaysE-Réputation - Conférence Media Days
E-Réputation - Conférence Media Days
 
Bios, UEFI y Legacy
Bios, UEFI y LegacyBios, UEFI y Legacy
Bios, UEFI y Legacy
 
PantocràTor
PantocràTorPantocràTor
PantocràTor
 
Edicion de imagenes
Edicion de imagenesEdicion de imagenes
Edicion de imagenes
 
Rosia Montana
Rosia MontanaRosia Montana
Rosia Montana
 

Similaire à Comment optimiser sa stratégie web pour les tablettes ?

10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015 10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015 servicesmobiles.fr
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettesCOMPETITIC
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCOMPETITIC
 
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018YOODx
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...Salon e-tourisme #VeM
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
Guide Apps Analytics AT Internet
Guide Apps Analytics AT InternetGuide Apps Analytics AT Internet
Guide Apps Analytics AT InternetStéphanie LEGRAND
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)SCALA
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobileLudovic Tant
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirBrioude Internet
 
Table ronde EBG du 28 Mai 2013
Table ronde EBG du 28 Mai 2013Table ronde EBG du 28 Mai 2013
Table ronde EBG du 28 Mai 2013Séverine Gras
 
Conference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveConference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveALTICS
 
Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014webassoc .fr
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...BEIJAFLORE
 
Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...
Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...
Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...Peak Ace
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012MBA Multimedia
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Les tendances mobiles 2014 par azetone
Les tendances mobiles 2014 par azetoneLes tendances mobiles 2014 par azetone
Les tendances mobiles 2014 par azetonePhilippe Dumont
 
10 tendances digitales pour 2016
10 tendances digitales pour 201610 tendances digitales pour 2016
10 tendances digitales pour 2016NiceToMeetYou
 

Similaire à Comment optimiser sa stratégie web pour les tablettes ? (20)

10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015 10 tendances UX Mobile, Application en 2015
10 tendances UX Mobile, Application en 2015
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettes
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clients
 
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
Mobile First - Vincent Pillet & Asma Moumni - YOODx 2018
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
Guide Apps Analytics AT Internet
Guide Apps Analytics AT InternetGuide Apps Analytics AT Internet
Guide Apps Analytics AT Internet
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Livre blanc Développement mobile
Livre blanc Développement mobileLivre blanc Développement mobile
Livre blanc Développement mobile
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
 
Table ronde EBG du 28 Mai 2013
Table ronde EBG du 28 Mai 2013Table ronde EBG du 28 Mai 2013
Table ronde EBG du 28 Mai 2013
 
Conference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ KreactiveConference e-commerce, Altics _ Kreactive
Conference e-commerce, Altics _ Kreactive
 
Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014Le marketing sur mobile, 13 juin 2014
Le marketing sur mobile, 13 juin 2014
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
 
Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...
Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...
Mobilisez-vous, le web est de plus en plus ... Mobile - Petit déjeuner du 27 ...
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Les tendances mobiles 2014 par azetone
Les tendances mobiles 2014 par azetoneLes tendances mobiles 2014 par azetone
Les tendances mobiles 2014 par azetone
 
10 tendances digitales pour 2016
10 tendances digitales pour 201610 tendances digitales pour 2016
10 tendances digitales pour 2016
 

Plus de Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017Idean France
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien CoudsiIdean France
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqIdean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineIdean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 

Plus de Idean France (20)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien Coudsi
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey Hacq
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas Fontaine
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 

Comment optimiser sa stratégie web pour les tablettes ?

  • 1. Comment optimiser sa stratégie web pour les tablettes ? Matinée Backelite – 11 décembre 2014
  • 2. Sommaire 1. Données chiffrées sur le marché des tablettes 2. Quels impacts sur la stratégie web des marques ? 3. Stratégie de mise en oeuvre pour les tablettes 4. Concevoir son site web adapté aux tablettes 5. Retour d’expérience du projet « Tablet First » Air France
  • 3. Données chiffrées sur le marché des tablettes
  • 4. Les ventes de tablettes sont aussi importantes que celles de PC Ventes mondiales en 2014 (Gartner) 229M 1860M 314M Une base installée de 285M de tablettes dans le monde fin 2013 (ABI) versus 1,6 milliard de PC
  • 5. L’adoption des tablettes est bien plus rapide que celle des smartphones 35% des foyers français équipés en tablette contre 4% en 2011 (GfK) 6,1M de tablettes vendues en France en 2013 contre 4,7M de PC (GfK)
  • 6. Ventes dominées par Android iOS toujours en tête des usages VENTES PARC USAGES 69% du trafic web tablette est généré par l’iPad aux Etats-Unis 56% en France Sources : IDC (ventes), ABI (base installée), StatCounter novembre 2014 (trafic)
  • 7. La fin de la croissance du web « classique » Source : ComScore Media Metrix Multi-Plateform & Mobile Metrix, U.S, June 2013 – June 2014 DONNÉES AUX U.S
  • 8. La fin de la croissance du web « classique » Source : AT Internet DONNÉES EN FRANCE
  • 9. Transfert du trafic web des desktops vers les smartphones et les tablettes Source : AT Internet DONNÉES EN FRANCE
  • 10. 38% de l’audience du web en France provient des smartphones et des tablettes 62% du trafic internet total provient DES ORDINATEURS (fixes ou portables) 28% du trafic internet total provient DES SMARTPHONES 10% du trafic internet total provient DES TABLETTES Source : eStat’Web, Les chiffres clés de la mesure web analytics de Médiamétrie en septembre 2014
  • 11. Quels impacts sur la stratégie web des marques ?
  • 12. Multiplication des points de contact entre la marque et ses utilisateurs La multiplication des écrans donne à l’utilisateur la possibilité d’interagir de façons différentes avec une marque, de manière quasiment continue : « always on » L’utilisateur consomme ainsi davantage de temps au contact des dispositifs web d’une marque.
  • 13. L’expérience des utilisateurs influencée par le mobile et les applications
  • 14. Vers une conception en 3 dimensions : smartphone, tablette, desktop Ces évolutions des habitudes des clients impactent l’exercice de conception des marques •conception de dispositifs à plusieurs dimensions •réflexion sur l’offre de services : besoins par canal •cohérence de l’expérience utilisateur multicanal •une conception qui nécessite plus de temps
  • 15. Observer et ajuster en phase de conception Les marques doivent être capables d’identifier les impacts de leurs choix de conception en observant et en monitorant des variables multiples A/B testing, user tests, analytics en ajustant leurs choix de conception en conséquence
  • 16. Augmentation du trafic tablette = augmentation des revenus ? La croissance des audiences web est entièrement portée par le smartphone et la tablette. Pourtant cette augmentation du trafic ne se retrouve pas dans les taux de conversion et revenus générés. MOBILE 55% du trafic de Vente-privée Mais 35% du chiffre d’affaires seulement 8% de taux de conversion moyen, divisé par 2 sur mobile
  • 17. « plus l’écran est petit, plus le taux de conversion est petit » Ilan Benhaim, cofondateur de vente-privée.com et directeur de l’innovation
  • 18. Identifier la cause d’un taux de conversion plus faible PREMIER RÉFLEXE : le taux de conversion est moins bon sur une tablette Les photos sont de moins bonne qualité, le temps de chargement est plus long, le paiement sur mobile est laborieux… Est-ce que le taux de conversion n’est pas plutôt réparti entre 3 devices différents, ce qui entraîne une baisse de la valeur générée par session ?
  • 19. Identifier la cause d’un taux de conversion plus faible IMPORTANCE DES ANALYTICS : Monitorer la performance multicanal Trafic et taux de conversion par device, observation des ruptures de parcours sur tablette Soit cette baisse de la valeur générée par session est « normale » Soit elle traduit une mauvaise conception des parcours et écrans
  • 20. Stratégie de mise en oeuvre pour les tablettes
  • 21. Les stratégies web pour adresser la tablette SMARTPHONE TABLETTE DESKTOP site mobile site desktop, responsive ou pas site mobile site desktop site responsive site mobile site desktop site tablette y compris phablets Les stratégies web pour adresser la tablette
  • 22. SMARTPHONE TABLETTE DESKTOP site mobile site desktop, responsive ou pas
  • 23. site responsive SMARTPHONE TABLETTE DESKTOP
  • 24. SMARTPHONE TABLETTE DESKTOP site mobile site desktop
  • 25. SMARTPHONE TABLETTE DESKTOP site mobile site desktop site tablette
  • 26. Quel site web pour adresser la tablette ? LES UTILISATEURS ONT DES ATTENTES TRES PROCHES ENTRE TABLETTE ET DESKTOP Ils recherchent la même offre de services sur tablette que sur desktop UN SITE QUI ADRESSE LA TABLETTE ET LE DESKTOP C’est le cas le plus courant, qu’il soit responsive ou non L’enjeu est donc de proposer un site adapté pour la tablette Un minimum de responsive peut être une bonne solution
  • 27. Il n’y a pas de réponse universelle ! Chaque acteur doit déterminer le bon mix qui correspond à son activité, son audience, ses objectifs et les usages constatés (importance des analytics) EN SYNTHÈSE
  • 28. Mobile first, tablet first, desktop first ? la préoccupation principale doit être user first en prenant en compte les interfaces tactiles avec un effort de simplification des contenus et des parcours EN SYNTHÈSE
  • 29. Concevoir son site web adapté aux tablettes
  • 30. Préambule CONNAITRE SON SECTEUR D’ACTIVITE DEPUIS UNE TABLETTE Pour évaluer et positionner son dispositif existant REPARTIR DE L’EXISTANT ET DES ANALYTICS Identifier notamment les points faibles observés sur une tablette, les ruptures qui ne se produisent pas sur desktop 1 VISITEUR SUR 2 PASSERA PAR UNE TABLETTE Concevoir pour la tablette, mais Tablet First n’est pas PC less
  • 31. 3 niveaux d’exigence pour définir l’expérience utilisateur sur tablette : Compatibilité tablette Optimisation tablette Tablet First
  • 32. Compatibilité tablette OBJECTIF : Rendre praticable l’ensemble des contenus et des services sur tablette Adaptations ergonomiques mineures pour un meilleur confort de navigation
  • 33. Site praticable sans contenu en Flash
  • 34. Composants et zones de saisies cliquables
  • 35. OBJECTIF : Privilégier des composants et des modes d’affichage plus adaptés à la tablette que ceux habituellement utilisés sur le web Optimisation tablette • Amélioration page par page • Allègement et simplification du contenu des pages • Remplacement des composants web par des composants « tablette »
  • 36. Oubliez le pinch et le zoom
  • 38. Oubliez les popin dont la position est aléatoire…
  • 39. Préférez les volets et bandeaux qui s’ouvrent
  • 41. Favorisez les visuels pour rythmer le contenu
  • 42. OBJECTIF : Refondre l’UX de son site pour proposer une expérience plus adaptée aux besoins des utilisateurs Tablet First • Simplification des contenus, des parcours et de l’architecture de l’information • Refonte de l’ergonomie, des interfaces et des interactions
  • 43. Pensez l’architecture de l’information en fonction des besoins utilisateur
  • 44. Accès rapide à l’information recherchée et simplification des contenus
  • 45. Focus sur une activité, un besoin
  • 46. Focus sur une activité, un besoin
  • 47. Facilitez et simplifiez le parcours d’achat
  • 48. Guider le regard de l’utilisateur par la couleur
  • 49. Privilégiez de grandes zones tactiles
  • 50. Des animations qui produisent du sens
  • 51. Des animations qui produisent du sens
  • 52. Se nourrir des ergonomies tablettes
  • 53. EN SYNTHÈSE Si le Tablet First constitue une cible à long terme, chaque marque peut adopter une démarche plus progressive : une home Tablet First les principaux parcours optimisés la compatibilité appliquée à l’ensemble des pages C’est la démarche adoptée par Air France.
  • 54. Merci ! Des questions ?