Diagram Illustration

Que sont les wireframes de sites Web ?


Sommaire

Une ressource complète qui explique l'utilité des wireframes, comment l'expérience utilisateur et l'interface utilisateur entrent en jeu à un stade précoce de la conception Web et d'applications, et comment le logiciel rend ces opérations plus faciles, rapides et efficaces.

Que sont les wireframes ?

À l'origine, le terme « wireframe » faisait référence à une représentation visuelle d'objets en trois dimensions, comme ceux utilisés dans la conception et le développement de produits. Aujourd'hui, il est également utilisé pour décrire la modélisation en 3D dans le contexte des images de synthèse et de la conception et du développement d'applications mobiles et de pages Web en 2D.

exemple de wireframe

Dans la conception Web, un wireframe ou diagramme de wireframe est une représentation visuelle en niveaux de gris de la structure et de la fonctionnalité d'une seule page Web ou d'un écran d'application mobile. On utilise les wireframes au début du processus de développement, pour établir la structure de base d'une page avant l'ajout de son visuel et de son contenu. On peut les créer en utilisant un support papier, directement en HTML/CSS ou à l'aide d'applications logicielles.

Objectifs des wireframes

Les wireframes remplacent la nature abstraite du plan de site, qui est habituellement la première étape du développement d'un site, par une ressource plus tangible et compréhensible. Les wireframes répondent à plusieurs objectifs interdépendants :

  • Faire en sorte que le site ou l'application soient créés en fonction d'objectifs. Une visualisation claire des caractéristiques, sans influence créative trop présente, permet aux parties prenantes de se concentrer sur d'autres aspects du projet. La création de wireframes définit la mise en œuvre des différentes caractéristiques en illustrant comment elles fonctionneront, où elles seront situées et quels avantages elles fourniront. Une caractéristique peut ainsi être retirée, tout simplement parce qu'elle n'est pas en phase avec les objectifs de votre site.
  • Se concentrer sur l'utilisabilité. La création de wireframes permet d'observer objectivement les noms des liens, les chemins de conversion, la facilité d'utilisation, la navigation et le placement des fonctionnalités. Les wireframes vous aident à identifier les défauts de l'architecture ou des fonctionnalités du site et vous montrent son degré de fluidité du point de vue de l'utilisateur.
  • Tenir compte du développement potentiel du contenu. Si vous savez que votre site va se développer dans un avenir proche, vous devez faire en sorte qu'il soit en mesure de gérer cette croissance avec un impact minimal sur son architecture, son utilisabilité et sa conception. La création de wireframes peut être un révélateur de ces importantes opportunités de développement du contenu et de la façon de les intégrer.
  • Faciliter les retours d'informations et les modifications. Au lieu de fusionner toutes les fonctionnalités et tous les éléments de mise en page et créatifs lors d'une seule étape, les wireframes garantissent leur prise en considération séparée. Cela permet aux parties prenantes de réagir beaucoup plus tôt dans le processus. La création de wireframes à l'aide d'un logiciel allège le processus répétitif inhérent à la conception Web.

Intérêt des wireframes dans le développement de sites Web et d'applications

Les wireframes permettent à tous les participants au développement d'un site Web de disposer des mêmes informations. Mais pour quels avantages ? Les avantages des wireframes sont nombreux : la conception graphique est plus précise. L'équipe de développement comprend mieux ce sur quoi elle travaille. La création de contenu devient plus simple. Il n'est plus nécessaire de manipuler le système, corriger ou recréer totalement en cours de processus (ce qu'on appelle la « dérive des objectifs »). Quel est l'intérêt ultime de tout cela ? Gagner du temps et de l'argent.

Expérience utilisateur, interface utilisateur et conception de wireframes

La conception de l'expérience utilisateur est une méthode permettant de renforcer la fidélité des clients et leur satisfaction par l'amélioration de la simplicité et de la convivialité de l'interaction entre le client et le site, l'application et le produit. La conception de l'interface utilisateur est plus proche de la conception graphique, bien que les responsabilités qui lui sont liées soient un peu plus complexes. En général, la conception de l'expérience utilisateur précède la conception de l'interface utilisateur. L'expérience utilisateur et l'interface utilisateur ont tendance à, et doivent, se chevaucher dans le processus de conception des wireframes. Parmi les axes prioritaires :

