Les étapes de création d’un site web – Etape 3 : Architecture de l’information

La présentation hiérarchique de l’information est l’aspect le plus important dans la structuration du site. Tout comme un programmeur utilise des pseudocodes, un réalisateur rédige une liste de plans de tournage, et un peintre réalise des esquisses, les designers web doivent structurer leurs projets. Le diagramme structurel (organigrammes) est ce plan – ou squelette.

Retourner au sommaire

Pour y arriver, nous devons considérer certains aspects du design web nous ramènent à la prise en compte de l’utilisabilité et du design centré sur l’utilisateur, ainsi que du design d’information et d’interaction. Les sites web sont des structures complexes d’informations dans lesquelles les utilisateurs sont en mesure de naviguer – de se déplacer à l’intérieur. Tout cadre pour la fourniture d’informations s’appelle un système d’information.

Un site web est un système d’information. Il en va de même pour un livre, une bibliothèque, un film, une carte ou un atlas et un jeu interactif.

Systèmes d’information linéaires et non linéaires

Certains systèmes d’information sont linéaires, c’est-à-dire que vous parcourez les informations présentées dans un ordre logique. Un livre de fiction, par exemple, contient une série de chapitres qui doivent être lus les uns après les autres, dans l’ordre. Si nous lisions les chapitres dans le désordre, le message central – l’histoire – serait décousu et n’aurait aucun sens pour nous.

Parfois, les écrivains et les cinéastes utilisent délibérément un récit non linéaire pour expérimenter la narration. Considérez le classique culte de Quentin Tarantino, « Pulp Fiction ». La séquence des événements de ce film est délibérément non linéaire et demande au spectateur d’essayer de donner un sens à l’histoire.

Un site web est un système d’information non linéaire, appelé hypermédia – média associé à des hyperliens.

Les gens peuvent naviguer d’une page à l’autre dans l’ordre de leur choix. Il n’est pas nécessaire qu’il y ait une séquence ou un ordre logique dans la façon dont ils se déplacent dans les informations. La manière dont les personnes choisissent de parcourir l’information dépend généralement de ce qu’elles recherchent. Par exemple, considérons deux personnes différentes qui décident de visiter le site web de ABC.

• Une personne peut être intéressée par une émission télévisée qu’elle a manqué la nuit dernière. Le chemin emprunté par cette personne sur le site web peut ressembler à ceci : Ok … je veux regarder Doctor Who. Je clique sur les programmes télévisés, puis sur Doctor Who, puis sur Regarder sur iView. Terminé !
• La deuxième personne peut être intéressée par les dernières nouvelles. Le chemin emprunté par cette personne sur le site Web peut ressembler à ceci : Que se passe-t-il dans le monde ? Je clique sur News, puis sur Top Stories. Ah Voici une liste de titres. Je vais les parcourir et cliquer sur celui qui m’intéresse le plus. Après avoir lu cela, je peux revenir à la liste, ou cliquer sur un reportage connexe ou passer à une section spécifique, telle que Finance.

En raison de la nature non linéaire du web, un design d’information et d’interaction bien pensé, centré sur l’utilisateur et qui présente des systèmes d’information complexes de manière logique, facile à comprendre et à utiliser, est essentiel au succès d’un site web.

Design d’information

Un bon design d’information permet de communiquer avec succès des systèmes complexes de manière simple et facile à comprendre. Le design d’information sur le web s’appelle Architecture de l’information (IA).

L’IA s’intéresse au développement d’un système logique permettant d’organiser et de gérer de gros volumes d’informations. Le processus d’analyse d’impact détermine le contenu requis pour un site web, détermine les méthodes de classification de ce contenu et identifie les relations entre les informations.

L’analyse d’impact conduit au design d’interaction, qui consiste à développer des systèmes de navigation permettant aux utilisateurs de naviguer sur le site web et de trouver ce qu’ils recherchent. Le processus de design d’interaction évalue les différents groupes d’utilisateurs potentiels, quels sont leurs besoins et leurs attentes et comment ils pourraient rechercher des informations sur le site web.

Ces deux disciplines de design aident à établir le cadre fonctionnel du site web – quels types de technologies seront nécessaires pour créer le site web, héberger et gérer les informations et fournir les outils nécessaires pour permettre aux utilisateurs d’utiliser le site web efficacement.

Donner du sens à l’information

L’architecture de l’information a pour objectif de structurer l’information de manière à ce qu’elle soit logique et facilement accessible aux utilisateurs.

Le design d’information est basé sur les principes de la taxonomie – la pratique consistant à classer l’information en fonction de relations, dans une structure hiérarchique. Les structures de hiérarchie taxonomique aident à rendre la classification et l’organisation de l’information signifiantes et pertinentes.

Les structures hiérarchiques reposent généralement sur un principe d’organisation et sont souvent composées de groupes (sections) et de catégories (sous-sections). Les principes d’organisation font référence au système utilisé pour la classification. Considérez combien de méthodes organisationnelles différentes nous pouvons utiliser pour classer les oiseaux :

