LB - Smile - Guide Du Chef de Projet Mobile PDF

Prambule
D'abord considr comme un simple support de communication, le mobile est devenu en 5 ans un canal daccs privilgi au web, contenus et services. A ce titre, les enjeux du mobile ont considrablement augment et font maintenant partie intgrante des stratgies des entreprises. Nanmoins, si limportance du mobile est un fait globalement partag, le sujet reste complexe aborder pour la plupart des entreprises car il demeure nouveau, mouvant et la croise du web, du marketing et de la technique. Smile, spcialiste du web et de lintgration de solutions open source a donc ralis ce guide afin de vous clairer dans votre dmarche et de vous accompagner dans la dfinition puis la gestion dun projet mobile.
SOMMAIRE
1. Paysage actuel
1. Chiffres cls et tendances 2. Fragmentation toujours leve 3. Synthse
2. Dmarche: pourquoi et quoi faire ? 3. Dmarche: comment faire ? 4. 5. Le "cross-platform Lapproche de Smile
Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation
1. Paysage actuel
1. 1. Chiffres cls et tendances
CHIFFRES CLS ET TENDANCES

Le mobile a dj 30 ans et est devenu au file des annes un canal incontournable. Voici quelques terminaux qui ont marqu l'histoire :
Motorola DynaTAC 8000x (1983)
Bi-Bop (1990)
Nokia 3210 et 3310 (1999)
Blackberry 5790 (2000)
Motorola Razr V3 (2005)
Apple iPhone 1 (2007)
Ce canal sera bientt dominant, en nombre de connexion dans le monde

Ds maintenant [] 4 consommateurs sur 5 peuvent accder Internet et au commerce en ligne via leur mobile, contre 1 consommateur sur 5 via son ordinateur. "
(source: TNS Sofres) 2012
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)

Croissance du parc et intensification des usages en France
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 rserve quelques spcialistes que lon a connu. Par ailleurs, laspect le plus marquant est son utilisation qui sintensifie danne en anne (doublement du nombre dutilisateurs quotidiens de linternet mobile en un an). Les nouveaux utilisateurs, se servent de leur smartphone, et ce de plus en plus.
+34%
Mobinaute = utilisateur de smartphone allant sur Internet (via navigateur ou application)
+100%
Source: Mdiamtrie Daprs Google/Ipsos, on compterait 55% de mobinautes quotidiens
Partout et tout le temps

> 90% des utilisateurs gardent leur smartphone sur eux 24h/24h Majoritairement utilis la maison Devant la tlvision Au lit Dans la salle de bain ou aux toilettes et ensuite en mobilit : Durant une attente En transport En runion / en cours En faisant les courses Lge moyen du premier mobile : 11 ans et demi !
Portrait du Mobinaute
Donnes France
8/10 habitent hors agglomration parisienne (vs. 3/4 lan dernier) 43% sont des femmes (vs. 40% lan dernier)
(Source: Mdiamtrie)
Prs de 50% ont moins de 35 ans
Source : IPSOS et CETELEM

Applications - Des utilisateurs qui tlchargent, testent, et zappent
Le 5 mars 2012 - Apple a ft ses 25 milliards dapplications tlcharges. Autre chiffre marquant, 26000 demandes dapplications valider par semaine dont un tiers sera rejet. Applications les plus tlcharges 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
Un phnomne de Blockbusterisation (concentration des usages)
Plbiscites pour les utilisateurs et prsentes en trs grand nombre

1 million dapplications disponibles sur les stores (total des 4 principaux OS) En 2011, 18 milliards dapplications ont t tlcharges 83* applications tlcharges en moyenne par an sur iOS.
*Dautres tudes parlent de 60 80 applications tlcharges par an/ par personne, 30 utilises dont 10 rgulirement Source chiffres : ChangeWave Gartner
Le top 10 des applications Android concentre 43 % de tout le temps pass
Des applications considres comme jetables ou Kleenex

26% des applications sont tlcharges, ouvertes une seule fois pour ne plus jamais tre utilises. Seuls 26% sont utilises plus de 10 fois
aux dures de vie trs phmres:

Aprs un mois dutilisation, seulement 38% des utilisateurs (iOS comme Android) lutilisent encore Aprs 6 mois, seulement 14%, puis seulement 2% utiliseront aprs 12 mois
Source chiffres: Apple, Localytics, Flurry Analytics & Estimates
Web mobile - des utilisateurs exigeants Mais nombreux De 2010 2011: la part des recherches sur mobile est passe de 2,95% 5,98% (chiffres monde)
En dautres termes: les utilisateurs ont des besoins et souhaitent vous trouver Un utilisateur sur deux est globalement insatisfait de son exprience dinternet sur mobile. 1/4 dentre eux, ne reviendront pas Pour 15% le site ne rpond 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 nexiste pas
Mais leur exprience actuelle est encore globalement dceptive (US)

Ltude montre nanmoins que la diffrence entre le web mobile et les applications tlcharges est perue et les exigences de temps de rponse, dergonomie et de contenu restent moins leves que sur le web.
Source Chiffres : NetMarketShare
1. Paysage actuel
1. 2. Fragmentation toujours leve
FRAGMENTATION TOUJOURS LEVE

Un paysage trs fragment mais homognis grce Android
Terminaux (sous Android)
Cette reprsentation montre de manire visuelle le niveau de fragmentation des terminaux pour lOS Android. Elle na pas vocation apporter dinformations chiffres
Source : OpenSignalMaps
11

Ecrans : des proportions similaires qui tendent diverger
Si globalement tous les smartphones ont une proportion hauteur/largeur proche, celle-ci tend diverger avec les modles les plus rcents. A titre dinformation, 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 liPhone 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 cots de dveloppements (ergonomie, design, montage) Source : OpenSignalMaps
12

Terminaux, OS* et navigateurs : la problmatique se dplace des terminaux vers les OS Terminaux du mieux !

*OS = operating system i.e. systme dexploitation
La monte en puissance dAndroid ainsi que laccord Nokia/Microsoft ont permis de rduire le nombre dOS majeurs prsents sur le march grand public L o il fallait parfois viser une multitude de terminaux, on peut aujourdhui par exemple considrer quune application dveloppe pour Android 2.1 fonctionnera sur tout appareil qui tourne sous Android 2.1
Problmatique modle et marque
Problmatique OS et navigateur
Pour autant les OS et navigateurs sont toujours trop htrognes:

