176
Révolution mobile @AlexJubien

Revolution Mobile @Web2day

Embed Size (px)

DESCRIPTION

Révolution Mobile : Le mobile a révolutionné nos vies, au point d'être devenu une extension de notre cerveau. Qu'est ce qui rend le mobile si révolutionnaire ? Où en sommes-nous dans cette révolution mobile ? Dans une seconde partie, quelques recommandations pour réussir vos produits mobiles. Voir http://bit.ly/revomobile (lien vers la video de la conférence, etc...)

Citation preview

Page 1: Revolution Mobile @Web2day

Révolution mobile

@AlexJubien

Page 2: Revolution Mobile @Web2day

@AlexJubien

Page 3: Revolution Mobile @Web2day

Pioneer of mobile development

Page 4: Revolution Mobile @Web2day

2003 - 2007

Games

Page 5: Revolution Mobile @Web2day

2003 - 2007

Games Apps

Page 6: Revolution Mobile @Web2day

Deezer

2008 - 2012

Page 7: Revolution Mobile @Web2day

Deezer Viadeo

2008 - 2012

Page 8: Revolution Mobile @Web2day

ThinkMobileMobile Strategy Consulting

Passion Expertise Commitment

Social Strategy Monetization M-Commerce

Webapps Innovation iPad Apps Product iPhone Usage

Android Agile R&D Blackberry Multiplatform Windows Phone

Massive Downloads Marketing Appstores

Investment Audit Solutions

Page 9: Revolution Mobile @Web2day
Page 10: Revolution Mobile @Web2day

Let’s go!

Page 11: Revolution Mobile @Web2day

Smartphones ?

Page 12: Revolution Mobile @Web2day

Smartphones ?49%

Page 13: Revolution Mobile @Web2day

Trafic web mondial ?

Page 14: Revolution Mobile @Web2day

Trafic web mondial ?15 à 20%

Page 15: Revolution Mobile @Web2day

Plus de SIMs activées que d’hommes sur terre

Mobile guru @TomiAhonen

Page 16: Revolution Mobile @Web2day

Plus adopté que le stylo !!!

Mobile guru @TomiAhonen

Page 17: Revolution Mobile @Web2day
Page 18: Revolution Mobile @Web2day

/AngryBirds

Man on the moon

Page 19: Revolution Mobile @Web2day
Page 20: Revolution Mobile @Web2day

Révolutionnaire

Page 21: Revolution Mobile @Web2day

Pourquoi ?

Page 22: Revolution Mobile @Web2day

Partout, tout le temps

Page 23: Revolution Mobile @Web2day

Même là – 75% !

Page 24: Revolution Mobile @Web2day

Parité

Page 25: Revolution Mobile @Web2day

There’s an app for that

Page 26: Revolution Mobile @Web2day

1er appareil connecté qu’on a toujours sur soi

Page 27: Revolution Mobile @Web2day

Compagnon de vie

Page 28: Revolution Mobile @Web2day

Compagnon de vie

Vie

=gens moments lieux objets

Page 29: Revolution Mobile @Web2day

Compagnon de vie

Vie

=gens moments lieux objets

Facebook Path Foursquare Pinterest

Page 30: Revolution Mobile @Web2day

Monde digital / Monde physique

Page 31: Revolution Mobile @Web2day

Monde digital / monde physique

Page 32: Revolution Mobile @Web2day

Code barre

Page 33: Revolution Mobile @Web2day

Code barre

Chasse aux trésors

Scanbucks

Comparateur de prix

Prixing

Page 34: Revolution Mobile @Web2day

QR Code

30%

http://bit.ly/AlexJubien

Page 35: Revolution Mobile @Web2day

QR Code

• Catalogue papier (But)• Magazines (Inrocks)• Affiches• Emballage Produits

(colle Pater)• Street marketing• …http://bit.ly/AlexJubien

Page 36: Revolution Mobile @Web2day
Page 37: Revolution Mobile @Web2day

Réalité augmentée

Page 38: Revolution Mobile @Web2day

Réalité augmentée Géoloc

Page 39: Revolution Mobile @Web2day

Réalité augmentée Géoloc

M-Paiement

Page 40: Revolution Mobile @Web2day

Réalité augmentée Géoloc

M-Commerce M-Paiement

Page 41: Revolution Mobile @Web2day

M Commerce

Tesco virtual supermarket in a subway station - South Korea