Architecture de l'information et wireframes 

Partie intégrante de l'ensemble du processus de développement de sites Web et de création de wireframes, l'architecture de l'information (AI) consiste à placer et à hiérarchiser l'information de façon à ce qu'elle soit comprise par les futurs utilisateurs d'un site ou d'une application mobile. Selon l'ouvrage Information Architecture for the World Wide Web, ce principe repose sur quatre points de base :

  • Les schémas et structures organisationnels : catégoriser et structurer l'information
  • Les systèmes d'identification : représenter l'information
  • Les systèmes de navigation : parcourir l'information
  • Les systèmes de recherche : rechercher et trouver l'information

Une bonne AI commence par une analyse complète de l'activité permettant d'élaborer une stratégie de contenu et de disposer d'une vue d'ensemble de la structure, du contenu et du style de conception en fonction des objectifs de l'entreprise. Les prototypes papier et les wireframes constituent la première étape permettant de s'assurer que l'analyse et la stratégie sont correctes. Le fait de tester des prototypes et wireframes est la meilleure façon de recevoir des réactions de la part des utilisateurs au tout début du processus de conception, ce qui permet d'éviter des refontes coûteuses une fois que le site est en ligne. Ce processus facilite par ailleurs l'évaluation des diverses conceptions sur le plan des performances et des préférences des utilisateurs, et permet de créer le meilleur produit.

Conception de la navigation et wireframes

Le système de navigation comprend un réseau d'éléments à l'écran qui permettent à l'utilisateur de passer de page en page. La conception de la navigation se doit de clarifier la relation entre les liens afin que les utilisateurs comprennent naturellement leurs options de navigation. Les sites Web proposent en général de multiples systèmes de navigation : navigation globale, locale, complémentaire, contextuelle et de courtoisie.

Conception de l'interface utilisateur et wireframes

La conception de l'interface utilisateur implique de choisir et d'organiser  des éléments d'interface utiles aux utilisateurs pour interagir avec les fonctionnalités du système, et ce d'une manière qui permet d'optimiser l'efficacité et la simplicité d'utilisation. Parmi les éléments d'une interface utilisateur, on retrouve le plus souvent les boutons, les champs de saisie de texte, les cases à cocher, les menus et les boutons d'option.

En savoir plus sur les outils de wireframe pour l'interface utilisateur

Types de wireframes

Il existe quatre types de wireframes distincts, allant du plus simple (en noir et blanc ou sous forme de plan) au plus complexe (simulation quasi réelle) :

  • Wireframes de base. Ce sont des représentations que l'on qualifie également de « basse fidélité », c'est-à-dire des schémas de page très simples, généralement en noir et blanc.

  • Wireframes annotés.  Ils ajoutent de nombreux détails à un wireframe de base. Les annotations sont des notes très courtes, placées généralement sur le côté ou au bas du wireframe, qui décrivent chaque élément du wireframe. Elles sont en règle générale séparées par des zones de contenu et de fonctionnalité, et présentent (brièvement) le motif et l'objectif de chaque élément.

  • Wireframes de flux d'utilisateur. Lorsque l'annotation ne suffit pas à montrer comment un utilisateur de site ou d'application va logiquement parcourir le contenu d'une page à l'autre, il peut être nécessaire d'ajouter des informations. Ces wireframes peuvent être des vues statiques d'un wireframe entièrement interactif, mais ils peuvent également inclure un diaporama ou une série de wireframes visant à représenter un flux d'utilisateur principal ou un ensemble de flux d'utilisateur.

  • Wireframes interactifs haute définition.  Vous pouvez essayer les interactions (par exemple, appuyer, cliquer et balayer) dans un wireframe ou entre des wireframes distincts. Le fait d'ajouter des interactions avant de passer à la maquette complète ou au prototypage en ligne permet au concepteur et au développeur de gagner du temps. Cette variante des wireframes n'est possible qu'en conception graphique et de présentation, ou dans des logiciels de prototypage et de création de wireframes.

