Applications Mobiles - Bonnes pratiques de conception et de développement de services mobiles

MANAGEMENT CONSULTING
Bonnes pratiques de conception
et de développement de
services mobiles
13 février 2014
David Chong – Alexandre Jahandier - Bertrand Roche

MANAGEMENT CONSULTING 2Copyright Beijaflore Group
Sommaire
2 Conception et design d’un service mobile
3 Technologies de développements mobiles
4 Analyse d’audience : indicateurs et solutions d’Analytics
5 Leviers de monétisation et promotion des services mobiles
Choix du type de service mobile : application native, hybride, web app…1
6 Focus sur les applications mobiles B2B

7. Nuances Communications – avril 2012
Sources : 1. comScore, GfK et Médiamétrie – juin 2013, 2. Omnicom Media Group et SFR Régie - nov. 2013, 3. Flurry Analytics – janv. 2014
4. Médiamétrie – oct. 2013, 5. Compuware – 2013, 6. AppcelerAtor / IDC– avril 2013,
QCM
1. Quelle est la part des Français équipés d'un smartphone ?
2. Combien de ces possesseurs de smartphones se connectent quotidiennement ou presque à l’Internet mobile ?
3. Dans quelle proportion a augmenté l’utilisation des applications mobiles en 2013 (ici utilisation = lancement) ?
4. Quelle est la part des mobinautes visitant au moins un site sur mobile au cours d’un mois ? Même question pour une
application mobile ?
5. Quelle est la proportion de possesseurs de smartphones/tablettes préférant les applications mobiles aux sites mobiles ?
6. Quelle est la part des projets d’applications mobiles B2C vs. ceux d’applications B2B et B2E ?
7. Quelle est la part des mobinautes ayant une meilleure opinion d’une entreprise quand celle-ci a développé une application
mobile ?
25% 33% 44% 59%
42% 51% 78% 89%
+35% +52% +78% + 115%
93% / 83% 63% / 94% 85% / 89%
45% 55% 70% 85%
81% vs. 19%68% vs. 32%57% vs. 43%
43% 54% 72% 81%

Le mobinaute a des attentes précises avant d’utiliser le service mobile.
 Le contenu doit apporter de la valeur : originalité, fraîcheur, pertinence, valeur d’usage…
 La promesse des services, qui permet d’attirer le mobinaute, ne doit pas être décevante à l’usage
Le service mobile doit présenter une qualité technique irréprochable.
 Les pages doivent être affichées immédiatement pour éviter un rebond des visiteurs
 Et elles doivent être optimisées pour les terminaux ciblés (OS, débit de connexion, navigateurs)
L’expérience de navigation doit être agréable et intuitive.
 L’ergonomie doit permettre d’accéder aux contenus de manière optimale et de capter le mobinaute le plus
longtemps possible. Ce dernier doit être mis en confiance.
 Le service mobile doit donner le sentiment d’une homogénéité entre toutes ses rubriques
(1) Enquête Compuware: Besoins et attentes des utilisateurs de mobile (mars 2013)
(2) Compuware, “What Users Want from Mobile" (juillet 2011)
(3) Surikate Marketing mobile – l’enquête (édition 2012)
(4) Google Mobile Ads Marketing (septembre 2012)
Qualité
attendue
Qualité
technique
Qualité
perçue
Les utilisateurs s’attendent à bénéficier du même confort d’utilisation que sur un ordinateur :
des mobinautes jugent que la rapidité d’accès à l’information est fondamentale pour une application mobile, devant
l’ergonomie (81%) et l’utilité (79%) (1)
estiment qu’un site mobile doit se charger aussi rapidement qu’un site desktop (2)
Ils n’hésitent pas à se tourner vers la concurrence s’ils sont déçus :
des possesseurs d’iPhone suppriment immédiatement une application qui leur déplait (3)
des mobinautes vont partir sur un site concurrent, s'ils ne trouvent pas ce qu'ils cherchent instantanément (4)
ne recommanderaient pas une entreprise disposant d’un mauvais site mobile (2)
Les mobinautes ont de fortes attentes en terme de confort
d’utilisation de services mobiles
Sources :
84%
71%
72%
61%
57%