Le nombre de ces OS majeurs bougent encore, de nombreux projets sont annoncs ou ont t lancs (ex: TIZEN, BADA). Par ailleurs les OS eux mmes voluent trs frquemment, et les mises jour des utilisateurs ne sont pas toujours automatiques Chaque OS utilise son propre navigateur Web: Tous sont senss afficher du web universel mais ds que lon touche aux spcificits mobiles ou tactiles, il ny a plus de standard On se retrouve parfois lpoque de Netscape o il fallait adapter ses pages chaque navigateur, les tester et optimiser chaque volution
13

France Des parts de march variables qui imposent de viser large
Les parts de march des OS mobiles vont rester instables:
100% 80% 60% 40% 20% 0%
Q4 Q2 Q4 Q2 Q4 2009 2010 2010 2011 2011 Q2 2012
Le parc augmente vite (13 millions de smartphones vendus en 2012), et la concurrence est telle quil est difficile danticiper vers quel OS les utilisateurs vont se porter Malgr leur prix et la baisse globale du niveau de subventions des oprateurs (notamment Free), le rythme de renouvellement reste rapide LOS nest pas ou plus un critre dachat (except pour une part de Fans dApple)
Parc France Estimations Smile bases sur ComScore, GfK, IPSOS
Autres (dont Bada) Windows Blackberry Symbian Android iOS
Les chiffres communiqus publiquement sont trs variables selon le fait quil sagisse de parts daudience, de sondages dclaratifs, de chiffres de ventes ou de base installe. Ici, nous avons tent de synthtiser lensemble pour donner une vision du parc des terminaux en circulation. Aujourdhui, viser Symbian nest plus prioritaire (lOS ntant plus soutenu) et la question se pose pour BlackBerry en perte de vitesse. Sauf exception, nous conseillons gnralement de cibler iOS, Android et Windows Phone (sans forcment respecter les principes ergonomiques trs spcifiques de ce dernier).
14
1. Paysage actuel
1. 3. Synthse
SYNTHSE
Vos clients et utilisateurs vous attendent dj Le mobile (web mobile et applis) est un canal privilgi
24h/24h prs de soi 17h/24h allum Plus personnel et prcieux quun porte-monnaie Connect en continu et utilis nimporte o et nimporte quand
largement adopt
20 millions dutilisateurs actifs en France dont 35 50% de quotidiens
et spcifique
Rpondant des besoins et usages diffrents du web classique
Vos utilisateurs sattendent dj retrouver vos services et vos informations dclins spcifiquement pour leur mobile
16
SOMMAIRE
1. Paysage actuel 2. Dmarche: pourquoi et quoi faire ?
1. Dfinition des objectifs et stratgies 2. Site Mobile ou Application ? 3. Une solution intermdiaire : la WebApp
3. Dmarche: comment faire ? 4. Le "cross-platform 5. Lapproche de Smile
17
2. Dmarche: pourquoi et quoi faire ?

2. 1. Dfinition des objectifs et stratgies
DFINITION DES OBJECTIFS ET STRATGIES

Dfinition des objectifs business pour aller au del dune simple prsence
Un investissement sur le mobile doit tre trait comme un projet informatique et non plus comme un budget de communication (i.e. achat despace publicitaire) Ses objectifs sont donc dfinir en amont afin de permettre llaboration dune relle stratgie et den mesurer le succs Des analyses de cas montrent que de nombreux objectifs peuvent tre adresss par le mobile:
Acqurir des clients Vendre davantage, plus cher ou moindre cot Gnrer du trafic (purs players) Fidliser ses clients Rduire ses cots Crer, renforcer, modifier son image Jouer son rle socital (institutions, associations)
19

Dfinition dune stratgie Pensons situation dusage
Une fois le ou les objectifs dfinis, la stratgie adopter peut tre dfinie 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 dusage:
Quand a-t-il une attente ? Chez lui depuis son canap ? Dans la rue ? Dans le mtro ? Son besoin est-il urgent ? Contextualis ? Frquent ? Comment va-t-il me chercher ou me trouver ? Google ? App Store ? Vous avez tous un smartphone, vous tlchargez des applications et naviguez sur Internet avec, mettez vous la place de vos utilisateurs
20

Cas dentreprise : BNP Un dispositif complet et segment
BNP propose diverses applications ayant chacune une cible, un objectif et un contenu ddi : BNP Mes comptes : Objectifs: fidlisation, accroissement de lautonomie, communication sur produits et upselling sur clients grand public Cible: principalement les clients particuliers BNP, mais certaines fonctions sont ouvertes tous Contenu: accs ses comptes, virements pour tous: simulateur de prts/pargne, numros 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 vnement ponctuel entre amis
21

Cas dentreprise : E. Leclerc - Qui est le moins cher ? Une application marketing
E. Leclerc propose une application marketing base sur une promesse trs 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 associe au lancement de lapplication Lapplication devient le support de communication et la justification du message
22

Cas dentreprise : VEOLIA L'eau chez vous : entre le marketing, le service et la rationalisation des contacts
Une application avec plusieurs objectifs, et plusieurs cibles
Objectifs initiaux: Information, communication, fidlisation: Cible client connu: relev, visualisation facture, paiement Cible client inconnu ou prospect: qualit, prix et travaux en cours Objectif secondaire de potentielle rduction de cots: une part importante des appels au call center effectue pour un relev dindex ou paiement ainsi vite
23
23

2. 2. Site Mobile ou Application ?
SITE MOBILE OU APPLICATION ?

Site mobile
Comment les utilisateurs vous trouvent
Application native
+
Navigateur Moteur
=
Logique dannuaire Stores
=
Logique de rayons
Enjeux
SEO
Site Web / URL connue Rponse rapide
Tops ! Cohrence
Classification Notorit marque
Comment ils reviennent sur votre service

Favoris ou raccourci (icne standard ou personnalise)
Icne
Les fonctions
Web, contenus, transactions, paiement par CB, goloc, interface tactile (partiele), en partie mode dconnect (HTML5)
Idem + Look & feel premium, paiement in-app., acclromtre, contacts, vibreur, camra, flash, davantage de puissance, mode full dconnect, full tactile 25

A adapter selon les usages
e-commerce
besoin dinfo
contextualises
rseaux sociaux
26

Idalement les deux !
Un exemple : Paris Bouge qui propose une version mobile de son site et une application
Site mobile Installation application Application
Le site mobile fournit les informations ET invite tlcharger lapplication via un lien vers le store (ici exemple Android) Un utilisateur la recherche dune 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 rflexe daller rechercher le nom sur les stores. Le dispositif est donc double, pour cibler la fois les prospects et les fidles . Objectif: conqute Adresser une demande prcise et urgente Objectif: fidlisation Simplifier la vie et offrir le service dans les meilleures conditions 27

