Melhores práticas para projetar um site de notícias sociais
Como você recebe suas notícias diárias hoje em dia? Bem, você pode estar visitando seus sites e blogs favoritos, mas isso é ineficiente, já que esses blogs podem não ter atualizações. Talvez você assine-os usando o RSS , que entrega todos os novos artigos diretamente para você, mas neste caso você terá que vasculhar todas as novidades para descobrir o que é interessante para você. Outra opção hoje seria visitar um site de notícias sociais .
Os sites de notícias sociais são agregadores de links, o que significa que sua principal função é coletar e compartilhar links interessantes. Isso pode ser feito por meio de envios de usuários ou pode ser feito automaticamente pelo sistema. O aspecto de agregação é apenas parte dele, porque esses sites também classificam os links. Novamente, isso pode ser feito através do voto do usuário ou de algum algoritmo mecânico (embora, neste caso, possamos realmente chamá-lo de um site de notícias "social"?). O resultado final é o mesmo: os links mais interessantes sobem ao topo . Esse recurso em particular torna os sites de notícias sociais uma ótima alternativa para o RSS.
Neste artigo mostrarei alguns dos principais sites de notícias sociais atuais, identificaremos tendências e padrões em seus designs e sugeriremos algumas práticas recomendadas a serem seguidas ao projetar esses sites. Vamos começar vendo quatro sites populares de notícias sociais e ver como seus designs se comparam.
Digg
O Digg é o site de notícias sociais mais popular e apresenta um design utilizável que geralmente é adaptado por muitos de seus concorrentes. O Digg usa um layout de duas colunas : uma lista de histórias à esquerda e outras extras à direita, como a caixa das 10 principais histórias. No topo, o Digg mostra uma lista de categorias de histórias e, sob elas, os controles de classificação. Assim, um usuário pode selecionar uma categoria, digamos, "Tecnologia" e, em seguida, classificá-la por "Upcoming" para ver todos os envios mais recentes.
Hélice
A hélice é um bom exemplo de um site que segue de perto o layout do Digg. É um layout de duas colunas com uma lista de histórias à esquerda e conteúdo secundário à direita , como os tweets mais recentes sobre o Propeller ou uma lista das histórias mais comentadas.
Ao contrário do Digg, o Propeller usa separadores de linhas horizontais entre cada uma das histórias, bem como um plano de fundo listrado em zebra para tornar a lista mais fácil de digitalizar. Isso pode ajudar, embora eu deva observar que a distribuição de zebra é tradicionalmente usada para facilitar a leitura em várias tabelas de colunas, especialmente aquelas com muitas colunas. Isso ocorre porque você deseja ler um dado em uma coluna bem distante da etiqueta original, à esquerda, e usar a faixa de zebra como um guia ajuda a mover o olho sem perder o controle da linha . No contexto do Propeller, que tem essencialmente apenas uma coluna de dados, o efeito da distribuição de zebra é questionável.
Reddit é um exemplo de um design diferente do Digg. O Reddit tem um foco pesado no conteúdo, particularmente nas manchetes. O foco é tão forte que tudo além das manchetes é minimizado e afastado para deixar as histórias ocuparem o primeiro lugar. Esse design minimalista permite um consumo de informações muito rápido, pois o visitante pode rapidamente digitalizar muitas manchetes para encontrar uma história interessante para elas. Como o Reddit não possui campos de descrição, cada história ocupa menos espaço, portanto, mais histórias podem ser exibidas na tela .
O Reddit também tem um elemento único no topo da primeira página: uma história aleatória. Como em outros sites de notícias sociais, as últimas notícias do Reddit são mantidas na seção “próximo”. Como essa seção recebe menos tráfego do que a primeira página, algumas histórias interessantes podem ser perdidas. Para remediar isso, o Reddit mostra histórias aleatórias na primeira página para dar a elas um breve momento de exposição que poderia ajudar a impulsioná-las ao topo.
Newsvine
Newsvine tem uma abordagem diferente em seu design. Ao contrário de outros sites de notícias sociais que parecem uma lista de manchetes, a Newsvine usa a aparência de revista / jornal . As histórias são acompanhadas por uma grande foto e descrição e, em alguns casos, o conteúdo da história também pode ser encontrado em sua página de detalhes / comentários.
Um elemento interessante da Newsvine é o mapa de calor de impacto:
O gráfico mostra duas listras: as histórias mais votadas e as mais discutidas. Cada um mostra um conjunto de blocos, todos de diferentes cores e tamanhos. Blocos maiores significam que há mais comentários sobre eles ou mais votos, dependendo do gráfico em que estão. A cor indica a idade da história - verde sendo novo e vermelho sendo antigo. Esta visualização permite uma maneira única de navegar pelo conteúdo no Newsvine .
Agora vamos dar uma olhada em alguns dos elementos de interface comuns presentes nos sites de notícias sociais:
Caixas de voto
Todos os sites de notícias sociais têm algum método de votar em artigos, com a exceção de sites que usam algoritmos de classificação automatizados para trabalhar em postos. Isso torna a área de votação muito importante. Você quer que ele se destaque o suficiente para garantir que as pessoas não percam a oportunidade, mas ao mesmo tempo você precisa fazê-lo desaparecer o suficiente no design da interface para garantir que não atrapalhe a varredura de listas de manchetes .
Aqui estão alguns exemplos de caixas de votação de sites de notícias populares:
Cada caixa é composta por até quatro elementos: a classificação da submissão, a soma dos votos, um link para votar a história e um link para votar a história . A maioria dos sites não mostra a classificação e exibe apenas a soma das pontuações - ou seja, os votos positivos e negativos somados. Falando sobre votos, a maioria dos sites de notícias sociais tem uma maneira de votar em uma reportagem, bem como em cima, embora alguns escolham apenas o botão para cima. Nos casos em que apenas o botão para cima é exibido, um link para "enterrar" (ou para baixo) uma história é geralmente fornecido em outro lugar.
Detalhes da história
Cada história tem mais do que apenas uma manchete para acompanhar. As histórias geralmente exibem a data, o usuário que as publicou, uma breve descrição, um link para a seção de comentários e talvez até uma foto.
Aqui estão alguns exemplos da área de detalhes de envio de sites de notícias populares:
A caixa de votação geralmente está localizada à esquerda. Isso permite que ele permaneça em um local consistente para cada história. O link de comentários, bem como quaisquer outros extras, como "compartilhar esta história", são colocados abaixo da descrição (se presente) ou do título. Ao tornar os detalhes em texto em torno do título cinza, os detalhes desaparecem e dão foco às manchetes , tornando a leitura da lista de histórias muito mais fácil, pois nossos olhos podem pular rapidamente de um para o outro.
A maioria dos sites de notícias sociais exibe a hora como relativa - por exemplo, 10 horas atrás. Isso faz sentido porque as pessoas querem ver o quão nova é a história e não estão particularmente interessadas na data e hora exatas em que foram publicadas.
Você também perceberá que alguns sites exibem o domínio para o qual o link de envio leva ao lado de seu título, normalmente depois dele entre colchetes. Isso é útil porque permite que os visitantes julguem o tipo de conteúdo que devem esperar . Por exemplo, se eles virem 'youtube.com' como a fonte, eles saberão que é um vídeo. Fontes de destaque, como "nytimes.com", também podem ser um indicador da qualidade e duração da história. Embora o usuário possa ver a fonte enquanto passa o mouse sobre um link, exibi-lo sempre ajuda a verificar rapidamente as manchetes.
Paginação
Sites de notícias sociais têm milhares, ou em alguns casos milhões, de links enviados pelo usuário. Mostrar todos esses links de uma só vez é obviamente impossível; você tem que mostrar um pequeno conjunto de cada vez para permitir que os usuários o digam . Os links são geralmente divididos em páginas usando paginação . Paginação é o método de dividir o conteúdo em várias páginas e fornecer um conjunto de links que você geralmente vê na parte inferior ou superior de uma página que permite que você vá para a página seguinte ou anterior, ou escolha um número de página que deseja manualmente.
Aqui estão alguns exemplos de paginação de sites de notícias populares:
Existem, naturalmente, alternativas à paginação. O Reddit mostra apenas os links da página seguinte e anterior:
Esse método torna a navegação mais simples, pois você não precisa pensar em qual página deseja ou precisa localizar o link “próximo” - existem apenas dois links, portanto, na maioria das vezes, você deseja apenas a próxima página. Dito isto, torna-se um pouco confuso, uma vez que é difícil dizer em que página você está.
O Slashdot carrega mais histórias por demanda. Basta clicar no botão "Mais" e mais histórias são carregadas abaixo usando AJAX:
Carregar coisas com o AJAX significa que não há “primeira página”, apenas histórias no topo e histórias na parte inferior.
Seja qual for a paginação escolhida, há algumas coisas que você deve ter em mente para garantir que esse elemento da interface seja utilizável. As áreas de cliques devem ser grandes - não forneça apenas uma lista de links, mas adicione um atributo de preenchimento de CSS a cada link para facilitar o clique. Identifique claramente a página atual com um estilo personalizado - seus usuários precisam saber onde estão agora. Por fim, forneça links "anteriores" e "próximos" . Na maioria das vezes, seus visitantes vão querer navegar por histórias na próxima página, então, ao fazer esses links, você está tirando qualquer pensamento envolvido na localização da próxima página.
Comentários
O item final que vou examinar são os comentários. Os comentários são um elemento importante dos sites de notícias sociais, porque permitem discussões em torno de cada história. O site para o qual o link da história aponta pode não ter funcionalidade de comentários, portanto, a seção de comentários de sites de notícias sociais serve como plataforma de discussão .
Veja como são os comentários no Digg:
Comentários podem ser votados, assim como histórias individuais. Os controles de votação estão localizados à direita de cada comentário, como um polegar para cima ou polegar para baixo. Os comentários mais bem avaliados chegam ao topo da lista , o que significa que discussões de maior qualidade estariam sempre no topo e quaisquer comentários inúteis seriam rejeitados.
Há outro recurso que o Digg fornece para tornar os comentários melhores: encadeamento. Cada comentário pode iniciar um tópico próprio se você responder a ele . Esses encadeamentos são 'recolhidos', mas você pode abri-lo usando o link de pequenas respostas na parte inferior do comentário do encadeamento. Todas as respostas são armazenadas sob o comentário pai e também podem ser votadas para cima ou para baixo. Isso permite respostas interessantes para gerar suas próprias discussões.
Aqui está o que os comentários do Reddit parecem:
Recursos semelhantes aqui: votação e segmentação. Os controles de voto são colocados à esquerda de cada comentário e parecem setas, para cima e para baixo. O Reddit permite encadeamento profundo, o que significa que as respostas a um comentário também podem conter seus próprios conjuntos de respostas relacionadas apenas a eles . De fato, isso cria uma árvore de comentários, pois muitos comentários individuais geram ramificações e sub-ramificações de respostas.
Finalmente, vamos ver os comentários do Newsvine:
A Newsvine usa a mesma estrutura do Digg - cada comentário é capaz de hospedar um conjunto de respostas, mas as respostas em si não podem receber mais respostas. Isso mantém a visão limpa, mas a discussão se torna um pouco mais rígida . Se isso é bom ou não, depende da quantidade de liberdade que você deseja ver nas discussões.
A aparência visual é ligeiramente diferente. Em vez de apenas adicionar uma margem esquerda a cada comentário, os comentários da Newsvine são agrupados em caixas. As respostas também são agrupadas em caixas e colocadas dentro da caixa pai. Isso fornece um indicador de relacionamento claro. A Newsvine também permite apenas votar nos comentários dos pais.
Eu acho que os dois elementos, comentário de comentário e comentário threading, são ingredientes essenciais que você precisa para facilitar boas discussões em sites de notícias sociais. A votação funciona como um filtro para remover qualquer valor baixo ou comentários spam do topo, e até removê-los completamente (alguns sites escondem comentários com resultados negativos); e o threading permite que a discussão se desvie em diferentes áreas de interesse. Mais áreas de discussão significam mais coisas para falar e mais comentários - algo que uma estrutura rígida de uma camada não será capaz de fornecer.
Escrito exclusivamente para WDD por Dmitry Fadeyev. Ele dirige um blog sobre usabilidade chamado Postagem de Usabilidade .
Atualmente, você usa sites de notícias sociais para obter sua dose diária de notícias e, em caso negativo, por que não? Há coisas que você melhoraria ou recursos que você adicionaria a esses sites?