Comment concevoir et créer un wireframe simple

Maintenant que nous avons examiné les éléments fondamentaux des wireframes, regardons comment rassembler toutes ces informations afin de concevoir et créer un wireframe simple. 

1. Pensez à l'objectif ultime du site Web et gardez cet objectif en tête lors de la conception. Réfléchissez à la façon dont l'utilisateur va interagir avec l'interface.

2. Commencez par une représentation simple, basse fidélité, de la page Web, segmentée en trois parties : l'en-tête (soit le premier élément que les utilisateurs vont voir en haut de la page), le corps de la page Web et le pied de page, qui accueille en général des informations moins importantes.

dessiner un wireframe

3. Ensuite, pensez à la navigation. Ajoutez des boutons et des liens permettant aux utilisateurs d'accéder aux principales sections de votre site, y compris les zones de contenu, la zone de recherche et la page de connexion.

dessiner un wireframe

4. Annotez votre wireframe pour plus de clarté. 

wireframe annoté

Une fois à ce stade, vous pouvez partager le wireframe avec les parties prenantes avant de passer à l'étape suivante. Vous pouvez dessiner le wireframe initial à la main sur papier ou sur un tableau blanc. Toutefois, arrivé à l'étape 4, vous pouvez utiliser un logiciel pour aller plus loin dans l'élaboration du wireframe.

Vous voulez en savoir plus sur la façon de créer votre propre wireframe ? Consultez ce tutoriel Lucidchart.

Utiliser des logiciels et outils de wireframes pour concevoir des pages Web et des applications

Vous pouvez essayer d'imaginer le résultat final d'un site Web ou d'une application dans votre tête, mais il est beaucoup plus facile de préparer un wireframe et de vous familiariser avec ce que vous devez faire avant même de commencer. Les logiciels et outils de wireframe vous permettent de créer des modèles d'exemple tout en vous offrant une certaine flexibilité et des fonctionnalités qui font gagner du temps. Vous pouvez développer des idées, avoir une vue d'ensemble du projet et éviter les erreurs en cours de route. Grâce aux modèles, il peut être encore plus facile de visualiser rapidement vos idées, de faire des ajustements, et d'analyser et de résoudre tous les problèmes.

Découvrez-en davantage sur l'utilisation des logiciels et des outils qui permettent de concevoir des wireframes de sites Web.

Découvrez-en davantage sur l'utilisation des logiciels et des outils qui permettent de concevoir des wireframes d'applications.

Modèles et exemples de wireframes

Les modèles de wireframes sont essentiels lorsque vous commencez à concevoir une nouvelle page Web ou une application. Il existe des modèles de wireframes disponibles gratuitement en ligne. La plupart des logiciels de conception de sites et d'applications fournissent également une grande variété de modèles. Voici quelques exemples de modèles efficaces issus de Lucidchart pour vous aider à comprendre comment le processus de conception de wireframes peut fonctionner :

wireframe LinkedIn

Wireframe de recherche Google

wireframe iphone

Maquettes et outils pour maquettes

Les wireframes sont des paramètres fictifs de conception, alors qu'une maquette donne des détails visuels, comme les couleurs, la typographie et les éléments de marque. La maquette partage avec le wireframe des objectifs de documentation et de coordination de la vision de l'équipe. Toutefois, elle présente l'avantage de proposer des visuels de qualité supérieure, ce qui la rend plus utile auprès des décideurs. En substance, la maquette ajoute une touche visuelle à l'esquisse dessinée dans le wireframe.

maquette wordpress

maquette android

 

Comment choisir des applications et logiciels de création de wireframes