Page 42: Revolution Mobile @Web2day

Le mariage de la vente physique et digitale

Source : Kontestapp - http://fr.slideshare.net/Kontest/strategie-web-tostorefr

Page 43: Revolution Mobile @Web2day

M2Store / trafic en magasin

Bon plans en magasin

PassVip

Collecte de points

Shopkick

Page 44: Revolution Mobile @Web2day

PassBook

• Quoi : coupons, tickets, cartes de fidélité, bons d’achat, …

Page 45: Revolution Mobile @Web2day

iBeacon

Page 46: Revolution Mobile @Web2day

iBeacon

Page 47: Revolution Mobile @Web2day

Instantanéité

Page 48: Revolution Mobile @Web2day

5 h

TV

Météo

Page 49: Revolution Mobile @Web2day

5 h

TV Web

5 m

Météo

Page 50: Revolution Mobile @Web2day

5 h

TV Web

5 m

Mobile

5 s

Météo

Page 51: Revolution Mobile @Web2day

Vos désirs exaucés

Page 52: Revolution Mobile @Web2day

Vos désirs exaucés

5 sEnvie d’écouter

une musique

Deezer

Page 53: Revolution Mobile @Web2day

Vos désirs exaucés

5 sEnvie d’écouter

une musique

Besoin d’appelerun contact pro

5 s

Deezer

Viadeo

Page 54: Revolution Mobile @Web2day

Facilité d’utilisation

Page 55: Revolution Mobile @Web2day

Facilité d’utilisation

Page 56: Revolution Mobile @Web2day

Réduire les points de friction

Page 57: Revolution Mobile @Web2day

La friction

Ce qui empêche nos utilisateurs / consommateurs d’avancer

Page 58: Revolution Mobile @Web2day

Anti friction services

Page 63: Revolution Mobile @Web2day

Hub des capteurs

Page 64: Revolution Mobile @Web2day

IoT /

Objets Connectés

Page 65: Revolution Mobile @Web2day

miCoach

Adidas miCoach

Suivi entrainement sportif

Page 66: Revolution Mobile @Web2day

Thermostat Nest

Page 67: Revolution Mobile @Web2day

On ajoute des capteurs, on se rajoute des pouvoirs

Page 68: Revolution Mobile @Web2day

Des supers pouvoirs ?

Page 69: Revolution Mobile @Web2day

Qui est télépathe ?

Page 70: Revolution Mobile @Web2day

Transmission de pensée 1.0 :

• Latence de 30 secondes

• Nécessite de parler à voie haute

• Ne marche pas toujours => messagerie

Page 71: Revolution Mobile @Web2day

Pouvoirs

Page 72: Revolution Mobile @Web2day

Pouvoir

Transmission de pensée

Omniscience

Télékinésie

Maîtrise du temps

Prévoir l’avenir

Etre invincible / guérir

Lancer des éclairs

Voler

Téléportation

Page 73: Revolution Mobile @Web2day

Pouvoir Version

Transmission de pensée 1.0

Omniscience 0.8

Télékinésie 0.3

Maîtrise du temps 0.3

Prévoir l’avenir 0.1

Etre invincible / guérir 0.3

Lancer des éclairs 0

Voler 0.5

Téléportation 0.2

Page 74: Revolution Mobile @Web2day

Pouvoir Version Mobile powered

Transmission de pensée 1.0

Omniscience 0.8

Télékinésie 0.3

Maîtrise du temps 0.3

Prévoir l’avenir 0.1

Etre invincible / guérir 0.3

Lancer des éclairs 0

Voler 0.5

Téléportation 0.2

Page 75: Revolution Mobile @Web2day

Pouvoir Version Mobile powered

Transmission de pensée 1.0

Omniscience 0.8

Télékinésie 0.3

Maîtrise du temps 0.3

Prévoir l’avenir 0.1

Etre invincible / guérir 0.3

Lancer des éclairs 0

Voler 0.5

Téléportation 0.2

Conscience / intelligence collective 2.0

+ 3D printing

Page 76: Revolution Mobile @Web2day

Donnez du (super)pouvoir à vos utilisateurs / clients !

Page 77: Revolution Mobile @Web2day

Clivage ?

Page 78: Revolution Mobile @Web2day

EM Countries

Cours des céréales par SMS

Page 79: Revolution Mobile @Web2day

EM Countries

Transfert d’argentpar SMS

Page 80: Revolution Mobile @Web2day