2. 3. Une solution intermdiaire : la WebApp
UNE SOLUTION INTERMDIAIRE : LA WEBAPP

Prsentation de la WebApp
Une webapp est une application web:
Accessible via une url et installe presque automatiquement Consultable par smartphone, tablette, PC Evolutive sans mise jour effectuer via les store
Elle est adapte aux crans mobiles Construite en une seule page:
Afin de concentrer le temps de chargement au dpart Et doffrir des transitions rapides sans chargement lorsque lutilisateur change dcran
Fonctionne hors connexion sur la base des donnes stockes localement App capable (mise en marque page)
Icne dapplication Mode plein cran Des balises audios, videos et autres nouveauts Exemple: www.openappmkt.com Ce site (qui est aussi une webapp) est un quivalent de store pour installer via le navigateur des webapp HTML5
29
SYNTHSE DES TROIS APPROCHES

L approche slectionne devra avant tout rpondre au besoin identifi
Application WebApp (HTML5) WebMobile
Visible sur les stores Mode dconnect Fonctions natives
Accessible via lURL actuelle Mode dconnect une fois installe Flexible
Accessible via lURL actuelle Flexible Plus conomique
Installation Gestion des diffrents OS Evolution via mise jour
Ncessite terminaux rcents Fonctions limites (pas daccs aux fonctions natives du terminal)
Connexion indispensable (3G/Wifi) Fonctions limites (pas daccs aux fonctions natives du terminal)
30
SYNTHSE DES TROIS APPROCHES