5 types de services mobiles
Logiciel développé
spécifiquement pour un
OS mobile qu’on
télécharge depuis un
store et qu’on installe
sur son terminal mobile.
Application native
Shazam
Application combinant
code natif (spécifique à
chaque OS) et webview
réalisée en HTML /CSS/
JS (commune à toutes
les versions de l’appli).
Application hybride
MYTF1
Site adapté à la plupart
des téléphones,
accessible depuis un
navigateur web et
proposant un contenu
simple (ex : texte,
image).
Site mobile
Orange World
Site mobile optimisé
pouvant proposer des
fonctionnalités évoluées
(ex : drag & drop) et
une expérience
utilisateur proche d’une
application.
Web app
Site web dont
l’affichage et la
disposition des
contenus s'adaptent
automatiquement à la
taille de l’écran (en
pratique sa largeur) :
PC, tablette,
smartphone.
Site
responsive design
Renault MetroNews
Applicatif Browsing

Le choix du type de service mobile dépend de sa stratégie m-
business : performance vs. compatibilité multiplateformes
Compatibilité plateformes (devices, OS)
Performance/accèsauxfonctionnalitésdumobile
+ Performances élevées et accès aux
fonctionnalités du mobile
+ Expérience utilisateur riche, récurrence
d’usage forte
+ Visibilité naturelle grâce aux stores
- Maintenance complexe et longue
- Coût de développement pour chaque
plateforme (iOS, Android, WP…)
- Complexité du référencement
Application native
+ Profite des avantages des apps et webapps :
visibilité sur les stores, compatibles sur
plusieurs terminaux à la fois, coûts
raisonnables, MAJ webview sans passer par le
store
- Peu performant en dehors des terminaux
récents
Application hybride
+ Temps de devs et coûts faibles. Pas de
validation des stores
+ Pas d’installation, accès direct à la version la
plus récente
+ Compatibilité multiplateformes
- Accès limité aux fonctionnalités du mobile
- Peu visible, nécessite communication
Web app
+ Temps de devs et coûts faibles. Pas de
validation des stores
plus récente
+ Compatibilité multiplateformes
- Design basique
- Pas accès aux fonctions du mobile
- Peu visible, nécessite communication
Site mobile + Large compatibilité (mobiles, tablettes, PC)
+ Coût réduit et peu de maintenance
plus récente
- Performance moindre (temps de chargement
de l’ensemble du code HTML/CSS)
- Ergonomie potentiellement pauvre car le plus
petit écran dicte sa loi
- Adaptation difficile après lancement
- Adaptation complexe des formats pub mobiles
Site responsive design

Exemples d’aide à la décision
Source : Care - Quelle stratégie adopter pour vos app mobiles ? - mars 2013 Source : Ekito - Application mobile : web ou natif ? - avril 2012

Les applications sont utilisées pour les jeux, divertissements et
réseaux sociaux, les sites mobiles pour les recherches et achats
Source : Blog Flurry - It’s an App World. The Web Just Lives in It - avril 2013
Base : 1 126 Trillion de sessions mesurées en un an par Flurry Analytics
Accès mobiles préférés des étudiants
suivant l’usage
Source : Educause - Student Preferences for Mobile App Usage - sept.2012
Base : 1 566 étudiants aux Etats-Unis (Purdue University)
Répartition du temps passé sur les terminaux
iOS et android par usage

Les sites mobiles et webapps constituaient les principaux projets
mobiles envisagés en 2013 par les entreprises
Source : Zend Developer Pulse Survey – Q2 2013
Base : 4 359 entreprises et développeurs indépendants du monde entier

Conception & design : un service mobile doit permettre
d’atteindre ses objectifs rapidement et avec un minimum d’efforts
 Privilégier la simplicité d’utilisation et les
fonctionnalités essentielles
 Hiérarchiser : rendre accessible en haut de
page les informations les plus importantes.
 Penser la rapidité d’accès en toute
circonstances
Contenus
Conception
 Interpeller l’utilisateur dès la
