Embed Size (px)
Citation preview
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
Disponible en freelance et chez Alsacréations
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 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
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-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
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)___.
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’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
• 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
• 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
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é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
4. Cibler les fonctionnalités
• 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
À 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
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 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
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 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
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é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.
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.spécialisée en interface et expérience utilisateur.
www.stephaniewalter.fr @WalterStephanie