Possibilits fonctionnelles et techniques
Applications Appareil photo numrique, gyroscope, carnet de contacts, calendrier, vibreur, compas, tat du rseau, push de notifications Golocalisation Fonctionnement hors connexion Stockage de grande quantits de donnes (systme de fichiers) Accs aux applications natives (lies l'OS comme par exemple la galerie de photo sur iPhone) Interfaces natives (boutons, listes, etc) Performances et fluidit (dignes dun jeu par exemple) Animations, gaphismes avancs Vido, son, images Accs via URL Accs via stores Chargment en une seule fois Mise jours type web Mise jour via les stores Oui Oui Oui Oui Oui Oui Oui Oui Oui Non Oui Oui Non Oui Webapp HTML5 Non Oui Oui Non Non Oui Non Oui Oui Oui Non Oui Oui Non Web Mobile Non Oui Non Non Non Oui Non Oui Oui Oui Non Non Oui Non
31
SOMMAIRE
1. Paysage actuel 2. Dmarche: pourquoi et quoi faire ? 3. Dmarche: comment faire ?
1. 2. 3. 4. 5. 6. 7.
Conception fonctionnelle, ergonomique et graphique Focus sur la conception fonctionnelle Focus sur la conception ergonomique Site mobile Zoom sur le responsive design Applications WebApp
4. Le "cross-platform 5. Lapproche de Smile

32
3. Dmarche: comment faire ?

3. 1. Conception fonctionnelle, ergonomique et graphique
CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE
Trois approches Dmarche projet Application WebApp (HTML5)

Conception Fonctionnelle Ergonomique Graphique
Cration des crans Dveloppements spcifiques mobiles (potentiellement en cross-platform) Intgration des webservices Cration des crans Cration des crans
Site Mobile
Etapes cls du projet
Dveloppements spcifiques mobiles Intgration au back office de gestion de contenus Paramtrage du back office et dploiement
Intgration au back office de gestion de contenus Paramtrage du back office et dploiement
Packaging, et adaptation aux OS
Distribution sur les stores

34
CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE

Prendre le sujet dans le bon sens
Objectif Design
Au service de lergonomie et des usages - Rendre lergonomie lisible - Donner envie dutiliser lapplication Au service des contenus - Augmenter lutilisation - Rendre intuitif, simple, efficace laccs aux services et informations prioritaires
Ergonomie
Contenu
Au service des usages et des objectifs du projet
Exemple: La manette de Playstation 3 est belle, mais est avant tout conue pour une prise en main parfaitement adapte un usage continu pendant plusieurs heures sans douleur aux doigts
Contre-exemple: Ces deux sites mobiles proposent deffectuer un dragndrop pour pouvoir accder une rubrique un simple tap/clic aurait t plus efficace, logique et ergonomique
35

3. 2. Focus sur la conception fonctionnelle
FOCUS SUR LA CONCEPTION FONCTIONNELLE

Typologie des usages en mobilit
Le choix des informations et fonctionnalits mettre disposition de lutilisateur de smartphone est dterminer en fonction de ses besoins. Ceux-ci sont pourront tre catgoriss en 3 4 grands groupes, en rpondant la question: Pourquoi, quand, o et comment un utilisateur a-t-il besoin daccder 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 : Jai besoin dune rponse maintenant - et ici Exemple: O est ce restaurant ? A quelle heure est la sance ? Enjeu : proposer des modalits de recherche rapide Explorer / Jouer Jai du temps et je moccupe / je mamuse Exemple : Y a-t-il de nouvelles images du robot de la NASA ? Enjeu : tre ludique / proposer des poursuites de lecture Vrifier / 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 / Crer Je dois faire quelque chose qui ne peut pas attendre Exemple : Jai oubli de rserver ma place de concert! Enjeu : faciliter la saisie, les choix (formulaires)
37
FOCUS SUR LA CONCEPTION FONCTIONNELLE

Exemple de site mobile ddi : Krys Des fonctionnalits cls
Le site web de Krys est trs riche et prsente notamment les collections. Lors de la conception du site mobile, seules trois rubriques ont t mises en avant, mais celle-ci rpondent prcisment des besoins en situation de mobilit: - Mes commandes Suivre ses commandes: Je ne suis pas loin de la boutique Krys, je vais vrifier si mes lunettes sont arrives avant de my 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 rparera ma monture
38

3. 3. Focus sur la conception ergonomique
FOCUS SUR LA CONCEPTION ERGONOMIQUE
A garder en tte
Lutilisateur de smartphone est un pouce et un il

Bruits, mouvements, ensoleillement lutilisateur en mobilit est souvent drang et ne dispose pas toujours de sa totale libert de mouvement (paradigme de la double tache) Facilits daccs aux zones de lcran avec un smartphone tenu de la main droite en position portrait :
DIFFICILE ACCEPTABLE
FACILE
40
Privilgier le contenu aux liens 1/3
Les liens prennent trop de place. Laissez dabord vos utilisateurs lire, regarder, couter. Ils approfondiront sils le souhaitent. Pousser immdiatement les contenus chauds, et laisser les liens et options de navigation accessibles la demande Ne pas obliger lutilisateur passer par un cran intermdiaire
41
Evitez les barres de navigation sandwich car elles occupent un espace de visibilit prcieux sans que leur utilit soit garantie Un accs lensemble des catgories / rubriques depuis toutes les pages nest pas utile
42
Facilitez les poursuites de lecture l o elles sont pertinentes (dans leur contexte), via des liens intelligemment placs aprs le contenu Laisser toujours le choix lutilisateur de poursuivre ou dinterrompre sa lecture
43
Concevoir une charte de navigation simple 1/4
Les utilisateurs sur mobile sont peu conciliants, presss, et attendent une navigation facile apprhender en situation de double tache. Brancher les liens sur les contenus pour conomiser de lespace et associer smantique et navigation. Attention toutefois ne pas en faire trop en branchant un lien sur de (trop) gros blocs de texte.
OUI
NON
44
Le bouton Retour (back de lhistorique) est inutile sur les terminaux autres que iOS, en revanche, le bouton de retour la page mre est pertinent (en indiquant quelle est cette page) (Sur iOS, un bouton est disponible au niveau de la barre dadresse du navigateur Safari, et donc galement inutile sur les sites web-mobile)
NON
OUI
45
Cacher le menu de navigation afin quil soit accessible tout moment, sans pour autant occuper continuellement lespace
46
Utiliser la barre fixe dans le cas dapplications : En haut (Android) qui a dj des boutons natifs en bas Ou en bas (iPhone)
Mme si cette rgle nest pas universelle, il faut garder en tte ces potentiels rflexes dutilisation
47
Assurer la lisibilit Rendre les textes lisibles avec des tailles de caractres suffisamment grandes Proposer des zones actives de taille suffisante pour un pouce dhomme adulte Adopter une organisation unitaire en ligne par ligne afin que la lecture et la manipulation soit simple et ne conduise pas lutilisateur commettre des erreurs de tap
48

Tactile - Choisir les bons gestes
Les smartphones sont caractriss par leurs interfaces tactiles. Cette manire dinteragir est certes trs intuitive, mais elle reste nouvelle pour le grand public. De nombreux types de gestes existent et peuvent encore tre invents ; mais lergonomie ayant pour vocation de simplifier et fluidifier lusage, il faut les utiliser bon escient. Les utilisateurs daujourdhui ne connaissent pas encore toutes les subtilits possibles et aucune norme universelle ne sest encore installe comme par exemple: - Le clic droit de la souris pour accder des options avances - La croix qui indique la fonction de fermeture dune fentre Ainsi, dans la liste des principaux gestes ci-dessous (issue de Touch Gesture Reference Guide www.lukew.com) nous conseillons de nutiliser que ceux encadrs :
49

Tactile - comment utiliser les gestes
Mme parmi les gestes simples, certains ne sont pas totalement intuitifs, il faudra les rendre lisibles
Cest pourquoi nous avons encore besoin de boutons affichs dans lcran et explicitement visibles pour les utilisateurs Mais cela ne doit pas nous empcher dutiliser les gestes pour lactivation de raccourcis ou dactions avances pour un usage expert, en doublon des boutons disponibles lcran Les gestes avancs deviennent donc des raccourcis au mme titre que les raccourcis claviers ont envahis nos applications de bureautique
Exemple: Sur lapplication mobile de Facebook, la seule manire de supprimer un statut est actuellement deffectuer un Flick sur son statut. Peu dutilisateur le savent, ce geste ntant pas universellement associ cette fonction (http://www.youtube.com/watch?v=DRbca-0D5pM)
50

Tactile - grer labsence de pointeur
Pas de pointeur = pas de survol (roll-over) Les interactions disponibles via le survol dans les sites classiques doivent tre totalement repenses sur le smartphone et sur les tablettes:
Point dattention: Les tablettes tactiles sont trs majoritairement utilises (>90%) domicile, en remplacement du PC portable et trs souvent pour naviguer sur Internet. La taille des crans, puissance des appareils et des navigateurs permettent de consulter la plupart des sites sans problme technique particulier. Nanmoins, les ergonomies bties sur des roll-overs ne pouvant tre rendues, les sites sont parfois totalement inutilisables cause de ce point de dtail. Quelques approches: Afficher directement les contenus dans lcran car ces contenus sont jugs bien trop importants pour lutilisateur Les insrer dans lcran par un geste (tap, press, flick) permet de conserver leur affichage contextuel au cot des contenus de lcran (le plus simple tant gnralement dautoriser un tap pour activer leffet du roll-over) Les afficher sur un cran spar car la quantit de contenu est trop importante et ces contenus ne peuvent pas tre tronqus Ne rien faire car les contenus sont secondaires et que lutilisateur peut aisment sen passer En rgle gnrale: sur un site grand-public, lutilisateur doit pouvoir se passer de linteraction de survol moins de navoir dvelopp une version ddie aux tablettes. Cette remarque est dautant plus importante pour les sites de e-commerce!
51

Saisie sur mobile
Malgr les innovations sur les claviers, la reconnaissance dcriture ou autre technologie, la saisie sur Smartphone reste dlicate et doit donc tre simplifie
Ne garder que ce qui est essentiel et supprimer le reste Prsentation en ligne par ligne avec le label au dessus - ou dans le champ de saisie Pr-formater la saisie selon le type de donne attendue (alphabtique, numrique, email, url, ) et le nombre de caractres (anne, numro de tlphone, ) fera gagner beaucoup de temps vos utilisateurs. Utiliser les claviers adapts en donnant accs directement aux caractres utiles tels que @ Utiliser des masques de saisie pour guider lutilisateur sur les donnes attendues Utiliser des valeurs par dfaut lorsque cela a du sens et rpond la majorit des cas dutilisation (ici, exemple pour une application de rservation dhtel booking.com) Exploiter les capacits des smartphones : golocalisation, camra, microphone
52

Slection de donnes
Autant que possible, remplacer la saisie dune donne par la slection
Crer des contrles spcifiques pour remplacer efficacement les contrles standards : slider, boutons +/-, calendrier,
Plus facile de faire glisser son doigts, de taper rapidement au mme endroit, ou de choisir directement une valeur que de taper une zone de saisie, puis taper sur son clavier
En plus des adaptations dj prdfinies par les plateformes
53

3. 4. Site mobile
SITE MOBILE
Les tapes de cration dun site mobile dbutent par les crans
1 Cration des crans
Site Web
Site Site Mobile Site Mobile Mobile
La premire tape de dveloppement du site mobile sera la cration des crans
Le site web mobile sappuiera gnralement sur le mme back-office et de prfrence les mmes contenus que le site classique.
Back-office de gestion de contenus (CMS, e-commerce, portail, )
55
SITE MOBILE
Cration des crans : options et contraintes

La mthode de cration des crans dun site mobile dpend de loutil utilis pour grer les contenus (CMS) du site web classique. Selon loutil et ce quil propose, mais aussi selon lergonomie, les contenus et le design cibls, on se portera plus ou moins vers des fonctionnalits standards de cration voire de duplication du site web:
Thmes / vues standards:
Loutil propose en standard une version mobile avec des gabarits ou vues utilises pour le site web classique (implique un site web classique construit sur ces mmes standards) Larborescence du site mobile sera donc identique celle du site web classique Lergonomie et le design sont imposs par les thmes On dveloppe dans la logique de loutil un nouveau jeu de gabarits L arborescence du site mobile sera donc identique celle du site web classique On construit les crans de bout en bout et on peut donc slectionner les contenus mettre en avant ou non
Gabarits ddis:

Ecrans totalement spcifiques:
Dans tous les cas, le montage des crans devra idalement se faire en adaptatif , les crans tant adapt en largeur la taille de lcran:
Toutes les tailles et proportions dcrans diffrents Les deux orientations (paysage / portrait) Potentiellement les nouveaux et futurs appareils 56
SITE MOBILE
Cration des crans : problmatique de compatibilit des navigateurs

Mme si on parle de Web, et donc thoriquement de technologies universellement interprtes par les navigateurs, des carts subsistent. Interface tactile:
La dtection des vnements tactiles nest pas homogne dun navigateur lautre Chaque navigateur (i.e. ~chaque OS) ncessitera donc un dveloppement spcifique sur la partie IHM (Interface Homme Machine) tactile
Interprtation du code HTML5 / CSS3:

LHTML5/CSS3 permet denrichir les rendus, de proposer des animations et des interfaces riches et esthtiques La future norme ntant pas encore valide, le niveau de compatibilit est variable dun navigateur lautre Des ajustements seront donc galement ncessaires, notamment en vue dventuelles versions dgrades
Retour lpoque o il fallait grer des navigateurs trs diffrents
57
SITE MOBILE
Intgration et dploiement
1 Site Web Site Site Mobile Site Mobile Mobile
Cration des crans Intgration au back office de gestion de contenus Intgration de contenus ddis mobile Paramtrage du back office et dploiement
Lintgration au backoffice nest pas spcifique au mobile et correspond au travail classique de dynamisation des contenus. Il peut parfois tre obligatoire de crer des contenus spcifiques au mobile. Le back-office et le serveur doivent tre paramtrs pour dtecter les user-agent et rediriger lutilisateur vers le bon site.
58

3. 5. Zoom sur le Responsive Design
ZOOM SUR LE RESPONSIVE DESIGN

Principe du Responsive Design
Dfinition (wiki): la notion de Responsive Web Design regroupe diffrents principes et technologies permettant de concevoir un site pour quil s'adapte aux diffrentes tailles d'cran et aux diffrents terminaux Il sagit donc: 1 page unique pour lensemble des terminaux (une seule contribution, administration, hbergement, URl, etc.) 2 3 ergonomies diffrentes par page : [desktop-souris / tablette] / smartphone Exemple www.sony.com: Construit sur la base dune image de fond, puis de 4 colonnes de contenus (dont une double), le site sadapte passant 3 colonnes puis 2 en fonction des versions Le point intressant tant ici les lments de navigation qui se regroupent dans des menus droulants de navigation Desktop Tablette Smartphone
60
60
ZOOM SUR LE RESPONSIVE DESIGN

Cration des crans avec le Responsive Design
Dans le cas dun dveloppement complet de site (version classique desktop, tablette et mobile) le responsive design est une approche intressante permettant dviter de devoir crer des crans ddis au mobile voire aux tablettes.
Site Web.. tablette et mobile Colonne 1 Colonne 2 Colonne 3 Bloc 1 Bloc 2 1
Site Site Mobile Site Mobile Mobile
Cration des crans
A dfaut de versions spcifiques en fonction de lappareil vis, les contenus sont organiss sur les pages web afin quils puissent sarranger en fonction de la taille de lcran cible.
61
FOCUS SUR LE RESPONSIVE DESIGN

Le Responsive Design : avantages / inconvnients
+
Rflexion 360 Think mobile first Une dmarche saine qui invite des choix Et dbouche sur une vision claire
Mais
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 sparation ni de fusion) Support uniquement par les navigateurs rcents 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)
62
Accs multi-terminal Ergonomie optimise Efficacit optimale Image de modernit Une seule adresse internet Evolutif Un seul back office

