LB_Smile_Guide du chef de projet Mobile.pdf

Click here to load reader

  • date post

    22-Oct-2015
  • Category

    Documents

  • view

    18
  • download

    2

Embed Size (px)

Transcript of LB_Smile_Guide du chef de projet Mobile.pdf

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

    Prambule

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    3

    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. Le "cross-platform

    5. Lapproche de Smile

  • 1. Paysage actuel

    1. 1. Chiffres cls et tendances

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    5

    CHIFFRES CLS ET TENDANCES

    Bi-Bop (1990)

    Nokia 3210 et 3310 (1999)

    Motorola DynaTAC

    8000x (1983)

    Motorola Razr V3 (2005)

    Blackberry 5790

    (2000)

    Le mobile a dj 30 ans et est devenu au file des annes un canal incontournable. Voici quelques terminaux qui ont marqu l'histoire :

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

    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

    Apple iPhone 1

    (2007)

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    6

    CHIFFRES CLS ET TENDANCES

    +34%

    +100%

    En forte croissance (34% en 2011) et avec un parc de 20 millions de smartphones en France fin 2011, on est loin de la technologie de pointe et 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.

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

    Mobinaute = utilisateur de smartphone allant sur Internet (via navigateur ou application)

    Croissance du parc et intensification des usages en France

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    7

    CHIFFRES CLS ET TENDANCES

    > 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 !

    Source : IPSOS et CETELEM

    Partout et tout le temps

    Portrait du Mobinaute Donnes France Prs de 50% ont moins de 35 ans 8/10 habitent hors agglomration parisienne (vs. 3/4 lan dernier) 43% sont des femmes (vs. 40% lan dernier) (Source: Mdiamtrie)

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    8

    CHIFFRES CLS ET TENDANCES

    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

    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

    Un phnomne de Blockbusterisation (concentration des usages)

    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

    Source chiffres: Apple, Localytics, Flurry Analytics & Estimates

    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

    Applications - Des utilisateurs qui tlchargent, testent, et zappent

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    9

    CHIFFRES CLS ET TENDANCES

    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

    Mais leur exprience actuelle est encore globalement dceptive (US) 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

    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

    Web mobile - des utilisateurs exigeants Mais nombreux

  • 1. Paysage actuel

    1. 2. Fragmentation toujours leve

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    11

    FRAGMENTATION TOUJOURS LEVE

    Source : OpenSignalMaps

    Cette reprsentation montre de manire visuelle le niveau de fragmentation des terminaux pour lOS Android. Elle na pas vocation apporter dinformations chiffres

    Terminaux (sous Android) Un paysage trs fragment mais homognis grce Android

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    12

    FRAGMENTATION TOUJOURS LEVE

    Source : OpenSignalMaps

    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)

    Ecrans : des proportions similaires qui tendent diverger

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    13

    FRAGMENTATION TOUJOURS LEVE

    Terminaux du mieux ! 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

    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

    Problmatique modle et marque

    Problmatique OS et navigateur

    Terminaux, OS* et navigateurs : la problmatique se dplace des terminaux vers les OS *OS = operating system i.e. systme dexploitation

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    14

    ?

    Parc France - Estimations Smile bases sur ComScore, GfK, IPSOS

    FRAGMENTATION TOUJOURS LEVE

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

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

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

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    16

    SYNTHSE

    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

    Vos clients et utilisateurs vous attendent dj

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    17

    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

  • 2. Dmarche: pourquoi et quoi faire ?

    2. 1. Dfinition des objectifs et stratgies

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    19

    DFINITION DES OBJECTIFS ET STRATGIES

    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)

    Dfinition des objectifs business pour aller au del dune simple prsence

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    20

    DFINITION DES OBJECTIFS ET STRATGIES

    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

    Dfinition dune stratgie Pensons situation dusage

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    21

    DFINITION DES OBJECTIFS ET STRATGIES

    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

    Cas dentreprise : BNP Un dispositif complet et segment

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    22

    DFINITION DES OBJECTIFS ET STRATGIES

    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

    Cas dentreprise : E. Leclerc - Qui est le moins cher ? Une application marketing

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    23

    DFINITION DES OBJECTIFS ET STRATGIES

    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

    Cas dentreprise : VEOLIA L'eau chez vous : entre le marketing, le service et la rationalisation des contacts

  • 2. Dmarche: pourquoi et quoi faire ?

    2. 2. Site Mobile ou Application ?

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    25

    SITE MOBILE OU APPLICATION ?

    Site mobile Application native

    Comment les utilisateurs vous

    trouvent

    Comment ils reviennent sur votre service

    Les fonctions Web, contenus, transactions, paiement par CB, 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

    = =

    Enjeux SEO Site Web / URL connue

    Notorit marque

    Classification

    Cohrence

    Tops !

    Rponse rapide

    + Navigateur Moteur Logique dannuaire Stores

    Logique de rayons

    Favoris ou raccourci (icne standard ou personnalise)

    Icne

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    26

    SITE MOBILE OU APPLICATION ?

    e-commerce

    besoin dinfo

    contextualises

    rseaux sociaux

    A adapter selon les usages

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    27

    Un exemple : Paris Bouge qui propose une version mobile de son site et une application

    SITE MOBILE OU APPLICATION ?

    Le site mobile fournit les informations ET invite tlcharger lapplication via un lien vers le store (ici

    exemple Android)

    Objectif: conqute Adresser une demande prcise et urgente

    Site mobile Installation application Application

    Objectif: fidlisation Simplifier la vie et offrir le service dans les meilleures

    conditions

    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 .

    Idalement les deux !

  • 2. Dmarche: pourquoi et quoi faire ?

    2. 3. Une solution intermdiaire : la WebApp

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    29

    UNE SOLUTION INTERMDIAIRE : 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

    Prsentation de la WebApp

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    30

    SYNTHSE DES TROIS APPROCHES

    Application WebApp (HTML5) WebMobile

    Visible sur les stores Mode dconnect Fonctions natives

    Installation Gestion des diffrents OS Evolution via mise jour

    +

    -

    Accessible via lURL actuelle Mode dconnect une fois installe Flexible

    Ncessite terminaux rcents Fonctions limites (pas

    daccs aux fonctions natives du terminal)

    Accessible via lURL actuelle Flexible Plus conomique

    Connexion indispensable (3G/Wifi) Fonctions limites (pas

    daccs aux fonctions natives du terminal)

    L approche slectionne devra avant tout rpondre au besoin identifi

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    31

    SYNTHSE DES TROIS APPROCHES

    Possibilits fonctionnelles et techniques

    Applications Webapp HTML5 Web Mobile

    Appareil photo numrique, gyroscope, carnet de contacts, calendrier, vibreur, compas, tat du rseau, push de notifications Oui Non Non

    Golocalisation Oui Oui Oui

    Fonctionnement hors connexion Oui Oui Non

    Stockage de grande quantits de donnes (systme de fichiers) Oui Non Non

    Accs aux applications natives (lies 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 dun jeu par exemple) Oui Non Non

    Animations, gaphismes avancs Oui Oui Oui

    Vido, son, images Oui Oui Oui

    Accs via URL Non Oui Oui

    Accs via stores Oui Non Non

    Chargment en une seule fois Oui Oui Non

    Mise jours type web Non Oui Oui

    Mise jour via les stores Oui Non Non

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    32

    SOMMAIRE

    1. Paysage actuel

    2. Dmarche: pourquoi et quoi faire ?

    3. Dmarche: comment faire ? 1. Conception fonctionnelle, ergonomique et graphique 2. Focus sur la conception fonctionnelle 3. Focus sur la conception ergonomique 4. Site mobile 5. Zoom sur le responsive design 6. Applications 7. WebApp

    4. Le "cross-platform

    5. Lapproche de Smile

  • 3. Dmarche: comment faire ?

    3. 1. Conception fonctionnelle, ergonomique et graphique

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    34

    CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE

    Application WebApp (HTML5) Site Mobile

    Cration des crans

    Conception Fonctionnelle Ergonomique Graphique

    Dveloppements spcifiques mobiles (potentiellement en cross-platform)

    Intgration des webservices

    Cration des crans

    Intgration au back office de gestion de contenus

    Paramtrage du back office et dploiement

    Dveloppements spcifiques mobiles

    Cration des crans

    Intgration au back office de gestion de contenus

    Paramtrage du back office et dploiement

    Packaging, et adaptation aux OS

    Distribution sur les stores

    Etap

    es c

    ls d

    u pr

    ojet

    Trois approches Dmarche projet

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    35

    CONCEPTION FONCTIONNELLE, ERGONOMIQUE ET GRAPHIQUE

    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

    Au service des usages et des objectifs du projet

    Design

    Ergonomie

    Contenu

    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

    Objectif

    Prendre le sujet dans le bon sens

  • 3. Dmarche: comment faire ?

    3. 2. Focus sur la conception fonctionnelle

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    37

    FOCUS SUR LA CONCEPTION FONCTIONNELLE

    Le choix des informations et 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)

    Typologie des usages en mobilit

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    38

    FOCUS SUR LA CONCEPTION FONCTIONNELLE

    Le site web de Krys est 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

    Exemple de site mobile ddi : Krys Des fonctionnalits cls

  • 3. Dmarche: comment faire ?

    3. 3. Focus sur la conception ergonomique

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    40

    Bruits, mouvements, ensoleillement 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 :

    FACILE

    ACCEPTABLE

    DIFFICILE

    Lutilisateur de smartphone est un pouce et un il

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    A garder en tte

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    41

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Les liens prennent trop de place. Laissez 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

    Privilgier le contenu aux liens 1/3

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    42

    Evitez les barres de navigation sandwich car elles occupent un espace de visibilit prcieux sans que leur utilit soit garantie Un accs lensemble des catgories / rubriques depuis toutes les pages nest pas utile

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Privilgier le contenu aux liens 2/3

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    43

    Facilitez les poursuites de lecture l o elles sont pertinentes (dans leur contexte), via des liens intelligemment placs aprs le contenu Laisser toujours le choix lutilisateur de poursuivre ou dinterrompre sa lecture

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Privilgier le contenu aux liens 3/3

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    44

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Les utilisateurs sur mobile sont peu conciliants, 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

    Concevoir une charte de navigation simple 1/4

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    45

    Le bouton Retour (back de 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)

    OUI

    NON

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Concevoir une charte de navigation simple 2/4

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    46

    Cacher le menu de navigation afin quil soit accessible tout moment, sans pour autant occuper continuellement lespace

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Concevoir une charte de navigation simple 3/4

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    47

    Utiliser la barre fixe dans le cas 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

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Concevoir une charte de navigation simple 4/4

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    48

    Rendre les textes lisibles avec des tailles de 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

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Assurer la lisibilit

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    49

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Les smartphones sont 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 :

    Tactile - Choisir les bons gestes

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    50

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    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)

    Tactile - comment utiliser les gestes

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    51

    Pas de pointeur = pas de survol (roll-over) Les interactions disponibles via le survol dans les sites classiques doivent tre totalement 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!

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Tactile - grer labsence de pointeur

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    52

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Ne garder que ce qui est essentiel et supprimer le reste 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

    Malgr les innovations sur les claviers, la reconnaissance dcriture ou autre technologie, la saisie sur Smartphone reste dlicate et doit donc tre simplifie

    Saisie sur mobile

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    53

    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

    Autant que possible, remplacer la saisie dune donne par la slection

    FOCUS SUR LA CONCEPTION ERGONOMIQUE

    Slection de donnes

  • 3. Dmarche: comment faire ?

    3. 4. Site mobile

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    55

    SITE MOBILE

    Back-office de gestion de contenus

    (CMS, e-commerce, portail, )

    Site Web

    Site Mobile

    Cration des crans

    Le site web mobile sappuiera gnralement sur le mme back-office et de prfrence les mmes contenus que le site classique.

    1

    La premire tape de dveloppement du site mobile sera la cration des crans

    Site

    Mobile

    Site

    Mobile

    Les tapes de cration dun site mobile dbutent par les crans

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    56

    SITE MOBILE

    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

    Gabarits ddis: 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

    Ecrans totalement spcifiques: On construit les crans de bout en bout et on peut donc slectionner les contenus

    mettre en avant ou non

    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

    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:

    Cration des crans : options et contraintes

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    57

    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

    SITE MOBILE

    Cration des crans : problmatique de compatibilit des navigateurs

    Retour lpoque o il fallait grer des navigateurs trs diffrents

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    58

    SITE MOBILE

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

    Site Web

    Intgration au back office de gestion de contenus

    Paramtrage du back office et dploiement

    Intgration de contenus ddis mobile

    Cration des crans 1

    2

    2

    3

    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.

    Site

    Mobile

    Site

    Mobile

    Site

    Mobile

    1

    2

    2

    3

    Intgration et dploiement

  • 3. Dmarche: comment faire ?

    3. 5. Zoom sur le Responsive Design

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    60

    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

    60

    ZOOM SUR LE RESPONSIVE DESIGN

    Desktop Tablette Smartphone

    Principe du Responsive Design

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    61

    ZOOM SUR LE RESPONSIVE DESIGN

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

    Site Web.. tablette et mobile

    Site

    Mobile

    Cration des crans

    1

    Site Mobile

    Site

    Mobile

    Colo

    nne

    1 Bloc 1

    Colo

    nne

    2

    Bloc 2 Colo

    nne

    3

    1

    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.

    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.

    Cration des crans avec le Responsive Design

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    62

    Accs multi-terminal Ergonomie optimise Efficacit optimale Image de modernit Une seule adresse internet Evolutif Un seul back office

    Rflexion 360 Think mobile first Une dmarche saine qui invite des choix Et dbouche sur une vision claire

    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)

    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)

    + Mais

    FOCUS SUR LE RESPONSIVE DESIGN

    Le Responsive Design : avantages / inconvnients

  • 3. Dmarche: comment faire ?

    3. 6. Applications

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    64

    APPLICATIONS

    Back-office de gestion de

    contenus (CMS, e-commerce, portail)

    SI Mtier (CRM, ERP, BI, spcifique, etc.)

    1 Cration des crans

    Site

    Mobile

    Site

    Mobile

    Ecrans mobiles

    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. Cette phase de cration des crans sera prcder dune phase de conception rellement pousse afin de permettre ensuite la cration dcrans totalement ddis.

    Les tapes de cration dune application dbutent par les crans

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    65

    Back-office de gestion de

    contenus (CMS, e-commerce, portail)

    SI Mtier (CRM, ERP, BI, spcifique, etc.)

    Web

    serv

    ices

    Dveloppements spcifiques mobiles (cross-platform)

    Intgration des webservices

    Site

    Mobile

    Site

    Mobile

    Ecrans mobiles

    Cration des crans

    2

    3

    2

    3

    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.

    APPLICATIONS

    Puis les dveloppements et lintgration

    Dveloppements spcifiques mobiles

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    66

    Back-office de gestion de

    contenus (CMS, e-commerce, portail)

    SI Mtier (CRM, ERP, BI, spcifique, etc.)

    Web

    serv

    ices

    Dveloppements

    spcifiques mobiles

    Dveloppements spcifiques mobiles (cross-platform)

    Intgration des webservices

    Site

    Mobile

    Site

    Mobile

    Ecrans mobiles

    Cration des crans

    APPLICATIONS

    Packaging, et dveloppements spcifiques par OS

    Distribution sur les stores 5

    4

    5

    4

    Packaging et dploiement

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    67

    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

    APPLICATIONS

    Conception : le fonctionnel avant tout

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    68

    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.

    APPLICATIONS

    Dveloppements : les spcificits du mobile

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    69

    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!

    APPLICATIONS

    Tests et recette : rester pragmatique

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    70

    Validation par les stores : Selon les OS, le process de validation est plus ou moins opaque, long, complexe, changeant et incertain Certaines conditions peuvent avoir un impact majeur 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

    APPLICATIONS

    Validation et distribution

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    71

    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

    APPLICATIONS

    Campagne Socit Gnrale Source: 20 Minutes

    Un effort dans la dure

  • 3. Dmarche: comment faire ?

    3. 7. WebApp

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    73

    WEBAPP

    Back-office de gestion de contenus

    (CMS, e-commerce, portail, )

    Site Web

    Dveloppement spcifiques mobile

    Intgration au back office de gestion de contenus

    Paramtrage du back office et dploiement

    Intgration de contenus ddis mobile

    Cration des crans 1

    2

    3

    3

    4

    Site

    Mobile

    Site

    Mobile

    WebApp Mobile

    1 2

    3

    4

    3

    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)

    Les spcificits

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    74

    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

    WEBAPP

    Les technologies utilises

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    75

    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/

    WEBAPP

    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

    Les limites

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    76

    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

    WEBAPP

    Une solution pour demain ?

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    77

    SOMMAIRE

    1. Paysage actuel

    2. Dmarche: pourquoi et quoi faire ?

    3. Dmarche: comment faire ?

    4. Le "cross-platform 1. Principe 2. Ergonomie et design 3. Dveloppements et solutions cross-platform : Phonegap et Titanium 4. Retours d'exprience techniques

    5. Lapproche de Smile

  • 4. Le "cross-platform"

    4. 1. Principe

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    79

    CROSS-PLATFORM

    Multiplicit des OS Evolution rapide du parc 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

    Investir dans des dveloppements natifs sur mobile parait de moins en moins pertinent par manque de:

    Prennit Maintenabilit Rversibilit Couts

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

    2. Opter pour du web mobile ou des webapp: Langages universels Couverture thorique de tous les OS Libert du business model, absence dintermdiaire

    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.

    Principe

    Con

    text

    e

    Dile

    mm

    e

    Solu

    tion

  • 4. Le "cross-platform"

    4. 2. Ergonomie et design

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    81

    ERGONOMIE ET DESIGN

    Malgr les carts 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

    Et lexprience utilisateur ?

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    82

    ERGONOMIE ET DESIGN

    Exemples dergonomies cross-platform : Facebook et Allocin

  • 4. Le "cross-platform"

    4. 3. Dveloppements et solutions cross-platform : Phonegap et Titanium

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    84

    DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP et TITANIUM

    La promesse : Un seul code n plateformes cibles Simple maintenir et faire voluer

    En pratique :

    Des technos web : faciles prendre en main Un tronc commun (80% du code) Des adaptations faire pour chaque plateforme cible : gestion du bouton retour pour Android et

    Windows Phone, Push de notifications

    Estimation de charge de 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

    Deux outils choisis par Smile

    Part de spcifique vs tronc commun

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    85

    DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP et TITANIUM

    PhoneGap utilise le moteur de rendu HTML / CSS / JavaScript du navigateur natif de la plateforme cible.

    + - Poids des applications 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

    PhoneGap (Cordova) : le packageur

    La NASA utilise PhoneGap pour son application iPad Nasa Science

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    86

    Titanium est un kit de 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

    Titanium : le traducteur

    DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP ET TITANIUM

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    87

    DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM : PHONEGAP ET TITANIUM

    Des montages et 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

    Les tests cross-platform : communs et particuliers

  • 4. Le "cross-platform"

    4. 4. Retours d'exprience techniques

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    89

    RETOURS D'EXPRIENCE TECHNIQUES

    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 Des +

    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)

    PhoneGap (Apache cordova)

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    90

    RETOURS D'EXPRIENCE TECHNIQUES

    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 + Des interfaces natives De nombreuses fonctionnalits gres par le SDK (Push, intgration Facebook, etc.) Une communaut active et des plugins

    Titanium

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    91

    SOMMAIRE

    1. Paysage actuel

    2. Dmarche: pourquoi et quoi faire ?

    3. Dmarche: comment faire ?

    4. Le "cross-platform

    5. Lapproche de Smile 1. Prsentation 2. L'approche sur mobile

  • 5. L'approche de Smile

    5. 1. Prsentation de Smile

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    93

    agences en France Paris Lyon Nantes Bordeaux Montpellier Marseille Lille Grenoble

    agences internationales Genve Barcelone Casablanca Kiev / Kharkov Amsterdam / Utrecht Bruxelles

    CA 2012 M +20% de croissance Plusieurs mtiers

    Agence interactive Ingnierie Internet Conseil et AMOA Design & Graphisme /SEO Maintenance (TMA) Hbergement & exploitation Formation

    600 Collaborateurs

    21 ans dexprience 1er intgrateur de solutions open source en Europe

    Une vision simple, utile & performant

    8 45

    Plusieurs gammes de solutions Gestion de contenu Portails Dveloppement spcifique E-Commerce ERP/ CRM GED/BPM Mobile Dcisionnel Systme & Infrastructure RSE

    8

    PRSENTATION DE SMILE

    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

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    95

    L'APPROCHE SUR MOBILE

    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

    En pratique, Smile a investi en R&D afin de concrtiser ce positionnement: 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) 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

    Une approche oriente vers l'avenir

  • Edition Septembre2012 Copyright Smile Open Source Solutions Toute reproduction interdite sans autorisation

    96

    L'APPROCHE SUR MOBILE

    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

    La technique au service de lutilisabilit... sur le mobile aussi

    Diapositive numro 1D'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.SommaireDiapositive numro 4Chiffres cls et tendancesChiffres cls et tendancesChiffres cls et tendancesChiffres cls et tendancesChiffres cls et tendancesDiapositive numro 10Fragmentation toujours leveFragmentation toujours leveFragmentation toujours leveFragmentation toujours leveDiapositive numro 15SynthseSommaireDiapositive numro 18Dfinition des objectifs et stratgiesDfinition des objectifs et stratgiesDfinition des objectifs et stratgiesDfinition des objectifs et stratgiesDfinition des objectifs et stratgiesDiapositive numro 24Site Mobile ou Application ?Site Mobile ou Application ?Site Mobile ou Application ?Diapositive numro 28Une solution intermdiaire : la WebAppSynthse des trois approchesSynthse des trois approchesSommaireDiapositive numro 33Conception fonctionnelle, ergonomique et graphiqueConception fonctionnelle, ergonomique et graphiqueDiapositive numro 36Focus sur LA Conception fonctionnelleFocus sur la Conception fonctionnelleDiapositive numro 39Focus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueFocus sur la Conception ergonomiqueDiapositive numro 54Site mobileSite mobileSite mobileSite mobileDiapositive numro 59Zoom sur le Responsive DESIGNzoom sur le Responsive DESIGNFOCUS sur le Responsive DESIGNDiapositive numro 63ApplicationsApplicationsApplicationsApplicationsApplicationsApplicationsApplicationsApplicationsDiapositive numro 72WebappWebappWebappWebappSommaireDiapositive numro 78Cross-platformDiapositive numro 80ERGONOMIE ET DESIGNERGONOMIE ET DESIGNDiapositive numro 83DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM :PHONEGAP et TITANIUMDiapositive numro 85DEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM :PHONEGAP et TITANIUMDEVELOPPEMENTS ET SOLUTIONS CROSS-PLATFORM :PHONEGAP et TITANIUMDiapositive numro 88Retours d'exprience techniquesRetours d'exprience techniquesSommaireDiapositive numro 92Prsentation de SmileDiapositive numro 94L'approche sur mobileL'approche sur mobile