9 conseils de conception d'information pour faire de vous un meilleur concepteur Web

C’est probablement la partie la moins glamour de la conception Web, mais la conception de l’information n’est nullement la moins importante. Localiser et consommer des informations est la tâche Web par excellence, dépassant de loin l'achat, la lecture et la communication, qui incluent tous une bonne partie de la conception de l'information. La façon dont les utilisateurs trouvent et utilisent toutes ces informations dépend de la manière dont elles sont structurées et présentées. Ainsi, chaque concepteur de sites Web devrait être en mesure de prendre des décisions éclairées et qualifiées sur la manière de le faire..

Ce billet est le troisième jour de notre session de conception Web. Sessions créatives "Session Day 2Session Day 4"

1 - Soyez méthodique

La conception des informations est un problème qui devient de plus en plus complexe avec la taille du site. Cependant, même un petit site Web bénéficiera d'un processus méthodique, étape par étape, pour comprendre comment commander et organiser le contenu du site. Voici quelques étapes simples que vous voudrez peut-être prendre:

    1. Comprendre le contenu, les processus et le but du site
      C'est assez difficile d'organiser un tas de trucs si on ne sait pas ce que ça fait réellement est. Votre première tâche consiste donc à parcourir le contenu, les processus et les objectifs du site. Le contenu d'un site signifie la copie, les images, la vidéo et les autres éléments d'actif qui vous ont été fournis ou informés, et qui doivent être insérés sur le site. Les processus d'un site sont les tâches et les workflows que les utilisateurs devront effectuer pour interagir avec un site. Et les objectifs du site se réfère à tous les deux les objectifs du client et l'utilisateur.

      Ainsi, pour un exemple de restaurant simple, vous constaterez peut-être que vous avez du texte pour les pages 1 à 20, vous savez que les utilisateurs tenteront de terminer une tâche telle que la réservation. Vous pouvez également voir que les objectifs d'un utilisateur sur le site sont de savoir ce que le restaurant sert, où il se trouve et s'il y a des tables, puis de faire une réservation si tout va bien. Enfin, les objectifs du client peuvent être de servir l'utilisateur, mais aussi de le pousser vers un ensemble de promotions qu'il propose..

    2. Prioriser et rechercher des chemins d'utilisateur
      Une fois que vous avez une bonne idée de ce qui se passe sur le site, vous pouvez commencer à hiérarchiser les informations et à déterminer comment les utilisateurs le parcourront. Quels chemins suivront-ils pour atteindre leurs objectifs? Quelles sont les pages les plus importantes? Ce qui devrait être vu dès le départ et qui ne sont que des informations à l'appui?

      Même avec un exemple simple comme notre site de restaurant, il existe de nombreuses façons de présenter les informations. Par exemple, vous pouvez placer les promotions immédiatement sur la page d'accueil, les associer au processus de réservation ou les intégrer aux menus. De même, vous constaterez peut-être que, compte tenu des objectifs du client, le contenu de la page aura une priorité différente. Peut-être le client vous dit-il que personne ne peut jamais trouver ce restaurant, vous devez donc créer une page Comment s'y rendre et lui donner une priorité élevée.

    3. Organiser l'information
      Avec une compréhension de ce qui se passe sur le site, une compréhension claire de la relation entre les différents éléments, de la manière dont les utilisateurs voudront travailler, et de l'importance des différentes sections, vous pouvez désormais organiser les informations du site. . Cette organisation ne consiste pas simplement à classer les pages - par exemple, à déterminer que «de l'entreprise» correspond à un onglet «à propos de», mais même à remettre en question et à réorganiser le contenu que vous avez reçu. Parfois, vous constaterez qu'il est préférable de combiner plusieurs pages, de diviser une longue section, de transformer du texte en représentation schématique simple ou en un grand nombre d'autres réorganisations..

      Développer un plan du site ou un plan de la façon dont l’information sera placée de manière hiérarchique. Bien que les sitemaps ne soient généralement qu’un ensemble de zones indiquant des pages, vous pouvez utiliser toutes sortes d’informations supplémentaires expliquant comment le site va être configuré, notamment des liens rapides depuis la page d’accueil, les liens possibles entre différentes sections, et les chemins qu'un utilisateur peut emprunter via un sitemap.


