Download - LB_Smile_Guide du chef de projet Mobile.pdf

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


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)


6


+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


7


• > 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)


8


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


9


• 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


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


12


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


13


• 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


14

?

Parc France - Estimations Smile basées sur ComScore, GfK, IPSOS


• 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


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à…


17

SOMMAIRE

1. Paysage actuel


1. Définition des objectifs et stratégies 2. Site Mobile ou Application ? 3. Une solution intermédiaire : la WebApp





2. 1. Définition des objectifs et stratégies


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 »


20


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 »


21


• 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é


22


• 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


23


• 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. 2. Site Mobile ou Application ?


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


26


e-commerce

« besoin d’info »…

…contextualisées

réseaux sociaux

A adapter selon les usages


27

• Un exemple : « Paris Bouge » qui propose une version mobile de son site et une 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. 3. Une solution intermédiaire : la WebApp


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

http://www.openappmkt.com/


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é


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


32

SOMMAIRE

1. Paysage actuel


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




3. 1. Conception fonctionnelle, ergonomique et graphique


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


Intégration au back office de gestion de contenus

Paramétrage du back office et déploiement

Développements spécifiques « mobiles »




Packaging, et adaptation aux OS

Distribution sur les stores

Etap

es c

lés d

u pr

ojet

Trois approches – Démarche projet


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. 2. Focus sur la conception fonctionnelle


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é


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. 3. Focus sur la conception ergonomique


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


41


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


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




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




44


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


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




46

Cacher le menu de navigation afin qu’il soit accessible à tout moment, sans pour autant occuper continuellement l’espace




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




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 »


Assurer la lisibilité


49


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

http://www.lukew.com/


50


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


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!


Tactile - gérer l’absence de pointeur


52


• 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


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


Sélection de données


3. 4. Site mobile


55

SITE MOBILE

Back-office de gestion de contenus

(CMS, e-commerce, portail, …)

Site Web

Site Mobile


…

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


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


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…


58

SITE MOBILE

Back-office de gestion de contenus (CMS, e-commerce, portail, …)

Site Web



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. 5. Zoom sur le Responsive Design


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


61

ZOOM SUR LE RESPONSIVE DESIGN

Back-office de gestion de contenus (CMS, e-commerce, portail, …)

Site Web.. tablette et mobile

Site

Mobile


…

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


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. 6. Applications


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


65




Web

serv

ices

Développements spécifiques « mobiles » (cross-platform)


Site

Mobile

Site

Mobile

Ecrans mobiles


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


66




Web

serv

ices

Développements

spécifiques mobiles

Développements spécifiques « mobiles » (cross-platform)


Site

Mobile

Site

Mobile

Ecrans mobiles


APPLICATIONS

Packaging, et développements spécifiques par OS

Distribution sur les stores 5

4

5

4

Packaging et déploiement


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


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


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


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


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. 7. WebApp


73

WEBAPP

Back-office de gestion de contenus

(CMS, e-commerce, portail, …)

Site Web

Développement spécifiques « mobile »



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


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


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

http://caniuse.com/


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 ?


77

SOMMAIRE

1. Paysage actuel



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


4. Le "cross-platform"

4. 1. Principe


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. 2. Ergonomie et design


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 ?


82

ERGONOMIE ET DESIGN

Exemples d’ergonomies cross-platform : Facebook et Allociné


4. 3. Développements et solutions cross-platform : Phonegap et Titanium


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


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


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


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. 4. Retours d'expérience techniques


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)


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


91

SOMMAIRE

1. Paysage actuel




5. L’approche de Smile 1. Présentation 2. L'approche sur mobile

5. L'approche de Smile

5. 1. Présentation de Smile


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


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


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