Construire et prototyper rapidement
Un concept d’application mobile
Stéphanie Walter — @WalterStephanie
Designer web & mobile.
Spécialisée en interface et expérience utilisateur.
www.stephaniewalter.fr @WalterStephanie
Disponi...
Parlons le même language : lesgrosmotsdumobile.com
1. Définir plusieurs
concepts et idées
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 qualit...
2. Cibler un concept exploitable
à l’épreuve de la vie réelle
• Les questions à vous poser :
– QUOI : qu’est ce que votre produit ? De quoi s’agit-il ?
– QUI : pour qui ce produit est-...
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...
3. Placer l’utilisateur au
cœur du processus
Jean-François Gornet
• Profils d’un utilisateur virtuels basé sur un
archétype d’utilisateur « cible » pour aider à
l’amélioration de l’ergonom...
• Persona PRIMAIRE : « cibles » de
prédilection.
• Personas SECONDAIRES : Moins
important, les individus qui ont des
exige...
• 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...
Exemple de persona chez
MailChimp
Imaginez un utilisateur mobile de votre projet. Qui est-il, où habite-il,
quel est son métier ? A quoi ressemble sa journé...
4. Cibler les fonctionnalités
• Quelles sont les fonctionnalités principales ?
– Celles sans lesquelles l’application ne peut pas fonctionner
– Celles q...
À partir de votre concept d’application, élaborez un « mini cahier
des charges » sous forme d’une liste à puce avec :
• Le...
5. Définir l’architecture et
l’arborescence
Modéliser le parcours utilisateur
Construire un parcours utilisateur cohérent :
1. Lister les gabarits de vues
– Ne pas ou...
Modélisation de parcours utilisateur
Parcours utilisateur version papier
• Identifiez les différentes pages / vues dont l’utilisateur aura
besoin pour accomplir sa tâche.
• Comment passe-il d’un ...
6. Prototypage papier
Prototype papier
Pas cher en matériel : ciseaux, post-it, crayon et GO !
Interface Origami
Facilite la discussion
Facile de recommencer de zéro
iPad Papier
Guérilla Prototyping : 10 minutes
pour créer le prototype papier
« fonctionnel » et tester
l’hypothèse
Prévoyez le cas d’utilisation pour
l’activité principale de votre
concept.
Prototypage papier de
votre concept
TODO : Réal...
http://inspirationhut.net/printable-paper/
Stéphanie Walter – Conception Mobile – Strasweb 2016
http://inpx.it/printable-sketch
www.interfacesketch.com/
Stéphanie Walter – Conception Mobile – Strasweb 2016
Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 France
Designer web & mobile.
...
Prochain SlideShare
Chargement dans…5
×

Construire et prototyper rapidement un concept d’application mobile

550 vues

Publié le

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.

Publié dans : Design
1 commentaire
3 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
550
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
43
Commentaires
1
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Construire et prototyper rapidement un concept d’application mobile

  1. 1. Construire et prototyper rapidement Un concept d’application mobile Stéphanie Walter — @WalterStephanie
  2. 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. 3. Parlons le même language : lesgrosmotsdumobile.com
  4. 4. 1. Définir plusieurs concepts et idées
  5. 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. 6. 2. Cibler un concept exploitable à l’épreuve de la vie réelle
  7. 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. 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. 9. 3. Placer l’utilisateur au cœur du processus Jean-François Gornet
  10. 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. 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. 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. 13. Exemple de persona chez MailChimp
  14. 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. 15. 4. Cibler les fonctionnalités
  16. 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. 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. 18. 5. Définir l’architecture et l’arborescence
  19. 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. 20. Modélisation de parcours utilisateur
  21. 21. Parcours utilisateur version papier
  22. 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. 23. 6. Prototypage papier
  24. 24. Prototype papier Pas cher en matériel : ciseaux, post-it, crayon et GO ! Interface Origami
  25. 25. Facilite la discussion Facile de recommencer de zéro
  26. 26. iPad Papier Guérilla Prototyping : 10 minutes pour créer le prototype papier « fonctionnel » et tester l’hypothèse
  27. 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. 28. http://inspirationhut.net/printable-paper/ Stéphanie Walter – Conception Mobile – Strasweb 2016
  29. 29. http://inpx.it/printable-sketch www.interfacesketch.com/ Stéphanie Walter – Conception Mobile – Strasweb 2016
  30. 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

×