Maquette de site web

Un wireframe de site Web , également connu sous le nom de schéma de page ou plan d'écran , est un guide visuel qui représente la structure squelettique d'un site Web . Le terme wireframe est tiré d'autres domaines qui utilisent une structure squelettique pour représenter une forme et un volume en 3 dimensions. Les wireframes sont créés dans le but d'organiser les éléments pour atteindre au mieux un objectif particulier. L'objectif est généralement motivé par un objectif commercial et une idée créative. Le wireframe décrit la mise en page ou l'agencement du contenu du site Web, y compris les éléments d'interface et les systèmes de navigation, et la manière dont ils fonctionnent ensemble. Le wireframe manque généralement de style typographique, de couleur ou de graphiques, car l'accent principal réside dans la fonctionnalité, le comportement et la priorité du contenu. En d'autres termes, il se concentre sur ce que fait un écran, pas sur son apparence. Les wireframes peuvent être des dessins au crayon ou des croquis sur un tableau blanc, ou ils peuvent être produits au moyen d'un large éventail d'applications logicielles gratuites ou commerciales. Les wireframes sont généralement créés par des analystes commerciaux, des concepteurs d'expérience utilisateur, des développeurs, des concepteurs visuels et par des experts en conception d'interaction , en architecture de l'information et en recherche utilisateur.

Les wireframes se concentrent sur :

• La gamme de fonctions disponibles
• Les priorités relatives des informations et des fonctions
• Les règles d'affichage de certains types d'informations
• L'effet de différents scénarios sur l'affichage

Le wireframe du site Web relie la structure conceptuelle sous-jacente, ou l'architecture de l'information , à la surface ou à la conception visuelle du site Web. Les wireframes aident à établir la fonctionnalité et les relations entre les différents modèles d'écran d'un site Web. Processus itératif, la création de wireframes est un moyen efficace de réaliser rapidement des prototypes de pages, tout en mesurant la praticité d'un concept de conception. Le wireframing commence généralement entre « le travail structurel de haut niveau, comme les organigrammes ou les plans de site , et les conceptions d'écran ». Dans le processus de création d'un site Web, le wireframing est l'endroit où la réflexion devient tangible.

Les wireframes sont également utilisés pour le prototypage de sites mobiles, d'applications informatiques ou d'autres produits basés sur un écran qui impliquent une interaction homme-ordinateur .

Les wireframes peuvent être utilisés par différentes disciplines. Les développeurs utilisent des wireframes pour avoir une idée plus concrète des fonctionnalités du site, tandis que les concepteurs les utilisent pour faire avancer le processus d'interface utilisateur (UI). Les concepteurs d'expérience utilisateur et les architectes de l'information utilisent des wireframes pour montrer les chemins de navigation entre les pages. Les analystes commerciaux utilisent des wireframes pour soutenir visuellement les règles commerciales et les exigences d'interaction pour un écran. Les parties prenantes commerciales examinent les wireframes pour s'assurer que les exigences et les objectifs sont respectés tout au long de la conception. Les professionnels qui créent des wireframes comprennent les analystes commerciaux, les architectes de l'information, les concepteurs d'interaction, les concepteurs d'expérience utilisateur, les graphistes, les programmeurs et les chefs de produit.

Le travail avec des wireframes peut être un effort collaboratif car il relie l'architecture de l'information à la conception visuelle. En raison des chevauchements entre ces rôles professionnels, des conflits peuvent survenir, faisant du wireframing une partie controversée du processus de conception. Étant donné que les wireframes signifient une esthétique « minimaliste », il est difficile pour les concepteurs d'évaluer dans quelle mesure le wireframe doit représenter les dispositions réelles de l'écran. Pour éviter les conflits, il est recommandé aux analystes commerciaux qui comprennent les exigences des utilisateurs de créer un wireframe de base, puis de travailler avec les concepteurs pour améliorer encore les wireframes. Une autre difficulté des wireframes est qu'ils n'affichent pas efficacement les détails interactifs car ce sont des représentations statiques. La conception d'interface utilisateur moderne intègre divers dispositifs tels que des panneaux extensibles, des effets de survol et des carrousels qui posent un défi pour les diagrammes 2D.