• Organisation alphabétique – listant tous les oiseaux de A à Z
• Espèces – regroupant différents oiseaux en espèces
• Regroupement des oiseaux en fonction de leur type ; oiseau aquatique, non volant, etc.
• Pays d’origine

Les choix que nous faisons concernant les principes et la structure de l’organisation lors de l’organisation des informations sur un site Web pourraient être fondés sur un large éventail d’options, notamment :

• Les attentes et les besoins du public cible – écoliers, zoologistes, etc.
• Conventions établies, connues et comprises (par exemple, ce qui est traditionnellement utilisé par des encyclopédies ou d’autres formes de référence)
• Les objectifs de communication du site web – formel, scientifique, grand public, éducatif
• Le business model du client – parc animalier, musée, librairie, etc.

Un exemple de taxonomie avec une structure hiérarchique :

• « Oiseaux » est une section ou un groupe de haut niveau
• Les « oiseaux aquatiques », les « oiseaux de proie » et les « oiseaux non volant » sont des exemples de sous-sections ou de catégories de « oiseaux ».
• « Canard », « Emu » et « Aigle » peuvent également être des sous-sections de « Oiseaux » ou des sujets relevant des sous-sections de « Oiseaux » suggérées ci-dessus

Vocabulaire contrôlé

Une taxonomie peut être une simple organisation de types d’éléments en groupes ou une liste alphabétique, mais le terme vocabulaire est plus approprié pour une telle liste. Une taxonomie est typiquement un vocabulaire contrôlé avec une structure hiérarchique.

En informatique, un vocabulaire contrôlé est une liste soigneusement sélectionnée de mots et de phrases utilisés pour baliser des unités d’informations afin qu’elles puissent être retrouvées plus facilement par une recherche. Les vocabulaires contrôlés réduisent l’ambiguïté inhérente aux langages humains naturels – où le même concept peut recevoir différents noms, et en assurent la cohérence.

Par exemple, dans les titres de sujet principal de la Library of Congress (système de titres de sujet principal qui utilise un vocabulaire contrôlé), les termes autorisés doivent être choisis pour gérer les choix entre :

• Variantes d’orthographe du même concept (américain versus britannique)
• Termes scientifiques et populaires (blattes versus Periplaneta americana)
• Synonymes (automobile contre voitures)

Le choix des termes autorisés à utiliser est une tâche délicate et repose sur les principes de :

• Mandat d’utilisation – vocabulaire des utilisateurs : termes que les utilisateurs sont susceptibles d’utiliser
• Mandat littéraire – vocabulaire de l’information indexée ou cataloguée : termes utilisés dans l’information
• Mandat structurel – termes génériques qui peuvent être utilisés comme rubriques englobantes pour regrouper des termes similaires sous une seule étiquette. Le mandat structurel peut également être utilisé pour la co-implantation – regroupant des mots couramment associés. Les mandats structurels ont tendance à remplacer les mandats utilisateur et littéraires et constituent une approche descendante plutôt qu’ascendante de la sélection du vocabulaire.

Les vocabulaires contrôlés traitent aussi généralement le problème des homographes (un mot ou un groupe de mots qui partagent la même forme écrite mais ont des significations différentes), avec des qualificatifs. Par exemple, le terme « pool » doit être qualifié pour désigner soit la piscine, soit le pool de jeux, afin de garantir que chaque terme ou rubrique autorisés ne se réfère qu’à un seul concept. Les vocabulaires contrôlés étiquetés dans les documents sont appelés métadonnées.

Les utilisations courantes des vocabulaires contrôlés incluent :

• Bibliothèques
• Thésaurus et dictionnaires
• Encyclopédies, livres, périodiques et journaux
• Librairies, supermarchés, grands magasins et autres agencements complexes de magasins de vente au détail
• Catalogues et documentation technique
• Bases de données
• Sites Internet

L’importance de l’étiquetage

Il existe souvent plus d’un moyen de classer et d’organiser les informations au sein d’un projet de site web. C’est pourquoi il est si important de prendre en compte les groupes et les catégories. Et pour cette raison, les noms – ou étiquettes – que nous donnons à chaque section ou sous-section de la structure organisationnelle sont très importants.

Ces étiquettes sont souvent utilisées pour les éléments de menu dans le.s système.s de navigation du site web. Si les étiquettes utilisées sont ambiguës ou source de confusion, ou si la taxonomie des informations ne correspond pas aux attentes de l’utilisateur, il est peu probable qu’il trouve la navigation facile sur le site web. L’utilisation d’un vocabulaire contrôlé pour les étiquettes est importante pour réduire les ambiguïtés et fournir aux utilisateurs une terminologie cohérente.

Cartographie du design d’information

L’architecture de l’information est un concept abstrait et assez difficile à comprendre pour les designers, sans parler des clients. Comment articuler la structure d’information que nous imaginons pour un site web qui n’a pas encore de design visuel ni de forme physique avec laquelle nous pouvons interagir ?

