Proposta de layout
Introdução
Este é um resumo da proposta de layout para a página inicial do website Rondônia da Gente, explicando nossas motivações e defendendo alguns pontos de mudança em relação ao mockup que nos foi enviado alguns dias atrás.
Proposta que recebemos
O mockup consiste num layout de chamada de duas colunas, com propagandas ao redor; um bloco de notícias, com propagandas ao redor; e um player de vídeos. Ignorando as resoluções muito incorretas, vamos nos concentrar somente na disposição dos elementos na página.
Chamada
O principal problema da chamada é a escolha do layout de duas colunas com propaganda ao lado. Em resoluções médias (e.g. 1024x768), as notícias ficariam muito espremidas entre a chamada principal e o banner lateral (quase do tamanho delas). E em todo caso, utilizar um banner ao lado de um bloco de notícias faz um desserviço ao anunciante, porque o banner se mistura com as notícias, e também ao usuário, que fica com o olhar perdido.
Banners ao redor das notícias são, aliás, um tema recorrente nessa proposta. Mas não precisamos ir muito longe para ver como isso não é o ideal, temos um exemplo no próprio layout atual do site:
Um dos poucos grandes websites de notícias que utilizam propaganda ao lado das notícias é o Yahoo, mas podemos ver como os desenvolvedores claramente se preocuparam com esse problema, porque utilizam um layout de somente duas colunas na página inicial inteira.
Por fim, a chamada principal fica menos impactante, já que tem o seu tamanho reduzido.
Exibição de notícias
O novo layout ficou muito curto verticalmente, mas isso por si só não é necessariamente uma coisa boa. Nesse caso, somente 11 notícias são exibidas na página inicial inteira. Manter uma página curta não é uma prioridade em nenhum dos grandes portais de notícia, onde infinite scrolling é uma prática mais do que habitual, por exemplo.
Banners de propaganda
Nessa proposta, temos uma proporção de 11:7 entre notícias e banners – incrivelmente alta. Além disso, os banners rodeiam completamente as notícias, causando o problema mencionado alguns parágrafos acima: os banners são desvalorizados e o usuário é confundido.
Nossa proposta
Chamada
Optamos por uma chamada principal com notícias ao lado, de forma semelhante à primeira proposta, mas sem a propaganda na lateral. A propaganda em cima da chamada, desde que não seja exagerada, é uma solução para os dois problemas mencionados previamente: o banner tem muito mais destaque, mesmo sendo menor, e, depois de visualizá-lo, o olhar do usuário segue naturalmente para a chamada principal e depois, em ordem, para as notícias ao lado, sem nenhuma confusão.
Exibição de notícias
A exibição de notícias, depois da chamada, segue um layout simples e consistente: uma linha com as notícias de determinada categoria. O olhar do usuário segue naturalmente do título da categoria para as notícias, e termina no botão “Ver mais”, que leva para a página da categoria, caso ele deseje mais notícias semelhantes. Assim, temos um mecanismo para destacar as categorias com mais potencial de visualização, colocando-as primeiro, e também para converter visualizações da página inicial em visualização das páginas de categoria de maneira natural.
Banners de propaganda
Os banners de propaganda ficam sempre acima das notícias, e não misturados. A mesma solução priorizada pela maior parte dos grandes websites de notícia, como:
Considerações finais
Precisamos lembrar que o Rondônia da Gente foi pensado como um website de notícias, e não um website institucional. E como tal, possui algumas peculiaridades próprias do domínio e que afetam necessariamente a escolha do layout mais adequado. Ser discreto, por exemplo, não é uma prioridade; o objetivo é justamente o oposto: atrair a atenção do leitor para as principais notícias, e depois para as demais se ele tiver tempo, tomando cuidado para não sobrecarregá-lo de informações. Um website de notícias busca o engajamento do usuário.
Por fim, priorizamos a estrutura principal do layout, deixando de fora do mockup coisas como o reprodutor de vídeos e um retrabalho mais detalhado do footer, que são detalhes secundários.