Le principal avantage des wireframes est qu'ils peuvent être utilisés pour itérer sur n'importe quelle interface de manière agile. Cela se produit via un processus souvent appelé tests d'utilisabilité, où les utilisateurs ont la possibilité d'interagir avec l'interface et de réfléchir à voix haute à leur processus de réflexion ou de répondre à des questions plus structurées tout au long du processus. Après chaque essai avec un utilisateur, un chercheur en expérience utilisateur peut identifier les interactions courantes avec l'interface, synthétiser les données et repenser en conséquence.

En raison de la nature généralement moins fidèle du wireframe, il est très facile et rentable d'y apporter des modifications. L'objectif d'un wireframe est de capturer la conception de la structure fondamentale, le modèle d'interaction de haut niveau au sein d'une interface, autrement appelé les points critiques, afin de permettre à un concepteur de travailler rapidement, ce qui est parfait pour un environnement agile où les membres du groupe travaillent en collaboration pour « sprinter » vers l'itération suivante.

Les wireframes peuvent avoir différents niveaux de détail et peuvent être divisés en deux catégories en termes de fidélité ou de ressemblance avec le produit final.

Basse fidélité

Ressemblant à un croquis grossier ou à une maquette rapide, des wireframes de faible fidélité peuvent être rapidement produits. Ces wireframes aident une équipe de projet à communiquer des idées et à collaborer plus efficacement car ils sont plus abstraits, utilisant des rectangles et des étiquettes pour représenter le contenu. Du contenu factice, du texte de remplissage latin ( lorem ipsum ), un échantillon ou un contenu symbolique sont utilisés pour représenter des données lorsque le contenu réel n'est pas disponible. Par exemple, au lieu d'utiliser des images réelles, un rectangle d'espace réservé peut être utilisé.

Les wireframes basse fidélité peuvent être utilisés pour faciliter la communication d'équipe sur un projet et sont utilisés dans les premières étapes d'un projet.

Haute fidélité

Les wireframes haute fidélité sont souvent utilisés pour la documentation car ils intègrent un niveau de détail qui correspond plus étroitement à la conception de la page Web réelle, prenant ainsi plus de temps à créer.

Pour les dessins simples ou de faible fidélité, le prototypage papier est une technique courante. Étant donné que ces croquis ne sont que des représentations, les annotations (notes adjacentes pour expliquer le comportement) sont utiles. Pour les projets plus complexes, le rendu des wireframes à l'aide d'un logiciel informatique est populaire. Certains outils permettent l'intégration d'interactivité, notamment l'animation Flash et les technologies Web frontales telles que HTML , CSS et JavaScript .

Les wireframes haute fidélité incluent davantage de contenu réel, des choix typographiques spécifiques et des informations sur les dimensions de l'image. Contrairement aux wireframes basse fidélité, les wireframes haute fidélité peuvent inclure des images réelles. Les choix de couleurs ne sont pas inclus, mais différentes valeurs de couleur peuvent être représentées en niveaux de gris.

Le plan d'un site Web peut être décomposé en trois éléments : la conception de l'information, la conception de la navigation et la conception de l'interface. La mise en page est l'endroit où ces composants se réunissent, tandis que le wireframing est ce qui décrit la relation entre ces composants.

La conception de l'information est la présentation, le placement et la hiérarchisation des informations de manière à faciliter la compréhension. La conception de l'information est un domaine de la conception de l'expérience utilisateur , destiné à afficher efficacement les informations pour une communication claire. Pour les sites Web, les éléments d'information doivent être disposés de manière à refléter les objectifs et les tâches de l'utilisateur.

Le système de navigation fournit un ensemble d'éléments d'écran qui permettent à l'utilisateur de se déplacer d'une page à l'autre sur le site Web. La conception de la navigation doit communiquer la relation entre les liens qu'elle contient afin que les utilisateurs comprennent les options dont ils disposent pour naviguer sur le site. Souvent, les sites Web contiennent plusieurs systèmes de navigation, tels qu'une navigation globale, une navigation locale, une navigation supplémentaire, une navigation contextuelle et une navigation de courtoisie.

La conception de l'interface utilisateur comprend la sélection et l'agencement des éléments de l'interface pour permettre aux utilisateurs d'interagir avec les fonctionnalités du système. L'objectif est de faciliter la convivialité et l'efficacité autant que possible. Les éléments courants de la conception de l'interface sont les boutons d'action, les champs de texte, les cases à cocher, les boutons radio et les menus déroulants.