Après avoir réalisé qu'il y avait tellement d'informations sur les marchés, nous pensons maintenant qu'un wiki est le moyen le plus efficace de l'organiser.

2 - Sortez des sentiers battus

Les sites avec une complexité raisonnable peuvent être réorganisés et réorganisés beaucoup différentes façons. FlashDen est un site sur lequel j'ai travaillé pour organiser et réorganiser d'innombrables fois. J'ai perdu le compte du nombre de fois que j'ai consulté ce menu et que je l'ai réarrangé. Dans certains cas, nous déplaçons simplement les pages dans différents ensembles et groupes afin qu'elles paraissent plus logiques, et dans d'autres, nous avons introduit une approche plus originale..

Par exemple, il y a quelques mois, le menu devenait trop complexe. Nous avons donc supprimé un grand nombre d'éléments de menu plus "moelleux" et avons créé un blog qui héberge désormais des concours, des lettres d'information, des liens de sous-sites et d'autres pages encombrant le menu..

Récemment, nous avons constaté que nous avions beaucoup de ce que j'appelle des "retardataires" - des pages sans maison dans le menu. Du point de vue de la conception de l’information, les retardataires sont terribles - je ne me souviens même pas comment accéder à certains d’entre eux! La solution cette fois-ci consiste à créer un système wiki, à insérer du contenu de niveau supérieur dans le menu en coulisse, puis à utiliser le wiki pour stocker des informations plus détaillées avec ses propres fonctions de recherche, de marquage et de catégorisation.

D'après mes expériences avec FlashDen, l'organisation des informations ne doit même pas nécessairement concerner leur insertion dans des menus et des sous-menus. Vous constaterez peut-être que certaines informations ne doivent pas se trouver sur un site, qu’elles nécessitent un sous-site ou que vous devez faire autre chose. Avec FlashDen, j’ai l’avantage de constater que cela fait presque trois ans que je regarde le contenu et que je trouve encore aujourd’hui de nouveaux arrangements et solutions..

Pour être un concepteur d’informations efficace et trouver les solutions les plus optimales, il est souvent nécessaire de sortir des sentiers battus. Bien sûr, dire "penser en dehors de la boîte" est beaucoup plus facile à dire qu'à faire! Parfois, nous sommes contraints dans une boîte que nous ne pouvons même pas voir. Il y a quelque temps, j'ai entendu parler d'une expérience dans laquelle un groupe d'insectes sauteurs ont été placés dans une boîte en verre et au fil du temps, ils ont appris à sauter seulement si haut. Lorsque le couvercle en verre a été retiré, les insectes ont continué à sauter de la même manière, à hauteur limitée, ne réalisant même pas qu’ils pouvaient s’ils le souhaitaient..

Alors, comment surmontez-vous une boîte que vous ne pouvez pas voir? Simple! Avec l'aide d'autres personnes qui ne sont pas limitées par les mêmes problèmes que vous avez. Pour les conceptions d'informations complexes, je demanderai souvent à d'autres personnes des idées d'organisation leur donnant uniquement le problème brut et non mes propres permutations. Obtenir les idées d'un programmeur ou le point de vue d'un utilisateur vous surprendra souvent, car ses perspectives sont complètement différentes des vôtres et ne sont pas gênées par les mêmes façons de penser..


Si quelqu'un a un site Web énorme, ce doit être Chevron. Comment organiseriez-vous toutes ces informations??

3 - Gardez votre structure en équilibre

Lorsque vous organisez de grands ensembles d’informations, une question évidente se pose toujours de savoir quelle est la profondeur ou la largeur de votre navigation. La profondeur fait référence au nombre de couches de catégories et de sous-catégories, tandis que la largeur correspond au nombre de couches de chaque niveau. L'astuce consiste à trouver l'équilibre. S'il y a trop d'éléments à un seul niveau - en particulier le niveau supérieur - vous risquez de semer la confusion chez l'utilisateur. D'autre part, si un utilisateur doit cliquer sur plusieurs niveaux, vous risquez de les perdre..

