Le nouveau site Web du Washington Post : une hiérarchie inspirée de l'imprimé

Autre

Sans aucun doute, l'une des caractéristiques les plus attrayantes d'une page de journal imprimé est la façon dont elle peut afficher une hiérarchie pour le contenu qu'elle affiche. Lorsqu'un éditeur et un concepteur travaillent ensemble pour établir les priorités du contenu, il appartient alors à la façon dont la typographie, la taille des éléments et le positionnement se combinent pour indiquer au lecteur quelle est l'histoire la plus importante, ainsi que le rang et l'importance de celles-ci. qui suivent.

Une page d'accueil bien conçue, par exemple, affiche un centre d'impact visuel (CVI) qui devient le point d'entrée sur la page. C'était la pièce maîtresse de mon propre livre Contemporary Newspaper Design (Prentice-Hall, 1981), où j'écrivais :

« Le concepteur contrôle la façon dont il souhaite que le lecteur procède visuellement sur la page. L'une des règles de base de la conception de pages est de créer une attraction instantanée pour le lecteur. Le CVI devrait générer suffisamment d'intérêt ou de magnétisme pour attirer l'attention du lecteur en un coup d'œil.

Cela a ensuite été validé avec notre propre recherche Poynter EyeTrack des années 1980 dans laquelle la majorité des yeux des lecteurs sont entrés dans la page via une photo ou via un titre qui était l'élément le plus important de la page.

La séduction visuelle en un coup d'œil est encore plus importante aujourd'hui, car nous devons présenter des informations sur des plateformes, certaines d'entre elles avec des écrans assez petits, où la création de hiérarchie devient plus difficile.

Au Washington Post

Le Washington Post a commencé à déployer son nouveau site Web très attendu, à la suite d'une série de tests qui ont débuté en mai.

Capture d'écran de la page d'accueil de WashingtonPost.com.

j'ai jeté un oeil au nouveau washingtonpost.com et deux choses se démarquent : son approche épurée et minimaliste et le rôle important et plus important que joue la hiérarchie. C'est comme si l'équipe numérique de WaPo s'était inspirée de la façon dont les nouvelles sont présentées sur papier et avait décidé de la saluer à travers leur édition en ligne.

La police élégante du Post, Postoni, nous aide à nous situer dans un territoire familier dès le départ.

À partir de la page d'accueil, moins d'histoires - seulement environ quatre - se disputent l'attention en haut. Le plus petit nombre d'histoires indique immédiatement qu'il s'agit du premier choix que nous devrions connaître en ce moment. Les lecteurs apprécient la curation, qui est, après tout, une forme de hiérarchie pour la sélection de contenu.

Je souhaite que la taille des titres de ces histoires varie un peu plus qu'elle ne le fait. La variation de la taille des titres est l'un des moyens les plus efficaces d'indiquer l'importance, un élément sur lequel les éditeurs d'impression et les concepteurs ont toujours capitalisé. Dans le nouveau wapo.com, il n'y a qu'une très légère différence entre la pièce principale et les pièces secondaires.

La vraie priorité, cependant, vient de la façon dont la navigation est présentée. Le nouveau wapo.com a une barre de navigation horizontale traditionnelle en haut : Politique, Sports, Style de vie, etc. Cependant, ce que j'ai le plus aimé, c'est la barre de navigation de nouvelles la plus directe, avec des histoires spécifiques du jour : Donald Trump, les quarterbacks des Redskins, Pape François. 'Police de la mode'.

La hiérarchie joue également un rôle clé lorsque nous faisons défiler la page, avec différentes sections présentant leur contenu, comme dans Opinion, More Top Stories, Visual Stories.

La page de l'article, un point sur lequel nous sommes tous d'accord, c'est là que de nombreux lecteurs atterrissent en premier lorsqu'ils arrivent via un lien des médias sociaux, est également propre et facile à suivre, mais avec un fort échantillonnage d'histoires dans une colonne à droite du texte. C'est une façon dont les éditeurs et les concepteurs disent au lecteur : nous savons que vous venez de nous rejoindre, alors voici d'autres histoires que vous pourriez apprécier aujourd'hui.

Une conversation avec Cory Haik et Julia Beizer du Post

J'ai eu un mini entretien avec Julia Beizer du Post, directrice des produits mobiles, et Cory Haik, directeur exécutif, Emerging News Products.

Vue d'écran de la conception de sérendipité mobile du Washington Post.