page d’accueil et utiliser des
composants ludiques (ex :
carrousel, drag & drop)
 Accompagner le mobinaute à
effectuer des actions
spécifiques (ex : tutoriel)
Découverte
 Faciliter le passage à l’action en privilégiant des
interfaces et parcours simples (peu d’étapes,
formulaires courts, auto-complétion…)
 Donner des repères (menu transverse, fil
d’Ariane, indicateurs d’étapes, champ en
erreur) et faciliter les retours en arrière
 Permettre à l’utilisateur de personnaliser le
service (géolocalisation, ajout / suppression de
liens d’accès directs…)
Interface & navigation
 Assurer la lisibilité du texte en jouant
sur le contraste avec le fond de la page
 Ignorer l’accessibilité fait fuir les
utilisateurs : mal voyants ou
simplement utilisation en condition
non optimale (ex : temps ensoleillé)
Accessibilité
Design
 Penser à la taille des doigts : espacer les
liens et rendre les zones actionnables larges
(min 40px)
 Ne pas avoir peur du scroll pour aérer les
contenus
 Soigner les animations lors d’une action de
l’utilisateur
Ergonomie
 Respecter les standards (guidelines
iOS, android…) pour faciliter la
compréhension et réduire le temps
d’apprentissage
 La tendance actuelle est de simplifier
la mise en page, avec un design
minimaliste et épuré (ex : Windows 8
ou iOS 7)
Rendu graphique
Fil d’Ariane – site mobile
Orange Mon compte
Tutoriel appli
iCoyote
Design épuré appli
météo Yahoo
Storyboard
 Représenter le zoning des
différentes pages en décrivant
les contenus affichés
 Définir les cas d’utilisation
Prototype
Valider en condition réelle les
scénarios du storyboard afin de
minimiser les allers-retours
lorsque le développement aura
commencé
Maquette
Formaliser le design de chaque
page avec les différents
composants et le style
(couleurs, dimensions...)
Méthode

Les difficultés fréquentes
1. Les questions basiques ont tendance à être oubliées
2. Les volontés en internes ne sont pas toujours liées aux attentes du client ou aux autres services.
3. Tous les clients n’ont pas les mêmes attentes sur la même application mobile.
4. Les usages varient suivant l’OS.
Story-board : phase déterminante pour gérer les demandes
internes et l’expérience utilisateur
…
naviguer
comparer
s’informer
acheter
Que veut-on lui
mettre en avant ?
Que vient-il
chercher ?
Qui est l’utilisateur
visé ?
Solution : créer des personae
1. Classifier les utilisateurs par typologies de clients (3 ou 4 grands
groupes de clients avec des caractéristiques communes),
2. Construire un tableau qui récapitule leurs attentes,
3. Créer les zonings des pages et des parcours de conversion (sans design),
4. Vérifier que chaque page et chaque parcours répondent aux besoins de
chaque typologie en se mettant à leur place.

4 personae identifiées
Exemple d’utilisation concrète : restaurant japonais en Californie
 Concept : utiliser une application sur tablette pour passer commande dans le
restaurant.
 Buts : réduire l’attente, augmenter le volume commandé moyen et proposer une
expérience originale.
Source : exemple et explications de balsamiq mockup http://www.uxapprentice.com/discovery/
Story-board : phase déterminante pour gérer les demandes
internes et l’expérience utilisateur (exemple)
Client pressé
Va au plus pratique et rapide
Client fréquent
Passe des commandes répétées
Client enthousiaste
Aime faire découvrir le restaurant
Client allergique
Mange où l’offre est adaptée
Lui afficher les menus les plus
commandés
Lui permettre de retrouver ses dernières
commandes
Lui permettre de partager son repas sur
les réseaux sociaux
Lui montrer qu’un espace spécifique
permet de choisir des plats adaptés

