Pour qu’un produit fonctionne, le choix de fonctionnalités qui correspondent aux besoins utilisateur et apportent un avantage concurrentiel est essentiel. Dans cet atelier de prototypage rapide, nous allons vous montrer qu’avec des techniques simples et adaptées, un peu de papier et stylos et 2 heures, il est possible de construire à plusieurs un prototype d’application mobile qui pourra servir de base de discussion avec par exemple un développeur ou un prestataire externe. Nous vous donnerons des astuces et bonnes pratiques pour une conception centrée utilisateur efficace et rapide en amont du projet.

1. Construire et prototyper rapidement
Un concept d’application mobile
Stéphanie Walter — @WalterStephanie

2. Designer web & mobile.
Spécialisée en interface et expérience utilisateur.
www.stephaniewalter.fr @WalterStephanie
Disponible en freelance et chez Alsacréations

3. Parlons le même language : lesgrosmotsdumobile.com

4. 1. Définir plusieurs
concepts et idées

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

6. 2. Cibler un concept exploitable
à l’épreuve de la vie réelle

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

8. 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)___.

9. 3. Placer l’utilisateur au
cœur du processus
Jean-François Gornet

10. • 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

11. • Persona PRIMAIRE : « cibles » de
prédilection.
• Personas SECONDAIRES : Moins
important, les individus qui ont des
exigences fonctionnelles moins
complexes
Persona
Via octo.com
Stéphanie Walter – Conception Mobile – Strasweb 2016

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

13. Exemple de persona chez
MailChimp

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

15. 4. Cibler les fonctionnalités

16. • 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

17. À 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

18. 5. Définir l’architecture et
l’arborescence

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

20. Modélisation de parcours utilisateur

21. Parcours utilisateur version papier

22. • 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

23. 6. Prototypage papier

24. Prototype papier
Pas cher en matériel : ciseaux, post-it, crayon et GO !
Interface Origami

25. Facilite la discussion
Facile de recommencer de zéro

26. iPad Papier
Guérilla Prototyping : 10 minutes
pour créer le prototype papier
« fonctionnel » et tester
l’hypothèse

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

28. http://inspirationhut.net/printable-paper/
Stéphanie Walter – Conception Mobile – Strasweb 2016

29. http://inpx.it/printable-sketch
www.interfacesketch.com/
Stéphanie Walter – Conception Mobile – Strasweb 2016

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