Meilleures pratiques pour la conception d'un site Web de nouvelles sociales
Comment obtenez-vous vos nouvelles quotidiennes ces jours-ci? Eh bien ... vous visitez peut-être vos sites et vos blogs préférés, mais cela est inefficace car ces blogs peuvent ne pas avoir de mises à jour. Vous vous abonnez peut-être à eux en utilisant RSS , qui vous livre tous les nouveaux articles, mais dans ce cas, vous devrez trier toutes les nouveautés pour trouver ce qui vous intéresse. Une autre option aujourd'hui serait de visiter un site de nouvelles sociales .
Les sites de nouvelles sociales sont des agrégateurs de liens, ce qui signifie que leur principale fonction est de collecter et de partager des liens intéressants. Cela peut être fait par le biais de soumissions d'utilisateurs, ou cela peut être fait automatiquement par le système. L'aspect d'agrégation n'en est qu'une partie car ces sites trient également les liens. Encore une fois, cela peut se faire par vote utilisateur ou par un algorithme mécanique (même si dans ce cas, peut-on vraiment appeler cela un site d'actualités «social»?). Le résultat final est toutefois le même: les liens les plus intéressants atteignent le sommet . Cette caractéristique particulière fait des sites d’actualité sociale une excellente alternative au flux RSS.
Dans cet article, je présenterai certains des principaux sites d'actualité sociale, identifierai les tendances et les tendances dans leurs conceptions et suggèrerai les meilleures pratiques à suivre lors de la conception de ces sites. Commençons par examiner quatre sites de nouvelles sociales populaires et voyons comment leurs conceptions se comparent.
Digg
Digg est le site de nouvelles sociales le plus populaire et propose un design utilisable qui est souvent adapté par nombre de ses concurrents. Digg utilise une mise en page à deux colonnes : une liste d'histoires à gauche et des éléments supplémentaires à droite, tels que la boîte à 10 étages supérieure. En haut, Digg affiche une liste des catégories d’histoires et, juste en dessous, les commandes de tri. Ainsi, un utilisateur peut sélectionner une catégorie, dire "Technologie", puis la trier par "À venir" pour voir toutes les dernières soumissions.
Hélice
Propeller est un bon exemple de site qui suit la mise en page Digg assez étroitement. Il s'agit d'une disposition en deux colonnes avec une liste d' histoires à gauche et un contenu secondaire à droite , tels que les tweets les plus récents sur Propeller ou une liste des articles les plus commentés.
Contrairement à Digg, Propeller utilise des séparateurs de lignes horizontaux entre chacune des histoires, ainsi qu'un arrière-plan zébré pour faciliter la numérisation de la liste. Cela peut aider, même si je dois noter que le zébrure est traditionnellement utilisé pour faciliter la lecture sur plusieurs tableaux de colonnes, en particulier ceux comportant de nombreuses colonnes. En effet, vous souhaitez lire un élément de données dans une colonne éloignée de l’étiquette d’origine à gauche et utiliser la bande zébrée comme guide pour vous aider à déplacer l’œil sans perdre la trace de la ligne . Dans le contexte de Propeller, qui ne comporte essentiellement qu’une seule colonne de données, l’effet de la segmentation zébrée est discutable.
Reddit est un exemple de conception différente de celle de Digg. Reddit se concentre principalement sur le contenu, en particulier sur les titres. L’accent est tellement fort que tout est mis à part les gros titres et que l’on s’éloigne pour laisser les histoires occuper la première place. Ce design minimaliste permet une consommation d’informations très rapide car le visiteur peut rapidement numériser beaucoup de titres pour trouver une histoire qui les intéresse. Étant donné que Reddit ne comporte pas de champs de description, chaque article occupe moins d'espace, ce qui permet d'afficher davantage d'histoires à l'écran .
Reddit a également un élément unique tout en haut de la page d'accueil: une histoire aléatoire à venir. Comme sur d'autres sites de nouvelles sociales, les dernières histoires Reddit sont conservées dans la section "à venir". Comme cette section reçoit moins de trafic que la page d'accueil, certaines histoires intéressantes peuvent être perdues. Pour remédier à cela, Reddit affiche des articles à venir sur la première page afin de leur donner un bref moment d’exposition qui pourrait éventuellement les propulser au sommet.
Newsvine
Newsvine adopte une approche différente dans sa conception. Contrairement à d'autres sites de nouvelles sociales qui ressemblent à une liste de titres, Newsvine utilise l' aspect magazine / journal . Les histoires sont accompagnées d'une grande photo et d'une description et, dans certains cas, le contenu de l'histoire peut également être trouvé sur sa page de détails / commentaires.
Un élément intéressant de Newsvine est la carte thermique d'impact:
Le graphique montre deux bandes: les histoires les plus votées et les histoires les plus discutées. Chaque montre un ensemble de blocs, tous de couleurs et de tailles différentes. Des blocs plus grands signifient qu'il y a soit plus de commentaires sur eux, soit plus de votes, en fonction du graphique dans lequel ils se trouvent. La couleur indique l'âge de l'histoire - le vert étant frais et le rouge ancien. Cette visualisation permet de parcourir le contenu sur Newsvine de manière unique .
Voyons maintenant quelques-uns des éléments d’interface courants présents sur les sites de nouvelles sociales:
Boîtes de vote
Tous les sites d'actualités sociales disposent d'une méthode de vote pour les articles, à l'exception des sites qui utilisent des algorithmes de tri automatisés pour calculer les rangs. Cela rend la zone de vote très importante. Vous voulez que cela se produise suffisamment pour que les gens ne le manquent pas , mais en même temps, vous devez le faire assez bien dans la conception de l’interface pour vous assurer qu’elle ne gêne pas lors de la numérisation des listes de titres .
Voici quelques exemples de boîtes de vote de sites de nouvelles populaires:
Chaque case contient jusqu'à quatre éléments: le rang de la soumission, la somme des votes, un lien pour voter l'histoire et un lien pour voter l'histoire . La plupart des sites ne montrent pas le classement et affichent simplement la somme des scores, c’est-à-dire que les votes positifs et négatifs s’ajoutent. En parlant de votes, la plupart des sites d’information sociale ont un moyen de voter une histoire aussi bien que certains, bien que certains choisissent de n’avoir qu’un seul bouton. Dans les cas où seul le bouton haut est affiché, un lien pour "enterrer" (ou voter bas) une histoire est généralement fourni ailleurs.
Détails de l'histoire
Chaque histoire a plus qu'un titre pour aller avec. Les histoires affichent généralement leur date, l'utilisateur qui les a publiées, une brève description, un lien vers la section des commentaires et peut-être même une image.
Voici quelques exemples de zones de détails de soumission de sites de nouvelles populaires:
La boîte de vote est souvent située à gauche. Cela lui permet de rester dans un emplacement cohérent pour chaque histoire. Le lien des commentaires, ainsi que tous les autres extras tels que "partager cette histoire" sont placés sous la description (le cas échéant) ou le titre. En faisant en sorte que le texte des détails autour du titre soit en gris, les détails disparaissent et se focalisent sur les titres , facilitant ainsi la numérisation de la liste des histoires car nos yeux peuvent rapidement passer de l'un à l'autre.
La plupart des sites d'actualités sociales affichent l'heure comme relative - par exemple, il y a 10 heures. Cela a du sens parce que les gens veulent voir à quel point une histoire est fraîche et ne sont pas particulièrement intéressés par la date et l'heure exactes de leur publication.
Vous remarquerez également que certains sites affichent le domaine sur lequel le lien de soumission mène à côté de son titre, généralement entre crochets. Cela est utile car cela permet aux visiteurs de juger du type de contenu auquel ils peuvent s’attendre . Par exemple, s'ils voient "youtube.com" comme source, ils sauront que c'est une vidéo. Des sources importantes telles que «nytimes.com» peuvent également être un indicateur de la qualité et de la longueur de l'histoire. Alors que l'utilisateur sera en mesure de voir la source en survolant un lien, son affichage à tout moment aide à analyser rapidement les titres.
Pagination
Les sites de nouvelles sociales comportent des milliers, voire des millions, de liens soumis par les utilisateurs. Montrer tous ces liens à la fois est bien sûr impossible; vous devez afficher un petit ensemble à la fois pour permettre aux utilisateurs de le digérer . Les liens sont généralement divisés en pages en utilisant la pagination . La pagination est la méthode qui consiste à diviser le contenu en plusieurs pages et à fournir un ensemble de liens que vous voyez généralement en bas ou en haut d'une page pour vous permettre d'accéder à la page suivante ou précédente ou de choisir un numéro de page manuellement.
Voici quelques exemples de sites populaires:
Il existe bien sûr des alternatives à la pagination. Reddit affiche uniquement les liens de page suivants et précédents:
Cette méthode simplifie la navigation dans la mesure où vous n'avez pas à réfléchir à la page que vous souhaitez ou devez localiser le lien "suivant" - il n'y a que deux liens. Cela dit, il est parfois un peu déroutant car il est difficile de dire sur quelle page vous êtes.
Slashdot charge d'autres articles à la demande. Il suffit de cliquer sur le bouton "Plus" et d’autres articles sont téléchargés ci-dessous à l’aide d’AJAX:
Charger des objets avec AJAX signifie qu'il n'y a pas de "première page", juste des histoires en haut et des histoires en bas.
Quelle que soit la pagination que vous choisissez, il y a quelques points à garder à l'esprit pour vous assurer que cet élément d'interface est utilisable. Les zones de clic doivent être grandes - ne vous contentez pas de fournir une liste de liens, mais ajoutez un attribut de remplissage CSS à chaque lien pour faciliter le clic. Identifiez clairement la page actuelle avec un style personnalisé - vos utilisateurs doivent savoir où ils se trouvent en ce moment. Enfin, fournissez les liens "précédent" et "suivant" . La plupart du temps, vos visiteurs voudront parcourir les articles de la page suivante. En faisant ces liens, vous éliminez toute réflexion liée à la recherche de la page suivante.
commentaires
Le dernier élément que j'examinerai est des commentaires. Les commentaires sont un élément important des sites d’actualités sociales car ils permettent aux discussions de surgir autour de chaque histoire. Le site Web sur lequel pointe le lien vers l’histoire n’a peut-être pas de fonctionnalité de commentaires, de sorte que la section des commentaires des sites de nouvelles sociales sert de plate-forme de discussion .
Voici à quoi ressemblent les commentaires sur Digg:
Les commentaires peuvent être votés, tout comme les histoires individuelles. Les commandes de vote sont situées à droite de chaque commentaire, sous la forme d'un pouce levé ou d'un pouce levé. Les commentaires les mieux notés arrivent en tête de liste , ce qui signifie qu'une discussion de meilleure qualité serait toujours au sommet, et que les commentaires inutiles seraient rejetés.
Il y a une autre fonctionnalité que Digg fournit pour améliorer les commentaires: le threading. Chaque commentaire peut démarrer un thread si vous y répondez . Ces threads sont «réduits», mais vous pouvez l'ouvrir en utilisant le lien des petites réponses au bas du commentaire du thread. Toutes les réponses sont ensuite stockées sous le commentaire parent et peuvent également être votées vers le haut ou le bas. Cela permet des réponses intéressantes pour engendrer leurs propres discussions.
Voici à quoi ressemblent les commentaires Reddit:
Caractéristiques similaires: vote et threading. Les commandes de vote sont placées à gauche de chaque commentaire et ressemblent à des flèches, de haut en bas. Reddit permet un threading profond, ce qui signifie que les réponses à un commentaire peuvent également contenir leurs propres jeux de réponses uniquement liés à eux . En effet, cela crée un arbre de commentaires car de nombreux commentaires individuels génèrent des branches et des sous-branches de réponses.
Enfin, voyons les commentaires de Newsvine:
Newsvine utilise la même structure que Digg - chaque commentaire pouvant héberger un ensemble de réponses, mais les réponses elles-mêmes ne peuvent pas accueillir d’autres réponses. Cela permet de garder la vue propre mais la discussion devient un peu plus rigide . Que cela soit une bonne chose ou non dépend de la quantité de liberté que vous voulez voir dans vos discussions.
L'aspect visuel est légèrement différent. Au lieu de simplement ajouter une marge de gauche à chaque commentaire, les commentaires de Newsvine sont placés dans des cases. Les réponses sont également placées dans des boîtes et placées à l'intérieur de la boîte parente. Cela fournit un indicateur de relation clair. Newsvine autorise également le vote sur les commentaires des parents.
Je pense que les deux éléments, le vote de commentaires et le fil de commentaires, sont des ingrédients essentiels dont vous avez besoin pour faciliter de bonnes discussions sur les sites de nouvelles sociales. Le vote agit comme un filtre pour supprimer tous les commentaires de faible valeur ou de spam, et même les supprimer (certains sites cachent des commentaires avec des scores négatifs); et le threading permet à la discussion de se déplacer dans différents domaines d'intérêt. Plus de zones de discussion signifient plus de choses à discuter et plus de commentaires - quelque chose qu'une structure rigide à une couche ne pourra pas fournir.
Écrit exclusivement pour WDD par Dmitry Fadeyev. Il gère un blog sur la convivialité appelé Poste d'utilisation .
Utilisez-vous actuellement des sites de nouvelles sociales pour obtenir votre dose quotidienne de nouvelles, et sinon, pourquoi pas? Y a-t-il des choses à améliorer ou des fonctionnalités que vous ajouteriez à de tels sites?