EXPERIENCE UTILISATEUR :
INCOMPATIBILITE
LUXE ET E-COMMERCE
Piliers de l’expérience utilisateur du
monde du luxe
Désirabilité
• Beaux visuels
produits
• Belles photos
• Belles personnes
• Belle interface
créative
Emotion
• Story-telling
marquant
• Univers immersif
• Interactivité
surprenante
• Etre dans la
sensation
Utilisabilité
• Fiche produit et
tunnel d’achat
standardisés
• Lisibilité
• Peu de barrières
technologiques
(flash…)
Utilité
• Visuel produit
• Descriptif détaillé
• Prix du produit
• Frais de livraison
• Garantie
• Achat sécurisé
• …
Rich Media
Maquette, design et expérience utilisateur : s’adapter à l’univers
de la marque ou du secteur d’activité
 Sensation d’immersion
 Produit valorisé
 Interface esthétisée
 Image de marque magnifiée
 Allongement du parcours
 Peut déboussoler par
manque de repères
 Manque d’informations
(prix, disponibilité…)
 Sensation de lourdeur
Mosaïque moodboard Positif
 Sensation de liberté
 Visibilité complète de
l’univers de la marque
 Lecture facile
 Cohérent avec les usages
tablettes classiques
 Risque de saturation par
l’image
 Aspect ludique
contradictoire avec l’achat
 Poids de la page
 Peu de textes explicatifs
Contenu riche :
vidéos, images haute
qualité pleine page…
Présenter les produits
sous forme d’un grand
mur de photos
P
R
O
B
L
E
M
A
T
I
Q
U
E
S
O
L
U
T
I
O
N
S
Piliers de l’expérience utilisateur de l’e-
commerce
Vigilance
Positif Vigilance
Exemple de problématique : e-commerce et luxe
Source : LUXE et e-Commerce : quelle expérience utilisateur ? Par Frédéric Veidig - Directeur Expérience Utilisateur Fullsix

Technologies de développements
JavaObjective C html/javascript
Fragmentation des OSOS backfill support
+ de 40 types d’écrans2 écrans iPhone & iPad
Large compatibilité
accès très limité aux
APIs matérielles du
device
C# / Silverlight
User experience
spécifique
Portage fastidieux
entre WP7.8 et WP8
(in-app billing / NFC)
€ € € €x 1 x 1,5 x 1 x 0,75
x 0,50

Développements applications et sites mobiles : quelques bonnes
pratiques
Penser SSO (single sign on) Comment se protéger des pics de charge ?
Tagguer l’ensemble des pages
• Collaboration entre les équipes techniques et
marketing
• Borner les scénarios de mise à jour (limité le « pull
to refresh » avec un timer de 30s)
• Connecter l’application sur un CDN pour absorber
90 % de la charge
Utiliser des webviews pour gagner en évolutivité

La webview : la solution ultime ?
webview
Plus de la moitié des usages sont concentrés sur 2 sections
de l’appli développées en webview : l’accès au Live et MYTF1
Connect

Avantages et inconvénients d’utilisation de webview
+ -
Performances d’affichage
Fonctionnalités moindres
comparées à safari (par exemple
résolution d’affichage logique divisée en 2)
Pas d’utilisation des composants
graphiques de la plateforme cible
Risque concernant la validation
au sein des stores
Mise à jour rapide
Facilité de développement
Poids de l’application
Idéale pour l’affichage de
contenu, formulaire, quizz,
publicité digitale

Sélectionner et analyser des KPIs pertinents permet de faire
évoluer son service de manière optimale et de le monétiser
 Terminal : modèle, système d’exploitation,
résolution et orientation d’écran,
navigateur, opérateur
 Position géographique
 Trafic horaire
 Version de l’application
 Positionnement et nombre de visites par
Moteurs de recherche
 Taux d’indexation des pages
 Classement par requêtes de mots-clés, Taille
de mots clés
 Nombre de liens entrants (backlinks)
 E-reputation : notes et avis sur les réseaux
sociaux, blogs, forums, stores
 Avant lancement : interview, A/B testing
 Trafic : Visites uniques / Utilisateurs actifs,
Fréquence et durée moyenne de visites /
d’utilisation, Pages vues
 Tracking : liste des pages visitées, identifiées
par leur URL, ordre de visite, actions
effectuées, profondeur
 Préférences d’affichage
 Nombre d’affichages, Taux de clics
 Fraicheur des contenus et exclusivité : Date
