D'abord considéré comme un simple support de communication, le mobile est devenu en 5 ans un canal d’accès privilégié au web, contenus et services. A ce titre, les enjeux du mobile ont considérablement augmenté et font maintenant partie intégrante des stratégies des entreprises. Néanmoins, si l’importance du mobile est un fait globalement partagé, le sujet reste complexe à aborder pour la plupart des entreprises car il demeure nouveau, mouvant et à la croisée du web, du marketing et de la technique. Smile, spécialiste du web et de l’intégration de solutions open source a donc réalisé ce guide afin de vous éclairer dans votre démarche et de vous accompagner dans la définition puis la gestion d’un projet mobile.
Préambule
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
3
SOMMAIRE
1. Paysage actuel 1. Chiffres clés et tendances 2. Fragmentation toujours élevée 3. Synthèse
2. Démarche: pourquoi et quoi faire ?
3. Démarche: comment faire ?
4. Le "cross-platform »
5. L’approche de Smile
1. Paysage actuel
1. 1. Chiffres clés et tendances
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
5
CHIFFRES CLÉS ET TENDANCES
Bi-Bop (1990)
Nokia 3210 et 3310 (1999)
Motorola DynaTAC
8000x (1983)
Motorola Razr V3 (2005)
Blackberry 5790
(2000)
Le mobile a déjà 30 ans et est devenu au file des années un canal incontournable. Voici quelques terminaux qui ont marqué l'histoire :
Ce canal sera bientôt dominant, en nombre de connexion dans le monde…
Dans le monde, en 2014, Internet sera majoritairement mobile en nombre de connexion (Source: Etude Morgan Stanley 2011)
"All people in the world are going to get a smartphone, and for most of them it will be their first computer." (Larry Page, CEO Google 2012)
Dès maintenant “[…] 4 consommateurs sur 5 peuvent accéder à Internet et au commerce en ligne via leur mobile, contre 1 consommateur sur 5 via son ordinateur. "
(source: TNS Sofres) 2012
Apple iPhone 1
(2007)
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
6
CHIFFRES CLÉS ET TENDANCES
+34%
+100%
En forte croissance (34% en 2011) et avec un parc de 20 millions de smartphones en France à fin 2011, on est loin de la technologie de pointe et réservée à quelques spécialistes que l’on a connu. Par ailleurs, l’aspect le plus marquant est son utilisation qui s’intensifie d’année en année (doublement du nombre d’utilisateurs quotidiens de l’internet mobile en un an). Les nouveaux utilisateurs, se servent de leur smartphone, et ce de plus en plus.
Source: Médiamétrie D’après Google/Ipsos, on compterait 55% de mobinautes quotidiens
Mobinaute = utilisateur de smartphone allant sur Internet (via navigateur ou application)
Croissance du parc et intensification des usages en France
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
7
CHIFFRES CLÉS ET TENDANCES
• > 90% des utilisateurs gardent leur smartphone sur eux 24h/24h
• Majoritairement utilisé à la maison… • Devant la télévision • Au lit • Dans la salle de bain ou aux toilettes
• … et ensuite en « mobilité » : • Durant une attente • En transport • En réunion / en cours • En faisant les courses
• L’âge moyen du premier mobile : • 11 ans et demi !
Source : IPSOS et CETELEM
Partout et tout le temps
Portrait du Mobinaute Données France • Près de 50% ont moins de 35 ans • 8/10 habitent hors agglomération parisienne (vs. 3/4 l’an dernier) • 43% sont des femmes (vs. 40% l’an dernier) (Source: Médiamétrie)
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
8
CHIFFRES CLÉS ET TENDANCES
Le 5 mars 2012 - Apple a fêté ses 25 milliards d’applications téléchargées. Autre chiffre marquant, 26000 demandes d’applications à valider par semaine dont un tiers sera rejeté. Applications les plus téléchargées en 2011 (dans le monde tout OS confondus)
• Angry Birds, Facebook, Skype, Angry Birds Rio, Google Maps, iBooks, Angry Birds season, Fruit Ninja, Talking Tom Cat, Twitter
…aux durées de vie très éphémères: • Après un mois d’utilisation, seulement 38% des utilisateurs (iOS comme Android) l’utilisent encore • Après 6 mois, seulement 14%, puis seulement 2% utiliseront après 12 mois
Un phénomène de « Blockbusterisation » (concentration des usages)
• Le top 10 des applications Android concentre 43 % de tout le temps passé
Des applications considérées comme jetables ou Kleenex… • 26% des applications sont téléchargées, ouvertes une seule fois pour ne plus jamais être utilisées. • Seuls 26% sont utilisées plus de 10 fois
Source chiffres: Apple, Localytics, Flurry Analytics & Estimates
Plébiscitées pour les utilisateurs et présentes en très grand nombre • 1 million d’applications disponibles sur les stores (total des 4 principaux OS) • En 2011, 18 milliards d’applications ont été téléchargées • 83* applications téléchargées en moyenne par an sur iOS.
*D’autres études parlent de 60 à 80 applications téléchargées par an/ par personne, 30 utilisées dont 10 régulièrement
Source chiffres : ChangeWave Gartner
Applications - Des utilisateurs qui téléchargent, testent, et zappent
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
9
CHIFFRES CLÉS ET TENDANCES
• De 2010 à 2011: la part des recherches sur mobile est passée de 2,95% à 5,98% (chiffres monde)
• En d’autres termes: les utilisateurs ont des besoins et souhaitent vous trouver…
• Mais leur expérience actuelle est encore globalement déceptive (US) • Un utilisateur sur deux est globalement insatisfait de son expérience d’internet sur mobile. • 1/4 d’entre eux, ne reviendront pas
– Pour 15% le site ne répond pas à leurs attentes ou est mal adapté au mobile – Pour 38% il est trop lent – Pour 18% le site ne fonctionne pas – Pour 13% le site mobile n’existe pas
• L’étude montre néanmoins que la différence entre le web mobile et les applications téléchargées est perçue et les exigences de temps de réponse, d’ergonomie et de contenu restent moins élevées que sur le web.
Source Chiffres : NetMarketShare
Web mobile - des utilisateurs exigeants… Mais nombreux
1. Paysage actuel
1. 2. Fragmentation toujours élevée
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
11
FRAGMENTATION TOUJOURS ÉLEVÉE
Source : OpenSignalMaps
Cette représentation montre de manière visuelle le niveau de fragmentation des terminaux pour l’OS Android. Elle n’a pas vocation à apporter d’informations chiffrées
Terminaux (sous Android)
Un paysage très fragmenté mais homogénéisé grâce à Android
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
12
FRAGMENTATION TOUJOURS ÉLEVÉE
Source : OpenSignalMaps
Si globalement tous les smartphones ont une proportion hauteur/largeur proche, celle-ci tend à diverger avec les modèles les plus récents. A titre d’information, elle est de 1,5 sur les iPhones 3 et 4, de 1,66 sur les Samsung Galaxy S1 et S2 et de 1,77 (16/9) pour l’iPhone 5. Ces écarts doivent être pris en compte dans le cadre des sites web mobiles mais aussi des applications en vue de mutualisation de certains coûts de développements (ergonomie, design, montage…)
Ecrans : des proportions similaires qui tendent diverger
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
13
FRAGMENTATION TOUJOURS ÉLEVÉE
• Terminaux… du mieux ! • La montée en puissance d’Android ainsi que l’accord Nokia/Microsoft ont permis de réduire le nombre d’OS majeurs
présents sur le marché grand public • Là où il fallait parfois viser une multitude de terminaux, on peut aujourd’hui par exemple considérer qu’une
application développée pour Android 2.1 fonctionnera sur tout appareil qui tourne sous Android 2.1
• Pour autant les OS et navigateurs sont toujours trop hétérogènes: • Le nombre de ces OS majeurs bougent encore, de nombreux projets sont annoncés ou ont été lancés (ex: TIZEN,
BADA). • Par ailleurs les OS eux mêmes évoluent très fréquemment, et les mises à jour des utilisateurs ne sont pas
toujours automatiques • Chaque OS utilise son propre navigateur Web:
• Tous sont sensés afficher du web « universel » mais dès que l’on touche aux spécificités mobiles ou tactiles, il n’y a plus de standard
• On se retrouve parfois à l’époque de Netscape où il fallait adapter ses pages à chaque navigateur, les tester et optimiser à chaque évolution
Problématique modèle et marque
Problématique OS et navigateur
Terminaux, OS* et navigateurs : la problématique se déplace des terminaux vers les OS *OS = operating system i.e. système d’exploitation
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
14
?
Parc France - Estimations Smile basées sur ComScore, GfK, IPSOS
FRAGMENTATION TOUJOURS ÉLEVÉE
• Les parts de marché des OS mobiles vont rester instables: • Le parc augmente vite (13 millions de smartphones vendus en 2012), et la concurrence est telle qu’il est difficile
d’anticiper vers quel OS les utilisateurs vont se porter • Malgré leur prix et la baisse globale du niveau de subventions des opérateurs (notamment Free), le rythme de
renouvellement reste rapide • L’OS n’est pas ou plus un critère d’achat (excepté pour une part de « Fans » d’Apple)
Les chiffres communiqués publiquement sont très variables selon le fait qu’il s’agisse de parts d’audience, de sondages déclaratifs, de chiffres de ventes ou de base installée. Ici, nous avons tenté de synthétiser l’ensemble pour donner une vision du parc des terminaux en circulation. Aujourd’hui, viser Symbian n’est plus prioritaire (l’OS n’étant plus soutenu) et la question se pose pour BlackBerry en perte de vitesse. Sauf exception, nous conseillons généralement de cibler iOS, Android et Windows Phone (sans forcément respecter les principes ergonomiques très spécifiques de ce dernier).
France – Des parts de marché variables qui imposent de viser large
0%
20%
40%
60%
80%
100%
Q4 2009
Q2 2010
Q4 2010
Q2 2011
Q4 2011
Q2 2012
Autres (dont Bada) Windows Blackberry Symbian Android iOS
1. Paysage actuel
1. 3. Synthèse
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
16
SYNTHÈSE
Le mobile (web mobile et applis) est un canal privilégié… • 24h/24h près de soi – 17h/24h allumé • Plus personnel et précieux qu’un porte-monnaie • Connecté en continu et utilisé n’importe où et n’importe quand
…largement adopté • 20 millions d’utilisateurs actifs en France dont 35 à 50% de quotidiens
et spécifique • Répondant à des besoins et usages différents du web classique
Vos utilisateurs s’attendent déjà à retrouver vos services et vos informations déclinés spécifiquement pour leur mobile
Vos clients et utilisateurs vous attendent déjà…
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
17
SOMMAIRE
1. Paysage actuel
2. Démarche: pourquoi et quoi faire ?
1. Définition des objectifs et stratégies 2. Site Mobile ou Application ? 3. Une solution intermédiaire : la WebApp
3. Démarche: comment faire ?
4. Le "cross-platform »
5. L’approche de Smile
2. Démarche: pourquoi et quoi faire ?
2. 1. Définition des objectifs et stratégies
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
19
DÉFINITION DES OBJECTIFS ET STRATÉGIES
• Un investissement sur le mobile doit être traité comme un projet informatique et non plus comme un « budget de communication » (i.e. achat d’espace publicitaire)
• Ses objectifs sont donc à définir en amont afin de permettre l’élaboration d’une réelle stratégie et d’en mesurer le succès
• Des analyses de cas montrent que de nombreux objectifs peuvent être adressés par le mobile:
• Acquérir des clients • Vendre d’avantage, plus cher ou à moindre coût • Générer du trafic (purs players) • Fidéliser ses clients • Réduire ses coûts • Créer, renforcer, modifier son image • Jouer son rôle sociétal (institutions, associations)
Définition des objectifs business pour aller au delà d’une simple « présence »
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
20
DÉFINITION DES OBJECTIFS ET STRATÉGIES
Une fois le ou les objectifs définis, la stratégie à adopter peut être définie en suivant les trois étapes suivantes
• La cible : • Mes clients ? Ceux des concurrents ? Les visiteurs de mes points de ventes ? Les internautes ? Les
mobinautes ?
• Ses besoins : • De quoi mon client / prospect a-t-il besoin sur son mobile ? • Comment va-t-il exprimer ce besoin ?
• Sa situation d’usage: • Quand a-t-il une attente ? Chez lui depuis son canapé ? Dans la rue ? Dans le métro ? • Son besoin est-il urgent ? Contextualisé ? Fréquent ? • Comment va-t-il me chercher ou me trouver ? Google ? App Store ?
Vous avez tous un smartphone, vous téléchargez des applications et naviguez sur Internet avec, mettez vous à la place de vos utilisateurs
Définition d’une stratégie… Pensons « situation d’usage »
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
21
DÉFINITION DES OBJECTIFS ET STRATÉGIES
• BNP propose diverses applications ayant chacune une cible, un objectif et un contenu dédié :
• BNP « Mes comptes » : – Objectifs: fidélisation, accroissement de l’autonomie, communication
sur produits et upselling sur clients grand public – Cible: principalement les clients particuliers BNP, mais certaines
fonctions sont ouvertes à tous – Contenu: accès à ses comptes, virements – pour tous: simulateur de
prêts/épargne, numéros utiles • BNP « Les Bons comptes » :
– Objectifs: image et communication sur la marque – Cible: principalement jeune / dynamique (« WE entre amis ») – Contenu: outil de calcul de remboursement pour événement ponctuel
entre amis
Cas d’entreprise : BNP – Un dispositif complet et segmenté
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
22
DÉFINITION DES OBJECTIFS ET STRATÉGIES
• E. Leclerc propose une application « marketing » basée sur une promesse très « grande distrib’ »:
• Objectifs: communication, et prise de position sur les terminaux des consommateurs « Nous sommes les moins chers et allons le prouver »
• Dispositif: une campagne de pub associée au lancement de l’application
L’application devient le support de communication et la justification du message
Cas d’entreprise : E. Leclerc - Qui est le moins cher ? Une application marketing
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
23
DÉFINITION DES OBJECTIFS ET STRATÉGIES
• Une application avec plusieurs objectifs, et plusieurs cibles • Objectifs initiaux: Information, communication, fidélisation: • Cible client connu: relevé, visualisation facture, paiement • Cible client inconnu ou prospect: qualité, prix et travaux en cours • Objectif secondaire de potentielle réduction de coûts: une part importante des appels au call
center effectuée pour un relevé d’index ou paiement ainsi évitée
23
Cas d’entreprise : VEOLIA – L'eau chez vous : entre le marketing, le service et la rationalisation des contacts
2. Démarche: pourquoi et quoi faire ?
2. 2. Site Mobile ou Application ?
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
25
SITE MOBILE OU APPLICATION ?
Site mobile Application « native »
Comment les utilisateurs vous
trouvent
Comment ils reviennent sur votre « service »
Les fonctions Web, contenus, transactions, paiement par CB, géoloc, interface tactile (partiele), en partie mode déconnecté (HTML5)
Idem + Look & feel premium, paiement in-app., accéléromètre, contacts, vibreur, caméra, flash, d’avantage de puissance, mode full déconnecté, full tactile
= =
Enjeux SEO Site Web / URL connue
Notoriété marque
Classification
Cohérence
Tops !
Réponse rapide
+ Navigateur Moteur Logique d’annuaire Stores
Logique de rayons
Favoris ou raccourci (icône standard ou personnalisée)
Icône
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
26
SITE MOBILE OU APPLICATION ?
e-commerce
« besoin d’info »…
…contextualisées
réseaux sociaux
A adapter selon les usages
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
27
• Un exemple : « Paris Bouge » qui propose une version mobile de son site et une application
SITE MOBILE OU APPLICATION ?
Le site mobile fournit les informations ET invite à télécharger l’application via un lien vers le store (ici
exemple Android)
Objectif: conquête Adresser une demande précise et urgente
Site mobile Installation application Application
Objectif: fidélisation Simplifier la vie et offrir le service dans les meilleures
conditions
Un utilisateur à la recherche d’une information urgente ira plus naturellement sur Internet pour effectuer une recherche (exemple ici: « Meilleurs bars Paris ») que sur un store pour rechercher une application.
Mais un utilisateur habitué au site web de Paris Bouge, pourra avoir le réflexe d’aller rechercher le nom sur les stores. Le dispositif est donc double, pour cibler à la fois les « prospects » et les « fidèles ».
Idéalement… les deux !
2. Démarche: pourquoi et quoi faire ?
2. 3. Une solution intermédiaire : la WebApp
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
29
UNE SOLUTION INTERMÉDIAIRE : LA WEBAPP
• Une webapp est une application web: • Accessible via une url et installée presque automatiquement • Consultable par smartphone, tablette, PC… • Evolutive sans mise à jour à effectuer via les store
• Elle est adaptée aux écrans mobiles
• Construite en une seule page: • Afin de concentrer le temps de chargement au départ • Et d’offrir des transitions rapides sans chargement lorsque l’utilisateur change d’écran
• Fonctionne hors connexion sur la base des données stockées localement
• App « capable » (mise en marque page) • Icône d’application • Mode plein écran • Des balises audios, videos et autres nouveautés
Exemple: www.openappmkt.com Ce site (qui est aussi une webapp) est un équivalent de store pour installer via le navigateur des webapp HTML5
Présentation de la WebApp
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
30
SYNTHÈSE DES TROIS APPROCHES
Application WebApp (HTML5) WebMobile
Visible sur les stores Mode déconnecté Fonctions natives
Installation Gestion des différents OS Evolution via mise à jour
+
-
Accessible via l’URL actuelle Mode déconnecté une fois installée Flexible
Nécessite terminaux récents Fonctions limitées (pas
d’accès aux fonctions natives du terminal)
Accessible via l’URL actuelle Flexible Plus économique
Connexion indispensable (3G/Wifi) Fonctions limitées (pas
d’accès aux fonctions natives du terminal)
L’ approche sélectionnée devra avant tout répondre au besoin identifié
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
31
SYNTHÈSE DES TROIS APPROCHES
Possibilités fonctionnelles et techniques
Applications Webapp HTML5 Web Mobile
Appareil photo numérique, gyroscope, carnet de contacts, calendrier, vibreur, compas, état du réseau, push de notifications Oui Non Non
Géolocalisation Oui Oui Oui
Fonctionnement hors connexion Oui Oui Non
Stockage de grande quantités de données (système de fichiers) Oui Non Non
Accès aux applications natives (liées à l'OS comme par exemple la galerie de photo sur iPhone) Oui Non Non
Interfaces natives (boutons, listes, etc…) Oui Oui Oui
Performances et fluidité (dignes d’un jeu par exemple) Oui Non Non
Animations, gaphismes avancés Oui Oui Oui
Vidéo, son, images Oui Oui Oui
Accès via URL Non Oui Oui
Accès via stores Oui Non Non
Chargment en une seule fois Oui Oui Non
Mise à jours type web Non Oui Oui
Mise à jour via les stores Oui Non Non
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
32
SOMMAIRE
1. Paysage actuel
2. Démarche: pourquoi et quoi faire ?
3. Démarche: comment faire ? 1. Conception fonctionnelle, ergonomique et graphique 2. Focus sur la conception fonctionnelle 3. Focus sur la conception ergonomique 4. Site mobile 5. Zoom sur le responsive design 6. Applications 7. WebApp
4. Le "cross-platform »
5. L’approche de Smile
3. Démarche: comment faire ?
3. 1. Conception fonctionnelle, ergonomique et graphique
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
34
CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE
Application WebApp (HTML5) Site Mobile
Création des écrans
Conception Fonctionnelle Ergonomique Graphique
Développements spécifiques « mobiles » (potentiellement en cross-platform)
Intégration des webservices
Création des écrans
Intégration au back office de gestion de contenus
Paramétrage du back office et déploiement
Développements spécifiques « mobiles »
Création des écrans
Intégration au back office de gestion de contenus
Paramétrage du back office et déploiement
Packaging, et adaptation aux OS
Distribution sur les stores
Etap
es c
lés d
u pr
ojet
Trois approches – Démarche projet
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
35
CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE
Au service de l’ergonomie et des usages - Rendre l’ergonomie lisible - Donner envie d’utiliser l’application
Au service des contenus - Augmenter l’utilisation - Rendre intuitif, simple, efficace l’accès aux services et informations prioritaires
Au service des usages et des objectifs du projet
Design
Ergonomie
Contenu
Exemple: La manette de Playstation 3 est belle, mais est avant tout conçue pour une prise en main parfaitement adaptée à un usage continu pendant plusieurs heures sans douleur aux doigts
Contre-exemple: Ces deux sites mobiles proposent d’effectuer un drag’n’drop pour pouvoir accéder à une rubrique… un simple tap/clic aurait été plus efficace, logique et ergonomique
Objectif
Prendre le sujet dans le bon sens
3. Démarche: comment faire ?
3. 2. Focus sur la conception fonctionnelle
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
37
FOCUS SUR LA CONCEPTION FONCTIONNELLE
• Le choix des informations et fonctionnalités à mettre à disposition de l’utilisateur de smartphone est à déterminer en fonction de ses besoins. Ceux-ci sont pourront être catégorisés en 3 à 4 grands groupes, en répondant à la question:
Pourquoi, quand, où et comment un utilisateur a-t-il besoin d’accéder à mon site / service ?
• La typologie de Google … • « Urgent now », « repetitive now », « bored now »
• … Que Luke Wroblewski (auteur de « Mobile first » chez Eyrolles) reprend en :
• Consulter / Rechercher : « J’ai besoin d’une réponse maintenant - et ici » Exemple: Où est ce restaurant ? A quelle heure est la séance ? Enjeu : proposer des modalités de recherche rapide
• Explorer / Jouer « J’ai du temps et je m’occupe / je m’amuse » Exemple : Y a-t-il de nouvelles images du robot de la NASA ? Enjeu : Être ludique / proposer des poursuites de lecture
• Vérifier / Checker « Un contenu est continuellement actualisé et je veux être tenu au courant des changements » Exemple : Roger Federrer est-il en train de gagner son match ? Enjeu : alerter, montrer les contenus chauds tout de suite
• Editer / Créer « Je dois faire quelque chose qui ne peut pas attendre » Exemple : J’ai oublié de réserver ma place de concert! Enjeu : faciliter la saisie, les choix (formulaires)
Typologie des usages en mobilité
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
38
FOCUS SUR LA CONCEPTION FONCTIONNELLE
Le site web de Krys est très riche et présente notamment les collections. Lors de la conception du site mobile, seules trois rubriques ont été mises en avant, mais celle-ci répondent précisément à des besoins en situation de mobilité: - Mes commandes – Suivre ses commandes:
« Je ne suis pas loin de la boutique Krys, je vais vérifier si mes lunettes sont arrivées avant de m’y rendre »
-Informations – Informations pratiques: « Mon fils vient de casser ses lunettes, étaient-elles garanties ? »
- Trouver un magasin – Store Locator: « En vacances, où est le magasin le plus proche dans lequel Krys me réparera ma monture »
Exemple de site mobile dédié : Krys – Des fonctionnalités clés
3. Démarche: comment faire ?
3. 3. Focus sur la conception ergonomique
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
40
Bruits, mouvements, ensoleillement… l’utilisateur en mobilité est souvent dérangé et ne dispose pas toujours de sa totale liberté de mouvement (paradigme de la double tache)
Facilités d’accès aux zones de l’écran avec un smartphone tenu de la main
droite en position portrait :
FACILE
ACCEPTABLE
DIFFICILE
« L’utilisateur de smartphone est un pouce et un œil »
FOCUS SUR LA CONCEPTION ERGONOMIQUE
A garder en tête
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
41
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Les liens prennent trop de place. Laissez d’abord vos utilisateurs lire, regarder, écouter. Ils approfondiront s’ils le souhaitent.
Pousser immédiatement les contenus chauds, et laisser les liens et options de navigation accessibles à la demande Ne pas obliger l’utilisateur à passer par un écran intermédiaire
Privilégier le contenu aux liens 1/3
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
42
Evitez les barres de navigation sandwich car elles occupent un espace de visibilité précieux sans que leur utilité soit garantie Un accès à l’ensemble des catégories / rubriques depuis toutes les pages n’est pas utile
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Privilégier le contenu aux liens 2/3
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
43
Facilitez les poursuites de lecture là où elles sont pertinentes (dans leur contexte), via des liens intelligemment placés après le contenu Laisser toujours le choix à l’utilisateur de poursuivre ou d’interrompre sa lecture
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Privilégier le contenu aux liens 3/3
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
44
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Les utilisateurs sur mobile sont peu conciliants, pressés, et attendent une navigation facile à appréhender en situation de double tache. Brancher les liens sur les contenus pour économiser de l’espace et associer sémantique et navigation. Attention toutefois à ne pas en faire trop en branchant un lien sur de (trop) gros blocs de texte.
OUI NON
Concevoir une charte de navigation simple 1/4
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
45
Le bouton « Retour » (back de l’historique) est inutile sur les terminaux autres que iOS, en revanche, le bouton de retour à la page mère est pertinent (en indiquant quelle est cette page) (Sur iOS, un bouton est disponible au niveau de la barre d’adresse du navigateur Safari, et donc également inutile sur les sites web-mobile)
OUI
NON
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Concevoir une charte de navigation simple 2/4
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
46
Cacher le menu de navigation afin qu’il soit accessible à tout moment, sans pour autant occuper continuellement l’espace
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Concevoir une charte de navigation simple 3/4
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
47
Utiliser la barre fixe dans le cas d’applications : • En haut (Android) qui a déjà des boutons natifs en bas… • Ou en bas (iPhone) Même si cette règle n’est pas universelle, il faut garder en tête ces potentiels réflexes d’utilisation
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Concevoir une charte de navigation simple 4/4
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
48
• Rendre les textes lisibles avec des tailles de caractères suffisamment grandes
• Proposer des zones actives de taille suffisante pour un pouce d’homme adulte
• Adopter une organisation unitaire en ligne par ligne afin que la lecture et la manipulation soit simple et ne conduise pas l’utilisateur à commettre des erreurs de « tap »
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Assurer la lisibilité
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
49
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Les smartphones sont caractérisés par leurs interfaces tactiles. Cette manière d’interagir est certes très intuitive, mais elle reste nouvelle pour le grand public. De nombreux types de gestes existent et peuvent encore être inventés ; mais l’ergonomie ayant pour vocation de simplifier et fluidifier l’usage, il faut les utiliser à bon escient. Les utilisateurs d’aujourd’hui ne connaissent pas encore toutes les subtilités possibles et aucune norme universelle ne s’est encore installée comme par exemple:
- Le clic droit de la souris pour accéder à des options avancées - La croix qui indique la fonction de fermeture d’une fenêtre
Ainsi, dans la liste des principaux gestes ci-dessous (issue de « Touch Gesture Reference Guide » www.lukew.com) nous conseillons de n’utiliser que ceux encadrés :
Tactile - Choisir les bons gestes
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
50
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Même parmi les gestes simples, certains ne sont pas totalement intuitifs, il faudra les rendre lisibles… • C’est pourquoi nous avons encore besoin de boutons affichés dans l’écran et explicitement visibles pour les utilisateurs • Mais cela ne doit pas nous empêcher d’utiliser les gestes pour l’activation de raccourcis ou d’actions avancées pour un usage expert, en doublon des boutons disponibles à l’écran • Les gestes avancés deviennent donc des raccourcis au même titre que les raccourcis claviers ont envahis nos applications de bureautique
Exemple: Sur l’application mobile de Facebook, la seule manière de supprimer un « statut » est actuellement d’effectuer un Flick sur son statut. Peu d’utilisateur le savent, ce geste n’étant pas universellement associé à cette fonction (http://www.youtube.com/watch?v=DRbca-0D5pM)
Tactile - comment utiliser les gestes
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
51
Pas de pointeur = pas de survol (roll-over) Les interactions disponibles via le survol dans les sites classiques doivent être totalement repensées sur le smartphone et sur les tablettes: Point d’attention: Les tablettes tactiles sont très majoritairement utilisées (>90%) à domicile, en remplacement du PC portable et très souvent pour naviguer sur Internet. La taille des écrans, puissance des appareils et des navigateurs permettent de consulter la plupart des sites sans problème technique particulier. Néanmoins, les ergonomies bâties sur des roll-overs ne pouvant être rendues, les sites sont parfois totalement inutilisables à cause de ce point de détail.
Quelques approches: • Afficher directement les contenus dans l’écran car ces contenus sont jugés bien trop importants pour l’utilisateur • Les insérer dans l’écran par un geste (tap, press, flick) permet de conserver leur affichage contextuel au coté des contenus de l’écran (le plus simple étant généralement d’autoriser un tap pour activer l’effet du roll-over) • Les afficher sur un écran séparé car la quantité de contenu est trop importante et ces contenus ne peuvent pas être tronqués • Ne rien faire car les contenus sont secondaires et que l’utilisateur peut aisément s’en passer En règle générale: sur un site grand-public, l’utilisateur doit pouvoir se passer de l’interaction de survol à moins de n’avoir développé une version dédiée aux tablettes. Cette remarque est d’autant plus importante pour les sites de e-commerce!
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Tactile - gérer l’absence de pointeur
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
52
FOCUS SUR LA CONCEPTION ERGONOMIQUE
• Ne garder que ce qui est essentiel et supprimer le reste • Présentation en ligne par ligne avec le label au dessus - ou dans le champ de saisie • Pré-formater la saisie selon le type de donnée attendue (alphabétique, numérique, email, url, …) et le nombre de caractères (année, numéro de téléphone, …) fera gagner beaucoup de temps à vos utilisateurs. • Utiliser les claviers adaptés en donnant accès directement aux caractères utiles tels que @ • Utiliser des masques de saisie pour guider l’utilisateur sur les données attendues • Utiliser des valeurs par défaut lorsque cela a du sens et répond à la majorité des cas d’utilisation (ici, exemple pour une application de réservation d’hôtel booking.com) • Exploiter les capacités des smartphones : géolocalisation, caméra, microphone
Malgré les innovations sur les claviers, la reconnaissance d’écriture ou autre technologie, la saisie sur Smartphone reste délicate et doit donc être simplifiée
Saisie sur mobile
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
53
• Créer des contrôles spécifiques pour remplacer efficacement les contrôles standards : slider, boutons +/-, calendrier, …
Plus facile de faire glisser son doigts, de taper rapidement au même endroit, ou de choisir directement une valeur que de taper une zone de saisie, puis taper sur son clavier
… En plus des adaptations déjà prédéfinies par les plateformes
Autant que possible, remplacer la saisie d’une donnée par la sélection
FOCUS SUR LA CONCEPTION ERGONOMIQUE
Sélection de données
3. Démarche: comment faire ?
3. 4. Site mobile
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
55
SITE MOBILE
Back-office de gestion de contenus
(CMS, e-commerce, portail, …)
Site Web
Site Mobile
Création des écrans
…
Le site web mobile s’appuiera généralement sur le même back-office et de préférence les mêmes contenus que le site classique.
1
La première étape de développement du site mobile sera la création des écrans
Site
Mobile
Site
Mobile
Les étapes de création d’un site mobile débutent par les écrans
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
56
SITE MOBILE
• Thèmes / vues standards: – L’outil propose en standard une version mobile avec des gabarits ou vues utilisées
pour le site web classique (implique un site web classique construit sur ces mêmes standards)
– L’arborescence du site mobile sera donc identique à celle du site web classique – L’ergonomie et le design sont imposés par les thèmes
• Gabarits dédiés: – On développe dans la logique de l’outil un nouveau jeu de « gabarits » – L’ arborescence du site mobile sera donc identique à celle du site web classique
• Ecrans totalement spécifiques: – On construit les écrans de bout en bout et on peut donc sélectionner les contenus à
mettre en avant ou non
• Dans tous les cas, le montage des écrans devra idéalement se faire en
« adaptatif », les écrans étant adapté en largeur à la taille de l’écran: • Toutes les tailles et proportions d’écrans différents • Les deux orientations (paysage / portrait) • Potentiellement les nouveaux et futurs appareils
• La méthode de création des écrans d’un site mobile dépend de l’outil utilisé pour gérer les contenus (CMS) du site web classique. Selon l’outil et ce qu’il propose, mais aussi selon l’ergonomie, les contenus et le design ciblés, on se portera plus ou moins vers des fonctionnalités standards de création voire de duplication du site web:
Création des écrans : options et contraintes
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
57
• Même si on parle de Web, et donc théoriquement de technologies universellement interprétées par les navigateurs, des écarts subsistent.
• Interface tactile:
• La détection des « événements » tactiles n’est pas homogène d’un navigateur à l’autre • Chaque navigateur (i.e. ~chaque OS) nécessitera donc un développement spécifique sur la partie
IHM (Interface Homme Machine) tactile
• Interprétation du code HTML5 / CSS3: • L’HTML5/CSS3 permet d’enrichir les rendus, de proposer des animations et des interfaces riches et
esthétiques • La future norme n’étant pas encore validée, le niveau de compatibilité est variable d’un navigateur
à l’autre • Des ajustements seront donc également nécessaires, notamment en vue d’éventuelles versions
dégradées
SITE MOBILE
Création des écrans : problématique de compatibilité des navigateurs
Retour à l’époque où il fallait gérer des navigateurs très différents…
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
58
SITE MOBILE
Back-office de gestion de contenus (CMS, e-commerce, portail, …)
Site Web
Intégration au back office de gestion de contenus
Paramétrage du back office et déploiement
Intégration de contenus dédiés mobile
Création des écrans 1
2
2’
3
L’intégration au backoffice n’est pas spécifique au mobile et correspond au travail classique de dynamisation des contenus. Il peut parfois être obligatoire de créer des contenus spécifiques au mobile. Le back-office et le serveur doivent être paramétrés pour détecter les « user-agent » et rediriger l’utilisateur vers le bon site.
Site
Mobile
Site
Mobile
Site
Mobile
1
2
2’
3
Intégration et déploiement
3. Démarche: comment faire ?
3. 5. Zoom sur le Responsive Design
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
60
• Définition (wiki): la notion de Responsive Web Design regroupe différents principes et technologies permettant de concevoir un site pour qu’il s'adapte aux différentes tailles d'écran et aux différents terminaux
• Il s’agit donc: • 1 page unique pour l’ensemble des terminaux (une seule contribution, administration, hébergement, URl, etc.) • 2 à 3 ergonomies différentes par page : [desktop-souris / tablette] / smartphone
• Exemple www.sony.com: • Construit sur la base d’une image de fond, puis de 4 colonnes de contenus (dont une double), le site s’adapte
passant à 3 colonnes puis 2 en fonction des versions • Le point intéressant étant ici les éléments de navigation qui se regroupent dans des menus déroulants de navigation
60
ZOOM SUR LE RESPONSIVE DESIGN
Desktop Tablette Smartphone
Principe du Responsive Design
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
61
ZOOM SUR LE RESPONSIVE DESIGN
Back-office de gestion de contenus (CMS, e-commerce, portail, …)
Site Web.. tablette et mobile
Site
Mobile
Création des écrans
…
1
Site Mobile
Site
Mobile
Colo
nne
1 Bloc 1
Colo
nne
2
Bloc 2 Colo
nne
3
1
Dans le cas d’un développement complet de site (version classique desktop, tablette et mobile) le responsive design est une approche intéressante permettant d’éviter de devoir créer des écrans dédiés au mobile voire aux tablettes.
A défaut de versions spécifiques en fonction de l’appareil visé, les contenus sont organisés sur les pages web afin qu’ils puissent s’arranger en fonction de la taille de l’écran cible.
Création des écrans avec le Responsive Design
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
62
Accès multi-terminal • Ergonomie optimisée • Efficacité optimale • Image de modernité • Une seule adresse internet • Evolutif • Un seul back office
Réflexion 360° • « Think mobile first » • Une démarche saine qui invite à des choix • Et débouche sur une vision éclairée
Supporté uniquement par les navigateurs récents • Internet Explorer 9+ (version courante 9) • Chrome 4+ (version courante 21) • Firefox 3.5+ (version courante 15) • Opera 9.5+ (version courante 12) • iOS 3.2+ (version courante 6) • Android 2.1+ (version courante 4)
Travaux de conception accrus • Ergonomie, design, montage plus longs = plus cher ! • Poids des pages potentiellement élevé (contournements potentiels) • Une seule arborescence, une seule page (pas de séparation ni de fusion)
+ Mais
FOCUS SUR LE RESPONSIVE DESIGN
Le Responsive Design : avantages / inconvénients
3. Démarche: comment faire ?
3. 6. Applications
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
64
APPLICATIONS
Back-office de gestion de
contenus (CMS, e-commerce, portail)
SI Métier (CRM, ERP, BI, spécifique, etc.)
1 Création des écrans
Site
Mobile
Site
Mobile
Ecrans mobiles
La création d’une application débute également par les écrans. Néanmoins, dans le cadre d’une application, le champ des possibilités est plus large que pour les sites ou webapps d’un point de vue ergonomique, graphique mais aussi fonctionnel. Cette phase de création des écrans sera à précéder d’une phase de conception réellement poussée afin de permettre ensuite la création d’écrans totalement dédiés.
Les étapes de création d’une application débutent par les écrans
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
65
Back-office de gestion de
contenus (CMS, e-commerce, portail)
SI Métier (CRM, ERP, BI, spécifique, etc.)
Web
serv
ices
Développements spécifiques « mobiles » (cross-platform)
Intégration des webservices
Site
Mobile
Site
Mobile
Ecrans mobiles
Création des écrans
2
3
2
3
La partie développement est totalement spécifique au mobile. Plusieurs approches sont disponibles, dont le « cross-platform » que nous développons dans la partie suivante de ce guide. L’intégration, dynamisation des contenus et mise en place de fonctions transactionnelles passera dans une très grande majorité des cas par des webservices.
APPLICATIONS
Puis les développements et l’intégration
Développements spécifiques mobiles
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
66
Back-office de gestion de
contenus (CMS, e-commerce, portail)
SI Métier (CRM, ERP, BI, spécifique, etc.)
Web
serv
ices
Développements
spécifiques mobiles
Développements spécifiques « mobiles » (cross-platform)
Intégration des webservices
Site
Mobile
Site
Mobile
Ecrans mobiles
Création des écrans
APPLICATIONS
Packaging, et développements spécifiques par OS
Distribution sur les stores 5
4
5
4
Packaging et déploiement
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
67
• Une évidence parfois oubliée: • Une belle appli qui ne sert à rien ou ne fonctionne pas bien sera désinstallée… • Une appli utile mais moche sera critiquée mais utilisée… puis applaudie le jour de son lifting!
• Votre application sera en concurrence avec 500 000 autres et les places sur la page de raccourcis de l’utilisateur sont chères, donc:
• Pensez simple, efficace, intuitif • Préparez vous à la faire évoluer, à riposter… • Offrez des possibilités de personnalisation c’est-à-dire permettre d’adapter l’application aux usages individuels • N’utilisez une fonctionnalité que si elle apporte vraiment quelque chose (accéléromètre, facebook connect, son,
caméra, géolocalisation…), l’époque des « gadgets » est révolue • Pensez aux situations d’usage et aux « objets / services » concurrents
• Si vous ne rendez pas un service très spécifique voire unique, vous devrez faire mieux que les autres, notamment les acteurs couvrant un périmètre plus large:
• Une application de news sera concurrencée par les agrégateurs de flux dont c’est le cœur de métier (ex: Pulse) • Une application donnant les séances de cinéma pour une enseigne ou une ville sera concurrencée par
l’incontestable leader: Allociné • De même pour un agent immobilier avec SeLoger.com
APPLICATIONS
Conception : le fonctionnel avant tout
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
68
• Multiplicité des OS: un développement par OS ou une solution cross-platform ? • A moins de vouloir faire un Angry Birds (jeu phare sur smartphone le plus vendu)… • … le cross-platform est une bonne idée (cf. partie suivante)
• Nouvelles fonctionnalités dites « natives » à prendre en main:
• APN, gyroscope, vibreur, GPS… • Type de connexion, mise en veille, tâche de fond, réveil, stockage local, synchronisation, consommation… • API externes (Google Maps, Facebook, etc.)
• L’impact du réseau:
• Toute application connectée sera dépendante du réseau mais devra être capable de fonctionner dans des conditions dégradées
• La conception technique d’une application mobile implique de gérer une multitude de cas à la marge: – J’ai lancé une synchro, qui s’est arrêtée en route… – Pas de réseau et des infos non à jour, que dois-je afficher ? – Connexion en EDGE, comment optimiser l’expérience utilisateur… – Je dois afficher une carte, mais je ne capte pas le signal du GPS… – Le webservice ne répond pas… – Etc.
APPLICATIONS
Développements : les spécificités du mobile
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
69
• Développements sur simulateurs: • Les développements étant réalisés dans des simulateurs et le fonctionnel d’une appli mobile étant souvent découpé
en écran/fonction, les premiers tests unitaires peuvent être menés tout au long du projet • Certains outils de développements (PhoneGap par exemple) sont ancrés dans une logique très web et permettent
également de tester l’application comme une application web classique dans un navigateur, ce qui permet assez rapidement de multiplier les OS (IE -> Windows; Safari -> iOS; Chrome -> Android)
• Mener une recette sur l’exhaustivité des terminaux est impossible: • Les émulateurs ne sont pas forcément une approche valable notamment de part l’absence des fonctionnalités
natives, l’absence des aléas réseau et une puissance de calcul non équivalente • Des solutions de tests à distance (terminaux physiques mis à dispositions et pilotés à distance) existent mais les
contraintes de disponibilité, l’absence d’informations sur les réelles conditions d’usage et le manque de flexibilité n’en font pas une réponse adaptée à la problématique de la recette sur mobiles
• La seule approche valable reste donc le test de bout-en-bout sur des terminaux grand public: – Un pool de terminaux (15 – 20) permet de couvrir une grande majorité du parc – L’absence de fonctions trop exotiques limite également les mauvaises surprises – Les conditions de tests doivent être le plus proche possible des situations d’usage escomptées:
Terminaux non jailbreakés (dévérouillage de l’OS) Niveau du réseau qu’il s’agisse d’une application ayant vocation à être utilisée en extérieur ou dans les transports Prise en compte du soleil pour le design, de l’usage à une main, d’une utilisation en public
• Quelque soit la solution et le temps passé en recette, il y aura toujours des surprises! Celles-ci seront l’occasion de faire évoluer l’application et de tenir compte des différents retours!
APPLICATIONS
Tests et recette : rester pragmatique
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
70
• Validation par les « stores »: • Selon les OS, le process de validation est plus ou moins opaque, long, complexe, changeant et incertain • Certaines conditions peuvent avoir un impact majeur dès la phase de conception de l’application • Sur iOS, process le plus long, il faut compter jusqu’à 3 semaines
• Anticiper la distribution:
• Créer les comptes en avance… • Trouver un titre, identifier la catégorie, les concurrents directs • Préparer les descriptifs (captures d’écran, descriptions) • Benchmarker les mots clés et les recherches
• Référencement et tops:
• La présence sur les stores ne garantit en rien la visibilité d’une appli, son indexation est donc primordiale • Mais les moteurs de recherche des stores sont encore en évolution et les critères restent très opaques, néanmoins, quelques
idées : – Mentionner des applis complémentaires et populaires – Intégrer des mots clefs dans le titre de l’application – Eviter les noms trop « conceptuels »
• Une présence prolongée dans les tops 50 dominés par les jeux et les pure players est globalement inespérable mais connaître les règles reste utile:
– iOS: règles opaques, basées à priori sur les téléchargements (sur une période donnée) et sur les notes des utilisateurs – Android: tout aussi opaque mais prenant en compte le nombre et la qualité des notes, le nombre d’installations ET des
désinstallations, les statistiques d’usage, la croissance du nombre de téléchargements et la pérennité de ces volumes – Effectuer des mises à jour permet de remonter l’application dans les « nouvelles applications »
APPLICATIONS
Validation et distribution
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
71
• Un projet d’application mobile ne s’arrête pas lors du lancement sur les stores. L’ecosystème mobile permet et impose de faire évoluer ses projets:
• Exposition forte à la critique • Evolution constante du paysage
• Quelle que soit la cible: tenir compte des retours et faire évoluer:
• Recueillir et suivre les feedbacks des utilisateurs (notamment commentaires sur les stores)
• Tracker et analyser l’utilisation (construire en amont un plan de tagage) • Enrichir, faire évoluer, se remettre en question (veille active des
applications concurrentes) • Communiquer sur ses mises à jour
• Veille technologique et suivi des évolutions du paysage: • Les applications sont reliées à tout un écosystème (Facebook, Google
Maps…) qui évolue constamment • Les OS sont aussi régulièrement mis à jour et à chaque fois des tests
s’imposent
APPLICATIONS
Campagne Société Générale Source: 20 Minutes
Un effort dans la durée…
3. Démarche: comment faire ?
3. 7. WebApp
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
73
WEBAPP
Back-office de gestion de contenus
(CMS, e-commerce, portail, …)
Site Web
Développement spécifiques « mobile »
Intégration au back office de gestion de contenus
Paramétrage du back office et déploiement
Intégration de contenus dédiés mobile
Création des écrans 1
2
3
3’
4
Site
Mobile
Site
Mobile
WebApp Mobile
1 2
3
4
3’
Les étapes pour le développement d’une webapp sont globalement les mêmes que pour un site mobile. Elle nécessite néanmoins certains développements spécifiques et surtout une approche très différente sur sa construction (cf. pages suivantes)
Les spécificités
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
74
• HTML5 • Stockage local
– session storage / local storage – base de donnée locale – App Cache
• Web sémantique avec de nouvelles balises: section, article, aside, header, footer, nav…
• Balises video, audio, canvas…
• CSS3
• Effets • Transitions • Styles poussés sans image
• JavaScript
• Cœur de l’application
WEBAPP
Les technologies utilisées
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
75
• Techno non encore standardisée • Nécessite un navigateur récent… • … et tous les navigateurs ne réagissent pas
encore de la même façon • Un paysage évoluant constamment, cf. niveau
de compatibilités sur http://caniuse.com/
WEBAPP
• Des adaptations de style à prévoir selon les navigateurs et OS
• Pour IE et Windows Phone notamment…
• Mais des « Polyfills » (contournements) sont utilisables • Des bibliothèques pour amener le futur dans le passé ! • En apportant un support partiel ou un mode dégradé des fonctionnalités HTML5 non
supportées par des navigateurs anciens
Les limites
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
76
• Un exemple: le Financal Times qui a quitté l’appstore (en mettant en place sa webapp accessible depuis le web):
• Pourquoi fuir l’Appstore – 30% de commissions Apple – Pas d’accès direct au client (ni à ses données)
• Est-ce efficace ? – Deux millions d’utilisateurs – 12% des abonnement payants, – 19% du trafic – ½ des utilisateurs ont ajouté l’icône au bureau
• L’option webapp et donc la sortie du business model des stores permet : • D’éviter la « taxation » en cas de monétisation de contenus • D’offrir des contenus plus évolutifs sans avoir à passer par des mises
à jour • Une compatibilité théorique avec tous les OS
• Pour demain: • Logique de client « léger local » moderne et particulièrement
adaptée • Des fonctionnalités nouvelles tous les jours… bientôt l’accès aux API
natives (Projet WebApi de Mozilla) • Mais:
• Des performances encore inférieures à des applications « natives »
WEBAPP
Une solution pour demain ?
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
77
SOMMAIRE
1. Paysage actuel
2. Démarche: pourquoi et quoi faire ?
3. Démarche: comment faire ?
4. Le "cross-platform » 1. Principe 2. Ergonomie et design 3. Développements et solutions cross-platform : Phonegap et Titanium 4. Retours d'expérience techniques
5. L’approche de Smile
4. Le "cross-platform"
4. 1. Principe
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
79
CROSS-PLATFORM
Multiplicité des OS Evolution rapide du parc Hétérogénéité des langages Non stabilisation des OS Caractère propriétaire et fermé Absence de standards Amélioration et standardisation du web mobile Business-model des applications verrouillé
Investir dans des développements « natifs » sur mobile parait de moins en moins pertinent par manque de:
• Pérennité • Maintenabilité • Réversibilité • Couts
1. S’orienter vers des solutions cross-platform: • Viser plusieurs OS en 1 développement, c’est LA
promesse des outils de développement cross-platform • Utiliser des langages issus du web, standardisés et
pérennes • Choisir des solutions open-source
2. Opter pour du web mobile ou des webapp: • Langages universels • Couverture théorique de tous les OS • Liberté du business model, absence d’intermédiaire
Il faut veiller à ce que le site mobile et/ou l’application soit compatible avec les différents OS disponibles sur le marché. Sur terminaux mobiles, à chaque OS correspond un langage, des règles de compatibilité, un SDK (kit de développeur) et un processus de distribution spécifique… Les solutions cross-platform open source (aussi appelées multi-plateformes) telles que Titanium ou PhoneGap, visent à répondre à la problématique de l’absence de standards de développement dans le monde du mobile.
Principe
Con
text
e
Dile
mm
e
Solu
tion
4. Le "cross-platform"
4. 2. Ergonomie et design
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
81
ERGONOMIE ET DESIGN
• Malgré les écarts d’apparence parfois constatés entre des applications iOS et Android les applications cross-platforms peuvent l’être avec une seule ergonomie et design
• Les ergonomies mobiles et tactiles sont encore très variées mais des principes sont devenus universels:
• Un large dénominateur commun existe entre tous les OS: – Structure de mise en page – Gestuelles – Taille des zones cibles – Organisation des contenus – Principes de boutons, onglets, transitions, guides visuels
• Les grands principes d’ergonomie évoqués dans ce guide sont également tous « cross-platform »
• Une charte graphique neutre peut également être choisie: • Ni stylé iOS, ni Android, ni Window Phone • Des grandes tendances se dégagent entre ces OS • Certaines librairies / framework ont fait leur preuve : sencha, jquery • Mais le mieux reste de définir soit même en CSS3 sa propre charte !
Exemple issus de Sencha et jQuery
Et l’expérience utilisateur ?
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
82
ERGONOMIE ET DESIGN
Exemples d’ergonomies cross-platform : Facebook et Allociné
4. Le "cross-platform"
4. 3. Développements et solutions cross-platform : Phonegap et Titanium
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
84
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP et TITANIUM
• La promesse : • Un seul code • « n » plateformes cibles • Simple à maintenir et faire évoluer
• En pratique :
• Des technos web : faciles à prendre en main • Un tronc commun (80% du code) • Des adaptations à faire pour chaque plateforme cible : gestion du bouton retour pour Android et
Windows Phone, Push de notifications…
• Estimation de charge de développement: • Si le développement d’une appli native nécessite « Y », le développement de la même appli en natif
pour « n » OS coutera approximativement « n x Y » • Le même développement en cross-platform coutera entre « (n x Y) / n » et « (n x Y) / (n / 2) » selon
les spécificités des fonctionnalités utilisées (ex: calibrage du gyroscope, utilisation de la caméra, etc.)
• Autrement dit, le cross-platform est financièrement intéressant au-delà du deuxième OS, mais dès le départ il assure une bonne pérennité et maintenabilité du code
Deux outils choisis par Smile
Part de spécifique vs tronc commun
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
85
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP et TITANIUM
PhoneGap utilise le moteur de rendu HTML / CSS / JavaScript du navigateur natif de la plateforme cible.
+ - Poids des applications léger Moteurs d'exécution et de rendu déjà intégrés Nombreuses plateformes supportées
Différences de moteurs entre certains terminaux, induisant un travail d’adaptation des présentations
Les applications mobiles de Wikipedia ont été développées avec PhoneGap
PhoneGap (Cordova) : le « packageur »
La NASA utilise PhoneGap pour son application iPad Nasa Science
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
86
Titanium est un kit de développement éprouvé pour créer des applications natives iOS et Android.
+ Maturité du projet Communauté Spécialisé dans le rendu natif des interfaces Applications puissantes et rapides en comparaison à
d’autres outils cross-platform Applications natives
- Montage des application complexe Difficulté à s’éloigner du rendu natif des
interfaces
Titanium : le « traducteur »
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP ET TITANIUM
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
87
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP ET TITANIUM
• Des montages et développements testés sur navigateur web • Pour une plus grande simplicité de débogage et de déploiement
• Des tests sur simulateurs
• Pour que les tests sur matériel ne soient qu’une validation
• Des tests sur matériel
• A chaque version il faut générer l’application pour chaque OS… • Croisements OS, versions et terminaux avec ciblage pragmatique • Tests unitaires sur terminaux durant la phase de développement
• Des tests « on the fly » pour le client (TestFlightApp pour iOS, dépôt web pour
Android…) • Pour éviter l’effet tunnel
Les tests cross-platform : communs et particuliers
4. Le "cross-platform"
4. 4. Retours d'expérience techniques
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
89
RETOURS D'EXPÉRIENCE TECHNIQUES
• Des « - » • Des interfaces non-natives, privilégier des interfaces uniformes entre les OS • Se méfier des librairies graphiques (type jQuery Mobile) dont il est difficile de sortir.
Mieux vaux s’en passer et faire un montage et une création graphique dédiée • Un outil très complet, mais bien sûr en cours de développement. De nouvelles
fonctionnalités sont supportées au fur et à mesure
• Des « + » • 7 plateformes supportées : un gain de temps considérable • Une prise en main rapide : développement JS, HTML5, CSS3 • Une grande liberté : plugins, JS, etc. • Outil « PhoneGap Build » qui peut se charger de la génération des applis (mais le code
est dans le cloud…)
PhoneGap (Apache cordova)
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
90
RETOURS D'EXPÉRIENCE TECHNIQUES
• Des « - » • Seulement 2 plateformes supportées, mais les principales : iOS, Android • Un manque d’outil de gestion d’interface/layout • Des mises à jour qui peuvent impacter lourdement les développements (une
application développée avec Titanium 1.5 ne compilera pas sous Titanium 2.0) • La documentation…
• Des « + » • Des interfaces natives • De nombreuses fonctionnalités gérées par le SDK (Push, intégration Facebook, etc.) • Une communauté active et des plugins
Titanium
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
91
SOMMAIRE
1. Paysage actuel
2. Démarche: pourquoi et quoi faire ?
3. Démarche: comment faire ?
4. Le "cross-platform »
5. L’approche de Smile 1. Présentation 2. L'approche sur mobile
5. L'approche de Smile
5. 1. Présentation de Smile
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
93
agences en France Paris Lyon Nantes Bordeaux Montpellier Marseille Lille Grenoble
agences internationales Genève Barcelone Casablanca Kiev / Kharkov Amsterdam / Utrecht Bruxelles
CA 2012 M€ +20% de croissance Plusieurs métiers
Agence interactive Ingénierie Internet Conseil et AMOA Design & Graphisme /SEO Maintenance (TMA) Hébergement & exploitation Formation
600 Collaborateurs
21 ans d’expérience 1er intégrateur de solutions open source en Europe
Une vision simple, utile & performant
8 45
Plusieurs gammes de solutions • Gestion de contenu • Portails • Développement spécifique • E-Commerce • ERP/ CRM • GED/BPM • Mobile • Décisionnel • Système & Infrastructure • RSE
8
PRÉSENTATION DE SMILE
Quelques-unes de nos références Mobile Krys, Mazars, TDF Cristal, Veolia eau, JC Decaux, Evian Master, Melody Healthcare, SPIE…
5. L'approche de Smile
5. 2. L'approche sur mobile
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
95
L'APPROCHE SUR MOBILE
• En tant que spécialiste de l’open-source Smile a adopté sur mobile un positionnement assez spécifique avec pour objectif de garantir à ses clients les avantages et la philosophie de l’open-source:
• Standardisation • Accessibilité / lisibilité du code • Outils évolutifs • Langages universels
• En pratique, Smile a investi en R&D afin de concrétiser ce positionnement: • Etude et suivi de nombreux outils, pour finalement s’arrêter sur:
– PhoneGap – Titanium – Sencha – jQuery / jQuery Mobile (même si quelques bémols sur ce dernier en terme de
performance notamment) • Développement d’une expertise ergonomique et graphique volontairement neutre
• En tant que leader de l’intégration de projets web, nous restons convaincus que l’avenir du mobile passera majoritairement par le web, sous forme de sites mobile, de sites en full responsive design et surtout de webapp HTML5:
• Fortes compétences HTML5, CSS3, JS • Expertise fonctionnelle orientée usages • Ergonomie et design aux services de l’utilisation • Approche technique et fonctionnelles cross-canal
Une approche orientée vers l'avenir
Edition Septembre2012 © Copyright Smile – Open Source Solutions – Toute reproduction interdite sans autorisation
96
L'APPROCHE SUR MOBILE
• La fin de l’époque des projets « jetables » ou « pour voir » • Investissements plus conséquents entrainant des approches plus ROIstes • Enjeux techniques plus élevés dès lors qu’il faut authentifier, renseigner, informer dynamiquement,
acheter, etc.
• Des projets de plus en plus intégrés (contenus, SI métiers, Api externes) et complexes qui nécessitent :
• Un expertise transverse du web • Des compétences techniques variées (back office, intégration, interfaçage, sécurisation) • Des méthodologies projets éprouvées • Un partenaire solide
• Opter pour une approche du mobile raisonnée et pragmatique via le cross-platform
• Réconcilier la créativité, l’ergonomie et le graphisme avec la technique via un acteur intégrant les deux sensibilités
La technique au service de l’utilisabilité... sur le mobile aussi
Top Related