3. 6. Applications
APPLICATIONS
Les tapes de cration dune application dbutent par les crans

1 Site mobiles Site Mobile Mobile
Ecrans
Cration des crans
Back-office de gestion de contenus (CMS, e-commerce, portail)
La cration dune application dbute galement par les crans. Nanmoins, dans le cadre dune application, le champ des possibilits est plus large que pour les sites ou webapps dun point de vue ergonomique, graphique mais aussi fonctionnel.
SI Mtier (CRM, ERP, BI, spcifique, etc.)
Cette phase de cration des crans sera prcder dune phase de conception rellement pousse afin de permettre ensuite la cration dcrans totalement ddis.
64
APPLICATIONS
Puis les dveloppements et lintgration

Ecrans Site mobiles Site
Cration des crans

Dveloppements spcifiques mobiles (cross-platform)
Mobile Mobile
3 Back-office de gestion de contenus (CMS, e-commerce, portail)

Dveloppements spcifiques mobiles
Intgration des webservices
Webservices
3 2
La partie dveloppement est totalement spcifique au mobile. Plusieurs approches sont disponibles, dont le cross-platform que nous dveloppons dans la partie suivante de ce guide. Lintgration, dynamisation des contenus et mise en place de fonctions transactionnelles passera dans une trs grande majorit des cas par des webservices.
65
APPLICATIONS
Packaging et dploiement
Ecrans Site mobiles Site
Cration des crans
Dveloppements spcifiques mobiles (cross-platform)
Mobile Mobile
Intgration des webservices
Webservices
Back-office de gestion de contenus (CMS, e-commerce, portail)
Dveloppements spcifiques mobiles
Packaging, et dveloppements spcifiques par OS
Distribution sur les stores
66
APPLICATIONS
Conception : le fonctionnel avant tout

