Conception de nouvelles: comment les meilleurs sites d'actualités gèrent des tonnes de contenu

Si je le pouvais, avec à peu près 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 ligne de communication facile à suivre.

Malheureusement, les situations du monde réel nécessitent des pages Web avec une immense quantité 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 sont peut-être plus surpeuplés que les autres: les sites Web d'actualités. 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. Chaque utilisateur sait en visitant un site d'actualités qu'il y aura des tonnes de contenu à parcourir et s'il veut quelque chose de spécifique, il ira directement à l'en-tête pour le trouver.

Ici, nous avons notre premier aperçu du problème qui nous tourmentera pour le reste de l'article: trop de trucs! Comme je l'ai mentionné dans l'intro, les sites d'actualités doivent absolument transmettre beaucoup d'informations, c'est pourquoi ils existent. Organiser toutes ces informations n'est pas une mince affaire et à peu près chaque décision que vous prenez peut considérablement affecter la convivialité du site.

Jetons un coup d'œil à notre premier exemple. L'image ci-dessous montre l'en-tête et la navigation pour MSNBC.com.

Comme vous pouvez le voir, il se passe beaucoup de choses dans les premiers pouces de ce site. Le haut de la page contient une quinzaine de liens, et ceux-ci ne sont que pour d'autres sites, la navigation interne se trouve en dessous et en contient douze autres.

MSNBC utilise sa propre rotation intéressante dans un menu déroulant pour chaque section du site affichée dans la navigation. Ici, vous voyez cinq à six titres de texte, quelques images et encore plus de contenu menant à un autre site. Après plusieurs couches de navigation, nous arrivons enfin au logo du site en bas de l'en-tête, aux côtés des widgets météo et recherche.

Je pense que l'en-tête MSNBC est un peu en désordre, l'image de marque est perdue et la charge de contenu secondaire est distrayante. Comparez cela avec l'en-tête de l'un des meilleurs sites d'actualités que j'ai trouvé, CNN.

Ici, nous avons une image de marque forte et claire, une barre de recherche là où vous le recherchez et un menu de navigation simple sans une seule liste déroulante. Ce menu est un bon équilibre entre un design minimal et suffisamment de fonctionnalités pour vous emmener où vous voulez sans problème.

Fox emprunte un itinéraire similaire à CNN. C'est un peu plus encombré et s'étend sur plusieurs sites comme MSNBC, mais les onglets aident à rendre la métaphore compréhensible.

Le Washington Post a commencé avec une idée similaire à MSNBC, mais il a beaucoup mieux réussi. Comme vous pouvez le voir, le nom du site est beau et grand et est suivi d'un widget météo.

Le survol de la navigation vous donne un grand menu déroulant, mais au lieu de pousser maladroitement le contenu comme sur MSNBC, il a été structuré pour couvrir la grande zone du «Washington Post».

La leçon

"Méfiez-vous des méga-listes déroulantes qui ne remplissent pas vraiment leur promesse de faciliter la navigation sur votre site."

Je pense que la leçon ici est de ne pas submerger vos utilisateurs dès le départ 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-listes déroulantes qui ne remplissent pas vraiment leur promesse de faciliter la navigation sur votre site. CNN prouve que parfois une vieille liste horizontale de liens et des espaces blancs bien structurés peuvent très bien fonctionner 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 la dirigent vers ce qui est important. Chaque site d'actualités a une ou deux histoires importantes qu'ils savent être des sujets d'actualité et doivent structurer la page pour mettre en valeur ces histoires de manière appropriée.

Mon exemple préféré est le Huffington Post, qui choisit de mettre en évidence une seule nouvelle à l'aide d'une image énorme et d'un titre en gras, qui s'étendent sur toute la largeur du conteneur de page.

Jetez un coup d'œil sur la propreté et la beauté des autres sites de nouvelles que vous avez vus. C'est loin d'être populaire pour les sites d'actualités d'utiliser ce format mais vous ne pouvez pas vous empêcher d'admettre qu'il semble fonctionner assez bien ici.

MSNBC emprunte un itinéraire similaire, mais n'est pas assez radical pour ne présenter qu'une seule histoire en haut de la page. Ils ont une grande image flanquée à gauche avec divers titres. J'aime vraiment la mise en page de base, bien que je pense que les petits titres aléatoires jetés entre les histoires principales l'encombrent considérablement.

CNN et Fox choisissent une approche légèrement plus encombrée, principalement parce qu'ils n'étaient pas disposés à céder un espace publicitaire précieux à des 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 présente une grande image avec trois colonnes en dessous, toutes à côté d'une large colonne à l'extrême droite pour l'espace publicitaire, les tickers boursiers et les informations sociales.

La leçon

Avec la page de Fox, je reçois beaucoup d'informations, ce qui est génial, mais mes yeux ne savent pas trop où atterrir et ont tendance à rebondir beaucoup avant de lire quoi que ce soit. CNN attire actuellement mon attention avec quelques visages, qui sont toujours bons pour guider les utilisateurs où vous voulez qu'ils aillent.

Cependant, je trouve que les images vraiment grandes, 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 l'énorme texte en gras de Huffington.