Et maintenant ?

Page 81: Revolution Mobile @Web2day

Révolution tablette ?

Page 82: Revolution Mobile @Web2day

Transport

TV

Info

Cinéma

Entreprise

Art

Voyage

Cuisine

Santé

Banque

Education

Musique

Presse

Livres

Sécurité

Tourisme

Jeux

Shopping Armée

Mode

Page 83: Revolution Mobile @Web2day

Transport

TV

Info

Cinéma

Entreprise

Art

Voyage

Cuisine

Santé

Banque

Education

Musique

Presse

Livres

Sécurité

Tourisme

Jeux

Shopping Armée

Mode

Page 84: Revolution Mobile @Web2day

Transport

TV

Info

Cinéma

Entreprise

Mark Andreessen on Why Software Is Eating the World

Art

Voyage

Cuisine

Santé

Banque

Education

Musique

Presse

Livres

Sécurité

Tourisme

Jeux

Shopping Armée

Mode

Page 85: Revolution Mobile @Web2day

Disruption

Page 86: Revolution Mobile @Web2day
Page 87: Revolution Mobile @Web2day
Page 88: Revolution Mobile @Web2day
Page 89: Revolution Mobile @Web2day
Page 90: Revolution Mobile @Web2day
Page 91: Revolution Mobile @Web2day
Page 92: Revolution Mobile @Web2day
Page 93: Revolution Mobile @Web2day

? ? ? ? ??

Page 94: Revolution Mobile @Web2day

Google Glasses

Page 95: Revolution Mobile @Web2day

Eye control

Page 96: Revolution Mobile @Web2day
Page 97: Revolution Mobile @Web2day

Tatouages électroniques

Page 98: Revolution Mobile @Web2day

Allons-nous devenir des machines ?

Page 99: Revolution Mobile @Web2day

Etape : interagir avec des machines qui nous ressemblent

Page 100: Revolution Mobile @Web2day

Etape : interagir avec des machines qui nous ressemblent

Page 101: Revolution Mobile @Web2day

L’interface homme machines ultime

Page 102: Revolution Mobile @Web2day

The scary slides

Page 103: Revolution Mobile @Web2day

Faisons nous un peu peur

Page 104: Revolution Mobile @Web2day

Une entreprise à la pointe de :

MobileInformation

Intelligence artificielleBiotech

Robotique…

Page 105: Revolution Mobile @Web2day
Page 107: Revolution Mobile @Web2day

Don’t be evil(ouf !)

Page 108: Revolution Mobile @Web2day

Transhumanisme

Page 109: Revolution Mobile @Web2day

www.sarifindustries.com

L’homme augmenté :

Page 110: Revolution Mobile @Web2day

Êtes-vous prêts à devenir des machines ?

Page 111: Revolution Mobile @Web2day

Qu’est ce qui va nous faire craquer ?

Page 112: Revolution Mobile @Web2day

L’homme qui vivra 1000 ansest déjà né

Laurent Alexandre – TEDx Paris

Page 113: Revolution Mobile @Web2day
Page 114: Revolution Mobile @Web2day
Page 115: Revolution Mobile @Web2day

Qqs Recos

Page 116: Revolution Mobile @Web2day

Mobile product = product

Page 117: Revolution Mobile @Web2day

Build the right product

+

Build it right and nice !

Product that people love =

Page 118: Revolution Mobile @Web2day

Customer development / Lean Startup

+

Build it right and nice !

Product that people love =

Page 119: Revolution Mobile @Web2day

Customer development / Lean Startup

+

Agile / Scrumand nice !

Product that people love =

Page 120: Revolution Mobile @Web2day

Customer development / Lean Startup

+

Agile / ScrumDesign / UX

Product that people love =

Page 121: Revolution Mobile @Web2day

Customer development / customer communication

• Vital sur mobile

• Commentaires app stores = la jungle

• Communication directe / support

• Learn

Page 122: Revolution Mobile @Web2day

Trend : InApp feedback

Etes-vous satisfait ?

Page 123: Revolution Mobile @Web2day

InApp feedback

Etes-vous satisfait ?

Notez l’app !

Oui

App store

Page 124: Revolution Mobile @Web2day

InApp feedback

Etes-vous satisfait ?

Notez l’app !

Donnez-nous votre feedback

Oui Non

App store

Page 125: Revolution Mobile @Web2day

InApp feedback