de publication / mise à jour
 Centres d’intérêt des utilisateurs, à partir
des thématiques des pages vues
 Taux de propagation virale : contenus
recommandés, abonnements
 Inscriptions VS pages vues
 Taux d’accomplissement des formulaires
 taux d’engagement des notifications
 ARPU : proportion d’acheteurs par
plateforme, panier moyen.
 Fidélité : Nouveaux / Visiteurs connus
 Taux de rétention (réouverture de
l’application après téléchargement)
 Incidents : erreurs 404 ou 403, erreurs JS /
Ajax, Taux d’indisponibilité, nombre de
crashs
 Performance : temps de chargement moyen
des pages en 2G, 3G, 4G, chronologie de
chargement des éléments, poids des pages,
optimisation des images
 Réseau : Ping serveurs et Traceroute
RéférencementConversion Monitoring technique
ComportementsContexte Contenus
IndicateursSolutions
Gratuites Payantes
Pricing : plusieurs niveaux de
prestation disponibles selon
la dimension du projet
(ex : nb d’utilisateurs actifs ou
pages vues)
Les indicateurs d’usages sont nombreux, il faut ne retenir que ceux adaptés au contexte de son service mobile.

Application gratuite
Application gratuite
Ou payante
Application payante
Différents moyens pour monétiser votre audience : In App
Advertising, In App Billing, branding
In App Advertising In App Purchase Premium
Comment
distribuer votre
application ?
Quels types de
contenus
monétiser ?
Comment
générer des
revenus ?
Audience Frustration Valeur ajoutée
2 types de publicités existent : le
display et la vidéo.
Display : entre 0,50 € et 2 € CPM
Vidéo : entre 1 € et 25 € CPM en
fonction de la cible
Trouver le bon mix entre
limitations du périmètre de la
version gratuite et les achats
payantes. En général, 80 % du CA
sont générés par 5 % des
utilisateurs les plus actifs.
Générer du volume avec des prix
très faibles (0,89 € l’appli ou le
jeux)
In App
Purchase
Pour la vente de contenus numériques directement dans
l’application, il est obligatoire de passer par iTunes Connect
pour le système de transaction.
Pour tout autre transaction, il est possible de facturer sur une
plateforme tierce ou alors de vendre des biens physiques (ex
Amazon)
Google propose un module d’In App Billing mais
tolère la facturation par les plateformes de
paiement tierces. Il est donc possible de faire une
solution mutualisée pour les web apps.

Quelques applis dont le business modèle a fonctionné.
MYTF1
Ecrans
iPhone, iPad
Mobiles et tablettes Android
Monétisation Publicité display et vidéo
Audience 10 millions de visiteurs / mois
Remarques
Forte innovation en publicité
interactive sur le 2d écran
(MYTF1 Connect, Shazam,
opérations spéciales)
iPhone, iPad
Premium
(limite d’accès à 30s sur le mobile
en gratuit), abonnement à 10 € /
mois
5 millions d’abonnés
Limitation du device sharing,
blocage de l’utilisation simultané
sur 2 devices : 1 compte sur le
web + 1 autre device)
Forte viralité de l’application
Items : vies additionnelles,
suçettes marteau, déplacements
additionnels
45 millions de joueurs
Ne pas frustrer les utilisateurs
trop vite pour qu’ils prennent
goût au jeu et ainsi créer une
large communauté de joueurs
iPhone, iPad

Sources : (1) Surikate Marketing mobile – l’enquête (édition 2012). (2) Clumsy Ninja. Sur iPad. (3) Opération Spotify dans Paf le chien sur iPad.
Marché récent : à vous d’inventer des formats efficaces en
respectant les utilisateurs
Rendre plus performants les formats classiques Rester à l’écoute des formats innovants
Les utilisateurs demandent qu’on les respecte
Habiller la publicité
Proposer à l’utilisateur un
avantage dans le jeu
Immersive placement : permettre aux annonceurs de placer
leur marque de manière complètement intégrée
69% 80% 35%
ne prêtent pas attention aux
publicités mobiles (1).
n’ont jamais vu de format
interactif (1).
ont déjà cliqué sur une pub,
dont 50% par erreur (1).
42%
préfèrent avoir une publicité en
bas de l’écran (1). 66%
préfèrent une publicité en
rapport avec leurs centres
d’intérêt (1).
91%
veulent que les publicités
représentent moins de 25%
de l’écran (1).
(2) (2) (3)