Une bonne règle est de garder le nombre d'options d'un niveau donné entre 4 et 8. Si vous avez 8 éléments de niveau supérieur, chacun avec 8 sous-catégories et chacun avec 8 sous-sous-catégories, vous aurez suffisamment d'espace pour une 512 pages de site. Bien sûr, il est rare que les choses s'équilibrent automatiquement aussi bien. Donc, encore une fois, vous devez faire attention à ne pas avoir un côté lourd et un côté léger. Par exemple, sur un site de quelques centaines de pages, si vous mettez contact sur le haut niveau quelque part, les chances sont qu'il ne va pas avoir 8 sous-catégories avec 8 sous-sous-catégories. Il est plus probable que contact va être une section assez simple - même pour un site complexe.

D'un autre côté si vous ne mettez pas quelque chose comme contact au niveau supérieur, vous obtiendrez peut-être une information plus équilibrée, mais vous risquez de ne pas avoir à effectuer une tâche utilisateur importante, car il vous sera difficile de trouver comment trouver les informations de contact. Une solution simple à ce problème particulier pourrait consister à ajouter des "liens rapides" dans lesquels vous donnerez à l'utilisateur quelques options sur la page d'accueil pour plonger plus profondément dans la structure sans naviguer de la manière habituelle..


Sur NETTUTS, nous avons décidé de faciliter les habitudes des utilisateurs avec la démonstration et le placement des boutons sources..

4 - Conception pour scanner, écrémer et sauter

Je ne sais pas pour vous, mais il est très rare que je lise jamais complètement une page Web. Que ce soit pour lire des instructions, des termes et conditions, ou simplement pour une copie normale, la plupart du temps, je parcourt, numérise et saute. En supposant que je ne sois pas le seul à le faire, il est judicieux de concevoir des pages pour faciliter ce mode de consommation des informations..

N'emballez pas les informations clés dans des lots de texte - mettez-les en surbrillance. Ne donnez pas aux utilisateurs de paragraphes à la fin - divisez-les avec des titres, des sous-titres, des puces, des diagrammes, peu importe ce qu'il faut! Réfléchissez à la manière dont un utilisateur utilisera votre site et concevez-le pour faciliter son utilisation..

NETTUTS, un site qui, comme la plupart d’entre vous le savez, publie des tutoriels sur le développement Web. Maintenant, sur NETTUTS, nous avons remarqué très tôt que la plupart des gens visionnent un tutoriel jusqu’à la fin; ils essaient de trouver un lien vers une démonstration et / ou un code source afin de pouvoir décider si le didacticiel vaut la peine d’être lu. première place. Une fois que nous avons compris cela, il était simple d’ajouter des boutons spéciaux Démo et Source et de les placer systématiquement en haut des didacticiels. Cet ajustement simple pour adapter notre conception aux habitudes de consommation de l'utilisateur nous a valu une lot de bons commentaires.


PatternTap est un bon endroit pour trouver des idées et voir comment d'autres personnes conçoivent des articles et des informations textuelles.

5 - Concevoir un texte qui veut être lu

Je ne sais pas si je vieillis ou si tout le temps que je passe devant un écran me rend difficile, mais dernièrement, cela me gêne vraiment de me voir proposer un texte qui ne m'oblige pas à le faire lis le. La conception d'un site Web a généralement pour objectif de transmettre des informations, le plus souvent sous forme de texte, il est donc prioritaire de bien les afficher..

Utiliser des tailles de police trop petites, un contraste faible entre le texte et la couleur d'arrière-plan, ou utiliser un texte clair sur un arrière-plan sombre sont tous des péchés de design dont nous avons tous été coupables (moi à plusieurs occasions!). Mais au-delà, votre conception peut amener le visiteur à lire de différentes manières. Essayez de concevoir de manière à ce que votre mise en page focalise les visiteurs sur la copie et les dirige avec des titres, des sous-positions, des démarcations, des guillemets et d'autres techniques permettant de tirer les yeux au clair..


Un exemple simple pour guider les utilisateurs à travers un site - Le guide en 4 étapes de ThemeForest

