Le prototypage d'interfaces avec Expression Blend 4 et SketchFlow

Expression


précédentsommairesuivant

I. Pourquoi créer des prototypes ?

Les prototypes ou maquettes d'interface sont une part essentielle dans un projet informatique que de nombreux développeurs ont tendance à négliger pour différentes raisons : créer un prototype attractif peut être compliqué et nécessiter trop de temps à mettre en place, communiquer des idées de design justes et convaincantes est difficile.

Pourtant, l'utilisation d'une maquette en amont de la phase de développement procure de nombreux avantages, non seulement aux développeurs, mais aussi aux clients et futurs utilisateurs.

Les maquettes et prototypes peuvent accélérer les temps de développement d'un projet, créer des tests utilisateurs plus significatifs et mettre les développeurs et les designers autour de la même table.

Les maquettes jouent un rôle important dans l'architecture de l'information

L'architecture de l'information consiste à structurer l'application selon la logique de l'utilisateur final pour en satisfaire les besoins. Elle s'articule autour de plusieurs principes : systèmes d'organisation des contenus de l'application, système de navigation, appellation des éléments de l'interface et systèmes de recherche. Ce sont ces attributs qui permettront de concrétiser les choix d'architecture.

Certains besoins ou concepts peuvent sembler être de grandes idées durant la phase initiale d'un projet, mais se révéler compliqué à mettre en place une fois en phase de développement. Les maquettes étant beaucoup plus faciles à créer qu'une application finie, vous pouvez prendre le temps de les utiliser. Même très tôt dans la phase de développement vous pouvez avoir une idée de l'expérience utilisateur et ainsi pointer de potentiels problèmes d'utilisation avec votre design. Certains choix peuvent ainsi être remis en question lors de leur confrontation à des problématiques d'usage, de marketing, de stratégie, d'implémentation technique, etc. De plus, les problèmes découverts peuvent parfois changer de façon drastique votre approche du projet. Il est plus facile de faire des ajustements tôt dans la phase de développement que trois jours avant la livraison de l'application.


Les maquettes peuvent vous faire gagner du temps

Lorsque l'on a un délai assez court pour mener à bien un projet il peut sembler être une perte de temps que de faire une maquette pour un écran. On peut se dire : « je n'ai pas beaucoup de temps devant moi donc je ferais mieux de commencer les développements directement ». Nous faisons tous cette même erreur. Mais quoi que vous fassiez, le client aura toujours des retours à formuler. En commençant par une maquette, vous pointez les problèmes plus tôt et faites les ajustements dans la maquette plutôt que sur la « vraie » version où peuvent se trouver de nombreux petits détails à prendre en compte lors d'une modification. Une fois la maquette approuvée, il ne s'agit plus que de design. Si la phase de maquettage est productive alors vous ne recevrez pratiquement plus de requêtes concernant des révisions de mise en page et le client et vous pourrez vous concentrer sur les aspects visuels.

Aider le client à se concentrer ; les utilisateurs sont émotifs

La création d'une maquette peut être compliquée par le fait que les gens ont des réponses émotionnelles et biaisées par certains aspects visuels de la maquette. Une maquette à l'aspect trop fini peut provoquer des réactions du style : « je déteste ce rose », « cette version du logo n'est pas la bonne », etc. Présentez une maquette avec un bouton bleu (parce que vous trouvez que c'est plus joli) et lors de la prochaine réunion client vous êtes parti pour une demi-heure de conversation concernant le choix du bleu.

C'est pourquoi les maquettes sont de préférence dans les tons gris avec un style graphique donnant une impression de brouillon. Cela permet aux utilisateurs de mieux se concentrer sur l'aspect fonctionnel plutôt que sur les couleurs, le style des éléments graphiques, etc. Cela vous permettra de recueillir des retours concernant le dimensionnement, la mise en page, le placement des éléments sans que le client ne soit perturbé par la présentation.

Les maquettes sont un point de collaboration

Elles permettent de mettre en évidence les fonctionnalités (présence d'une pagination, qu'est-ce qui se passe quand on clique ici) et la mise en page des différents écrans d'une application. Vous pouvez facilement travailler autour d'une maquette et vous assurez de créer une application utilisable tout en gardant les parties prenantes informées.

Les maquettes permettent le débat autour des éléments importants de l'application. C'est un point de collaboration entre les différentes parties prenantes au sein d'une équipe (développeurs, designers, client).

Les maquettes améliorent la vie des designers et des développeurs

En connaissant à l'avance quelles fonctionnalités doivent exister au sein de l'application, où et quand telle action doit avoir lieu, les développeurs peuvent faire leur travail sans avoir à se poser de questions et ainsi mieux répartir le travail entre eux.

Les maquettes offrent aux designers un point de départ en termes de contenu. Ils peuvent se concentrer sur ce qu'ils font de mieux sans avoir à se préoccuper de ce qu'il doit se passer sur l'écran.

Les maquettes interactives donnent une idée plus précise de l'interaction entre l'utilisateur et l'application

« Vous voulez dire quoi par: quand vous cliquez ici, cette partie de l'écran va se rafraichir avec de nouvelles informations, clignoter et une notification apparaitra, indiquant qu'un changement a eu lieu  ? Faites-moi voir ça ! ». Comment répondre à cette problématique sans prototype interactif (et sans attendre la version finale de l'application) ?

Des prototypes papiers ou faits à l'aide de logiciels tels que Visio ou Powerpoint peuvent être d'excellents guides durant les premières phases d'un projet, mais sont moins efficaces lorsqu'il s'agit de tester l'expérience utilisateur, là où une version interactive serait plus intéressante. Avoir un prototype sur lequel on peut cliquer, déplacer des éléments, naviguer d'un écran à l'autre, offre aux utilisateurs un meilleur confort et une meilleure aptitude à interagir comme ils le feraient avec une véritable application.


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Florian Casabianca. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.