Approches de conception des sites Web des éditeurs

Qu'est-ce qu'un "site Web d'éditeur numérique?" C'est un site Web qui se concentre sur la publication de nombreux articles au quotidien. C'est un niveau au-dessus d'un «blog». Il s'agit essentiellement d'un site d'actualités ou d'une plateforme de publication virale comme BuzzFeed.

Il existe une différence dans l'approche de conception d'un tel site Web par rapport à une vente de produits, une entreprise, un blog personnel ou tout autre type de site Web. Sa mise en page est souvent connue sous le nom de style «Magazine», qui est également une catégorie assez saturée sur les marchés thématiques.

Qu'est-ce qui différencie un site Web d'éditeur?

Il existe deux différences majeures entre un site Web d'éditeur et un site plus régulier.

Le premier élément évident est la quantité de contenu. Maintenant, bien sûr, il existe d'énormes sites Web, en particulier ceux de commerce électronique comme Amazon ou eBay, qui ont probablement beaucoup plus de contenu, mais ce sont des plates-formes qui obtiennent du contenu des utilisateurs du site. Les éditeurs ont des équipes éditoriales qui travaillent à plein temps pour produire du contenu selon un calendrier. Tout comme le fait un journal.

L'autre différence majeure est la source de revenus. Un site Web d'entreprise comme Coca Cola ne génère pas ses revenus à partir du site , mais plutôt à partir de ses produits. La plupart des sites Web d'entreprise ont simplement pour but d'être une présence numérique.

Sachant cela, il est probablement évident que les revenus du site Web d'un éditeur proviennent du site lui-même. Comment? Les publicités! C'est à peu près ainsi que Google ou Facebook génèrent la plupart de leurs revenus.

Les annonces, très certainement, exploitent le Web et sont la principale priorité de nombreux sites Web. Leur contenu vise à attirer autant de lecteurs que possible afin qu'ils puissent voir les publicités sur leurs mises en page.

Du point de vue du design, c'est la principale priorité des sites Web des éditeurs et des magazines.

Conception de sites Web avec beaucoup de contenu

Jetons un coup d'œil à quelques grands éditeurs comme Variety:

La première chose que l'on voit est une grande annonce en haut. Nous examinerons cela plus en détail dans une seconde, avant cela - la mise en page du contenu. Un grand en-tête avec de nombreux liens - hamburger en haut, recherche, appel à l'action et encore plus d'éléments de menu. Le but est de donner un accès facile à toutes les catégories de contenu. Ceci est en contraste frappant avec de nombreux sites commerciaux qui ont moins de 10 pages (à l'exclusion des pages de blog).

Après cela - une grande boîte pour l'article principal. C'est une bonne décision de conception. Cela permet à vos visiteurs de décider plus facilement quoi faire. S'il y a 10 éléments tout aussi importants, la tension mentale de choisir l'un plutôt que l'autre pourrait faire rebondir certains utilisateurs sur la page. Avec une hiérarchie visuelle claire des éléments importants aux éléments moins importants, un concepteur peut faire en sorte que les utilisateurs restent plus longtemps sur une page Web.

À droite - une autre annonce et un widget "Les plus populaires", ce que la plupart des utilisateurs aimeraient voir. Afin de s'adapter à autant de contenu, Variety a décidé d'en faire une zone de défilement.

C'est le type de mise en page que vous utiliseriez principalement avec les grands éditeurs.

BuzzFeed est un autre exemple de mise en page conçue pour fonctionner avec de plus grandes quantités de texte. Ici, le design est plus ludique avec des couleurs vives et des formes qui attirent l'attention (comme les trois boutons dans le coin supérieur droit).

Il y a plus de «classement» que le 1, 2, 3 sur la tendance à droite, l'étiquette rouge vif pour les nouvelles «de dernière heure» et ainsi de suite. Une tendance majeure dans une conception similaire consiste à attirer l'attention de l'utilisateur. Cette attention doit cependant être bien dirigée, car vous ne voudriez pas la diviser entre deux éléments tout aussi importants.

Voici un exemple de la mauvaise approche où tout essaie d'être au sommet:

Nous sommes bien conscients que le but est complètement différent et que le site ci-dessus pourrait en fait générer un bon profit, mais il illustre bien le principe de «tout essayant d'attirer votre attention»

Éditeurs numériques et publicité

La conception autour de la publicité est un autre sujet majeur pour les éditeurs. Étant donné que c'est la principale source de revenus, c'est aussi la priorité absolue. Il y a quelques éléments qu'un concepteur doit prendre en compte ici, dont le premier est d'obtenir des commentaires ou de bonnes informations de la part de l'équipe AdOps qui comprend bien les exigences et la fonctionnalité de ces publicités.

Les tailles d'annonces en sont des exemples. Il y a 300 × 250, 300 × 600, 728 × 90 et 300 × 50.

• Certains peuvent rester sur un côté de l'écran où vous pouvez faire défiler différents points
• Certains pourraient rester dans leur propre petit coin, d'autres resteraient toujours en haut de la page.
• D'autres apparaissaient par paires de deux 300 × 250 ou un 720x90px.

