Ergonomie, Design et Développement d'applications mobiles

Développement d’un service mobile

Ludovic Tant

1 - Ludovic Tant – Développement mobile - v1

Règles

Globalement interactif
Si risque de dérapage, certains questions repoussées en fin
d'intervention
Téléphones en mode discret


Présentation

Ludovic Tant, 33 ans
ludovic.tant@atosorigin.com

Fonctions actuelles Expérience
Chef d'équipe « TUM Labs » 2002 Framework SMS
Responsable d’une équipe de 2006 Dév. visio mobiles
5 ingénieurs type R&D
2007 Dév. d'applis WiMo (Ten)
Porteur d’offre de la solution
interne Worldline Padda 2007 Dév. J2ME pour SFR

Référent application mobile 07-09 Développement J2ME
chez TUM 08-10 Gestion de projets
AV android, BB, iPhone,
iPad

Atos Worldline, leader européen dans les
transactions é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 transaction

4 - 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 Padda


M6 Nouvelle Star
Application 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 Padda
Nouvelle Star est une émission de télévision » Atos Origin, partenaire historique de M6 depuis 1989
française à forte interactivité diffusée en Live
sur M6


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 ligne


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 Store


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 France


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


Editions Francis Lefebvre
Application 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 Store

Editions Francis Lefebvre est un éditeur
juridique spécialisé en droit des entreprises


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 iPhone


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


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


Et vous ?

Qui êtes vous ? Qu’attendez vous ?


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 l'application
Questions annexes
Café et boissons comprises


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Mobilife 2011

Concours national Organisé par
Écoles d'ingénieurs
Par équipe (1-5 personnes) Parrainé par
Thème imposé: La vie
quotidienne
Projet innovant (technique,
idée, packaging) Inscription : ->31 oct

Prix: voyage Silicon valley, Remise des projets: 23 janvier
smartphones, netbooks Remise des prix: 3 février


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Les supports numériques
Une évolution des technologies

Tablette tactile

Ordinateur

Télévision
connectée
Minitel

Smartphone

Téléphone



Morgan Stanley, The Mobile Internet Report,Décembre 2009

Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Un service mobile peut avoir plusieurs formes

SMS
USSD
Audiotel
Visio
Wap/Web
Application mobile embarquée


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


Un service mobile SMS


Un service mobile USSD

Exemple: #123# d'orange
peu utilisé, et surtout par les opérateurs pour leur propre service
+ connecté
- peu connu du grand public
- pas de modèle économique pour les éditeurs


Un service mobile audio

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


Un service mobile visio

pas vraiment décollé
compliqué pour l'utilisateur
appel « en visio » ou touche « visio »
mode connecté
surtaxe possible
essentiellement « rencontre interactive »
remis au goût du jour par l’iPhone 4
sans le modèle économique


Un service mobile web
« wap » est un gros mot
Les navigateurs modernes peuvent faire mieux
iPhone, mais aussi Nokia Serie60, SonyEriccson, BlackBerry,
LG, Samsung etc
Nécessite d'avoir un site optimisé mobile
bande passante, mémoire, usage


Un service mobile embarqué
Plusieurs formes


Un service mobile: au final ???
Le quidam s'y perd
web/webapp/appli mobile embarquée native/tierce …
rôle pédagogique de l'iPhone

Web ou embarqué ?
Pro web:
+ simple, - cher, c'est « l'avenir »
mise à jour
pas d'application difficile à retrouver

Pro embarqué:
meilleur design, ergonomie et interactivité
plus de fonctionnalités (caméra, contacts, offline, NFC, SIM)
présence sur les application store
pas d'URL difficile à taper

Éternel débat “client lourd vs client léger”
à décider au cas par cas
au final, l'important, c'est l'usage pas la technique


Web ou natif ?

natif natif web


Web ou natif ?

natif web


Web ou natif ?

web natif natif


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 moindre


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Ergonomie d'un service mobile

Spécificités: Mots d'ordre
Environnement bruité Simplicité
Utilisation « en temps mort » Zenitude
Réponse à un besoin Dépouillement

Une démarche
L'usage 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 l'interface par des utilisateurs à différents
stades du projet



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



Minimiser les textes
style rédactionnel
clair, précis, concis



