Conception de sites web : le prototype fonctionnel [1/2]

Plus un site web est ambitieux, plus la phase de conception prend de l’importance lors de sa mise en oeuvre. En effet, une étape intermédiaire est nécessaire entre la réception d’un nouveau projet et sa réalisation concrète : que le porteur du projet ait une vision précise ou non des fonctionnalités à développer, il est nécessaire de s’accorder sur la forme que l’ensemble devra prendre. Cette étape « amont » comprend, outre l’aspect esthétique, la définition d’une logique de navigation, la répartition des informations, la structure des pages… Une réflexion initiale visant à donner au site une forme qui soit la plus efficace possible au regard des objectifs fixés, adaptée à sa cible, intuitive et agréable à l’utilisateur.

Différents documents sont réalisés lors de cette phase dans le but de concrétiser les idées évoquées. Simples croquis au départ, ces documents pourront évoluer jusqu’au prototype fonctionnel pour vos projets de site web complexes ou innovants.

Mockup vimeo

Mockup d’une page profil de Vimeo par Sockyung ‘Sox’ Hong

Qu’est-ce qu’un prototype fonctionnel ?

Peut-être avez-vous déjà entendu parler de wireframes, zonings, maquettes ou mockups : tous ces modes de prévisualisation de pages – chacun plus ou moins détaillés, et plus ou moins habillés graphiquement – ont ceci de commun qu’ils sont statiques. C’est donc très utile pour appréhender les détails page par page, notamment en termes de graphisme, mais encore trop abstrait pour pouvoir se projeter dans une vision globale du site et de ses fonctionnalités. A l’inverse, le prototype intègre la dimension interactive : c’est en quelque sorte une maquette animée permettant de simuler un site en action. Un prototype fonctionnel, comme son nom l’indique, doit donner un exemple d’application concrète, avec navigation, effets de survol, simulation de connexion, apparition/disparition de volets contextuels…

Pourquoi opter pour le prototypage ?

A première vue, la réalisation d’un prototype représente une étape supplémentaire dans la conception de sites web, potentiellement chronophage selon le degré de précision souhaité, et donc coûteuse… Pourtant, l’étape du prototypage apporte bien des avantages :

cohésion : réalisé de façon collaborative, un prototype devient un support d’échange assurant que tous les acteurs concernés par  le projet – clients, développeurs, graphistes… – aient le même concept en tête. Parce qu’une simulation de site web est beaucoup plus parlante qu’un croquis ou une description textuelle, il évite ainsi les incompréhensions menant à des fonctionnalités inutiles et réduit sensiblement les allers-retours entre le commanditaire et l’agence web.

gain par anticipation : un prototype de site web même partiellement fonctionnel permet d’effectuer des premiers tests utilisateurs, permettant de se rendre compte de ce qui est ergonomique/logique ou pas… et donc d’éviter des écueils majeurs qu’il vaut  mieux repérer à ce niveau là de la réalisation qu’après quelques centaines d’heures de développement…

optimisation : la souplesse et la facilité de modification d’un prototype multiplient les possibilités d’essais et variations, permettant le choix d’une version considérée comme plus efficace parmi plusieurs variations – ce qui n’est pas envisageable dans le cas d’une réalisation directe.

Vous l’aurez compris : chez Canal Web, nous sommes convaincus que pour les projets de sites web complexes, le jeu en vaut la chandelle… C’est pourquoi nous optons pour le prototype fonctionnel dès que les projets présentent des fonctionnalités spécifiques et/ou plusieurs profils utilisateurs. Mais un nouveau paramètre entre jeu à ce moment-là : le niveau de précision du prototype.

Quel niveau de précision pour un prototype ?

Exemple de prototype avec et sans design. Source : site officiel Axure

Exemple de prototype avec et sans design. Source : site officiel Axure.com

Il va sans dire qu’un prototype intégrant la totalité de la charte graphique du projet procure une véritable immersion ; l’expérience du prototype étant alors extrêmement proche de l’expérience finale attendue. Néanmoins, y appliquer le design prend un temps non négligeable, et en cas de changements significatifs dans la ligne graphique (pas toujours validée à cette étape de la conception), il faut alors répercuter les modifications sur l’ensemble du prototype.

Une autre option est donc de développer parallèlement le prototype d’un côté et le webdesign de l’autre : à condition, évidemment, d’une bonne communication entre les deux collaborateurs, cela représente un gain de temps. Le prototype serait alors plus abstrait (ne reprenant que la couleur et l’emplacement des éléments, pas leur aspect physique détaillé), mais beaucoup plus souple et rapide à mettre en place…

Dans un prochain article : les outils de conception

Conception de sites web : le prototype fonctionnel [1/2]
4.5 (4 votes)

A propos de Deborah

Déborah a rejoint Canal-Web en septembre 2012. Son objectif : en apprendre toujours plus autour des problématiques inhérentes à la réalisation web afin d'opter pour des solutions élégantes et efficaces.

1 commentaire

  1. Guiguik

    Bon article qui parle d’une facette peu ou mal utilisée et qui pourtant permet réellement un gain de temps et est toujours très bien perçus par les clients.
    Il y a malgré tout un point peu détaillé et qui doit pourtant être pris en compte au niveau de la précision qui concerne la gestion des données. Avec les outils de prototypage actuels il est facilement faisable d’avoir une maquette entièrement fonctionnel avec saisie, contrôle, sauvegarde et visualisation des données. C’est un vrai plus mais qui s’avère souvent très macrophage même si il apporte une qualité supplémentaire au prototype.
    Je ne sais pas si le sujet est traité ailleurs mais un comparatif un peu plus détaillé avec les mocks up pourrait également être intéressant.

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Time limit exceeded. Please complete the captcha once again.