Etes-vous satisfait ?

Notez l’app !

Donnez-nous votre feedback

Oui Non

App store

Page 126: Revolution Mobile @Web2day

126

InApp feedback

Un mécanisme vertueux pour le produit et pour le marketing :

Favoriser les bonnes notes

Eviter les avis négatifs

Transformer les utilisateurs mécontents en satisfaits + bonnes notes

Récupérer retours et suggestions, avec le contact de l’utilisateur

Page 127: Revolution Mobile @Web2day

UI: Keep it simple

Page 128: Revolution Mobile @Web2day

En mettre trop

Page 129: Revolution Mobile @Web2day

Vouloir (trop) innover sur l’UI/UX

Page 130: Revolution Mobile @Web2day

Vouloir (trop) innover sur l’UI/UX

• Risqué, demande de l’expertise, coûteux !

• Se concentrer sur le cœur de métier pour la différentiation

• Contre exemples / besoins de différentiation : Flipboard, Fantastical, Mailbox, Any.do, Path, …

Page 131: Revolution Mobile @Web2day

Animations et effets ‘Wow!’

• Plus tard

• Ca ne fait pas le produit

• Tjrs plus impactant que prévu niveau charge (réglages, allers / retours, …)

• Vous avez mieux à faire de votre temps / argent

Page 132: Revolution Mobile @Web2day

Nice but costly

Menu Path Timer Path

Page 133: Revolution Mobile @Web2day

Nice but costly

Menu Linkedin

Page 134: Revolution Mobile @Web2day

Design / customisationex. Toolbar (iOS6)

Message Mail Message Viadeo Playlist Deezer

Page 135: Revolution Mobile @Web2day

Design / customisationex. Toolbar (iOS7)

Message Mail Message Viadeo Playlist Deezer

Page 136: Revolution Mobile @Web2day

Ne pas réinventer la roue

• Apple, Google, MS… ont investi des millions dans l’UI/UX des OS

• Utilisez au maximum les composants de base / guidelines de l’OS

• Vos utilisateurs s’y retrouveront

Page 137: Revolution Mobile @Web2day

Question :

Qui connaît parfaitement les plateformes mobiles ?

Page 138: Revolution Mobile @Web2day

Méthodos

Page 139: Revolution Mobile @Web2day

Inclure les développeurs dans la conception !

Page 140: Revolution Mobile @Web2day

Inclure les développeurs dans la conception !

• Ils ont une connaissance approfondie des plateformes

• Ils trouvent des raccourcis techniques

• Souvent sensibles au produit / utilisateurs

• En phase avec Lean et agilité

Page 141: Revolution Mobile @Web2day

Agile

• SCRUM, Kanban, eXtreme Programming…

• Processus itératif

• Favoriser la communication orale

• Des pratiques et des outils pas trop embêtants, que l’équipe choisit d’utiliser

Page 142: Revolution Mobile @Web2day

A

B

C

Itératif = droit au changement

changement

Page 143: Revolution Mobile @Web2day

143

Conception itérative

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Page 144: Revolution Mobile @Web2day

144

Conception itérative

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Développements

Conception

2 weeks

Page 145: Revolution Mobile @Web2day

145

Conception itérative

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Développements

Conception

Réus conception / UX incluant les dévelopeurs

Page 146: Revolution Mobile @Web2day

146

Conception itérative

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Développements

Conception

Réus conception / UX incluant les dévelopeurs

Page 147: Revolution Mobile @Web2day

147

Conception itérative

Sprint 1

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Développements

Conception

Réus conception / UX incluant les dévelopeurs

Page 148: Revolution Mobile @Web2day

148

Conception itérative

Sprint 1 Sprint 2

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Développements

Conception

Réus conception / UX incluant les dévelopeurs

Page 149: Revolution Mobile @Web2day

149

Conception itérative

Sprint 1 Sprint 2 Sprint 3

• La conception est en avance de phase sur les développements

• Mais les sprints débutent avant la fin de la conception

Développements

Conception

Réus conception / UX incluant les dévelopeurs

Page 150: Revolution Mobile @Web2day

Brise glace : principe

• En cas de développement multi-plateforme (iOS, Android, Webapp, …)

• On ne lance pas les devs en parallèle

• On utilise une des plateformes comme fer de lance

Page 151: Revolution Mobile @Web2day

Brise glace : avantages

• Les apprentissages d’un projet servent aux autres projets :

