Download - ESG - Application Mobile - Cours 1
![Page 1: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/1.jpg)
![Page 2: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/2.jpg)
• les présentations • Plan de cours • Concevoir pour le mobile
SOMMAIRE - 03/05/2014
![Page 3: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/3.jpg)
Alban Oujagir UX Designer Marcel WW
![Page 5: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/5.jpg)
LES Présentations
![Page 6: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/6.jpg)
• les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile
SOMMAIRE - 03/05/2014
![Page 7: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/7.jpg)
objectif
PLaN DE COURS
La maîtrise complète d’un projet mobile. De la prise de brief au lancement de l’application.
![Page 8: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/8.jpg)
5 Phases
PLaN DE COURS
![Page 9: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/9.jpg)
1. Le Marché mobile 2. Le mobile : pourquoi et pour quoi faire ? 3. «How to» : Gestion de projet mobile 4. Comment ne pas se faire avoir par la technique ? 5. Evaluation.
PLaN DE COURS
![Page 10: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/10.jpg)
1. Le Marché mobile - Introduction : Concevoir pour le mobile - Chiffes clés et tendances - Une grande diversité de terminaux
PLaN DE COURS
![Page 11: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/11.jpg)
2. Le mobile : pourquoi et pour quoi faire ? - Définition d’une stratégie mobile - Site Mobile Vs. Application mobile, enjeux et différences - Solution alternative : la web app
PLaN DE COURS
![Page 12: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/12.jpg)
3. «How to» : Gestion de projet mobile !
- Conception fonctionnelle, graphique et ergonomique. - Zoom sur la conception fonctionnelle - Zoom sur la conception ergonomique - Site mobile et responsive design - Méthodologie et grandes étapes d’un projet - Travaux pratiques : Applications
PLaN DE COURS
![Page 13: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/13.jpg)
4. Comment ne pas se faire avoir par la technique ? - Zoom sur les technos - Les OS - Cross platform - Tips
PLaN DE COURS
![Page 14: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/14.jpg)
1. Le Marché mobile 2. Le mobile : pourquoi et pour quoi faire ? 3. «How to» : Gestion de projet mobile 4. Comment ne pas se faire avoir par la technique ? 5. Evaluation.
PLaN DE COURS
![Page 15: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/15.jpg)
• les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile
SOMMAIRE - 03/05/2014
![Page 16: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/16.jpg)
@esgMS MEB
alban oUjagir
LA CONCEPTION POUR L’objet qui est TOUJOURS
DANS VOTRE POCHE
![Page 17: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/17.jpg)
Quelques précisions…
![Page 18: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/18.jpg)
Le mobile c’est quoi ?
(dans cette présentation)
Connexion 3G / Wifi
Stockage des données
Clavier (physique ou virtuel)
Toujours dans la poche
![Page 19: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/19.jpg)
« Et la tablette c’est
du mobile ? »
![Page 20: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/20.jpg)
En 201385% des tablettes
vendues en France son wi-fi
![Page 21: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/21.jpg)
Pourquoi s’intéresser au mobile ? en 4 Lieux communs?
![Page 22: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/22.jpg)
Lieu commun #1 Tout le monde en a un (ou presque)
![Page 23: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/23.jpg)
Lieu commun #1 Tout le monde en a un (ou presque)
38% des français possèdent un smartphone
2012ventes des smartphones supp. au PC
www 85%des téléphones vendus avec un browser
50%du traffic de Facebook fait sur mobile
![Page 24: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/24.jpg)
De plus en plus de gens sont et seront équipés d’un smartphone connecté !
![Page 25: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/25.jpg)
Lieu commun #2 Le contexte d’utilisation d’un mobile n’est pas celui d’un ordinateur.
![Page 26: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/26.jpg)
Fluffy et Mr. Lacombe Lt. Mac Lusky
![Page 27: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/27.jpg)
!
Les contextes d’utilisation
(partout)
Dans les magasins 76%
Dans les transports 62% A table.
59%Dans les situations d’attentes
46% En société 39% Aux toilettes
76%
![Page 28: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/28.jpg)
Le mobile est utilisé partout et en toute circonstance !
![Page 29: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/29.jpg)
Lieu commun #3 L’utilisateur mobile est multi-tâches comme son téléphone.
![Page 30: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/30.jpg)
72% des utilisateurs naviguent sur mobile en :
44%
En écoutant de la musique
27%
En jouant33%
En regardant la TV
22%
En lisant le journal
22%
En lisant des livres
![Page 31: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/31.jpg)
Le mobile est un ami fidèle toujours prêt à m’accompagner dans toutes les tâches de mon quotidien !
![Page 32: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/32.jpg)
Lieu commun #4 Le portable c’est un véritable concentré de technologie
![Page 33: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/33.jpg)
L’iPhone 5 est aussi puissant qu’un supercalculateur de 1985
![Page 34: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/34.jpg)
Microphone
Speakers
APN + Caméra Vidéo
Géolocalisation
Lecteur RFID
Capteur Mutli-touch
Accéléromètre
Boussole
Feedback haptique
Capteur de mouvement
![Page 35: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/35.jpg)
Allez viens ! Regarde tout ce que l’on peut faire !
![Page 36: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/36.jpg)
Lieu commun #1 Lieu commun #2 Lieu commun #3 Lieu commun #4
Le mobile offre des opportunités fonctionelles
quasi infinies.
![Page 37: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/37.jpg)
« My goal initially just to make a mobile
companion, but I became convinced it was possible to create a version of Facebook that was actually better
than the website » !
Joe Hewitt - Former Developer of Facebook App
![Page 38: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/38.jpg)
La minute
blind test
![Page 39: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/39.jpg)
La minute
blind test
![Page 40: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/40.jpg)
Avant je faisais d’une certaine façon,
et maintenant je ne ferai plus jamais comme avant.
Shazam à créé
un nouveau comportement
![Page 41: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/41.jpg)
![Page 42: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/42.jpg)
Une minute de silence SVP
![Page 43: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/43.jpg)
![Page 44: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/44.jpg)
Le smartphone
se substitue aux objets du quotidien...
![Page 45: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/45.jpg)
...et trouve également sa place dans des champs
d’actions très spécialisés.
*comme t’aider à tuer des gens
US ARMY app : Bulletflight
!
![Page 46: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/46.jpg)
Comme disait McLuhan :
« We shape our tools and thereafter our tools shape us »
Marshall McLuhan Understanding Media : The Extensions of Man -1964
![Page 47: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/47.jpg)
Le smartphone induit des
glissements d’usages :
Fonction 1ère : Souvenirs, Conserver des moments, côté précieux , transmission.
Glissement : Bloc-note,Disposer en permanence de données personnelles utiles.
![Page 48: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/48.jpg)
Nouvel usage : App marchande, photographier une référence pour l’acheter.
Des nouveaux comportements qui
influencent les «designers» :
Glissement : Bloc-note,Disposer en permanence de données personnelles utiles.
![Page 49: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/49.jpg)
C’est notre rôle de «concepteur» de déterminer en fonction du contexte et de nos utilisateurs quelles sont nos opportunités
d’innovation.
![Page 50: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/50.jpg)
Avec un espoir :
transformer un comportement en un usage !
![Page 51: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/51.jpg)
Aller observer les utilisateurs dans leur milieu naturel.
Tips #1
LET’S GO OUTSIDE !
![Page 52: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/52.jpg)
Tips #2
Exploite la technologie de ton mobile !
![Page 53: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/53.jpg)
Petit voyage à Singapour
![Page 54: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/54.jpg)
OKAMOTO / TipOff - Cannes 2012 Mobile Lions Shortlist TBWA\ TEQUILA\ Singapore
![Page 55: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/55.jpg)
Cet exemple
répond aux besoins des
utilisateurs dans un contexte donné
et aux objectifs de la marque :
UTILISATEUR(S)
OBJECTIF(S)
CONTEXTE
![Page 56: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/56.jpg)
Mais est-ce toujours suffisant ?
![Page 57: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/57.jpg)
Fuel Band : L’histoire d’un bide
(ou pas)
![Page 58: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/58.jpg)
Fuel Band : Les raisons du succès
Ils ont modifiés le dispositif déjà lancé sur la base de deux insights utilisateur : !
1/ Notre tendance naturelle à consulter compulsivement les feeds : «fear of missing out». !
2/ L’esprit de compétition et le besoin de se comparer aux autres.
![Page 59: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/59.jpg)
« It wasn’t a big idea so much as lots of little smart decisions that, added together, created an inspired experience».
Nick Law Global CCO at R/GA
![Page 60: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/60.jpg)
Concevoir pour le mobile :
Observations d’usages
Remontées d’insights
IDEABIG +itération
![Page 61: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/61.jpg)
«CREATE RELEVANCE, NOT AWARENESS»
Le challenge aujourd’hui n’est plus de se battre pour créer l’attention, mais de devenir suffisamment pertinent pour que nos consommateurs s’intéressent à nous par eux-même.
Amir Kassaie CCO at DDB Worldwide
![Page 62: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/62.jpg)
Tips #3
!
Il ne faut jamais oublier ce qu’implique la conception en
situation de mobilité.
![Page 63: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/63.jpg)
Fluffy et Mr. Lacombe Lt. Mac Lusky
![Page 64: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/64.jpg)
Un utilisateur attentif
Un environnement familier dédié
Un espace privatif
Un écran de grande taille
Un clavier stable / usuel
Un réseau stable
De l'énergie à revendre
![Page 65: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/65.jpg)
Un utilisateur distrait
Un espace public
Environnement variable
Ecran de taille réduite
Clavier + touch
Réseau variable
Une batterie
![Page 66: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/66.jpg)
Concevoir pour le mobile, c’est : prendre en compte le manque de concentration, l’intérruption et la distraction.
![Page 67: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/67.jpg)
Concevoir pour le mobile, c’est donc: ne pas trop solliciter ce truc.
![Page 68: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/68.jpg)
Tips #4
Rester core functionality !
x
![Page 69: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/69.jpg)
Exemple : le remplissage automatique
Simplifier au maximul l’effort de l’utilisateur !
Tips #5
![Page 70: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/70.jpg)
!
"La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer".
Antoine de Saint-Exupéry.
![Page 71: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/71.jpg)
• les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile
SOMMAIRE - 03/05/2014
![Page 72: ESG - Application Mobile - Cours 1](https://reader038.vdocuments.net/reader038/viewer/2022103001/558692ddd8b42a4a7f8b4723/html5/thumbnails/72.jpg)