![Page 1: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/1.jpg)
Construire et prototyper rapidement
Un concept d’application mobile
Stéphanie Walter — @WalterStephanie
![Page 2: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/2.jpg)
Designer web & mobile.Spécialisée en interface et expérience utilisateur.
www.stephaniewalter.fr @WalterStephanie
Disponible en freelance et chez Alsacréations
![Page 4: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/4.jpg)
1. Définir plusieurs
concepts et idées
![Page 5: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/5.jpg)
Le but est de générer des concepts et des idées. Sur cette phase-là nous
cherchons à avoir du quantitatif et non du qualitatif. Chaque participant
pourra librement donner les idées qui lui viennent à l’esprit pour créer un
concept d’application à partir des mots. Aucune idée n’est mauvaise ni
bonne, mais nous les notons toutes.
Brainstorm Général
TODO : prenez une feuille blanche (ou un tableau blanc) et notez toutes
les idées d’application mobile qui vous viennent à l’esprit à partir de
ces mots.
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 6: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/6.jpg)
2. Cibler un concept exploitable à l’épreuve de la vie réelle
![Page 7: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/7.jpg)
• Les questions à vous poser :
– QUOI : qu’est ce que votre produit ? De quoi s’agit-il ?
– QUI : pour qui ce produit est-il fait ? Peut-on définir une cible précise
?
– POURQUOI : à quelle problématique votre produit répond-il ? En quoi
est-il utile pour les utilisateurs ? Qu’est ce qu’on construit ?
– OÙ : quelle vocation, locale, globale ?
– QUAND : quand les utilisateurs vont-il l’utiliser ?
Cibler un concept exploitable à l’épreuve de la vie réelle
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 8: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/8.jpg)
Le but est désormais d’éliminer les idées superflues, de ne retenir qu’une
seule piste et d’essayer de la développer. Il s’agit de reprendre les idées
une à une, et voir ce qui est faisable ou non, ce qui aurait une valeur
ajoutée pour l’utilisateur.
Cibler et redéfinir le concept
Présentez votre concept sous forme d’une phrase :
Mon projet est ___ [type d’application]___ . Il ‘adresse à ___ [cible]___ (se
trouvant ___[où]___) qui ont besoin de // en leur permettant de ___
[pourquoi, problématique]____. Il est plutôt utilisé ___(quand)___.
![Page 9: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/9.jpg)
3. Placer l’utilisateur au
cœur du processus
Jean-François Gornet
![Page 10: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/10.jpg)
• Profils d’un utilisateur virtuels basé sur un
archétype d’utilisateur « cible » pour aider à
l’amélioration de l’ergonomie des interfaces
et guider les décisions de conception :
– Basé sur des informations provenant de vrais
utilisateurs pour faciliter la conception et
éviter les clichés (enquête de terrain)
– On les imagine autour de scénarios types :
missions, objectifs, tâches à effectuer
Persona
![Page 11: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/11.jpg)
• Persona PRIMAIRE : « cibles » de
prédilection.
• Personas SECONDAIRES : Moins
important, les individus qui ont des
exigences fonctionnelles moins
complexes
PersonaVia octo.com
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 12: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/12.jpg)
• Identifier sa cible et baser les décisions de design sur une cible réelle
– éviter les retours basés sur des préférences personnelles
• Contrôle qualité
– proposer des fonctionnalités en rapport à ses besoins réels
– évaluation constante de l’interface et des fonctionnalités : on ne
développe pas / retire celles qui ne sont pas validées par nos personas
• Rationnaliser les décisions
– prioriser le développement en fonction des besoins réels
– éviter de dévier du périmètre initial du projet
Persona – pourquoi faire ?
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 13: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/13.jpg)
Exemple de persona chez MailChimp
![Page 14: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/14.jpg)
Imaginez un utilisateur mobile de votre projet. Qui est-il, où habite-il,
quel est son métier ? A quoi ressemble sa journée ? Que fait-il avant
et après l’utilisation de notre site ? Que va-t-il pouvoir en faire ? Etc.
Pour cela, imaginez à plusieurs un utilisateur fictif MAIS crédible et
remplissez la fiche fournie.
Proto Persona
![Page 15: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/15.jpg)
4. Cibler les fonctionnalités
![Page 16: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/16.jpg)
• Quelles sont les fonctionnalités principales ?
– Celles sans lesquelles l’application ne peut pas fonctionner
– Celles qui vont vous démarquer des concurrents
– Celles qui vont apporter une valeur ajoutée à vos utilisateurs
• Quelles seront les fonctionnalités secondaire ?
– Celles qui ne sont pas critiques pour le lancement immédiat du produit
– Celles qui n’apportent pas une valeur ajoutée immédiate à vos
utilisateurs
– Celles qui vont demander un développement lourd pour lequel on n’a
pas de suite le budget
Cibler les fonctionnalités
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 17: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/17.jpg)
À partir de votre concept d’application, élaborez un « mini cahier
des charges » sous forme d’une liste à puce avec :
• Les fonctionnalités principales de votre produit
• Les fonctionnalités secondaires
• Les futures besoins techniques spécifiques sur certaines (GPS,
vidéo, audio, etc. ?)
Rédaction d’un cahier des charges
![Page 18: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/18.jpg)
5. Définir l’architecture et
l’arborescence
![Page 19: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/19.jpg)
Modéliser le parcours utilisateur
Construire un parcours utilisateur cohérent :
1. Lister les gabarits de vues
– Ne pas oublier qu’une pop-up, une modale = une action supplémentaire
= une vue à lister
2. Créer le parcours utilisateur : comment passe-t-on d’une page/vue
à une autre ?
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 20: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/20.jpg)
Modélisation de parcours utilisateur
![Page 21: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/21.jpg)
Parcours utilisateur version papier
![Page 22: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/22.jpg)
• Identifiez les différentes pages / vues dont l’utilisateur aura
besoin pour accomplir sa tâche.
• Comment passe-il d’un page/vue à une autre ?
• Le but n’est pas de rentrer dans les détails du contenu du
gabarit (ni de créer un plan du site), mais d’avoir une vue
d’ensemble et globale des différentes vues et leur
articulation les unes avec les autres.
• Attention les modales, les pop-up sont également comptées
comme une « vue » puisqu’elles font apparaître de nouvelles
données / interactions à l’utilisateur.
Parcours utilisateur
TODO : utilisez papier, crayon, post-its pour créer l’achitecture d’information de votre
concept et mettre en avant le parcours utilisateur et l’articulation entre les différentes pages
![Page 23: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/23.jpg)
6. Prototypage papier
![Page 24: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/24.jpg)
Prototype papier
Pas cher en matériel : ciseaux, post-it, crayon et GO !
Interface Origami
![Page 25: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/25.jpg)
Facilite la discussion
Facile de recommencer de zéro
![Page 26: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/26.jpg)
iPad Papier
Guérilla Prototyping : 10 minutes
pour créer le prototype papier
« fonctionnel » et tester
l’hypothèse
![Page 27: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/27.jpg)
Prévoyez le cas d’utilisation pour
l’activité principale de votre
concept.
Prototypage papier de votre concept
TODO : Réalisez un prototype
papier des différentes vues de ce
processus. Le but est cette fois
d’aller dans les détails : pas la peine
de prévoir le texte, mais prévoyez les
boutons et les interactions, les
modales, les pop-up et les
différentes pages.
![Page 28: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/28.jpg)
http://inspirationhut.net/printable-paper/
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 29: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/29.jpg)
http://inpx.it/printable-sketch
www.interfacesketch.com/
Stéphanie Walter – Conception Mobile – Strasweb 2016
![Page 30: Construire et prototyper rapidement un concept d’application mobile](https://reader034.vdocuments.pub/reader034/viewer/2022042618/58a6cd5f1a28abcc458b5d3d/html5/thumbnails/30.jpg)
Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 France
Designer web & mobile.spécialisée en interface et expérience utilisateur.
www.stephaniewalter.fr @WalterStephanie