• les présentations
• Plan de cours
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014
Alban Oujagir
UX Designer
Marcel WW
alban.oujagir@gmail.com
@oujagir_alban
Alban Oujagir
LES Présentations
• les présentations
• lE cours d’aPPLICATION MOBILE
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014
objectif
PLaN DE COURS
La maîtrise complète d’un projet mobile.

De la prise de brief au lancement de l’application.
5 Phases
PLaN DE COURS
1. Le Marché mobile
2. Le mobile : pourquoi et pour quoi faire ?
3. «How to» : Gestion de projet mobile
4. Comment ne pas ...
1. Le Marché mobile
- Introduction : Concevoir pour le mobile
- Chiffes clés et tendances
- Une grande diversité de termin...
2. Le mobile : pourquoi et pour quoi faire ?
- Définition d’une stratégie mobile
- Site Mobile Vs. Application mobile, enje...
3. «How to» : Gestion de projet mobile
!
- Conception fonctionnelle, graphique et ergonomique.
- Zoom sur la conception fo...
4. Comment ne pas se faire avoir par la technique ?
- Zoom sur les technos
- Les OS
- Cross platform
- Tips
PLaN DE COURS
1. Le Marché mobile
2. Le mobile : pourquoi et pour quoi faire ?
3. «How to» : Gestion de projet mobile
4. Comment ne pas ...
• les présentations
• lE cours d’aPPLICATION MOBILE
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014
@esgMS MEB
alban oUjagir
LA CONCEPTION POUR L’objet
qui est TOUJOURS
DANS VOTRE POCHE
Quelques précisions…
Le mobile
c’est quoi ?
(dans cette présentation)
Connexion 3G / Wifi
Stockage des données
Clavier (physique ou virtuel)
To...
 « Et la tablette
c’est
du mobile ? » 
En 2013

85% des tablettes
vendues en France
son wi-fi
Pourquoi s’intéresser au mobile ?
en 4Lieux communs
?
Lieu commun #1
Tout le monde en a un
(ou presque)
Lieu commun #1
Tout le monde en a un
(ou presque)
38%
des français possèdent un smartphone
2012

ventes des smartphones su...
De plus en plus de gens sont et seront équipés
d’un smartphone connecté !
Lieu commun #2
Le contexte d’utilisation
d’un mobile n’est pas
celui d’un ordinateur.
Fluffy et Mr. Lacombe Lt. Mac Lusky
!
Les contextes
d’utilisation
(partout)
Dans les
magasins 76%
Dans les
transports 62% A table.
59%
Dans les
situations
d’a...
Le mobile est utilisé partout et en
toute circonstance !
Lieu commun #3
L’utilisateur mobile est
multi-tâches comme
son téléphone.
72% des
utilisateurs naviguent
sur mobile en :
44%
En écoutant de la musique
27%
En jouant
33%
En regardant la TV
22%
En l...
Le mobile est un ami fidèle toujours prêt à m’accompagner dans
toutes les tâches de mon quotidien !
Lieu commun #4
Le portable c’est un
véritable concentré
de technologie
L’iPhone 5 est aussi
puissant qu’un
supercalculateur de
1985
Microphone
Speakers
APN + Caméra Vidéo
Géolocalisation
Lecteur RFID
Capteur Mutli-touch
Accéléromètre
Boussole
Feedback ha...
Allez viens ! Regarde tout ce que l’on peut faire !
Lieu commun #1
Lieu commun #2
Lieu commun #3
Lieu commun #4
Le mobile offre des
opportunités fonctionelles
quasi infinies.
« My goal initially just to make a mobile
companion, but I became convinced it was possible to
create a version of Faceboo...
La minute
blind
test
La minute
blind
test
Avant je faisais d’une certaine façon,
et maintenant je ne ferai
plus jamais comme avant.
Shazam
à créé
un nouveau
comport...
Une minute de silence
SVP
Le smartphone
se substitue aux objets
du quotidien...
...et trouve
également sa place
dans des champs
d’actions très
spécialisés.
*comme t’aider à tuer des gens
US ARMY app : B...
Comme disait
McLuhan :
« We shape our tools and thereafter
our tools shape us »
Marshall McLuhan Understanding Media : The...
Le smartphone
induit des
glissements
d’usages :
Fonction 1ère : Souvenirs,