6 - Guide l'utilisateur à travers les pages et à travers les pages

J'ai mentionné précédemment les chemins d'utilisateur, c'est-à-dire les moyens par lesquels les utilisateurs tendent à traverser un site Web. Bon nombre de ces problèmes découlent simplement du comportement des gens, mais avec la planification, vous pouvez choisir comment un utilisateur sera guidé à la fois sur une seule page et sur plusieurs pages. Une fois que vous connaissez des chemins spécifiques, vous pouvez utiliser des guides visuels et des liens pour les aider à suivre ce chemin..

Par exemple, sur FlashDen, lorsqu’un nouvel utilisateur arrive, notre objectif est de le faire enregistrer, rechercher des fichiers, déposer de l’argent puis acheter ces fichiers. Nous leur donnons d’abord un résumé du processus en quatre étapes sur la page d’accueil, puis à chaque arrêt, des indicateurs permettent de diriger l’utilisateur vers l’étape suivante. Dans notre prochaine refonte, j'espère rendre ce chemin encore plus évident, car il est essentiel au bon fonctionnement du site. Notez que le chemin que je décris n'est pas 4 pages, mais 4 tâches. Par exemple, pour rechercher des fichiers, l'utilisateur peut consulter des dizaines de pages, mais il s'agit d'une tâche distincte. Les chemins d'accès des utilisateurs n'ont pas besoin de parcourir des pages définies, ils peuvent tout aussi bien englober des tâches définies!


Le livre très utile de Steve Krug!

7 - Ne pas trop compliquer les choses

Il va sans dire que simple est mieux pour les utilisateurs que compliqué. Néanmoins, il est trop facile de trop compliquer les conceptions. Je sais que je fais souvent paraître les choses plus compliquées afin d'avoir plus d'éléments visuels sur une page (Bad Collis, Bad Collis!) Steven Krug dans son excellent livre Don't Make Me Think donne l'exemple d'un site d'emploi hypothétique avec un bouton qui se lit comme suit:

  • Emplois
  • Opportunités d'emploi
  • Jobs-o-rama

L’un d’eux est clair, l’un est assez évident, et l’un est - enfin, qui sait?.


L'information peut être présentée comme plus que du texte!

8 - Visualiser les informations

En tant que concepteurs, nous connaissons plus que quiconque la valeur d'un bon visuel. Et il existe de nombreuses possibilités pour illustrer ou visualiser des données, des concepts ou des informations. Comme vous vous en souviendrez, cet article commence par un diagramme très élémentaire des relations entre la conception d'interface, la conception de l'information et la conception esthétique. Ces visuels non seulement brisent le texte, mais ils sont aussi plus mémorables et vous donnent l'occasion de donner vie à une page..

DoshDosh a un article intéressant sur la visualisation de l'information, les diagrammes et ce que l'auteur appelle l'infographie qu'il vaut la peine de vérifier, même si ce n'est que pour voir les brillants exemples graphiques.


Analyser les chemins et les objectifs n'a jamais été aussi facile grâce à des outils comme Analytics

9 - Analysez votre conception de l'information

La conception de l’information est l’une de ces choses difficiles à comprendre du premier coup. Donc, une fois que vous avez créé un site, vous devriez l’analyser pour voir comment les gens utilisent et digèrent les informations, comment ils se comportent et où vous pouvez améliorer votre conception..

Google Analytics est un excellent outil à cet égard. Par exemple, lorsque j'ai mentionné plus haut les chemins d'utilisateur, Analytics vous permet de suivre les chemins à travers les pages à l'aide de la fonctionnalité Objectifs. Vous configurez une séquence de pages et Analytics signalera les% de visiteurs qui y parviennent (et par extension cliquent) à chaque point..

Une autre fonctionnalité d’Analytics que vous pouvez utiliser est le suivi des termes de recherche, qui vous permet de voir ce que les utilisateurs recherchent dans le champ de recherche de votre propre site. Savoir ce que les gens recherchent vous indique quelle information doit être plus facilement disponible!

Ce billet est le troisième jour de notre session de conception Web. Sessions créatives "Session Day 2Session Day 4"