"Parfois, beaucoup de contenu organisé de manière ordonnée dans un petit espace est une bonne chose."

La meilleure méthode pour tous les utilisateurs est un appel délicat. Il suffit de s'arrêter sur la Craigslist massivement populaire pour voir que les grandes images ne sont pas toujours nécessaires pour rendre un site attrayant pour les visiteurs. Parfois, beaucoup de contenu soigneusement organisé dans un petit espace 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 généralement plus important que tous les autres, il est donc compréhensible que des sites comme Fox ressentent le besoin de décomposer cette section un peu. Mon meilleur conseil est de donner autant d'importance que possible aux quelques choses qui sont vraiment importantes. Si vous pouvez balancer une grande histoire en vedette, allez-y. Sinon, essayez de garder le nombre bas, sinon ce n'est pas vraiment une section «en vedette» n'est-ce pas?

The Story Grid

Au fur et à mesure que nous progressons au-delà de l'en-tête et du contenu présenté, les sites d'actualités 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 d'autres contenus et sont invités à l'organiser.

Chaque site est divisé en différents modules et sections uniques disposés dans différentes grilles, mais vous constaterez que c'est une tendance assez populaire de, à un moment donné de la page, se diviser en 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.

Le fait d'avoir trois colonnes divise bien votre contenu, soit uniformément, soit en utilisant une approche de largeur variable comme The Economist pour plus de contrôle sur l'accentuation. Un problème majeur avec l'approche à trois colonnes est que nous avons appris à notre cerveau à ignorer cette troisième colonne! Nous savons tous que c'est là que les publicités sont placées avec toutes les autres conneries que nous ne voulons pas voir, nous gardons donc notre navigation limitée aux deux premières colonnes.

Cela peut être mauvais pour les sites qui saupoudrent une colonne importante là-bas, car ils risquent de se perdre dans le mélange. Gardez simplement à l'esprit cette tendance des utilisateurs et assurez-vous que votre troisième colonne ne ressemble toujours pas à un désordre de publicités une fois que vous avez trouvé un contenu solide.

Un changement rafraîchissant

CNN a l'une des meilleures approches d'organisation de contenu que j'ai vues sur un site d'actualités. Ils utilisent une grille à quatre colonnes de cartes de hauteur égale surmontée d'un titre de catégorie. Le résultat semble vraiment vide de l'encombrement désordonné typique de ces sections.

"Lorsque nous retirons presque toutes les images et normalisons le contenu, le résultat est quelque chose de beaucoup plus utilisable."

Chose intéressante, lorsque nous retirons presque toutes les images et normalisons le contenu, le résultat est quelque chose de beaucoup plus utilisable. Sur un site d'actualités typique, il y a tout simplement trop de concurrence pour attirer mon attention. Chaque histoire donne l'impression d'essayer de crier plus fort que la suivante et le résultat a tendance à être assez écrasant. En revanche, la grille d'histoire 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 boîtes horizontales clairement définies. Ils mettent beaucoup de contrôle entre vos mains ici en vous permettant de choisir le nombre d'histoires à afficher 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 apprécié d'utiliser les sites qui organisaient leur contenu en sections et catégories clairement différenciées. Le format à trois colonnes, bien qu'essayé et vrai, permet une navigation intensive qui ressemble plus à passer au crible l'encombrement.

CNN et MSNBC ont pris des mesures pour créer une séparation visuelle claire entre les histoires et les différents types de contenu et avaient des mises en page qui semblaient moins aléatoires. L'une des raisons pour lesquelles le format à trois colonnes semble désordonné est la hauteur variable de chaque module, ce qui déclenche le contenu horizontalement et provoque 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 gens qui lisent ceci ne sont pas les meilleurs concepteurs du Washington Post, alors pourquoi ces observations sont-elles précieuses pour ce public? La réponse est que, bien que nous ne travaillions pas tous sur des sites d'actualités, nous avons tous donné à nos clients le discours «trop de contenu».

Nous détestons simplement quand nos clients nous donnent une tonne de choses et exigent que nous mettions tout cela sur une seule page. Si nous essayons de nous opposer à cela, plusieurs situations appellent en fait cette approche. Cramper un tas de contenu sur une seule page tout en essayant de le rendre à la fois utilisable et attrayant est l'une des situations les plus difficiles auxquelles vous serez confronté en tant que concepteur, si vous pouvez le battre, vous pouvez concevoir votre moyen de sortir de tout.

"En cas de doute, la réponse est généralement de simplifier."

Les leçons que nous avons apprises ici aujourd'hui peuvent être appliquées à tout site Web que vous créez où vous rencontrez des difficultés avec trop 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 maximisez-les, puis séparez le reste du contenu en sections visuellement séparées qui sont faciles à parcourir et ne nécessitent pas trop de dards pour lire.

Conclusion

Maintenant que vous avez vu mon analyse, qu'en pensez-vous? Selon vous, quels sites d'actualités sont les plus attractifs? Quels sont les plus utilisables? Les deux objectifs peuvent-ils être synergiques?

Laissez un commentaire ci-dessous et faites-nous part de vos réflexions sur les informations et les exemples ci-dessus.