Nous visualisons la structure du site en le cartographiant. Les outils que nous utilisons pour le design d’informations cartographiques sont appelés flowcharts ou cartes de site. Les flowcharts montrent les passerelles et les relations entre les regroupements d’informations et les éléments de contenu, ainsi que les étiquettes des sections et des catégories.

Les flowcharts peuvent être représentés visuellement sous la forme d’un diagramme hiérarchique en arborescence ou d’un diagramme circulaire, avec des lignes de connexion utilisées pour illustrer les chemins et les regroupements d’éléments d’information connexes au sein de la structure. Chaque « case » ou « cercle » de l’arbre de la carte mentale représente une section, une catégorie ou une page de contenu spécifique. Les noms proposés pour ces éléments servent à étiqueter les cases/cercles.

La carte graphique facilite souvent le design des systèmes de navigation. Les éléments connectés horizontalement sont souvent utilisés dans la navigation globale, tandis que les éléments liés verticalement peuvent être utilisés pour créer des systèmes de navigation locaux, etc. Le flowcharts doit être assez détaillé et montrer toute l’étendue de la structure du site.

Notre exemple :

Classification taxonomique et système d’organisation

Principe d’organisation

Design and Lifestyle est un magazine en ligne sur le professionnalisme et l’éthique en design ; et sur la mode et le bien-être.

Ainsi, le principe d’organisation utilisé sur le site web Design and Lifestyle est basé sur l’article en tant que niveau le plus bas de la structure hiérarchique. Par exemple, les articles sont regroupés par catégorie (numéro 01, numéro 02), elles-mêmes regroupées par section (Current – page d’accueil – et Archives); les autres sections sont « À propos de » et « Contacts ».

Vocabulaire

Le vocabulaire utilisé sur le site web Design and Lifestyle est basé sur le principe du mandat d’utilisation (le vocabulaire des utilisateurs : les termes que les utilisateurs sont susceptibles d’utiliser).

Systèmes de navigation

La cohérence de la navigation est extrêmement importante pour l’utilisabilité.

L’utilisateur ne devrait avoir besoin d’apprendre votre système de navigation qu’une seule fois. Une fois qu’ils ont appris où se trouvent les objets, comment le système fonctionne et quoi faire, il doit devenir une seconde nature et se fondre à la périphérie, ce qui permet aux utilisateurs de se concentrer sur le contenu.

Un site web peut nécessiter plusieurs systèmes de navigation, en fonction de sa taille et de son architecture. Les types de systèmes de navigation incluent :

1. Navigation globale

C’est le menu principal qui propose des liens vers les différentes sections du site. Les éléments de navigation globaux communs incluent ACCUEIL, À PROPOS DE NOUS et CONTACTEZ-NOUS. Il est très important que la navigation globale reste cohérente sur chaque page, en ce qui concerne les éléments qu’elle affiche, son emplacement sur la page et son fonctionnement.

2. Navigation locale

Il s’agit généralement d’une navigation de deuxième niveau spécifique à une section particulière du site web. Par exemple, avec la section À PROPOS DE NOUS, il peut y avoir des sous-sections telles que NOTRE ÉQUIPE et JOBS qui sont uniquement pertinentes et visibles dans cette section.

3. Navigation contextuelle

Cela fait référence à des références croisées d’hyperliens qui apparaissent dans le contenu textuel de la page. Le but de la navigation contextuelle est de fournir un accès facile par clic à des informations spécifiques dans des sections ou des catégories qui peuvent ne pas être répertoriées dans les menus principaux. Il est important que le même style visuel pour les hyperliens soit utilisé de manière cohérente sur tout le site.

4. Facilités de recherche

L’outil de recherche est extrêmement important pour de nombreux utilisateurs dans la recherche d’informations. Il devrait être facile à trouver et à utiliser. Ne fournissez pas d’options ambiguës et confuses pour l’outil de recherche. Un bouton portant le libellé « rechercher » est plus clair et plus intuitif qu’un bouton intitulé « GO ». Fournir des listes déroulantes d’option de recherche par… est souvent source de confusion et n’a pas de sens pour les utilisateurs, en particulier s’ils ne connaissent pas bien la structure du site web.

Il existe plusieurs façons de représenter visuellement les systèmes de navigation. Certains des plus communs incluent :

• Listes – tous les menus sont une liste de quelque forme que ce soit. Les listes peuvent être stylées à l’aide de CSS pour ressembler à des boutons, des hyperliens, des onglets ou des menus déroulants. Les listes peuvent être réductibles ou extensibles pour intégrer la navigation locale au système de navigation global.
• Nuages ​​de mots clés – Représentation visuelle des termes de recherche ou mots clés (métadonnées) les plus couramment utilisés associés à des articles ou à du contenu sur le site web.

Waouh, super longue comme étape, non ?

Retourner au sommaire