Une vidence parfois oublie:
Une belle appli qui ne sert rien ou ne fonctionne pas bien sera dsinstalle Une appli utile mais moche sera critique mais utilise 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 lutilisateur sont chres, donc:
Pensez simple, efficace, intuitif Prparez vous la faire voluer, riposter Offrez des possibilits de personnalisation cest--dire permettre dadapter lapplication aux usages individuels Nutilisez une fonctionnalit que si elle apporte vraiment quelque chose (acclromtre, facebook connect, son, camra, golocalisation), lpoque des gadgets est rvolue Pensez aux situations dusage et aux objets / services concurrents
Si vous ne rendez pas un service trs spcifique voire unique, vous devrez faire mieux que les autres, notamment les acteurs couvrant un primtre plus large:
Une application de news sera concurrence par les agrgateurs de flux dont cest le cur de mtier (ex: Pulse) Une application donnant les sances de cinma pour une enseigne ou une ville sera concurrence par lincontestable leader: Allocin De mme pour un agent immobilier avec SeLoger.com
67
APPLICATIONS
Dveloppements : les spcificits du mobile

Multiplicit des OS: un dveloppement 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 ide (cf. partie suivante)
Nouvelles fonctionnalits dites natives prendre en main:

APN, gyroscope, vibreur, GPS Type de connexion, mise en veille, tche de fond, rveil, stockage local, synchronisation, consommation API externes (Google Maps, Facebook, etc.)
Limpact du rseau:
Toute application connecte sera dpendante du rseau mais devra tre capable de fonctionner dans des conditions dgrades La conception technique dune application mobile implique de grer une multitude de cas la marge:
Jai lanc une synchro, qui sest arrte en route Pas de rseau et des infos non jour, que dois-je afficher ? Connexion en EDGE, comment optimiser lexprience utilisateur Je dois afficher une carte, mais je ne capte pas le signal du GPS Le webservice ne rpond pas Etc.
68
APPLICATIONS
Tests et recette : rester pragmatique

Dveloppements sur simulateurs:
Les dveloppements tant raliss dans des simulateurs et le fonctionnel dune appli mobile tant souvent dcoup en cran/fonction, les premiers tests unitaires peuvent tre mens tout au long du projet Certains outils de dveloppements (PhoneGap par exemple) sont ancrs dans une logique trs web et permettent galement de tester lapplication 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 lexhaustivit des terminaux est impossible:

Les mulateurs ne sont pas forcment une approche valable notamment de part labsence des fonctionnalits natives, labsence des alas rseau et une puissance de calcul non quivalente Des solutions de tests distance (terminaux physiques mis dispositions et pilots distance) existent mais les contraintes de disponibilit, labsence dinformations sur les relles conditions dusage et le manque de flexibilit nen font pas une rponse adapte la problmatique 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 Labsence de fonctions trop exotiques limite galement les mauvaises surprises Les conditions de tests doivent tre le plus proche possible des situations dusage escomptes:
Terminaux non jailbreaks (dvrouillage de lOS) Niveau du rseau quil sagisse dune application ayant vocation tre utilise en extrieur ou dans les transports Prise en compte du soleil pour le design, de lusage une main, dune utilisation en public
Quelque soit la solution et le temps pass en recette, il y aura toujours des surprises! Celles-ci seront loccasion de faire voluer lapplication et de tenir compte des diffrents retours!
69
APPLICATIONS
Validation et distribution
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 ds la phase de conception de lapplication Sur iOS, process le plus long, il faut compter jusqu 3 semaines Anticiper la distribution: Crer les comptes en avance Trouver un titre, identifier la catgorie, les concurrents directs Prparer les descriptifs (captures dcran, descriptions) Benchmarker les mots cls et les recherches Rfrencement et tops: La prsence sur les stores ne garantit en rien la visibilit dune appli, son indexation est donc primordiale Mais les moteurs de recherche des stores sont encore en volution et les critres restent trs opaques, nanmoins, quelques ides : Mentionner des applis complmentaires et populaires Intgrer des mots clefs dans le titre de lapplication Eviter les noms trop conceptuels Une prsence prolonge dans les tops 50 domins par les jeux et les pure players est globalement inesprable mais connatre les rgles reste utile: iOS: rgles opaques, bases priori sur les tlchargements (sur une priode donne) et sur les notes des utilisateurs Android: tout aussi opaque mais prenant en compte le nombre et la qualit des notes, le nombre dinstallations ET des dsinstallations, les statistiques dusage, la croissance du nombre de tlchargements et la prennit de ces volumes Effectuer des mises jour permet de remonter lapplication dans les nouvelles applications
70
APPLICATIONS
Un effort dans la dure