Les magasins d’applications fonctionnent différemment entre Android et iOS de part
leurs règles de soumission, le ranking des applis et les outils de recommandations.
Comme dans la distribution physique, votre application doit se retrouver en tête de gondole (i.e
dans le top 10 du store) pour générer du volume (+ 20 000 téléchargements en une journée).
Comment y parvenir ?
passer par des réseaux d’App Discovery. CPI = 1 € environ
publicité digital avec redirect appstore (bien cadrer votre cible pour avoir un bon ROI) taux
de clics sur les bannières entre 0,5 et 2 % environ.
avoir un bon produit avec des mises à jour fréquentes (idéalement 1 MAJ tous les 2 mois)
Webapp : développer à fond les leviers du SEO avec un focus mobile ( site map mobile,
autoriser le robt Google Bot mobile robot.txt, bien définir le doctype, …)
Distribution des applis : comment atteindre les objectifs de
distribution ?
• Validation par Apple
• Règles strictes
• Autorisations d’accès au device : opt-in
• Pas de validation
• Règles très souples
• Autorisations d’accès au device : opt-out
Ranking naturel défini par Google
(composé de 10 principaux
critères)

Près d’un décideur sur deux évoque des besoins d’accéder en
situation de mobilité aux applications de l’entreprise
*santé, transport, secteur public
Source : étude « Applications professionnelles sur smartphones et tablettes numériques : besoins & opportunités » auprès de 143 décideurs - MARKESS International – sept. 2011
Domaines fonctionnels des applications mobiles ciblés par les décideurs en entreprises :

Productivité accrue et diminution des coûts
 Flexibilité & immédiateté des échanges d’informations
avec les équipes nomades (utilisation dans un contexte
où la frontière entre pro / perso est ténue et les
déplacements fréquents)
 Exploitation des fonctionnalités du terminal lors des
déplacements (géolocalisation, appareil photo…)
Image d’entreprise dynamique et
innovante
 Fidélisation des collaborateurs avec
un outil attractif
 Contribution au développement
durable (dématérialisation)
Bénéfices
Bonnes pratiques
 Choix du terminal sur lequel porter l’application mobile :
 Application de consultation mails ou de
géolocalisation -> smartphone
 Application dédiée à la logistique ou à une activité
en interaction avec le client -> tablette
 Soin primordial apporté à l’ergonomie et au design car
usages très fréquents.
 Sécurité et raccordement aux outils existants de
l’entreprise
 Formation du personnel : certains utilisateurs (seniors)
peuvent ne jamais avoir utilisé d’applications auparavant
Exemples d’applications
 Marketing & Business Intelligence : rapports d’activité,
veille, actualités économiques, consultations d’études, de
benchmarks et des prochains salons professionnels
 Lead Management & Sales Force : opportunités de vente,
gestion des facturations, enregistrement des coordonnées
des prospects, notes et tâches, géolocalisation et itinéraires
 Collaboration : échange d’informations, planification de
réunions, agenda (statut au bureau ou en déplacement),
gestion des frais du personnel en mobilité, archivage
 Sectorielles : assurances, finances, immobilier, transport,
santé, gestion des stocks…
Les applications B2B permettent de fluidifier les échanges
d’informations entre collaborateurs et améliorer leur productivité
Application mobile Chatter

Merci

Applications Mobiles - Bonnes pratiques de conception et de développement de services mobiles

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Applications Mobiles - Bonnes pratiques de conception et de développement de services mobiles

Semelhante a Applications Mobiles - Bonnes pratiques de conception et de développement de services mobiles (20)

Mais de BEIJAFLORE

Mais de BEIJAFLORE (8)

Applications Mobiles - Bonnes pratiques de conception et de développement de services mobiles