Construire et prototyper rapidement un concept d’application mobile

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

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