Le nouveau site Web de CNN déconstruit
Le lundi 26 octobre CNN.com introduit une nouvelle conception de site Web , apportant un certain nombre de modifications majeures à leur mise en page lourde en informations.
Le nouveau design est beau, propre, organisé et bien structuré. Il invite l'œil à scanner et à trouver quelque chose d'intéressant dans le but de cliquer sur une autre page.
Le dessin précédent était un peu encombré et peu invitant; le contenu semblait avoir été forcé dans un espace non structuré. La nouvelle mise en page est très différente et comprend un certain nombre de meilleures pratiques et tendances en matière de conception Web et de convivialité .
Alors, examinons plus en détail non seulement les améliorations notables, mais aussi certaines des décisions contestables en matière de conception et d’utilisation.
Disposition inspirée de la grille
J'utilise l'expression "grille inspirée" car la nouvelle conception semble être basée sur une grille, mais l'alignement de précision des éléments n'est pas exactement là.
Jetant un coup d'oeil à leur feuille de style primaire , ils semblent avoir vaguement basé leur style et leur grille sur le Blueprint CSS cadre.
Leur réinitialisation CSS présente de nombreuses similitudes avec le cadre Blueprint, et le mot «blueprint» est inclus en haut de la page. Il s’agirait donc d’une évaluation logique basée sur ma connaissance limitée de Blueprint.
Après avoir analysé une capture d'écran de leur page d'accueil, j'ai conclu que si la nouvelle mise en page était basée sur une grille, les spécificités de cette grille seraient: 16 colonnes, 50 pixels par colonne, avec des gouttières de 12 pixels (l'espace entre les colonnes), totalisant 980px de largeur.
Vous trouverez ci-dessous une représentation visuelle de mon estimation de grille, sous forme de maquette Photoshop:
Bien que les éléments de la page ne suivent pas le type d'alignement et d'équilibre auquel on s'attend habituellement d'une disposition de grille, il y a une amélioration notable de cette disposition par rapport à la conception précédente, illustrée ci-dessous:
La nouvelle mise en page conserve tous les éléments de la page à l’intérieur du conteneur de 980 pixels de large - contrairement à la conception précédente qui présente une largeur de fluide qui couvre toute la page au-dessus d’une section de contenu à largeur fixe.
De plus, alors que l’ancien modèle ne semblait pas pouvoir choisir entre les coins arrondis et les carrés, le nouveau design présente systématiquement des coins carrés avec des effets de biseau subtils séparant les éléments appropriés, comme le montre l’image ci-dessous.
Bien que le format soit en forme de grille, il ne s'agit pas, comme mentionné, d'un format de grille strict, et les sections situées au-dessous du pli sont assez structurées par rapport à celles ci-dessus.
Section d'en-tête considérablement améliorée
L'une des améliorations les plus évidentes du nouveau design est la section d'en-tête.
La barre de navigation horizontale est moderne, propre et claire . Le champ de recherche, l'option d'inscription et le lien de connexion se trouvent dans le coin supérieur droit, où ils doivent se trouver.
Et, bien qu’il ne soit pas habituel dans la conception moderne de centrer le logo du site, dans ce cas, cela fonctionne. Cela crée une expérience de marque très dominante et vivante qui n'est pas facile à oublier .
Une autre caractéristique intéressante de la barre de navigation est qu’elle indique, au moyen de couleurs et de graphiques, quels liens sont primaires, secondaires et qui s’ouvrent dans des micro-sites ou des sites partenaires. Ces derniers sont indiqués par des triangles pointant vers la droite ("Money" et "Sports" - plus de détails ci-dessous).
Utilisation efficace de l'espace
Dans la partie droite de la page, sous le bloc d'annonces principal, ils ont intégré un sélecteur de contenu de type accordéon, permettant à l'utilisateur d'afficher des aperçus, dans un domaine relativement restreint , du contenu lié à un certain nombre de sujets différents.
Accent sur la popularité de la vidéo et de l'histoire
Dans la conception précédente, la vidéo mettait l’accent sur la vidéo, présentée dans une boîte à droite. Dans la nouvelle conception, la vidéo est une catégorie majeure dans la barre de navigation principale, avec pratiquement la même importance visuelle que le lien "Accueil".
Les récits vidéo sont présentés sur tout le site et sont clairement indiqués par le lien "bouton de lecture" habituel sur les photos liées au contenu vidéo, comme indiqué ci-dessous:
Une autre catégorie ayant la même importance que "Home" et "Video", comme le montre l’image ci-dessus, est la section "NewsPulse", nouvelle et encore en version bêta.
Cette section affiche les articles par popularité (qui semblent être calculés par le nombre total de pages vues, pas par les commentaires) et permet au lecteur de filtrer les résultats par catégorie ou par type d’histoire.
Pages de catégories fortes
Les principales pages de catégories ("US", "World", "Politics", etc.), accessibles depuis la barre de navigation principale, fonctionnent de la même manière que la page d'accueil .
En fait, si vous ne saviez pas sur quelle page vous étiez, vous pourriez penser que vous étiez sur la page d'accueil. La catégorie "US" est indiquée ci-dessous:
Chacune de ces sections affiche facilement les articles les plus récents, les dernières nouvelles et d’autres éléments liés à cette catégorie.
Les légendes en noir et blanc sous les images, également présentées sur la page d'accueil et sur les pages des articles, sont accrocheuses et faciles à lire, sans l'utilisation de graphiques ou de styles de police trop sophistiqués .
Pages d'article fortes
Les pages de l'article, pour la plupart, maintiennent l'image de marque vivante de la page d'accueil. Le texte du corps est bien affiché en Arial 14px avec une hauteur de ligne très lisible .
Bien que certains éléments sur les pages semblent un peu petits, personnellement, j'aime la manière dont la taille de la police du corps de l'article se distingue sur la page, de sorte que le lecteur puisse rester concentré dessus.
De plus, sur le côté gauche de chaque article, il y a une section intitulée «Story Highlights» qui résume l'histoire actuelle dans quelques points de la liste à puces. Cela montre que les concepteurs de CNN sont conscients de la tendance des utilisateurs à "scanner" de longs documents.
Surcharge d'information
De tous les aspects négatifs de la nouvelle conception, le premier problème qui est immédiatement évident est la surcharge de liens et d’informations sur la page d’accueil - bien qu’elle soit plus structurée et organisée, comme nous l’avons vu précédemment.
La page d'accueil comporte environ deux écrans et demi et comprend des sections qui dupliquent les éléments de la barre de navigation principale, avec environ une demi-douzaine de sous-liens dans chaque catégorie. Ces sections apparaissent sous le pli et sont affichées dans cette image:
Étant donné que CNN est l’un des sites les plus populaires au monde (38 millions de visiteurs uniques par mois), ces sections recevront un trafic considérable par rapport à d’autres sites, car elles apparaissent beaucoup les liens, la quantité relative de trafic visitant ces liens via la page d'accueil serait probablement assez faible.
Sections importantes enterrées?
Comme indiqué ci-dessus, beaucoup d'informations sur la page d'accueil apparaissent bien en dessous du pli. Et, de manière significative, il apparaît qu'un contenu important est complètement enfoui au bas de la page d'accueil, plus de deux écrans complets sous l'en-tête .
Par exemple, une section intitulée «Sujets d'actualité» apparaît en bas à droite, juste au-dessus de certaines promotions et annonces.
Il semble plus logique que cette section remplace le sélecteur de contenu en accordéon ou soit incorporée à l’accordéon.
Les annonces et les promotions qui apparaissent sous les "Sujets d'actualité" semblent également être plus importantes que leur emplacement ne le révèle. Encore une fois, même si un site Web très fréquenté recevrait de nombreux clics sur ces zones, le taux de clics par rapport aux sections et aux annonces au-dessus du pli serait probablement très différent.
Bien sûr, les producteurs de CNN savent quel est le contenu le plus important et ils comprennent mieux que quiconque les habitudes de leurs utilisateurs, mais ces problèmes de présentation et de convivialité sont utiles pour analyser si d'autres développeurs doivent prendre des décisions similaires.
Mystères d'utilisation
Il y a quelques éléments sur le nouveau site qui peuvent ne pas être conçus pour une facilité d'utilisation optimale.
Un exemple est le triangle pointant vers la droite qui apparaît sur chacun des liens de microsite. À première vue, je ne savais pas à quoi servaient ces triangles. Ils semblent indiquer une sorte de section de curseur JavaScript qui apparaîtrait.
Certains utilisateurs ne prêtant pas toute leur attention peuvent même les prendre pour des flèches pointant vers le bas qui produisent des menus déroulants.
aurait suffi - mais alors cela présenterait le problème des utilisateurs en supposant que les liens s'ouvraient dans une nouvelle fenêtre, ce qui dans ce cas n'est pas vrai. Le sélecteur de contenu en accordéon, abordé précédemment, présente également quelques problèmes d’utilisation. Premièrement, lorsque JavaScript est désactivé, l'accordéon devient inutile et n'affiche aucun contenu.
Il devrait s'étendre par défaut pour afficher tout le contenu ou afficher l'un des éléments. En outre, les en-têtes hyperliés des sections d'accordéon doivent toujours être liés à leurs sections respectives, mais ils ne le sont pas.
Un autre problème avec le contenu de l'accordéon est que, le texte qu'il contient étant si petit, il n'est pas toujours évident de savoir ce qui peut être cliqué dans l'accordéon. Cela rend les liens moins distincts du reste du contenu en accordéon.
Dans l'image ci-dessous, la flèche rouge que j'ai dessinée indique deux éléments de liste à puces. Le texte dans ces éléments de liste est un lien hypertexte, mais ce n'est pas évident à première vue.
Certaines sections reflètent encore l'ancien design
Comme ce sera le cas avec toute nouvelle conception d'un site de la taille de CNN, certaines sections refléteront toujours l'ancien design jusqu'à ce que toutes les pages soient entièrement intégrées.
C'est généralement le cas avec des contenus plus anciens qui ne seront pas visités aussi souvent, mais dans le cas de CNN, certaines sections importantes ont toujours l'ancien aspect.
Deux exemples sont les sur et contact pages.
Petite typographie
L'utilisation d'un petit texte et de petits éléments typographiques est un problème de conception particulier qui ne correspond pas aux tendances actuelles en matière de conception Web .
La petite taille de la police dans le contenu de l'accordéon a été discutée plus tôt. Il ya aussi la barre d’outils "share" qui apparaît sur les pages d’article et de vidéo, la section "Latest News" sur la page d’accueil, les liens "Inscription" et "Log in" dans l’en-tête, page d'accueil, pour n'en citer que quelques-uns.
La barre d’outils "share" présentée ci-dessus serait-elle plus efficace avec une typographie plus grande? Qu'en est-il de la section "recommandée", illustrée ci-dessous, ou d'autres sections avec un type plus petit?
Conclusion
Le nouveau site CNN.com a ajouté un certain nombre de fonctionnalités non abordées ici qui concernent davantage leurs services d’information et leur contenu personnalisé. Le premier lien ci-dessous contient une vidéo présentée par CNN qui aborde certaines des nouvelles fonctionnalités.
Je pense vraiment que le nouveau site présente une expérience utilisateur beaucoup plus belle et intéressante que l’ancienne, et mis à part les faiblesses du sélecteur de contenu en accordéon, les inconvénients de la nouvelle conception ne sont pas vraiment significatifs.
Il semble que beaucoup de temps et de planification ont été consacrés à la conception du nouveau site CNN.com, et je pense que les concepteurs Web et ceux qui souhaitent améliorer la convivialité sur leurs propres sites feraient bien d’examiner certains des changements présentés. sur le nouveau site web de CNN.
Lectures complémentaires
- Bienvenue sur le nouveau CNN.com (Vidéo sur CNN.com)
- The New CNN.com (Premières captures d'écran sur TechCrunch)
- Nouveau CNN.com va en direct: que pensez-vous?
Cet article a été écrit exclusivement pour Webdesigner Depot par Louis Lazaris, rédacteur indépendant et développeur web. Louis court Web impressionnant où il publie des articles et des tutoriels sur la conception de sites Web. Vous pouvez suivre Louis sur Twitter ou entrer en contact avec lui à travers son site web .
Qu'est-ce que vous aimez ou n'aimez pas dans le nouveau design de CNN? Partagez vos commentaires ci-dessous.