• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ergonomie, Design et Développement d'applications mobiles
 

Ergonomie, Design et Développement d'applications mobiles

on

  • 3,851 views

Support d'une conférence effectuée en 2010 par Ludovic Tant pour des ingénieurs de Telecom Lille1. Au sommaire: ...

Support d'une conférence effectuée en 2010 par Ludovic Tant pour des ingénieurs de Telecom Lille1. Au sommaire:
- importance du mobile
- panorama des technologies possibles pour un service mobile (SMS, USSD, SVI, appli, web)
- ergonomie, design et ergonomie d'une application mobile ou d'un site web mobile
- distribution d 'une application

Statistics

Views

Total Views
3,851
Views on SlideShare
3,850
Embed Views
1

Actions

Likes
3
Downloads
0
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ergonomie, Design et Développement d'applications mobiles Ergonomie, Design et Développement d'applications mobiles Presentation Transcript

    • Développement d’un service mobile Ludovic Tant1 - Ludovic Tant – Développement mobile - v1
    • RèglesGlobalement interactifSi risque de dérapage, certains questions repoussées en fin dinterventionTéléphones en mode discret2 - Ludovic Tant – Développement mobile - v1
    • Présentation Ludovic Tant, 33 ans ludovic.tant@atosorigin.comFonctions actuelles ExpérienceChef déquipe « TUM Labs » 2002 Framework SMSResponsable d’une équipe de 2006 Dév. visio mobiles 5 ingénieurs type R&D 2007 Dév. dapplis WiMo (Ten)Porteur d’offre de la solution interne Worldline Padda 2007 Dév. J2ME pour SFRRéférent application mobile 07-09 Développement J2ME chez TUM 08-10 Gestion de projets AV android, BB, iPhone, iPad3 - Ludovic Tant – Développement mobile - v1
    • Atos Worldline, leader européen dans lestransactions électroniques Quelques références Media et Telecom eServices pour les Paiements Clients, les Marchés Electroniques Citoyens, Financiers e-Communautés 65% 24% 11% Chiffre d’Affaires = 844m€ » 4800 collaborateurs « Des équipes engagées Innovation Orientées Clients Modèle à la transaction4 - Université dété du GFII Lille – Information et multi-écran 4 HIGH-TECH TRANSACTIONAL SERVICES
    • Les Echos Application d’information économique et financière sur iPhone, Blackberry, Bada et autres smartphones Les enjeux » Proposer aux lecteurs d’accéder à l’information en toutes circonstances via une offre complémentaire aux offres existantes : Papier, Minitel, Internet, Mobile et ePaper » Confirmer le positionnement des Echos en tant que leader économique innovant Notre solution » Mise à disposition de l’expertise Atos Worldline dans les phases de définition de l’application » Conception et hébergement des applications : design, ergonomie, développement » Référencement de l’application au sein des stores d’applications à forte audience (Apple App Store, Google Android Market, Blackberry App World, Samsung Apps, OVI Store) Les résultats » Une offre d’information complète et disponible sur l’ensemble des terminaux: Les Echos est le leader de la presse » Apple iPhone / iPod / iPad économique et financière en France » Samsung Bada » Plus de 200 autres terminaux grâce à la solution Worldline Padda5 - Ludovic Tant – Développement mobile - v1
    • M6 Nouvelle StarApplication Android et multi-terminaux interactivité antenne Les enjeux » Fidéliser les téléspectateurs sur un programme fédérateur à forte audience » Réinventer l’interactivité antenne grâce à des services et acteurs innovants Notre solution » Conception et hébergement des applications : design, ergonomie, développement » Mise à disposition d’une solution complète d’outils d’administration et de pilotage pour les régies de production (tirage au sort, suivi de votes, etc...) » Mise en place de solutions innovantes de monétisation des votes » Engagement de services liés à l’événementiel Les résultats » Expertise métier sur la gestion de services interactifs multi-canal dans le cadre d’émissions en direct à forte criticité » Une présence sur plus de 200 terminaux grâce à la solution Worldline PaddaNouvelle Star est une émission de télévision » Atos Origin, partenaire historique de M6 depuis 1989française à forte interactivité diffusée en Livesur M66 - Ludovic Tant – Développement mobile - v1
    • Geny Courses Application iPhone et Android d’information hippique Les enjeux » Confirmer le positionnement de Geny Infos en tant que leader de l’information hippique en ligne » Proposer aux amateurs de sports hippiques d’accéder à l’information en mobilité Notre solution » Mise à disposition de l’expertise Atos Worldline dans les phases de définition de l’application » Conception des applications : Design, Ergonomie, Développement » Diffusion de vidéos Les résultats » Une offre d’information hippique complète, temps réel et disponible sur l’ensemble des terminaux iPhone et Android Geny Course est le leader de l’information hippique en ligne7 - Ludovic Tant – Développement mobile - v1
    • Société Générale Application iPhone et Android de Mobile Banking Les enjeux » Offrir une solution innovante de mobile banking aux clients finaux de Société Générale » Nouveau canal de communication, image moderne de la banque, service pratique pour les utilisateurs La solution » Accompagnement d’Atos Worldline dès les premières phases de définition des applications (fonctionnalités, design et ergonomie) et conception des applications : ergonomie, développement » Solution : Mobile banking (consultation de comptes et informations) » Virements de compte à compte ponctuels » Gestion de budget » Consultation des portefeuilles bourse et des informations financières » Géolocalisation de distributeurs et agences Société Générale » Convertisseur » Contact direct avec les principaux numéros d’urgence Société Générale » Simulation épargne/crédit Les résultats » Service mobile bancaire complet, en temps réel et ergonomique » Application mobile sur iPhone et Android » Cible : 300 000 utilisateurs » 150 000 téléchargements en 15 jours - n°13 des applicatio ns gratuites dans App Store8 - Ludovic Tant – Développement mobile - v1
    • Météo France Site Internet Mobile New Gen et application iPhone d’information météo Les enjeux » Adresser tout nouveau terminal mobile représentant de nouveaux utilisateurs » Devenir leader sur la diffusion d’information et services météorologique sur Mobile comme réalisé sur Internet » Fournir des prévisions météorologiques ATAWAD à tout citoyen français pour répondre à leur principale mission d’établissement administratif public Notre solution » Développement d’un site mobile de nouvelle génération compatible avec une large gamme de smartphones (iPhone, Android, Blackberry, Windows Mobile) pour délivrer l’information à la plus large audience possible » Développement d’une application dédiée iPhone pour offrir aux utilisateurs d’iPhone la meilleure expérience utilisateurs possibles et assurer une présence dans l’Apple App Store Les résultats » 5 Million de pages vues le premier mois sur le site mobile New Gen » 100.000 téléchargements de l’application iPhone réalisé la première semaine de lancement » Très bonne satisfaction des utilisateurs Service considéré à forte valeur ajoutée en mobilité en particulier l’alerte pluie mobile.meteofrance.fr Météo France est un établissement public administratif dont la mission consiste à délivrer des informations et des services météorologiques aux citoyens français. Leur principal site (développé par Atos Worldline), www.meteofrance.com, est un des plus visités en France9 - Ludovic Tant – Développement mobile - v1
    • SFR Projets en technologie Streamezzo Embarqué dans 30 Embarqué dans 30 Embarqué dans 30 modèles de téléphones modèles de téléphones modèles de téléphones10 - Ludovic Tant – Développement mobile - v1
    • Editions Francis LefebvreApplication iPhone d’information juridique Les enjeux » Développement d’ un service pertinent et ergonomique qui propose de consulter en temps réel, les actualités juridiques éditées par Editions Francis Lefebvre, sur l’iPhone. » Première expérience sur mobile afin de tester l’appétence des avocats pour ce type de service. La solution » Réalisation d’une application de lecture des actualités Editions Francis Lefebvre en mode gratuit et consultation des articles par authentification » Proposition d’évolutions basées sur la connaissance marché et le savoir-faire technique iPhone d’Atos Worldline » Mise à disposition de statistiques sur utilisation du service Les résultats » Mise en production le 06 juillet 2010 et disponible sur l’App StoreEditions Francis Lefebvre est un éditeurjuridique spécialisé en droit des entreprises 11 - Ludovic Tant – Développement mobile - v1
    • Ville de Barcelone Application iPhone pour Bicing, réseau de vélos libre-service Les enjeux » Accompagner la ville de Barcelone dans la réalisation d’une application iPhone de suivi du service Bicing, réseau de vélos libre-service de Barcelone : » Affichage en temps réel de la disponibilité des vélos » Localisation des bornes libre-service à proximité » Gestion de bornes favorites et contact client Notre solution » Mise à disposition de l’expertise Atos Worldline dans les phases de définition, conception et hébergement de l’application. Les résultats Bicing (contraction de bici (Catalan pour » Atos Worldline a permis ainsi à la commune de Barcelone de disposer vélo) et BCN code pour Barcelone) est le d’un service d’assistance au service de Bicing sur plusieurs canaux en système de vélos en libre-service de simultané : Barcelone disponible depuis fin mars 2007. » Un site Internet » Un service SMS+ (disponibilité des vélos dans une borne) » Une application iPhone12 - Ludovic Tant – Développement mobile - v1
    • Air France Site Internet Mobile tout terminal de m-ticketing Les enjeux » Air France souhaite mettre à disposition de ses clients : » L’enregistrement en ligne sur un site Internet mobile et un service SMS et SMS+ (6 36 54) » La dématérialisation du titre de transport via un code-barres 2D Notre solution » Le site internet mobile développé et exploité par Atos Worldline offre les fonctionnalités suivantes : » L’enregistrement, l’actualité des vols, les réservations, les horaires » La consultation du compte personnel Flying Blue, les contacts Air France » Le choix du mode de réception de la carte d’embarquement (par SMS, MMS ou e-mail) » La réception d’un code-barre 2D contenant les informations d’identification essentielles au voyage Les résultats » Ce service offre aux clients d’Air France : » La possibilité d’accéder depuis leur téléphone mobile aux informations relatives à leurs vols et d’organiser leur voyage (sans obligation de disposer d’une connexion internet) en situation de mobilité » Une facilité d’accès aux différents contrôles à l’aéroport » L’élimination du papier : gains financiers, respect de l’environnement mobile.airfrance.fr13 - Ludovic Tant – Développement mobile - v1
    • La Voix du Nord Application iPad d’achat et consultation en mode liseuse et « produit numérique » Les enjeux » Proposer aux lecteurs une consultation conservant l’atmosphère et plus- value du print, tout en profitant des possibilités offertes par le numérique » Valider l’appétence des abonnées pour une version numérique à valeur ajoutée » En projet, porter cette ergonomie sur d’autres supports (Galaxy Tab, RIA PC) Notre solution » Workshops communs de définition du fonctionnel et de l’ergonomie consulting, design, ergonomie » Conception et développement d’un prototype validant le concept design, ergonomie, développement » Conception et développement de l’application final design, ergonomie, développement » Livraison et référencement de l’application au sein de l’Apple App Store Les résultats » Version « liseuse » mise en production été 201014 - Ludovic Tant – Développement mobile - v1
    • Et vous ? Qui êtes vous ? Qu’attendez vous ?15 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises16 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises17 - Ludovic Tant – Développement mobile - v1
    • Mobilife 2011Concours national Organisé parÉcoles dingénieursPar équipe (1-5 personnes) Parrainé parThème imposé: La vie quotidienneProjet innovant (technique, idée, packaging) Inscription : ->31 octPrix: voyage Silicon valley, Remise des projets: 23 janvier smartphones, netbooks Remise des prix: 3 février18 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises19 - Ludovic Tant – Développement mobile - v1
    • Importance du mobile Les supports numériques Une évolution des technologies Tablette tactile Ordinateur Télévision connectée Minitel Smartphone Téléphone20 - Ludovic Tant – Développement mobile - v1
    • Importance du mobile Morgan Stanley, The Mobile Internet Report,Décembre 200921 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises22 - Ludovic Tant – Développement mobile - v1
    • Un service mobile peut avoir plusieurs formesSMSUSSDAudiotelVisioWap/WebApplication mobile embarquée23 - Ludovic Tant – Développement mobile - v1
    • Un service mobile SMS+ modèle éprouvé techniquement+ modèle économique viable pour les éditeurs+ interopérable dans le monde entier et plus souvent que le roaming data+ en forte croissance surtout dans les pays émergents reporting sanitaire au Malawi et en Éthiopie, Nokia Money- asynchrone pas de session, pas de cookie- limité en taille 160 octets- pas hype du tout ;-)24 - Ludovic Tant – Développement mobile - v1
    • Un service mobile SMS25 - Ludovic Tant – Développement mobile - v1
    • Un service mobile USSDExemple: #123# dorangepeu utilisé, et surtout par les opérateurs pour leur propre service+ connecté- peu connu du grand public- pas de modèle économique pour les éditeurs26 - Ludovic Tant – Développement mobile - v1
    • Un service mobile audioserveur SVI classique, « audiotel »+ modèle éprouvé techniquement mode connecté développement généralement en vxml+ modèle économique viable 36xx, 089[01279]xxxxxx+ interopérable dans le monde entier et plus souvent que le roaming data- pas hype du tout ;-)27 - Ludovic Tant – Développement mobile - v1
    • Un service mobile visiopas vraiment décollé compliqué pour lutilisateur appel « en visio » ou touche « visio »mode connectésurtaxe possibleessentiellement « rencontre interactive »remis au goût du jour par l’iPhone 4 sans le modèle économique28 - Ludovic Tant – Développement mobile - v1
    • Un service mobile web« wap » est un gros motLes navigateurs modernes peuvent faire mieux iPhone, mais aussi Nokia Serie60, SonyEriccson, BlackBerry, LG, Samsung etcNécessite davoir un site optimisé mobile bande passante, mémoire, usage29 - Ludovic Tant – Développement mobile - v1
    • Un service mobile embarquéPlusieurs formes30 - Ludovic Tant – Développement mobile - v1
    • Un service mobile: au final ???Le quidam sy perd web/webapp/appli mobile embarquée native/tierce … rôle pédagogique de liPhoneWeb ou embarqué ?Pro web: + simple, - cher, cest « lavenir » mise à jour pas dapplication difficile à retrouverPro embarqué: meilleur design, ergonomie et interactivité plus de fonctionnalités (caméra, contacts, offline, NFC, SIM) présence sur les application store pas dURL difficile à taperÉternel débat “client lourd vs client léger” à décider au cas par cas au final, limportant, cest lusage pas la technique31 - Ludovic Tant – Développement mobile - v1
    • Web ou natif ? natif natif web32 - Ludovic Tant – Développement mobile - v1
    • Web ou natif ? natif web33 - Ludovic Tant – Développement mobile - v1
    • Web ou natif ? web natif natif34 - Ludovic Tant – Développement mobile - v1
    • Web, natif -> « HTML natif » Mix de HTML/CSS/js et de natif Soit « from scratch », soit phonegap Facilité de compétences Coût de portage iOS/android/BB récent moindre35 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises36 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileSpécificités: Mots dordre Environnement bruité Simplicité Utilisation « en temps mort » Zenitude Réponse à un besoin DépouillementUne démarche Lusage prime sur les désirs du client Analyse des profils, besoins et objectifs du futur service Conception collaborative et itérative basée sur des cinématiques, story boards, maquettes Evaluation de linterface par des utilisateurs à différents stades du projet37 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser le volume d’informations affichées Malgré les progrès, un écran reste petit. Informations limitées à l’essentiel et à peu de contenu par page.38 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser les textes style rédactionnel clair, précis, concis39 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser les actions requises40 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser le nombre de liens placer en tête les liens les plus souvent utilisés en tactile, un liens doit devenir un bouton assez grand et espacé résister à la tentation dun visuel abscons à la place dun texte les icônes doivent être systématiquement sous-titrées.41 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser les saisies Pas de clavier alphabétique, ou clavier alphabétique en deçà du confort dun clavier desktop. Eviter les saisies combinant chiffres, lettres, caractères spéciaux, majuscule/minuscule (mots de passe) Utiliser des services du type mobiletinyurl, et des codes barres 2D http://www.atosworldline.com/En/Market_Sectors/Transport/Airlines/innovation.html http://ad.ag/tmwgtp (13 appuis vs 184)42 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser les temps de chargement et les temps de réponse usage « pressé » bande passante faible (surtout en déplacement) temps de latenceTrop souvent un site/WS mobile est plus lent que sa version web un service mobile lent ne sera plus consulté par 90%http://benchmarks.gomez.com/ novembre 2009 via http://www.servicesmobiles.fr/services_mobiles/2009/11/performances-du-temps-de-chargement-de-sites-mobiles.html43 - Ludovic Tant – Développement mobile - v1
    • Ergonomie dun service mobileMinimiser le temps d’appropriation Se conformer aux standards d’usage Reprendre le wording et les icônes du site web sil existeExemples : WAP : le caractère > ou < devant les liens..., iPhone : boutons pour naviguer comme pour agir, flèche vers la droite pour naviguer entre les listes, secouer pour rafraichir (finalement, plus vrai en 3.x)44 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises45 - Ludovic Tant – Développement mobile - v1
    • Design mobile: les problèmesTactile, non tactile, mixteDiversité des tailles décran, bien plus importante que dans le monde desktop Top usage constaté sur nos services android (septembre 2010) 1 – Samsung Galaxy Spica (3,2 pouces – 320 x 480) 2 – HTC Desire (3,7 pouces – 800 x 480) 3 – Sony Ericson Xperia X10 (4 pouces – 854 x 480) 5 – Samsung Galaxy (3,2 pouces – 320 x 480) 5 – HTC Hero (3,2 pouces – 320 x 480) 6 – Huawei u8230 (3,5 pouces – 320 x 480) Top 3 des terminaux Android en ventes à forte croissance (septembre 2010) 1 - HTC Desire (3,7 pouces – 800 x 480) 2 - Samsung Galaxy S (3,7 pouces – 800 x 480) 3 - Sony Ericson Xperia X10 (4 pouces – 854 x 480)46 - Ludovic Tant – Développement mobile - v1
    • Design graphique : Sadapter aux différentes tailles décranQuelques format plus répandus que d’autres, mais l’exotique existe toujours (voir de plus en plus)Notion de famille/classe d’écranExtrêmes suivantes dans chaque classe • tiny : du 128x116 et du 120x147 • small : à partir de 128x128 et jusquà du 220x159 ; surtout du 128x160, pas mal de 128x128 et de 130x176 • large: à partir de 176x177 et jusquà du 240x208; surtout du 176x206-220 • verylarge: à partir de 240x256 et jusquà du 240x400 et 480x248 , surtout du 240x320 • huge: jusquà du 480x800; surtout du 352x416 • Les classes décran à privilégier pour les tests sont verylarge et large.Comment gérer ? Soit prévoir tous les cas, s’ils sont peu nombreux Soit prévoir quelques cas typique, et rajouter des bordures quand l’écran est plus grand: border design Soit stretchy designDe plus, prévoir une bande décorative en haut Car souvent encombré par des icônes (réception, batterie etc).Format des images png, mode palette 32/64/256 couleurs, 16 degrés de dégradés dans l’alpha, pngoptimizer une version par famille d’écran ou éventuellement une seule 9-patch sous android47 - Ludovic Tant – Développement mobile - v1
    • Design graphique: Solution 1: prévoir tous les cas + rendu nickel pour les tailles prévues - … moins bien pour les tailles non prévues + positionnement au pixel près via fichier de config modifiable par le client chaque élément est placé au pixel près48 - Ludovic Tant – Développement mobile - v1
    • Design graphique: Solution 2: border design + rendu nickel pour les tailles prévues ou à peu près - … moins bien pour les tailles vraiment éloignées + solution cumulable avec la précédente offset X et Y égale à la moitié de la différence entre la taille prévue de la classe et la taille réelle de l’écran chaque élément est placé au pixel près ajout d’un rectangle de couleur en fond de décor49 - Ludovic Tant – Développement mobile - v1
    • Design graphique: Solution 3: stretchy design - rendu pas nickel au pixel près + gère au mieux tous les écrans proches de la référence de chaque classe + gère au mieux pire les écrans très exotiques doit être prévu dès le début de la conception d=(H-4*h)/5 h H logo et boutonsles boutons sont le logo n’est plus une image sur toute la largeur de ancrés au centre et àancrés bottomleft et l’écran mais une image doublée d’un rectangle blanc. width/2bottom right50 - Ludovic Tant – Développement mobile - v1
    • Rapide présentation design Windows Mobile 7Matériel très contraint touches back, home 800x480 capteursPlus de texte, moins d’icônesPolice « Segoe » préconisée, souvent en minusculeUne seule couleur (texte + icônes)Fond noir« panneau d’aéroport »51 - Ludovic Tant – Développement mobile - v1
    • Rapide présentation design Windows Mobile 7 Notion de panorama navigation horizontal titre plus large que l’écran l’écran suivant déborde52 - Ludovic Tant – Développement mobile - v1
    • Rapide présentation design Windows Mobile 7 Notion de panorama53 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises54 - Ludovic Tant – Développement mobile - v1
    • Un problème ? Quel problème ? Ou est passé ma CPU ? Serveur typique: quadripro, 2 Go RAM, plusieurs To sur serveur de fichiers PC Desktop : pentium III 2.8 Ghz, 2 Go RAM Émulateur WTK 2.2 sur desktop: 10Mo, 161890 Points CPU Speed indice KVM SE K800: 863ko, 58161 Points CPU Speed indiceConséquence:les non optimisation en javascript, en java serveur, en perl etc. sans impact de performance en auront sur le mobile55 - Ludovic Tant – Développement mobile - v1
    • Un problème ? Quel problème ? Téléphones buguésTéléphones bugués, ou séloignant de la théorie Chargement initial de la KVM Chargement dune image optimisée * 1er GC 2ème GC F48 760 062 3 313 108 3 458 540 866 768 0 N9 256 880 264 704 259 904 259 556 5Chargement de la KVM plus ou moins importantGestion différente des images (décompression, transformation bitmap)Garbage Collector qui ne ramasse pas tous les objets abandonnés au premier passage Affichage de texte en mode souligné inexistant ou défaillant * Image de couleur unie, au format PNG d’une résolution de 1440 x 90056 - Ludovic Tant – Développement mobile - v1
    • Tip #1: Problème des polices Positionner les textes en local si centré, justifié Ne pas utiliser le souligné Privilégier les textes courts Affichage de texte sur des téléphones Motorola (à gauche) et Sony Ericsson (à droite). Le téléphone de gauche ne sait pas souligner les textes, et l’épaisseur des caractères est très différente entre les deux téléphones.57 - Ludovic Tant – Développement mobile - v1
    • Tip #2: Compacter le code Factoriser le code mais pas trop Design pattern, getter, setter et co → pragmatisme En J2ME: parser xml → pragmatisme Raccourcir les noms de variables, de classes J2ME: Obfuscation de code javascript, HTML: « compactage »58 - Ludovic Tant – Développement mobile - v1
    • Tip #3: optimiser les images Format png Virer les meta data (PNG optimizer) => de -10% à -20% Images en palette 256/128/64/32/8 couleurs et pas en true colors => - 70%http://psydk.org/PngOptimizer.php 59 - Ludovic Tant – Développement mobile - v1
    • Tip #4: Attention à la transparence60 - Ludovic Tant – Développement mobile - v1
    • Tip #5: Nettoyage des répertoires ressources Les répertoires contenant les images se retrouvent souvent tels quels dans lappli finale .svn, CVS, thumbs.db, .backup, .orig nont pas leur place dans le jar !!61 - Ludovic Tant – Développement mobile - v1
    • Tip #6: en web mobile et web service, pas de redirect 302 Pas supporté par les KVM Nokia S40 Peu supporté par les téléphones quand les URLs de notif dinstall/désinstall sont en redirect 30262 - Ludovic Tant – Développement mobile - v1
    • Tip #7: écrans tactiles Les téléphones tactile ont (ou pas) un clavier, des soft keys, un joypad => attention à le prévoir dans les algos et dans les tests Sur des écrans de plus en plus grands, un clic au doigt peut être perçu par le système comme un déplacement de quelques pixels => et cest très frustrant, et très long à comprendre Zones cliquables (textes, images) de suffisamment grande taille (relativement à lécran)63 - Ludovic Tant – Développement mobile - v1
    • Tip #8: Les tests Très tôt dans les dév Pour vérifier dans les vrais conditions (CPU, mémoire, BD, temps de latence réseau, software installé) Et changer lapplication en conséquence en début de cycle Avec de vrais utilisateurs Qui ne connaissent pas lapplication Qui ne sont pas liés au projet chez le client64 - Ludovic Tant – Développement mobile - v1
    • Tip #9: importance du fonctionnel/ergonomie/design Avant: Après:65 - Ludovic Tant – Développement mobile - v1
    • Tip #9: importance du fonctionnel/ergonomie/design Avant: Après:66 - Ludovic Tant – Développement mobile - v1
    • Tip #A: importance du marché cible Peut annuler un projet si pas assez important à définir/vérifier avant les dév/avant les tests Nécessite de définir le marché cible Attention aux hypothèses perso non vérifiées exemple: blackberry pour les pros, iPhone pour le grand public67 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises68 - Ludovic Tant – Développement mobile - v1
    • Comment distribuer une application mobile ?69 - Ludovic Tant – Développement mobile - v1
    • Comment distribuer une application mobile ?Site webfacilement accessible (mobiletinyurl, code barre 2D, SMS pushwap)aidant lutilisateur (reconnaissance auto du mobile, FAQ)70 - Ludovic Tant – Développement mobile - v1
    • Comment distribuer une application mobile ?Sur un store Le référencement à un cout ‘humain’ d’administratif Tous les magasins ne sont pas égaux, notamment en terme d’audience Les reversements sont en général du même ordre de grandeur (70 à 80%) Les stores à forte Les stores à potentiel Les stores d’annonces audience AppStore (300k; 4,3$) Samsung Android Market (85k; 3,2$) OVI Store (>10k; 2,7$) Windows (<2k; 5,7$) RIM Appworld (11k; 6,7$) Orange Store Palm (4k; 2,4$) Amazon store SFR Store Votre Site internet ! (nombres d’applications,;prix moye n) Source: journal du net, 29/09/2010)71 - Ludovic Tant – Développement mobile - v1
    • Comment distribuer une application mobile ?Sur un store Choisir judicieusement sa catégorie Soigner particulièrement le nom, la description de l’application la première phrase: quoi pour qui Toucher les utilisateurs influents diffuser aux happy few quelques jours avant le lancement l’équipe marketing du store est influente Bien gérer la vague de lancement Jouer de l’effet buzz du “price fitting” Acheter de la publicité Utiliser les nouveaux services de promotion d’applications (nombres d’applications,;prix moye n) Source: journal du net, 29/09/2010)72 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Indisponible en raison de la Plat saison Ergonomie, Design et Exemple de code développement mobile Debug Desserts NDA Distribution de lapplication Questions annexes Café et boissons comprises73 - Ludovic Tant – Développement mobile - v1
    • Au menu Apéro Mobi’life 2011 Importance du mobile Entrée Panorama des technos Plat Ergonomie, Design et développement mobile Sur quelle plateforme parier ? Smartphone, tablettes, où va-t-on ? Desserts HTML 5 ? Distribution de lapplication Quel framework js pour du web mobile ? Fragmentation android Questions annexes Café et boissons comprises74 - Ludovic Tant – Développement mobile - v1
    • Sur quelle plateformes parier ?75 - Ludovic Tant – Développement mobile - v1
    • Sur quelle plateformes parier ?76 - Ludovic Tant – Développement mobile - v1
    • Sur quelle plateformes parier ? Etat de l’art Capter les usages des utilisateurs d’applications mobile » « » « » « » Appstore: » Android Market: » 250.000 applications [1] » 100.000 applications [3] » Présence forte des marques » Présence moyenne des marques » Parts de marché smartphones: » Parts de marché smartphones: » Monde: 14,2% [2] » Monde: 17,2% [2] » France: 29,9% [5] » France: ~10% [3] » Utilisateurs [4] : » Utilisateurs [4] : » Homme: 57% - Femme: 43% »Homme: 73% - Femme: 27% » Age: » Age: < 17 : 13% < 17 : 7% 18 – 24 : 12% 18 – 24 : 17% 25 – 34 : 21% 25 – 34 : 30% 35 - 44 : 21% 35 - 44 : 21% 45 - 54 : 18% 45 - 54 : 17% > 55 : 14% > 55 : 8%[1] Apple Inc. Aout 2010 [2] Gartner, Aout 2010 [3] Google Inc., Aout2010 [4] Admob, Jan 2010 [5] Comscore, Jan 2010 77 - Université dété du GFII Lille – Information et multi-écran 77 HIGH-TECH TRANSACTIONAL SERVICES
    • Sur quelle plateformes parier ?Tablettes tactilesUn écosystème en cours de création Initiateur Création d’usages Email Magasin Bibliothèque Album photo d’applications dématérialisée Popularisation - Généralisation78 - Université dété du GFII Lille – Information et multi-écran 78 HIGH-TECH TRANSACTIONAL SERVICES
    • HTML 5 ?79 - Université dété du GFII Lille – Information et multi-écran 79 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» Sencha » Jquery mobile» Wink » Xui + emile» jqTouch» sproutcore80 - Université dété du GFII Lille – Information et multi-écran 80 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» sproutcore81 - Université dété du GFII Lille – Information et multi-écran 81 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» jqTouch82 - Université dété du GFII Lille – Information et multi-écran 82 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» Wimk toolkit83 - Université dété du GFII Lille – Information et multi-écran 83 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» Jquery mobile84 - Université dété du GFII Lille – Information et multi-écran 84 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» Xui + emile Par l’équipe de phonegap Ne gère pas IE, Firefox ;-) Adapté au mobile emile.js: librairie d’animation javascript en 50 lignes de code85 - Université dété du GFII Lille – Information et multi-écran 85 HIGH-TECH TRANSACTIONAL SERVICES
    • Quel framework js pour du web mobile?» En conclusion: Toujours comprendre ce qu’on écrit plutôt qu’utiliser un framework qui cache trop la complexité En attendant de tester jquery mobile: comprendre jqTouch/CSS3/transition XUI + emile.js un bon designer HTML ;-)86 - Université dété du GFII Lille – Information et multi-écran 86 HIGH-TECH TRANSACTIONAL SERVICES
    • Fragmentation android? Source: Android market, mesuré entre le 15/9/2010 et le 1/10/201087 - Université dété du GFII Lille – Information et multi-écran 87 HIGH-TECH TRANSACTIONAL SERVICES
    • Quelques pointeursAssociation SMS+: http://www.smsplus.org/USSD: http://fr.wikipedia.org/wiki/Unstructured_Supplementary_Service_Datavxml: http://fr.wikipedia.org/wiki/VoiceXMLwhite paper développement dapplications mobiles: http://www.atosworldline.fr/Portfolio/Portfolio_FR/Mobile_FR.pdfconcours mobilife 2011:http://www.mobilife2011.org/Stats mobiles: Des statistiques intéressantes sur l’utilisation mobile dans le monde Quelues statistiques sur le marché européen des smartphones http://www.journaldunet.com/ebusiness/internet-mobile/places-de-marche-d-applications-mobiles/Design mobile: iPhone UI Design Video Presentation From Design Great iPhone Apps Author Design, Simplicité et Talent sont le coeur dune application Mobile ! avec FortuneoApp store: thttp://frenchweb.fr/les-5-points-essentiels-pour-promouvoir-une-application-iphone-dans-lapp-store/ http://frenchweb.fr/5-points-essentiels-promouvoir-application-iphone-dehors-app-store/ http://frenchweb.fr/les-5-points-essentiels-pour-realiser-une-application-iphone/ http://frenchweb.fr/les-5-points-essentiels-pour-inscrire-une-application-iphone-dans-lapp-store/http://www.servicesmobiles.fr/services_mobiles/2009/11/performances-du-temps-de-chargement-de-sites-mobiles.htmlImage 9-Patch http://developer.android.com/guide/developing/tools/draw9patch.html88 - Ludovic Tant – Développement mobile - v1
    • Merci Pour votre attention Ludovic Tant89 - Ludovic Tant – Développement mobile - v1