Un projet dapplication mobile ne sarrte pas lors du lancement sur les stores. Lecosystme 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 lutilisation (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 relies tout un cosystme (Facebook, Google Maps) qui volue constamment Les OS sont aussi rgulirement mis jour et chaque fois des tests simposent
Campagne Socit Gnrale Source: 20 Minutes
71

3. 7. WebApp
WEBAPP
Les spcificits
WebApp Site Mobile Site
Cration des crans Dveloppement spcifiques mobile Intgration au back office de gestion de contenus Intgration de contenus ddis mobile Paramtrage du back office et dploiement
2 2
Site Web
Mobile Mobile
3 3 3 4
Les tapes pour le dveloppement dune webapp sont globalement les mmes que pour un site mobile. Elle ncessite nanmoins certains dveloppements spcifiques et surtout une approche trs diffrente sur sa construction (cf. pages suivantes)
73
WEBAPP
Les technologies utilises
HTML5
Stockage local
session storage / local storage base de donne locale App Cache
Web smantique avec de nouvelles balises: section, article, aside, header, footer, nav Balises video, audio, canvas
CSS3
Effets Transitions Styles pousss sans image
JavaScript
Cur de lapplication
74
WEBAPP
Les limites
Techno non encore standardise
Ncessite un navigateur rcent et tous les navigateurs ne ragissent pas encore de la mme faon Un paysage voluant constamment, cf. niveau de compatibilits sur http://caniuse.com/
Des adaptations de style prvoir selon les navigateurs et OS

Pour IE et Windows Phone notamment
Mais des Polyfills (contournements) sont utilisables

Des bibliothques pour amener le futur dans le pass ! En apportant un support partiel ou un mode dgrad des fonctionnalits HTML5 non supportes par des navigateurs anciens
75
WEBAPP
Une solution pour demain ?
Un exemple: le Financal Times qui a quitt lappstore (en mettant en place sa webapp accessible depuis le web): Pourquoi fuir lAppstore 30% de commissions Apple Pas daccs direct au client (ni ses donnes) Est-ce efficace ? Deux millions dutilisateurs 12% des abonnement payants, 19% du trafic des utilisateurs ont ajout licne au bureau Loption webapp et donc la sortie du business model des stores permet : Dviter la taxation en cas de montisation de contenus Doffrir des contenus plus volutifs sans avoir passer par des mises jour Une compatibilit thorique avec tous les OS Pour demain: Logique de client lger local moderne et particulirement adapte Des fonctionnalits nouvelles tous les jours bientt laccs aux API natives (Projet WebApi de Mozilla) Mais: Des performances encore infrieures des applications natives
76
SOMMAIRE
1. Paysage actuel 2. Dmarche: pourquoi et quoi faire ? 3. Dmarche: comment faire ? 4. Le "cross-platform
1. 2. 3. 4.
Principe Ergonomie et design Dveloppements et solutions cross-platform : Phonegap et Titanium Retours d'exprience techniques
5. Lapproche de Smile
77
4. Le "cross-platform"
4. 1. Principe
CROSS-PLATFORM
Principe
Il faut veiller ce que le site mobile et/ou lapplication soit compatible avec les diffrents OS disponibles sur le march. Sur terminaux mobiles, chaque OS correspond un langage, des rgles de compatibilit, un SDK (kit de dveloppeur) et un processus de distribution spcifique Les solutions cross-platform open source (aussi appeles multi-plateformes) telles que Titanium ou PhoneGap, visent rpondre la problmatique de labsence de standards de dveloppement dans le monde du mobile.
Multiplicit des OS Evolution rapide du parc Htrognit des langages Non stabilisation des OS Caractre propritaire et ferm Absence de standards Amlioration et standardisation du web mobile Business-model des applications verrouill 1.
Dilemme
Investir dans des dveloppements natifs sur mobile parait de moins en moins pertinent par manque de: Prennit Maintenabilit Rversibilit Couts
Contexte
2.
Sorienter vers des solutions cross-platform: Viser plusieurs OS en 1 dveloppement, cest LA promesse des outils de dveloppement cross-platform Utiliser des langages issus du web, standardiss et prennes Choisir des solutions open-source Opter pour du web mobile ou des webapp: Langages universels Couverture thorique de tous les OS Libert du business model, absence dintermdiaire 79
Solution
4. 2. Ergonomie et design
ERGONOMIE ET DESIGN
Et lexprience utilisateur ?
Malgr les carts dapparence parfois constats entre des applications iOS et Android les applications cross-platforms peuvent ltre avec une seule ergonomie et design Les ergonomies mobiles et tactiles sont encore trs varies mais des principes sont devenus universels: Un large dnominateur 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 dergonomie voqus 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 dgagent entre ces OS Certaines librairies / framework ont fait leur preuve : sencha, jquery Mais le mieux reste de dfinir soit mme en CSS3 sa propre charte !
Exemple issus de Sencha et jQuery
81
ERGONOMIE ET DESIGN
Exemples dergonomies cross-platform : Facebook et Allocin
82
4. 3. Dveloppements et solutions cross-platform : Phonegap et Titanium
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP et TITANIUM

Part de spcifique vs tronc commun
La promesse : Un seul code n plateformes cibles Simple maintenir et faire voluer
Deux outils choisis par Smile
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 dveloppement: Si le dveloppement dune appli native ncessite Y , le dveloppement de la mme appli en natif pour n OS coutera approximativement n x Y Le mme dveloppement en cross-platform coutera entre (n x Y) / n et (n x Y) / (n / 2) selon les spcificits des fonctionnalits utilises (ex: calibrage du gyroscope, utilisation de la camra, etc.) Autrement dit, le cross-platform est financirement intressant au-del du deuxime OS, mais ds le dpart il assure une bonne prennit et maintenabilit du code
84
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP et TITANIUM

PhoneGap (Cordova) : le packageur
PhoneGap utilise le moteur de rendu HTML / CSS / JavaScript du navigateur natif de la plateforme cible.
Poids des applications lger Moteurs d'excution et de rendu dj intgrs Nombreuses plateformes supportes
Diffrences de moteurs entre certains terminaux, induisant un travail dadaptation des prsentations
Les applications mobiles de Wikipedia ont t dveloppes avec PhoneGap
La NASA utilise PhoneGap pour son application iPad Nasa Science
85
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP ET TITANIUM

Titanium : le traducteur
Titanium est un kit de dveloppement prouv pour crer des applications natives iOS et Android.
Maturit du projet Communaut Spcialis dans le rendu natif des interfaces Applications puissantes et rapides en comparaison dautres outils cross-platform Applications natives Montage des application complexe Difficult sloigner du rendu natif des interfaces
86
DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP ET TITANIUM

Les tests cross-platform : communs et particuliers Des montages et dveloppements tests sur navigateur web
Pour une plus grande simplicit de dbogage et de dploiement
Des tests sur simulateurs

Pour que les tests sur matriel ne soient quune validation
Des tests sur matriel

A chaque version il faut gnrer lapplication pour chaque OS Croisements OS, versions et terminaux avec ciblage pragmatique Tests unitaires sur terminaux durant la phase de dveloppement
Des tests on the fly pour le client (TestFlightApp pour iOS, dpt web pour Android)
Pour viter leffet tunnel
87
4. 4. Retours d'exprience techniques
RETOURS D'EXPRIENCE TECHNIQUES

PhoneGap (Apache cordova) Des -
Des interfaces non-natives, privilgier des interfaces uniformes entre les OS Se mfier des librairies graphiques (type jQuery Mobile) dont il est difficile de sortir. Mieux vaux sen passer et faire un montage et une cration graphique ddie Un outil trs complet, mais bien sr en cours de dveloppement. De nouvelles fonctionnalits sont supportes au fur et mesure 7 plateformes supportes : un gain de temps considrable Une prise en main rapide : dveloppement JS, HTML5, CSS3 Une grande libert : plugins, JS, etc. Outil PhoneGap Build qui peut se charger de la gnration des applis (mais le code est dans le cloud)
Des +

89
RETOURS D'EXPRIENCE TECHNIQUES

Titanium Des -
Seulement 2 plateformes supportes, mais les principales : iOS, Android Un manque doutil de gestion dinterface/layout Des mises jour qui peuvent impacter lourdement les dveloppements (une application dveloppe avec Titanium 1.5 ne compilera pas sous Titanium 2.0) La documentation Des interfaces natives De nombreuses fonctionnalits gres par le SDK (Push, intgration Facebook, etc.) Une communaut active et des plugins
Des +

90
SOMMAIRE
1. Paysage actuel 2. Dmarche: pourquoi et quoi faire ? 3. Dmarche: comment faire ? 4. Le "cross-platform 5. Lapproche de Smile
1. Prsentation 2. L'approche sur mobile
91
5. L'approche de Smile
5. 1. Prsentation de Smile
PRSENTATION DE SMILE
Une vision
simple, utile & performant 21 ans dexprience

1er intgrateur de solutions open source en Europe
45
8 8
CA 2012 M
+20% de croissance agences en France
Paris Lyon Nantes Bordeaux Montpellier Marseille Lille Grenoble
Plusieurs mtiers
Agence interactive Ingnierie Internet Conseil et AMOA Design & Graphisme /SEO Maintenance (TMA) Hbergement & exploitation Formation
Plusieurs gammes de solutions

Gestion de contenu Portails Dveloppement spcifique E-Commerce ERP/ CRM GED/BPM Mobile Dcisionnel Systme & Infrastructure RSE
agences internationales
Genve Barcelone Casablanca Kiev / Kharkov Amsterdam / Utrecht Bruxelles
600
Collaborateurs
93
Quelques-unes de nos rfrences 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
L'APPROCHE SUR MOBILE

Une approche oriente vers l'avenir
En tant que spcialiste de lopen-source Smile a adopt sur mobile un positionnement assez spcifique avec pour objectif de garantir ses clients les avantages et la philosophie de lopen-source:
Standardisation Accessibilit / lisibilit du code Outils volutifs Langages universels Etude et suivi de nombreux outils, pour finalement sarrter sur:
PhoneGap Titanium Sencha jQuery / jQuery Mobile (mme si quelques bmols sur ce dernier en terme de performance notamment)
En pratique, Smile a investi en R&D afin de concrtiser ce positionnement:
Dveloppement dune expertise ergonomique et graphique volontairement neutre
En tant que leader de lintgration de projets web, nous restons convaincus que lavenir du mobile passera majoritairement par le web, sous forme de sites mobile, de sites en full responsive design et surtout de webapp HTML5:
Fortes comptences HTML5, CSS3, JS Expertise fonctionnelle oriente usages Ergonomie et design aux services de lutilisation Approche technique et fonctionnelles cross-canal
95
L'APPROCHE SUR MOBILE

La technique au service de lutilisabilit... sur le mobile aussi
La fin de lpoque des projets jetables ou pour voir
Investissements plus consquents entrainant des approches plus ROIstes Enjeux techniques plus levs ds lors quil faut authentifier, renseigner, informer dynamiquement, acheter, etc.
Des projets de plus en plus intgrs (contenus, SI mtiers, Api externes) et complexes qui ncessitent :
Un expertise transverse du web Des comptences techniques varies (back office, intgration, interfaage, scurisation) Des mthodologies projets prouves Un partenaire solide
Opter pour une approche du mobile raisonne et pragmatique via le cross-platform Rconcilier la crativit, lergonomie et le graphisme avec la technique via un acteur intgrant les deux sensibilits
96

LB - Smile - Guide Du Chef de Projet Mobile PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

LB - Smile - Guide Du Chef de Projet Mobile PDF

Transféré par

Droits d'auteur :

Formats disponibles

Prambule

1. Chiffres cls et tendances 2. Fragmentation toujours leve 3. Synthse

CHIFFRES CLS ET TENDANCES

Motorola DynaTAC 8000x (1983)

Nokia 3210 et 3310 (1999)

Blackberry 5790 (2000)

Motorola Razr V3 (2005)

Apple iPhone 1 (2007)

Ce canal sera bientt dominant, en nombre de connexion dans le monde

Dans le monde, en 2014, Internet sera majoritairement mobile en nombre de connexion

CHIFFRES CLS ET TENDANCES

Source: Mdiamtrie Daprs Google/Ipsos, on compterait 55% de mobinautes quotidiens

CHIFFRES CLS ET TENDANCES

Partout et tout le temps

Prs de 50% ont moins de 35 ans

Source : IPSOS et CETELEM

CHIFFRES CLS ET TENDANCES

Un phnomne de Blockbusterisation (concentration des usages)

Plbiscites pour les utilisateurs et prsentes en trs grand nombre

Le top 10 des applications Android concentre 43 % de tout le temps pass

Des applications considres comme jetables ou Kleenex

aux dures de vie trs phmres:

CHIFFRES CLS ET TENDANCES

Mais leur exprience actuelle est encore globalement dceptive (US)

FRAGMENTATION TOUJOURS LEVE

FRAGMENTATION TOUJOURS LEVE

FRAGMENTATION TOUJOURS LEVE

Problmatique modle et marque

Pour autant les OS et navigateurs sont toujours trop htrognes:

FRAGMENTATION TOUJOURS LEVE

Autres (dont Bada) Windows Blackberry Symbian Android iOS

3. Dmarche: comment faire ? 4. Le "cross-platform 5. Lapproche de Smile

2. Dmarche: pourquoi et quoi faire ?

DFINITION DES OBJECTIFS ET STRATGIES

DFINITION DES OBJECTIFS ET STRATGIES

DFINITION DES OBJECTIFS ET STRATGIES

DFINITION DES OBJECTIFS ET STRATGIES

DFINITION DES OBJECTIFS ET STRATGIES

2. Dmarche: pourquoi et quoi faire ?

SITE MOBILE OU APPLICATION ?

Site Web / URL connue Rponse rapide

Classification Notorit marque

Comment ils reviennent sur votre service

SITE MOBILE OU APPLICATION ?

SITE MOBILE OU APPLICATION ?

2. Dmarche: pourquoi et quoi faire ?

UNE SOLUTION INTERMDIAIRE : LA WEBAPP

SYNTHSE DES TROIS APPROCHES

Visible sur les stores Mode dconnect Fonctions natives

Accessible via lURL actuelle Flexible Plus conomique

Installation Gestion des diffrents OS Evolution via mise jour

SYNTHSE DES TROIS APPROCHES

4. Le "cross-platform 5. Lapproche de Smile

3. Dmarche: comment faire ?

CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE

Trois approches Dmarche projet Application WebApp (HTML5)

Etapes cls du projet

Intgration au back office de gestion de contenus Paramtrage du back office et dploiement

Packaging, et adaptation aux OS

Distribution sur les stores

CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE

Au service des usages et des objectifs du projet

3. Dmarche: comment faire ?