Conserver des moments, côté précieux , transmi...
Nouvel usage : App marchande,
photographier une référence pour l’acheter.
Des nouveaux
comportements qui
influencent les
«...
C’est notre rôle de «concepteur» de déterminer en fonction du
contexte et de nos utilisateurs quelles sont nos opportunité...
Avec un espoir :
transformer un comportement en un usage !
Aller observer les utilisateurs
dans leur milieu naturel.
Tips #1
LET’S GO OUTSIDE !
Tips #2
Exploite la technologie
de ton mobile !
Petit voyage
à Singapour
OKAMOTO / TipOff - Cannes 2012 Mobile Lions Shortlist TBWA TEQUILA Singapore
Cet exemple
répond aux besoins des
utilisateurs dans un
contexte donné
et aux objectifs de la
marque :
UTILISATEUR(S)
OBJE...
Mais est-ce toujours suffisant ?
Fuel Band :
L’histoire d’un bide
(ou pas)
Fuel Band :
Les raisons du succès
Ils ont modifiés le dispositif déjà
lancé sur la base de deux insights
utilisateur :
!
1...
« It wasn’t a big idea so much as lots of little smart decisions
that, added together, created an inspired experience».
Ni...
Concevoir
pour le mobile :
Observations d’usages
Remontées d’insights
IDEABIG+itération
«CREATE RELEVANCE, NOT AWARENESS»
Le challenge aujourd’hui n’est plus de se battre pour créer l’attention, mais de devenir...
Tips #3
!
Il ne faut jamais oublier ce
qu’implique la conception en
situation de mobilité.
Fluffy et Mr. Lacombe Lt. Mac Lusky
Un utilisateur attentif
Un environnement familier dédié
Un espace privatif
Un écran de grande taille
Un clavier stable / u...
Un utilisateur distrait
Un espace public
Environnement variable
Ecran de taille réduite
Clavier + touch
Réseau variable
Un...
Concevoir pour le mobile, c’est : prendre en compte le manque
de concentration, l’intérruption et la distraction.
Concevoir pour le mobile, c’est donc:
ne pas trop solliciter ce truc.
Tips #4
Rester core functionality !
x
Exemple : le remplissage automatique
Simplifier au maximul
l’effort de l’utilisateur !
Tips #5
!
"La perfection est atteinte, non pas lorsqu'il n'y a plus
rien à ajouter, mais lorsqu'il n'y a plus rien à retirer".
Ant...
• les présentations
• lE cours d’aPPLICATION MOBILE
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1
Prochain SlideShare
Chargement dans…5
×

ESG - Application Mobile - Cours 1

1 596 vues

Publié le

Publié dans : Mobile
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 596
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
90
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