En mai dernier, que la Poste testerait deux versions de son site Web et mobile créé par la Team Rainbow. Le mot sérendipité a été mentionné comme l'un des éléments qui seraient nouveaux.

Julia : Nous pensons que la sérendipité est un facteur clé du succès de l'engagement. Sur le Web, les organes de presse et les entreprises technologiques tentent d'imaginer des moyens de faire accéder les lecteurs à davantage de contenus qu'ils pourraient aimer.

La Poste expérimente continuellement dans cet espace, à travers la production éditoriale, les avancées technologiques comme la personnalisation du big data, etc. Rainbow Web est l'une de ces expérimentations. Nous avons choisi d'utiliser l'optique de la sérendipité pour nous guider. Quelles nouvelles expériences utilisateur pourrions-nous créer pour mettre en valeur le genre de sérendipité délibérée que nous avons créé pendant des années dans l'impression ?

Alors, comment le concept du pack d'actualités a-t-il fonctionné ?

Cory : Le papier journal est mort, vive le papier journal ! Nous embrassons pleinement le bundle; nous l'avons toujours fait, car le journal était le « paquet » original qui roulait chaque jour devant la porte. C'est un produit qui, selon nous, fonctionne très bien, en particulier pour la sérendipité. La navigabilité et l'évolutivité qui sont, très franchement, simplement faciles à consommer. Le Web peut être le Far West en termes de navigation et d'expérience de lecture complète. Pour être honnête, le papier est un produit perfectionné depuis plus de cent ans. Nous avons donc voulu prendre ce concept de bundle, l'appliquer au Web et créer une expérience de lecture plus complète pour que les utilisateurs puissent naviguer facilement. Et ça marche ! Les utilisateurs restent plus longtemps et lisent plus d'histoires par visite. Et nous pensons que la façon dont nous programmons notre contenu aide les gens à accéder à des histoires intéressantes sur lesquelles ils n'auraient peut-être pas trébuché autrement. Bien sûr, c'est une expérience, mais nous nous sentons bien et nous progressons de nouvelles façons. Notre prochain objectif sera de trouver des moyens d'apporter davantage de la conception de nouvelles riches que nous faisons sur la suite Rainbow à plus de coins du Washington Post.

Lequel des modèles avez-vous adopté ?

Julia : C'était notre premier test A-B de Rainbow web. Nous avons vu assez rapidement que les lecteurs préféraient le coup d'œil. Notre taux de rebond était plus faible sur cette version et notre temps passé était plus long. Nous avons rapidement adopté le pincement comme paradigme UX de base pour Rainbow sur le Web mobile. Cela a été efficace pour nous - 14% de nos pages vues sur le Web Rainbow mobile proviennent d'utilisateurs tapant sur ce petit morceau d'article sur la droite. C'est super. C'est un engagement que nous n'avons pas ailleurs.

Sur le bureau, nous utilisons toujours un paradigme de pincement, mais nous l'avons itéré au cours des derniers mois pour l'optimiser pour des tailles d'écran plus grandes. Nous avons testé un paradigme de navigation comme celui ci-joint, en intégrant une newsletter visuelle appelée Premières lectures en tant qu'élément de navigation sur le Web pour ordinateur de bureau / tablette. Nous nous attendions à ce que cela contribue à stimuler l'engagement, mais nous avons en fait constaté le contraire. Les lecteurs étaient plus susceptibles de naviguer en vue pincée qu'ils n'utilisaient ce rail, nous avons donc intégré ce contenu dans le menu hamburger.

Il est satisfaisant de voir cette nouvelle génération d'éditions d'actualités en ligne qui progresse avec un salut intelligent à ces qualités d'impression qui valent la peine d'être transférées à nos efforts numériques.

Ce sont également des principes de bonne conception des nouvelles qui nous ont bien servi et devraient continuer à le faire :

1. Établissez un centre d'impact visuel clair qui devient le point d'entrée dans une page ou un écran.
2. Utilisez la taille des photos/titres pour guider le lecteur du plus important au moins important.
3. Fournissez un environnement propre pour que l'œil puisse se promener, en évitant l'encombrement et l'encombrement (c'est là qu'un bon espace blanc interne fait la différence !).
4. Hiérarchisez le contenu en fonction de son importance, en fournissant ce sens de la conservation qui est essentiel à la façon dont nous consommons l'information aujourd'hui.

Le Washington Post le fait bien. Il devrait servir de modèle à ceux qui envisagent de modifier leurs éditions en ligne.