Comment savez-vous tout cela et quelles sont les exigences?

Alors oui, la première étape serait de collecter toutes ces informations. Un moyen plus simple de le voir est en termes de mise en page. Un même article peut avoir plusieurs mises en page en fonction des objectifs de l'éditeur. Parfois, il y a moins d'annonces, parfois il y en a plus. Parfois, les annonces changent de taille pour différentes charges, d'autres fois elles restent constantes. Tout cela peut changer rapidement à mesure que de nouvelles tendances et règles apparaissent. Souvent au quotidien!

Certaines des choses importantes à garder à l'esprit seraient:

• Les annonces avec une hauteur peuvent se charger. Cela signifie que le contenu serait poussé vers le bas et que la conception conçue pour s'adapter à un certain widget au-dessus du pli échouerait.
• Les annonces peuvent nécessiter des arrière-plans. Il peut s'agir d'un arrière-plan gris clair entourant l'annonce, touchant les coins de l'écran.
• Les annonces ont souvent besoin d'un espacement autour d'elles pour éviter les contacts accidentels. 20-30 pixels est une bonne distance entre les annonces.
• Vous voudrez ajouter un libellé «Publicité» avant / après dans le but d'attirer davantage les fournisseurs de publicité.
• Il ne devrait pas y avoir trop d'annonces! Le point idéal pour cela est ce qu'une équipe AdOps travaillerait à déterminer pour un éditeur spécifique, une page spécifique et même un trafic spécifique (comme Facebook, Snapchat, etc.)

Performances du site Web de l'éditeur

Un contributeur majeur aux mauvaises performances sont les configurations avec plus de 8 publicités essayant de se charger avec des tonnes d'autres scripts. Pourquoi est-ce une préoccupation du concepteur alors que tout est dans le code? Les développeurs ne peuvent-ils pas simplement l'optimiser? Eh bien oui, mais c'est presque un travail à plein temps en soi, et le concepteur pourrait aider. Pour comprendre tout cela, vous devez d'abord comprendre un peu les navigateurs

La source

Les navigateurs peuvent utiliser le CPU ou le GPU d'une machine en fonction de la façon dont un certain élément est codé par un développeur frontal. Parfois, des actions telles que des animations et des interactions en survol, appuyez sur utiliseraient le CPU ou le GPU. Si une animation, par exemple, utilise le processeur, il est fort probable qu'il y ait un décalage, si c'est le GPU, il est alors possible d'obtenir de meilleures performances. Les exigences du concepteur peuvent faire la différence entre les deux.

Voici quelques conseils généraux:

• Utilisez peu ou pas d'ombres. Les ombres sont très coûteuses à rendre, en particulier sur les appareils mobiles et les ordinateurs portables bas de gamme.
• N'utilisez pas de filtres de fond ou de flous (ou d'autres filtres) car ils sont également très chers.
• Gardez les formes simples autant que possible pour réduire les calculs supplémentaires.
• Ne demandez pas d'animations d'éléments qui affectent la mise en page (autres éléments). Concevez-en autant que possible. Tout ce qui se chevauche ou est une fenêtre contextuelle est un meilleur choix.
• Gardez les images relativement petites. Cela permettrait aux développeurs de charger des images de plus petite taille, ce qui permettrait de gagner du poids sur le site.
• Gardez les animations en général au minimum, en particulier sur la charge du site. Il en va de même pour les changements de disposition. La première charge est le temps le plus gourmand en CPU pour un site Web lorsque tout JavaScript est appliqué.

La source

Priorité de la conception

La majorité du trafic sur les sites des éditeurs provient du mobile. Donc, le temps le plus consacré à peaufiner tous les détails devrait y aller. Sur mobile également, la plupart des optimisations sont également nécessaires, car la majorité des appareils ne sont pas des produits phares haut de gamme, mais des smartphones de 200 à 300 dollars.

Sur mobile, votre objectif est de garder le contenu lisible tout en présentant des publicités de manière claire. Gardez une distance importante entre tout élément cliquable et les annonces pour supprimer tout clic accidentel sur les annonces. Si possible, réduisez les animations et les superpositions susceptibles de rendre le site moins accrocheur.

Sommaire

Les éditeurs se concentrent sur beaucoup de contenu et beaucoup d'annonces. En général, les pages de destination et les archives ont moins de priorité que les vues uniques, car le trafic provient souvent directement des articles à partir d'autres annonces. En tant que concepteur, votre objectif est de trouver le moyen le plus optimal de diffuser des annonces, d'ajouter les espacements appropriés et de bien les séparer du contenu principal pour que tout soit lisible et utilisable.

Réduisez au minimum les éléments complexes de l'interface utilisateur pour améliorer les performances de vitesse et demandez le moins d'animations possible. Pour bien comprendre tout, les éditeurs doivent souvent travailler avec des agences de développement qui ont une bonne expérience avec AdOps, suivent les dernières tendances et les piles technologiques du secteur, telles que DevriX.