129

Mobile : comment y aller sans le regretter ?

  • Upload
    altima

  • View
    1.661

  • Download
    4

Embed Size (px)

DESCRIPTION

Conférence Mobile : Comment y aller sans le regretter ?Par Stéphane Lecouturier, Directeur Création & User Experience, altima°Application, site mobile, iPhone, Android, iPad, tablette... Même si l'enjeu du mobile est devenu une évidence, la tactique pour l'aborder l'est beaucoup mois. Clarifiez votre vision du mobile en 60 minutes de démêlage de l'univers bouillonnant du cross-devices.Au programme de cette conférence :- Pourquoi faut-il absolument y aller ? (chiffres et retours d'expériences)- Pourquoi faut-il s'en méfier ? (panorama des galères potentielles)- Innovation : Web responsive (un seul site pour tous les devices), c'est quoi ? Comment ça marche ? (avantages et inconvénients)- Démo d'un proto de site e-commerce responsive- Échange avec StéphaneEn savoir plus : http://blog.altima.fr/?p=2160Voir la vidéo : http://vimeo.com/32189113Télécharger les slides seuls sur altima.fr : http://www.altima.fr/upload/pdf/Mobile-comment-y-aller-sans-le-regretter-101111.pdfPhotos : http://www.facebook.com/media/set/?set=a.260272514024698.80532.136958503022767&type=1

Citation preview

Page 1: Mobile : comment y aller sans le regretter ?
Page 2: Mobile : comment y aller sans le regretter ?

mobilePourquoi y aller ?

Pourquoi s’en méfier ?

Le point sur le Webresponsive

Page 3: Mobile : comment y aller sans le regretter ?

mobilepourquoiy aller ?

Page 4: Mobile : comment y aller sans le regretter ?

€500millions

m-commerce en France en 2010

Xerfi

= 500 000 000 €

Page 5: Mobile : comment y aller sans le regretter ?

€13milliards

m-commerce en France en 2015

Xerfi

= 13 000 000 000 €

Page 6: Mobile : comment y aller sans le regretter ?

$600millions

chiffre d’affaire m-commerce ebay en 2009

= $600 000 000eBay / Mobile Commerce Daily

Page 7: Mobile : comment y aller sans le regretter ?

$2milliards

chiffre d’affaire m-commerce ebay en 2010

= $2 000 000 000eBay / Mobile Commerce Daily

Page 8: Mobile : comment y aller sans le regretter ?

eBay / Mobile Commerce Daily

Il est incroyable de penserque $2 milliards de C.A.

ont été générés par une plateforme qui n’existait pas il y a 2 ans,

et sur un terminalqui n’existait pas il y a 3 ans.

«

»Clare Gilmartin, VP of eBay Europe

Page 9: Mobile : comment y aller sans le regretter ?

$5milliards

chiffre d’affaire m-commerce ebay en 2011

= $5 000 000 000eBay / Mobile Commerce Daily

Page 10: Mobile : comment y aller sans le regretter ?

$265 000Avion Piper PA-46-310P Malibu de 1985

l’objet le plus cher vendu sur eBay mobile en 2010

Mashable

Page 11: Mobile : comment y aller sans le regretter ?

3,5Ferrari / mois

vendues sur eBay mobile en 2011

eBay / Mobile Commerce Daily - janvier 2011

Page 12: Mobile : comment y aller sans le regretter ?

1”= 11 vente par secondesur eBay mobile UK en 2011

eBay / Mobile Commerce Daily - octobre 2011

Page 13: Mobile : comment y aller sans le regretter ?

Google think mobile - 2011

Australie

Suisse

Norvège

Espagne

Etats Unis

Danemark

Royaume Uni

République Tchèque

France

Corée du Sud

Russie

Italie

Autriche

Allemagne

Turquie

0 10 20 30 40

14

18

21

24

25

27

27

29

30

30

31

33

33

34

37

Taux d’équipement smartphone

Page 14: Mobile : comment y aller sans le regretter ?

6millionsse connectenttous les jours

Médiamétrie - octobre 2011

Page 15: Mobile : comment y aller sans le regretter ?

27%de smartphonesen France en 2011

Google think mobile - 2011

Page 16: Mobile : comment y aller sans le regretter ?

40%de smartphonesen France en 2011

Médiamétrie - octobre 2011

Page 17: Mobile : comment y aller sans le regretter ?

millions

12de smartphones vendus en France en 2011

GfK- octobre 2011

Page 18: Mobile : comment y aller sans le regretter ?

Comscore août 2011

4 %6 %8 %

Android24 %

Symbian29 %

Apple31 %

Part de marché des OS smartphonesFrance + Allemagne + Italie + Espagne + Royaume Uni

Apple Symbian Android Blackberry Microsoft autres

Page 19: Mobile : comment y aller sans le regretter ?

Comscore août 2011

7 %8 %

Android21 %

3 %

Apple61 %

Consommation de bande passanteFrance + Allemagne + Italie + Espagne + Royaume Uni

Apple Symbian Android Blackberry autres

Page 20: Mobile : comment y aller sans le regretter ?

Stanley Research

mobile vs. desktop2007-2015 (estimations)

!"###

$"%##

$"!##

&##

'##

#!##()**!##&)**!##+)**!#$#)**!#$$)**!#$!)**!#$,)**!#$')**!#$-)

./012/10*34124*56

67

689:;1*./012/10*34124

<14=08>*./012/10*34124

Page 21: Mobile : comment y aller sans le regretter ?

39%utilisent leur smartphone

aux toilettes

Google think mobile - 2011

Page 22: Mobile : comment y aller sans le regretter ?

24%ont fait un achat

sur leur smartphone*

* hors applis et téléchargements - FEVAD juin 2011

Page 23: Mobile : comment y aller sans le regretter ?

47%utilisent leur smartphone

pour préparer un achat

FEVAD juin 2011

Page 24: Mobile : comment y aller sans le regretter ?

35%ont utilisé leur smartphone

dans un magasin

FEVAD juin 2011

Page 25: Mobile : comment y aller sans le regretter ?

36%

pour regarder le prixdans une autre enseigne

FEVAD juin 2011

29%

pour géolocaliser d’autres enseignes

26%

pour montrer le produit au vendeur

Page 26: Mobile : comment y aller sans le regretter ?

Les mobinautessont là,

mais pas encoretous les

e-commerçants…

Page 27: Mobile : comment y aller sans le regretter ?

mobilepourquois’en méfier ?

Page 28: Mobile : comment y aller sans le regretter ?

S'il vous plaît...dessine-moi une appli

Page 29: Mobile : comment y aller sans le regretter ?

1- développement

Page 30: Mobile : comment y aller sans le regretter ?
Page 31: Mobile : comment y aller sans le regretter ?

2- publicationsur le store

Page 32: Mobile : comment y aller sans le regretter ?
Page 33: Mobile : comment y aller sans le regretter ?
Page 34: Mobile : comment y aller sans le regretter ?

3- téléchargement par les utilisateurs

Page 35: Mobile : comment y aller sans le regretter ?

Research2Guidance - septembre 2011

460 000applis sur l’AppStore

320 000applis sur AndroidMarket

Page 36: Mobile : comment y aller sans le regretter ?

Google Think Mobile

28applis installées

en moyenne

Page 37: Mobile : comment y aller sans le regretter ?

80%des applis de marquen’atteignent pas 1000 téléchargements

Deloitte

Page 38: Mobile : comment y aller sans le regretter ?

4- utilisationpar les utilisateurs

Page 39: Mobile : comment y aller sans le regretter ?

Google Think Mobile

28applis installées

en moyenne

RAPPEL

Page 40: Mobile : comment y aller sans le regretter ?

11utilisées

Google Think Mobile

dans le dernier mois

Page 41: Mobile : comment y aller sans le regretter ?

5- maintenance

Page 42: Mobile : comment y aller sans le regretter ?

24%des applis sont supprimées

de l’AppStore(37% sur AndroidMarket)

Research2Guidance

Page 43: Mobile : comment y aller sans le regretter ?

24%des applis sont supprimées

de l’AppStore(37% sur AndroidMarket)

Research2Guidance

Page 44: Mobile : comment y aller sans le regretter ?

n°11er motif de suppression :

problème d’incompatibilitéavec le dernier OS

Research2Guidance

Page 45: Mobile : comment y aller sans le regretter ?

Retour à la case départ !

Page 46: Mobile : comment y aller sans le regretter ?

maintenance d’une appli=

nombre de versions du devicex

versions de l’OSx

versions de l’appli

Page 47: Mobile : comment y aller sans le regretter ?

l’iPad =sauveur de la presse

TOUTE LA PRESSE en mai 2010

Page 48: Mobile : comment y aller sans le regretter ?

30%commission d’Apple sur les abonnements

Apple

Page 49: Mobile : comment y aller sans le regretter ?

#fail

Page 50: Mobile : comment y aller sans le regretter ?
Page 51: Mobile : comment y aller sans le regretter ?
Page 52: Mobile : comment y aller sans le regretter ?
Page 53: Mobile : comment y aller sans le regretter ?

les applisne sont pasmagiques !

Page 54: Mobile : comment y aller sans le regretter ?
Page 55: Mobile : comment y aller sans le regretter ?
Page 56: Mobile : comment y aller sans le regretter ?
Page 57: Mobile : comment y aller sans le regretter ?

#fail

Page 58: Mobile : comment y aller sans le regretter ?
Page 59: Mobile : comment y aller sans le regretter ?
Page 60: Mobile : comment y aller sans le regretter ?

#fail

Page 61: Mobile : comment y aller sans le regretter ?
Page 62: Mobile : comment y aller sans le regretter ?
Page 63: Mobile : comment y aller sans le regretter ?

#fail

Page 64: Mobile : comment y aller sans le regretter ?

22%des e-commerçants mobile

(sites + apps)

CCM Benchmark - juillet 2011

Page 65: Mobile : comment y aller sans le regretter ?

=78%des e-commerçants PAS mobile

(sites + apps)

CCM Benchmark - juillet 2011

Page 66: Mobile : comment y aller sans le regretter ?

40%des mobinautes

préfèrent acheter sur le site

IAB M-Commerce 2011

17% via une appli

Page 67: Mobile : comment y aller sans le regretter ?

31%des mobinautes

regrettent que les sitesne soient pas optimisés

pour mobileConsensus / WorldPay - Octobre 2011

Page 68: Mobile : comment y aller sans le regretter ?

#fail

Page 69: Mobile : comment y aller sans le regretter ?

comScore MobiLens - Avril 2011

53%des smartphonautesutilisent des applis

Page 70: Mobile : comment y aller sans le regretter ?

comScore MobiLens - Avril 2011

53%des smartphonautes

browsent

Page 71: Mobile : comment y aller sans le regretter ?

les internautes…

surfent !

scoop!

Page 72: Mobile : comment y aller sans le regretter ?

Yahoo! / Ipsos - Mobile Modes: How to Connect with Mobile Consumers - août 2011

Acheter

Rechercher

Se divertir

S’informer

0 25 50 75 100

61

40

37

27

39

60

63

73

Browser Apps

Activités sur smartphone Utilisation browser vs. app (US)

Page 73: Mobile : comment y aller sans le regretter ?
Page 74: Mobile : comment y aller sans le regretter ?
Page 76: Mobile : comment y aller sans le regretter ?

Apple iPad 21024 x 768 px

Samsung Galaxy Tab 10.11280 x 800 px

Page 77: Mobile : comment y aller sans le regretter ?

BlackBerry PlayBook1024 x 600 px

Page 78: Mobile : comment y aller sans le regretter ?

Sony Tablet PDouble screen

Page 79: Mobile : comment y aller sans le regretter ?

Sony Tablet PDouble screen

2 x 1024 x 480 px

Page 80: Mobile : comment y aller sans le regretter ?

Kindle fire1024 x 600 px+ server side optimization

Page 82: Mobile : comment y aller sans le regretter ?
Page 83: Mobile : comment y aller sans le regretter ?

la courseaux devicesest perdue d’avance !?

Page 84: Mobile : comment y aller sans le regretter ?

mobilele point surle webresponsive

Page 85: Mobile : comment y aller sans le regretter ?
Page 86: Mobile : comment y aller sans le regretter ?

« Web Responsive » : c’est quoi ?

Une nouvelle démarche de design de site webqui s’appuie sur la capacité des navigateurs

à détecter les caractéristiques du device.

Plutôt que de construire différents sites pour différents types de devices, l’approche « responsive »

consiste en un seul site qui s’adapteà plusieurs devices et ainsi de supporter

davantage de devices sans devoir développeret maintenir plusieurs sites différents.

Page 87: Mobile : comment y aller sans le regretter ?

webresponsiveun seul site pour tous les devices

Page 88: Mobile : comment y aller sans le regretter ?

fluid layoutmediaqueriesadaptative mediasserver optimization

« Web Responsive » : c’est quoi ?

Page 89: Mobile : comment y aller sans le regretter ?

@mediaqueries

Page 90: Mobile : comment y aller sans le regretter ?

résolutiond’écran

Page 91: Mobile : comment y aller sans le regretter ?

nombrede couleurs

Page 92: Mobile : comment y aller sans le regretter ?

périphériques d’entréetouch / keyboard…

Page 93: Mobile : comment y aller sans le regretter ?

1920 px

1280px

1024px

800px

640px

320px

des résolutions d’écransstructurantes(surtout la largeur !)

Page 94: Mobile : comment y aller sans le regretter ?

1920 px

1280px

1024px

800px

640px

320pxsmartphone smart

phone

TV

desktopdesktop desktop

featuresphone features

phone

tablettablettablet

Page 95: Mobile : comment y aller sans le regretter ?

Food Sensehttp://foodsense.is

Page 96: Mobile : comment y aller sans le regretter ?

Andersson-Wise Architectshttp://www.anderssonwise.com

Page 97: Mobile : comment y aller sans le regretter ?

showtime!

Page 98: Mobile : comment y aller sans le regretter ?
Page 99: Mobile : comment y aller sans le regretter ?

desktopdesktop

tabletsmartphone

tablet

Page 100: Mobile : comment y aller sans le regretter ?
Page 101: Mobile : comment y aller sans le regretter ?

avantageset inconvénients

Page 102: Mobile : comment y aller sans le regretter ?

Servir plus de clientsplus souvent

Plus de clients peuvent faire leur shopping quand ils veulentoù ils veulent et quelque soitle device qu’ils choisissent

avantage

Page 103: Mobile : comment y aller sans le regretter ?

avantageNouvelles fonctionnalitéspartout, tout de suite

Mise en place des évolutionsdu site sur tous les devicesau même moment

Page 104: Mobile : comment y aller sans le regretter ?

avantageCoût de set-up

Pas d’investissement dansle développement et la recetted’un site spécifique à chaquecatégorie de devices.

Page 105: Mobile : comment y aller sans le regretter ?

avantageCoût d’exploitation

Pas de développement/recetteen double des évolutions du site web dans les sites spécifiques+ un seul site à maintenir (TMA)

Page 106: Mobile : comment y aller sans le regretter ?

avantageUne seule URL

Bénéfique pour le SEO, le SMO,l’e-mail marketinget les usages cross devices

(pas de problème de 404,de redirection vers la homepage...)

Page 107: Mobile : comment y aller sans le regretter ?

avantageFuture proof

Le site sera conçu pour s’adapterà différentes largeurs d’écrans et sera ainsi déjà prêt pour répondre aux évolutions des devices et des tendances d’usage (ex : web sur TV)

Page 108: Mobile : comment y aller sans le regretter ?

avantageLes avantages du webvs. apps natives

Pas de download dans un store,instantanéité des mises à jour, indépendance, 1 seule versionà supporter,SEO-friendly,e-mailing-friendly.

Page 109: Mobile : comment y aller sans le regretter ?

inconvénientsExpérience adaptéevs. expérience naturelle du device

Création d’une expérience homogène sur tous les devicesmais qui n’est pas baséesur les principes ergonomiquespropres au device

Page 110: Mobile : comment y aller sans le regretter ?

inconvénientsPas de 100% pixel perfect

Le layout sera un peu différentsur chaque device et il ne seradonc pas possible d’assurerune expérience 100% identiqueaux maquettes sur tous les devices.

Page 111: Mobile : comment y aller sans le regretter ?

inconvénientsPas universel

Cette solution ne répondra pasà tous les features phones, principalement ceux de plus de 3 ans(Motorola Razr, anciens BlackBerry ou Nokia).

Page 112: Mobile : comment y aller sans le regretter ?

inconvénientsNiveau de compétence

Restreint le nombre de prestataires capables d’intervenir sur le front-end à ceux disposant d’une vraie expertise HTML/CSS/JSet peut limiter le développement low-cost.

Page 113: Mobile : comment y aller sans le regretter ?

inconvénientsRestreint les plug-ins externesà ceux adaptés au mobile

84 Kb,10 requêtes http,1,340 seconde

=

Page 114: Mobile : comment y aller sans le regretter ?

le responsivec’est bien…

mais pas que.

Page 115: Mobile : comment y aller sans le regretter ?

smartphone

TVdesktopdesktop

featuresphone tablet

Page 116: Mobile : comment y aller sans le regretter ?

smartphone

TVdesktopdesktop

featuresphone tablet

Page 117: Mobile : comment y aller sans le regretter ?

smartphone

TVdesktopdesktop

featuresphone tablet

Page 118: Mobile : comment y aller sans le regretter ?

smartphone

TVdesktopdesktop

featuresphone tablet

Page 119: Mobile : comment y aller sans le regretter ?

smartphone

TVdesktopdesktop

featuresphone tablet

Page 120: Mobile : comment y aller sans le regretter ?

www

Page 121: Mobile : comment y aller sans le regretter ?

www app+

Page 122: Mobile : comment y aller sans le regretter ?

m.www app+ +

Page 123: Mobile : comment y aller sans le regretter ?

m.responsivewww app+ + +

Page 124: Mobile : comment y aller sans le regretter ?

app +responsive

Page 125: Mobile : comment y aller sans le regretter ?

app m.+ +responsive

Page 126: Mobile : comment y aller sans le regretter ?

responsive

Page 127: Mobile : comment y aller sans le regretter ?

le responsiven’est pas

forcémmentexclusif !

Page 128: Mobile : comment y aller sans le regretter ?

rendre son sitemobile-compatible

ou mobile-optimizedest devenu une dette.