2. • les présentations
• Plan de cours
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014

3. Alban Oujagir
UX Designer
Marcel WW

4. alban.oujagir@gmail.com
@oujagir_alban
Alban Oujagir

5. LES Présentations

6. • les présentations
• lE cours d’aPPLICATION MOBILE
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014

7. objectif
PLaN DE COURS
La maîtrise complète d’un projet mobile.
De la prise de brief au lancement de l’application.

8. 5 Phases
PLaN DE COURS

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

10. 1. Le Marché mobile
- Introduction : Concevoir pour le mobile
- Chiffes clés et tendances
- Une grande diversité de terminaux
PLaN DE COURS

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

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

13. 4. Comment ne pas se faire avoir par la technique ?
- Zoom sur les technos
- Les OS
- Cross platform
- Tips
PLaN DE COURS

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

15. • les présentations
• lE cours d’aPPLICATION MOBILE
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014

16. @esgMS MEB
alban oUjagir
LA CONCEPTION POUR L’objet
qui est TOUJOURS
DANS VOTRE POCHE

17. Quelques précisions…

18. Le mobile
c’est quoi ?
(dans cette présentation)
Connexion 3G / Wifi
Stockage des données
Clavier (physique ou virtuel)
Toujours dans la poche

19. « Et la tablette
c’est
du mobile ? »

20. En 2013
85% des tablettes
vendues en France
son wi-fi

21. Pourquoi s’intéresser au mobile ?
en 4Lieux communs
?

22. Lieu commun #1
Tout le monde en a un
(ou presque)

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

24. De plus en plus de gens sont et seront équipés
d’un smartphone connecté !

25. Lieu commun #2
Le contexte d’utilisation
d’un mobile n’est pas
celui d’un ordinateur.

26. Fluffy et Mr. Lacombe Lt. Mac Lusky

27. !
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%

28. Le mobile est utilisé partout et en
toute circonstance !

29. Lieu commun #3
L’utilisateur mobile est
multi-tâches comme
son téléphone.

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

31. Le mobile est un ami fidèle toujours prêt à m’accompagner dans
toutes les tâches de mon quotidien !

32. Lieu commun #4
Le portable c’est un
véritable concentré
de technologie

33. L’iPhone 5 est aussi
puissant qu’un
supercalculateur de
1985

34. Microphone
Speakers
APN + Caméra Vidéo
Géolocalisation
Lecteur RFID
Capteur Mutli-touch
Accéléromètre
Boussole
Feedback haptique
Capteur de mouvement

35. Allez viens ! Regarde tout ce que l’on peut faire !

36. Lieu commun #1
Lieu commun #2
Lieu commun #3
Lieu commun #4
Le mobile offre des
opportunités fonctionelles
quasi infinies.

37. « 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

38. La minute
blind
test

39. La minute
blind
test

40. Avant je faisais d’une certaine façon,
et maintenant je ne ferai
plus jamais comme avant.
Shazam
à créé
un nouveau
comportement

42. Une minute de silence
SVP

44. Le smartphone
se substitue aux objets
du quotidien...

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

46. Comme disait
McLuhan :
« We shape our tools and thereafter
our tools shape us »
Marshall McLuhan Understanding Media : The Extensions of Man -1964

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

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

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

50. Avec un espoir :
transformer un comportement en un usage !

51. Aller observer les utilisateurs
dans leur milieu naturel.
Tips #1
LET’S GO OUTSIDE !

52. Tips #2
Exploite la technologie
de ton mobile !

53. Petit voyage
à Singapour

54. OKAMOTO / TipOff - Cannes 2012 Mobile Lions Shortlist TBWA TEQUILA Singapore

55. Cet exemple
répond aux besoins des
utilisateurs dans un
contexte donné
et aux objectifs de la
marque :
UTILISATEUR(S)
OBJECTIF(S)
CONTEXTE

56. Mais est-ce toujours suffisant ?

57. Fuel Band :
L’histoire d’un bide
(ou pas)

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

59. « 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

60. Concevoir
pour le mobile :
Observations d’usages
Remontées d’insights
IDEABIG+itération

61. «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

62. Tips #3
!
Il ne faut jamais oublier ce
qu’implique la conception en
situation de mobilité.

63. Fluffy et Mr. Lacombe Lt. Mac Lusky

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

65. Un utilisateur distrait
Un espace public
Environnement variable
Ecran de taille réduite
Clavier + touch
Réseau variable
Une batterie

66. Concevoir pour le mobile, c’est : prendre en compte le manque
de concentration, l’intérruption et la distraction.

67. Concevoir pour le mobile, c’est donc:
ne pas trop solliciter ce truc.

68. Tips #4
Rester core functionality !
x

69. Exemple : le remplissage automatique
Simplifier au maximul
l’effort de l’utilisateur !
Tips #5

70. !
"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.

71. • les présentations
• lE cours d’aPPLICATION MOBILE
• Concevoir pour le mobile
SOMMAIRE - 03/05/2014