Minimiser les actions requises



Minimiser 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 d'un visuel abscons à la place d'un texte
les icônes doivent être systématiquement sous-titrées.



Minimiser les saisies
Pas de clavier alphabétique, ou clavier alphabétique en deçà du confort d'un
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)



Minimiser les temps de chargement et les temps de réponse
usage « pressé »
bande passante faible (surtout en déplacement)
temps de latence

Trop 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.html


Minimiser le temps d’appropriation
Se conformer aux standards d’usage
Reprendre le wording et les icônes du site web s'il existe
Exemples :
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)


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Design mobile: les problèmes
Tactile, non tactile, mixte
Diversité 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)


Design graphique : S'adapter aux différentes tailles d'écran

Quelques format plus répandus que d’autres, mais l’exotique existe toujours (voir de plus en
plus)
Notion de famille/classe d’écran

Extrê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 design

De 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 android


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ès


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

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 boutons
les 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/2
bottom right

Rapide présentation design Windows Mobile 7

Matériel très contraint
touches back, home
800x480
capteurs
Plus de texte, moins d’icônes
Police « Segoe » préconisée, souvent en minuscule
Une seule couleur (texte + icônes)
Fond noir
« panneau d’aéroport »



Notion de panorama
navigation horizontal
titre plus large que l’écran
l’écran suivant déborde



Notion de panorama


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


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 indice

Conséquence:
les non optimisation en javascript, en java serveur, en perl etc.
sans impact de performance en auront sur le mobile


Un problème ? Quel problème ? Téléphones bugués

Téléphones bugués, ou s'éloignant de la théorie

Chargement initial de la KVM Chargement d'une 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
5

Chargement de la KVM plus ou moins important
Gestion 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 900


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.


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 »


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


Tip #4: Attention à la transparence


Tip #5: Nettoyage des répertoires ressources

Les répertoires contenant les images se retrouvent souvent
tels quels dans l'appli finale
.svn, CVS, thumbs.db, .backup, .orig
n'ont pas leur place dans le jar !!


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
d'install/désinstall sont en redirect 302


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 c'est très frustrant, et très long à comprendre
Zones cliquables (textes, images) de suffisamment grande
taille (relativement à l'écran)


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 l'application en conséquence en début de cycle

Avec de vrais utilisateurs
Qui ne connaissent pas l'application
Qui ne sont pas liés au projet chez le client

Tip #9: importance du fonctionnel/ergonomie/design

Avant:

Après:


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 public


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Comment distribuer une application mobile ?



Site web
facilement accessible (mobiletinyurl, code barre 2D, SMS pushwap)
aidant l'utilisateur (reconnaissance auto du mobile, FAQ)



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)



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)


Au menu
Apéro
Mobi’life 2011
Entrée
Plat saison

Desserts NDA
Questions annexes


Au menu
Apéro
Mobi’life 2011
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 l'application Quel framework js pour du web mobile ?
Fragmentation android
Questions annexes


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

Tablettes tactiles
Un é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éralisation


HTML 5 ?


Quel framework js pour du web mobile?

» Sencha » Jquery mobile
» Wink » Xui + emile
» jqTouch
» sproutcore


» sproutcore


» jqTouch


» Wimk toolkit


» Jquery 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 code


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


Fragmentation android?

Source: Android market, mesuré entre le 15/9/2010 et le 1/10/2010


Quelques pointeurs
Association SMS+: http://www.smsplus.org/

USSD: http://fr.wikipedia.org/wiki/Unstructured_Supplementary_Service_Data

vxml: http://fr.wikipedia.org/wiki/VoiceXML

white paper développement d'applications mobiles: http://www.atosworldline.fr/Portfolio/Portfolio_FR/Mobile_FR.pdf

concours 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 d'une application Mobile ! avec Fortuneo

App 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.html

Image 9-Patch http://developer.android.com/guide/developing/tools/draw9patch.html


Merci
Pour votre attention

Ludovic Tant


Ergonomie, Design et Développement d'applications mobiles

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Ergonomie, Design et Développement d'applications mobiles

Similar to Ergonomie, Design et Développement d'applications mobiles (20)

More from Ludovic Tant

More from Ludovic Tant (7)

Ergonomie, Design et Développement d'applications mobiles