Choix produit Choix techniques Méthodos / amélioration continue

• Surtout utile pour les réglages de l’API

• Paralléliser, il faut le faire intelligemment

Page 152: Revolution Mobile @Web2day

Mobile 1st

• Méthode de conception avant tout

• On conçoit pour mobile (+contraint), puis on enrichit pour desktop et tablette

• Oblige à se concentrer sur l’essentiel

• Souvent lié au Responsive Design

Page 153: Revolution Mobile @Web2day

Mobile 1st

Source : Infographie UX by Octo : Responsive et Mobile First

Page 154: Revolution Mobile @Web2day

Recos produit mobile

Page 155: Revolution Mobile @Web2day

On boarding

Mettre plus de travail sur les 1ers contacts avec le service (login, inscription, home, …)

Page 156: Revolution Mobile @Web2day

• Tester régulièrement l’expérience pour un nouvel utilisateur

• Upsell features / call to action

On boarding

Page 157: Revolution Mobile @Web2day

Design for interruption

PC/Tablet = Scubadiving Mobile = Snorkeling

Rachel @Hinman

Page 158: Revolution Mobile @Web2day

Design for interruption

• Attention partielle

• Prévoir les interruptions => sauvegarder les états

• Prévoir le retour à l’application

Page 159: Revolution Mobile @Web2day

Design for interruption

• Attention partielle

• Prévoir les interruptions => sauvegarder les états

• Prévoir le retour à l’application

• Et n’interrompez pas trop non plus ! (notifs)

Page 160: Revolution Mobile @Web2day

Design for speed

• Caching de contenus

• Actions instantanées et offline

• Amélioration de la vitesse perçue

• Adaptation au réseau

• Réduction de latence, grouping et compression

Page 161: Revolution Mobile @Web2day

Caching de contenu

• Certains contenus sont accessibles en offline (caching ou synchronisation)

• On peut utiliser ces contenus immédiatement

• L’application démarre en offline puis elle se connecte dans un 2nd temps

• Ex. : Deezer, Pocket, Viadeo, …

Page 162: Revolution Mobile @Web2day

Actions instantanées et offline

• L’action est ‘enregistrée’ immédiatement

• La requête est envoyée à la prochaine connexion

• Exemples dans Pocket et Mail : envoi, tags, marquage lu, …

• On peut agir même sans réseau !

Page 163: Revolution Mobile @Web2day

Adaptation au réseau

• A considérer : différencier le comportement de l’appli en fonction du réseau

• Ex. pour une appli de réseau social : Wifi : pré-caching des contacts et images de contacts

en tâche de fond, données en https car peu sécurisé

3G : fonctionnement standard, pas de https (trop lourd)

2G / Edge : fonctionnement dégradé, pas de chargement des images

Page 164: Revolution Mobile @Web2day

Latence

Conne

xion

au s

erve

ur

tempsR

écupération

des données

Page 165: Revolution Mobile @Web2day

Latence

2G : jusqu’à 5 secondes !

Conne

xion

au s

erve

ur

tempsR

écupération

des données

Page 166: Revolution Mobile @Web2day

LatenceExp

érie

nces

Etude

s

Compé

tenc

es1 sec 2 sec 3 sec

Page 167: Revolution Mobile @Web2day

Latence => GroupingExp

érie

nces

+ é

tude

s

+ co

mpé

tenc

es

1 sec 2 sec 3 sec

Page 168: Revolution Mobile @Web2day

Grouping + compression(zip)

Expér

ienc

es +

étu

des

+ co

mpé

tenc

es

1 sec 2 sec 3 sec

Page 169: Revolution Mobile @Web2day

Compression

• A considérer : lors de la requête pour une liste, charger les données des éléments

• Grâce à la compression, ça ne coûte pas trop cher côté réseau

• Mais impact côté serveur

Page 170: Revolution Mobile @Web2day

Vitesse perçue

A minima, améliorer la perception de l’utilisateur :• Chargement d’un minimum

de données en amont• Actions possibles

Page 171: Revolution Mobile @Web2day

Vitesse perçue

A minima, améliorer la perception de l’utilisateur :• Chargement d’un minimum

de données en amont• Actions possibles• Chargement de données

secondaires

Page 172: Revolution Mobile @Web2day

Tools

Page 173: Revolution Mobile @Web2day
Page 174: Revolution Mobile @Web2day
Page 176: Revolution Mobile @Web2day