Si j'avais le choix, avec presque tous les autres concepteurs Web, les pages Web contiendraient toujours une quantité assez limitée de contenu afin de garder le focus clair et la voie de communication facile à suivre.
Malheureusement, les situations du monde réel nécessitent des pages Web avec une quantité énorme de contenu. Pour apprendre à résoudre les problèmes qui se posent dans ce domaine, nous allons examiner une section particulière de sites Web qui est peut-être plus surpeuplée que tout autre: les sites de nouvelles. Comment les concepteurs de CNN, MSNBC, Fox et autres gèrent-ils la mise en page de tant d’informations? Découvrir suite au saut.
En-tête et navigation
L'en-tête est un aspect absolument crucial pour un site d'actualités. Lors de la visite d’un site d’information, chaque utilisateur sait qu’il y aura énormément de contenu à filtrer et s’ils veulent quelque chose de spécifique, ils iront directement à l’en-tête pour le trouver.
Nous avons ici notre premier aperçu du problème qui nous hantera pour le reste de l’article: trop de choses! Comme je l'ai mentionné dans l'introduction, les sites d'informations doivent absolument transmettre beaucoup d'informations, c'est pourquoi elles existent. Organiser toutes ces informations n’est pas un mince exploit et presque toutes les décisions que vous prenez peuvent avoir une incidence considérable sur la convivialité du site.
Jetons un coup d'oeil à notre premier exemple. L'image ci-dessous montre l'en-tête et la navigation pour MSNBC.com.
Comme vous pouvez le voir, il y a un lot passe dans les premiers centimètres de ce site. Le sommet de la page contient une quinzaine de liens. Ils ne concernent que les autres sites. La navigation interne se trouve au-dessous et en contient douze autres.
MSNBC utilise sa propre rotation intéressante dans un menu déroulant pour chaque section du site indiquée dans la navigation. Vous voyez ici cinq à six titres de texte, des images et encore plus de contenu menant à un autre site. Après plusieurs couches de navigation, nous avons finalement trouvé le logo du site situé près du bas de l'en-tête, à côté des widgets météo et de recherche.
Je pense que l'en-tête MSNBC est un peu un fouillis, l'image de marque est perdue et la charge de contenu secondaire est distrayante. Contrastez ceci avec l’en-tête de l’un des meilleurs sites d’information que j’ai trouvé, CNN.
Nous avons ici une image de marque claire et claire, une barre de recherche à l'endroit où vous souhaitez la rechercher et un simple menu de navigation sans menu déroulant. Ce menu offre un bon équilibre entre un design minimal et suffisamment de fonctionnalités pour vous permettre de vous rendre où vous voulez aller sans problème.
Fox prend un itinéraire similaire à CNN. Il est un peu plus encombré et s'étend sur plusieurs sites comme MSNBC, mais les onglets permettent de rendre la métaphore compréhensible.
Le Washington Post a débuté avec une idée similaire à celle de MSNBC mais l’a bien mieux réussie. Comme vous pouvez le constater, le nom du site est beau et grand et est suivi d'un widget météo.
En survolant la navigation, vous obtenez un grand menu déroulant, mais au lieu d’enfoncer maladroitement du contenu comme sur MSNBC, il a été structuré de manière à masquer le grand? Washington Post? surface.
La leçon
"Méfiez-vous des méga-menus déroulants qui ne tiennent pas vraiment leur promesse de faciliter la navigation sur votre site."Je pense que la leçon à suivre ici est de ne pas submerger d'emblée vos utilisateurs avec un en-tête encombré. Cela ne signifie pas que vous ne pouvez pas avoir beaucoup de contenu, méfiez-vous simplement des méga-dropdowns qui ne tiennent pas vraiment leur promesse de rendre votre site plus facile à naviguer. CNN prouve qu’une simple liste horizontale de liens et certains espaces bien structurés peuvent parfois donner de très bons résultats, même dans un environnement de contenu de masse.
Articles en vedette
La prochaine chose que je veux discuter est de savoir comment ces sites attirent votre attention et le dirigent vers ce qui est important. Chaque site d’information contient une ou deux des meilleures actualités qui, à leur avis, sont des points chauds de la journée et doivent structurer la page pour les mettre en valeur de manière appropriée.
Mon exemple préféré de ceci est The Huffington Post, qui choisit de mettre en évidence une seule nouvelle en utilisant une image énorme et un titre audacieux, les deux couvrant toute la largeur du conteneur de page.
Jetez simplement un coup d'oeil sur la propreté et la beauté de ce site par rapport aux autres sites d'informations que vous avez vus. Ce format est loin d’être populaire pour les sites d’information, mais vous ne pouvez pas vous empêcher d’admettre que cela semble fonctionner assez bien ici.
MSNBC emprunte le même chemin mais n’est pas assez radical pour ne présenter qu’un seul récit en haut de la page. Ils ont une grande image à gauche avec divers titres. J'aime beaucoup la présentation de base, même si je pense que les minuscules titres aléatoires jeté entre les grandes histoires l'encombrent de manière significative.
CNN et Fox choisissent une approche un peu plus encombrée, principalement parce qu'elles ne voulaient pas céder un espace publicitaire précieux aux reportages importants. CNN a une disposition en trois colonnes, le centre étant le plus large et le dernier étant l’espace publicitaire suivi d’une barre latérale de connexion.
Fox comporte une grande image avec trois colonnes en dessous, le tout à côté d'une large colonne à l'extrême droite pour l'espace publicitaire, les tickers de stock et les informations sociales.
La leçon
Avec la page de Fox, je reçois beaucoup d’informations, ce qui est excellent, mais mes yeux ne savent pas trop où aller et ont tendance à rebondir avant que je ne lise quoi que ce soit. CNN attire actuellement mon attention avec quelques visages, qui sont toujours utiles pour guider les utilisateurs où vous le souhaitez.
Cependant, je trouve que de très grandes images, comme celles trouvées sur Huffington et MSNBC, sont vraiment l'outil pour me faire remarquer quelque chose d'important. Ceci est renforcé de manière majeure avec le texte de titre énorme et audacieux de Huffington.
«Parfois, une grande quantité de contenu organisé de manière ordonnée dans un espace restreint est une bonne chose.Quelle méthode est la meilleure pour tous les utilisateurs est un appel délicat. Il suffit de s'arrêter chez Craigslist, très populaire, pour constater que les grandes images ne sont pas toujours nécessaires pour rendre un site attrayant pour les visiteurs.Parfois, une grande partie du contenu organisé dans un espace restreint est une bonne chose, surtout si vous voulez un aperçu rapide de tout ce qui est important.
Le monde n'est pas un endroit où un seul événement est d'habitude plus important que tous les autres, il est donc compréhensible que des sites tels que Fox ressentent le besoin de décomposer un peu cette section. Le meilleur conseil que je puisse vous donner est de donner le plus d’importance possible aux quelques choses qui sont vraiment importantes. Si vous pouvez balancer une grande histoire, allez-y. Sinon, essayez de garder le nombre bas, sinon ce n'est pas vraiment une? Vedette? la section est-ce?
La grille de l'histoire
Au fur et à mesure que nous dépassons l'en-tête et le contenu présenté, les sites d'informations deviennent de plus en plus différents, ce qui rend difficile leur comparaison point par point. Cependant, c'est à ce stade que le véritable défi commence. C'est là que les concepteurs reçoivent une montagne de contenu et qu'on leur demande de l'organiser.
Chaque site est divisé en différents modules et sections uniques organisés en différentes grilles, mais vous constaterez qu'il s'agit d'une tendance plutôt populaire qui consiste, à un moment de la page, à créer une configuration en trois colonnes pour couvrir les différents articles. Voici des exemples tirés du Huffington Post, du Washington Post et de The Economist qui font exactement cela.
Avoir trois colonnes divise votre contenu, soit de manière uniforme, soit en utilisant une approche de largeur variée telle que The Economist pour plus de contrôle sur l'emphase. L’un des problèmes majeurs de l’approche en trois colonnes est que nous avons appris à notre cerveau à ignorer cette troisième colonne! Nous savons tous que c’est là que se trouvent les publicités et toutes les autres conneries que nous ne voulons pas voir. Nous limitons donc l'essentiel de notre navigation aux deux premières colonnes.
Cela peut être mauvais pour les sites qui sauvent une colonne importante car ils risquent de se perdre dans le mélange. N'oubliez pas cette tendance des utilisateurs et assurez-vous que votre troisième colonne ne ressemble pas toujours à un gâchis d'annonces une fois que vous êtes dans un contenu solide.
Un changement rafraîchissant
CNN a l’une des meilleures approches en matière d’organisation du contenu que j’ai vue sur un site d’actualités. Ils utilisent une grille de quatre colonnes de cartes de même hauteur surmontées d'un titre de catégorie. Le résultat est vraiment dépourvu de l'encombrement désordonné typique de ces sections.
"Lorsque nous extrayons presque toutes les images et que nous normalisons le contenu, le résultat obtenu est bien plus utilisable." Chose intéressante, lorsque nous extrayons la quasi-totalité des images et en normalisons le contenu, le résultat obtenu est beaucoup plus utilisable. Sur un site d'information typique, il y a tout simplement trop d'attention pour mon attention. Chaque histoire donne l'impression d'essayer de crier plus fort que la suivante, et le résultat a tendance à être bouleversant. En revanche, la grille d’histoires de CNN est facile et agréable à parcourir.
MSNBC adopte également une approche différente. Ils organisent leurs histoires en catégories et les placent dans des cases horizontales clairement définies. Ils mettent beaucoup de contrôle entre vos mains ici en vous laissant choisir le nombre d’histoires à montrer et même en vous donnant des commandes pour réorganiser les boîtes.
La leçon
Ce que j'ai remarqué ici, c'est que j'ai aimé utiliser les sites qui ont organisé leur contenu en sections et catégories clairement différenciées. Le format à trois colonnes, bien qu'essayé et vrai, permet une navigation exigeante en travail, qui ressemble plus à un tamisage.
CNN et MSNBC ont pris des mesures pour créer une séparation visuelle claire entre les récits et divers types de contenu, et leurs présentations ont semblé moins aléatoires. L'une des raisons pour lesquelles le format à trois colonnes semble confus est la hauteur variable de chaque module, ce qui différencie le contenu horizontalement et génère de nombreux mouvements oculaires de haut en bas. Le format de hauteur égale aide énormément.
Pourquoi est-ce important pour moi?
La plupart des lecteurs de cet article ne sont pas les meilleurs designers du Washington Post. Pourquoi ces observations sont-elles précieuses pour ce public? La réponse est que, même si nous ne travaillons pas tous sur des sites d’information, nous avons tous donné à nos clients le "trop de contenu". discours.
Nous détestons simplement cela lorsque nos clients nous donnent une tonne de choses et exigent que nous les mettions sur une seule page. Bien que nous puissions argumenter contre cela, plusieurs situations appellent en fait cette approche. Crammer un tas de contenu sur une seule page tout en essayant de le rendre utilisable et attrayant est l’une des situations les plus difficiles à laquelle vous ferez face en tant que concepteur. Si vous pouvez le battre, vous pouvez vous débrouiller.
«En cas de doute, la réponse est généralement de simplifier.Les leçons que nous avons apprises aujourd'hui peuvent être appliquées à tous les sites Web que vous créez et aux prises avec des problèmes de contenu. En cas de doute, la réponse est généralement de simplifier. Réduisez ce gros en-tête laid, essayez de trouver un ou deux points vraiment importants et de les maximiser, puis séparez le reste du contenu en sections visuellement distinctes, faciles à parcourir et ne nécessitant pas trop de fouille pour la lecture.
Conclusion
Maintenant que vous avez vu mon analyse, qu'en pensez-vous? Quels sont les sites d'informations les plus attractifs? Quels sont les plus utilisables? Les deux objectifs peuvent-ils être synergiques?
Laissez un commentaire ci-dessous et faites-nous savoir ce que vous pensez des informations et des exemples ci-dessus.