ESG - Application Mobile - Cours 1

  1. 1. • les présentations • Plan de cours • Concevoir pour le mobile SOMMAIRE - 03/05/2014
  2. 2. Alban Oujagir UX Designer Marcel WW
  3. 3. alban.oujagir@gmail.com @oujagir_alban Alban Oujagir
  4. 4. LES Présentations
  5. 5. • les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile SOMMAIRE - 03/05/2014
  6. 6. objectif PLaN DE COURS La maîtrise complète d’un projet mobile.
 De la prise de brief au lancement de l’application.
  7. 7. 5 Phases PLaN DE COURS
  8. 8. 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
  9. 9. 1. Le Marché mobile - Introduction : Concevoir pour le mobile - Chiffes clés et tendances - Une grande diversité de terminaux PLaN DE COURS
  10. 10. 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
  11. 11. 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
  12. 12. 4. Comment ne pas se faire avoir par la technique ? - Zoom sur les technos - Les OS - Cross platform - Tips PLaN DE COURS
  13. 13. 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
  14. 14. • les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile SOMMAIRE - 03/05/2014
  15. 15. @esgMS MEB alban oUjagir LA CONCEPTION POUR L’objet qui est TOUJOURS DANS VOTRE POCHE
  16. 16. Quelques précisions…
  17. 17. Le mobile c’est quoi ? (dans cette présentation) Connexion 3G / Wifi Stockage des données Clavier (physique ou virtuel) Toujours dans la poche
  18. 18.  « Et la tablette c’est du mobile ? » 
  19. 19. En 2013
 85% des tablettes vendues en France son wi-fi
  20. 20. Pourquoi s’intéresser au mobile ? en 4Lieux communs ?
  21. 21. Lieu commun #1 Tout le monde en a un (ou presque)
  22. 22. Lieu commun #1 Tout le monde en a un (ou presque) 38% des français possèdent un smartphone 2012
 ventes des smartphones supp. au PC www 85%
 des téléphones vendus avec un browser 50%
 du traffic de Facebook fait sur mobile
  23. 23. De plus en plus de gens sont et seront équipés d’un smartphone connecté !
  24. 24. Lieu commun #2 Le contexte d’utilisation d’un mobile n’est pas celui d’un ordinateur.
  25. 25. Fluffy et Mr. Lacombe Lt. Mac Lusky
  26. 26. ! 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%
  27. 27. Le mobile est utilisé partout et en toute circonstance !
  28. 28. Lieu commun #3 L’utilisateur mobile est multi-tâches comme son téléphone.
  29. 29. 72% des utilisateurs naviguent sur mobile en : 44% En écoutant de la musique 27% En jouant 33% En regardant la TV 22% En lisant le journal 22% En lisant des livres
  30. 30. Le mobile est un ami fidèle toujours prêt à m’accompagner dans toutes les tâches de mon quotidien !
  31. 31. Lieu commun #4 Le portable c’est un véritable concentré de technologie
  32. 32. L’iPhone 5 est aussi puissant qu’un supercalculateur de 1985
  33. 33. Microphone Speakers APN + Caméra Vidéo Géolocalisation Lecteur RFID Capteur Mutli-touch Accéléromètre Boussole Feedback haptique Capteur de mouvement
  34. 34. Allez viens ! Regarde tout ce que l’on peut faire !
  35. 35. Lieu commun #1 Lieu commun #2 Lieu commun #3 Lieu commun #4 Le mobile offre des opportunités fonctionelles quasi infinies.
  36. 36. « 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
  37. 37. La minute blind test
  38. 38. La minute blind test
  39. 39. Avant je faisais d’une certaine façon, et maintenant je ne ferai plus jamais comme avant. Shazam à créé un nouveau comportement
  40. 40. Une minute de silence SVP
  41. 41. Le smartphone se substitue aux objets du quotidien...
  42. 42. ...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 !
  43. 43. Comme disait McLuhan : « We shape our tools and thereafter our tools shape us » Marshall McLuhan Understanding Media : The Extensions of Man -1964
  44. 44. 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.
  45. 45. 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.
  46. 46. 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.
  47. 47. Avec un espoir : transformer un comportement en un usage !
  48. 48. Aller observer les utilisateurs dans leur milieu naturel. Tips #1 LET’S GO OUTSIDE !
  49. 49. Tips #2 Exploite la technologie de ton mobile !
  50. 50. Petit voyage à Singapour
  51. 51. OKAMOTO / TipOff - Cannes 2012 Mobile Lions Shortlist TBWA TEQUILA Singapore
  52. 52. Cet exemple répond aux besoins des utilisateurs dans un contexte donné et aux objectifs de la marque : UTILISATEUR(S) OBJECTIF(S) CONTEXTE
  53. 53. Mais est-ce toujours suffisant ?
  54. 54. Fuel Band : L’histoire d’un bide (ou pas)
  55. 55. 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.
  56. 56. « 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
  57. 57. Concevoir pour le mobile : Observations d’usages Remontées d’insights IDEABIG+itération
  58. 58. «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
  59. 59. Tips #3 ! Il ne faut jamais oublier ce qu’implique la conception en situation de mobilité.
  60. 60. Fluffy et Mr. Lacombe Lt. Mac Lusky
  61. 61. 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
  62. 62. Un utilisateur distrait Un espace public Environnement variable Ecran de taille réduite Clavier + touch Réseau variable Une batterie
  63. 63. Concevoir pour le mobile, c’est : prendre en compte le manque de concentration, l’intérruption et la distraction.
  64. 64. Concevoir pour le mobile, c’est donc: ne pas trop solliciter ce truc.
  65. 65. Tips #4 Rester core functionality ! x
  66. 66. Exemple : le remplissage automatique Simplifier au maximul l’effort de l’utilisateur ! Tips #5
  67. 67. ! "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.
  68. 68. • les présentations • lE cours d’aPPLICATION MOBILE • Concevoir pour le mobile SOMMAIRE - 03/05/2014

×