Les logiciels de création de wireframes sont censés faciliter le développement de n'importe lequel des quatre types de wireframes — basiques, annotés, de flux d'utilisateur et interactifs — et ce, avec simplicité et rapidité. Voici quelques éléments auxquels penser avant de prendre une décision :

  • Jusqu'où aller dans le réalisme ? La capacité de conception de certains logiciels est très simple et s'apparente à un dessin à main levée, tandis que d'autres sont plus proches d'un prototype minimaliste, avec une expérience utilisateur et une interface davantage finalisées. Votre choix dépend du degré de finition nécessaire à votre produit final.
  • Le partage est-il une priorité ? Certains produits permettent d'exporter des wireframes dans divers formats, tandis que d'autres exigent que le produit soit installé sur l'ordinateur de quiconque veut visualiser le dessin. Les utilisateurs qui cherchent à partager leur conception avec un grand nombre de personnes ont besoin d'un programme qui facilite le partage à des fins de consultation, de collaboration et d'approbation, à l'instar des solutions en ligne ou dans le cloud.
  • Quelle plateforme préférez-vous ? Les utilisateurs qui souhaitent partager et concevoir en équipe sur plusieurs ordinateurs exigeront plutôt un produit disponible en ligne ou dans le cloud. Certains utilisateurs travaillent sur un seul appareil et certaines entreprises souhaitent stocker localement les conceptions et veulent un logiciel à installer.
  • Avez-vous besoin d'un accès hors ligne ? Les produits en ligne ne sont accessibles que via un navigateur Web. Les utilisateurs qui optent pour ce type de produit sont susceptibles de ne pas pouvoir enregistrer des conceptions localement ou de ne pas pouvoir travailler sans accès à Internet. Les produits basés sur un navigateur ont tendance à être moins lourds et sont mis à jour plus souvent, mais peuvent ne pas être accessibles hors ligne.

Recherchez-vous des modèles et des bibliothèques ? Ces éléments facilitent grandement la création d'un wireframe. Les logiciels qui proposent des modèles pour les applications mobiles, les conceptions de navigateurs Web et d'autres formats font vraiment gagner du temps et sont particulièrement utiles lorsque vous devez réaliser un grand nombre de wireframes aux spécifications diverses. En outre, de nombreux produits de création de wireframes fournissent des bibliothèques d'icônes et de widgets, ainsi que des thèmes.

Pourquoi Lucidchart est l'application en ligne qu'il vous faut pour créer des wireframes

Lucidchart peut être utilisé en quelques minutes par n'importe qui, de l'ingénieur au novice. Créez une démonstration interactive d'un site Web en un rien de temps ! Aucun téléchargement n'est nécessaire. Désormais, vous pouvez créer des diagrammes de qualité dans le cloud, via votre navigateur. Une licence suffit pour tous vos ordinateurs et tablettes.

  • Simplicité : des menus déroulants, boutons et éléments généraux vous aideront à esquisser un nouveau concept ou à en améliorer un ancien. Les zones cliquables vous permettent de reproduire la navigation sur un site Web : passage d'une page à une autre, clic sur un lien vers une page externe, lancement d'une vidéo et plus encore.
  • Sécurité et fiabilité : le protocole de sécurité d'entreprise d'Amazon Web Services préserve la sécurité de vos informations. Lorsque vous créez des diagrammes dans Lucidchart, vos modifications sont continuellement enregistrées et stockées dans de multiples endroits. De plus, vous êtes informé lorsque des problèmes de connectivité nous empêchent d'enregistrer votre dernier projet.
  • Éléments interactifs : ne vous contentez pas d'un wireframe statique. Créez plutôt une maquette interactive qui donne la possibilité de cliquer sur les boutons, de regarder les vidéos, de naviguer dans les menus et de tester d'autres liens.
  • Collaboration fluide : réduisez le temps de développement en multipliant les contributeurs. Vos clients, créateurs de contenu et programmeurs peuvent facilement échanger et réagir.
  • Richesse des fonctionnalités : les clients apprécieront un wireframe interactif permettant de présenter l'expérience utilisateur. Activez le mode de démonstration pour offrir à vos concepteurs et clients un prototype fonctionnel d'une application ou d'un site Web.
  • Publication et partage : une fois votre wireframe terminé, vous pouvez le partager en toute simplicité. Enregistrez votre travail dans l'un des nombreux formats de fichiers d'image disponibles, imprimez-le ou envoyez-le par e-mail. Vous pouvez même le publier sur les médias sociaux ou le partager en privé afin de recueillir des commentaires.

Quelques lectures utiles