Novo design do site da CNN desconstruído
Na segunda-feira, 26 de outubro, CNN.com introduziu um novo design de site , fazendo uma série de mudanças importantes em seu layout de informação pesada.
O novo design é bonito, limpo, organizado e bem estruturado. Ele convida o olho para digitalizar e encontrar algo interessante com o objetivo de clicar para outra página.
O design anterior era um pouco confuso e não muito convidativo; o conteúdo parecia que estava sendo forçado a entrar em um espaço não estruturado. O novo layout é muito diferente e abrange diversas práticas recomendadas e tendências de design e usabilidade de web moderna .
Então, vamos olhar com mais detalhes não apenas as melhorias notáveis, mas algumas das decisões questionáveis de design e usabilidade.
Layout Inspirado em Grade
Estou usando a frase "inspirada na grade" porque o novo design parece estar baseado em uma grade, mas o alinhamento preciso dos elementos não está exatamente lá.
Tomando um olhar superficial a sua folha de estilo primária , eles parecem ter vagamente baseado seu estilo e grade na CSS do Blueprint estrutura.
Sua redefinição de CSS tem muitas semelhanças com a estrutura do Blueprint, e a palavra "blueprint" está incluída na parte superior, portanto, isso seria uma avaliação lógica com base em meu próprio conhecimento limitado do Blueprint.
Depois de analisar uma captura de tela de sua home page, concluí que se eles baseassem o novo layout em uma grade, os detalhes dessa grade seriam: 16 colunas, 50 px por coluna, com medias de 12px (o espaço entre colunas), totalizando 980px de largura.
Abaixo está uma representação visual da estimativa da minha grade, como um mock up do Photoshop:
Mesmo que os elementos na página não sigam o tipo de alinhamento e equilíbrio que seria normalmente esperado de um layout de grade, há uma melhoria notável nesse layout em relação ao design anterior, mostrado abaixo:
O novo layout mantém todos os elementos de página dentro do contêiner de 980px - ao contrário do design anterior de aparência desajeitada que tinha um cabeçalho de largura de fluido que abrangia toda a página acima de uma seção de conteúdo de largura fixa.
Além disso, embora o design antigo não pareça decidir entre cantos arredondados e quadrados, o novo design apresenta consistentemente cantos quadrados com efeitos de chanfro sutis separando elementos apropriados, como mostrado na imagem abaixo.
Embora o formato seja semelhante a uma grade, ele é, como mencionado, não um formato de grade estrito, e as seções abaixo da dobra se desviaram um pouco da estrutura daquelas acima.
Seção de cabeçalho drasticamente melhorada
Uma das melhorias mais aparentes no novo design é a seção de cabeçalho.
A barra de navegação horizontal é moderna, limpa e clara . A caixa de pesquisa, a opção de inscrição e o link de login estão no canto superior direito, onde deveriam estar.
E, embora não seja habitual no design moderno centrar o logótipo do site, neste caso funciona. Cria uma experiência de marca muito dominante e vívida que não é facilmente esquecida .
Outra boa característica da barra de navegação é que ela indica, por meio de cores e gráficos, quais links são primários, quais são secundários e quais serão abertos em micro-sites ou sites irmãos. Os últimos são indicados por triângulos apontando para a direita (“Dinheiro” e “Esportes” - mais sobre isso abaixo).
Uso Eficaz do Espaço
No lado direito da página, abaixo do bloco de anúncios principal, eles incluem um alternador de conteúdo no estilo acordeão, permitindo que o usuário visualize visualizações, em uma área relativamente pequena , de conteúdo relacionado a vários tópicos diferentes.
Ênfase na popularidade do vídeo e da história
No design anterior, o vídeo teve ênfase bastante forte, apresentado em uma caixa no lado direito. No novo design, o vídeo é uma categoria importante na barra de navegação principal, considerando virtualmente a mesma importância visual do link "Início".
Histórias de vídeo são apresentadas em todo o site e são claramente indicadas pelo link "botão de reprodução" nas fotos que apontam para o conteúdo do vídeo, conforme mostrado abaixo:
Outra categoria dada a mesma importância que “Home” e “Video”, como mostrado na imagem acima, é a seção “NewsPulse”, que é nova e ainda está em beta.
Esta seção exibe notícias por popularidade (que parece ser calculada pelo total de visualizações de página, não comentários) e permite que o leitor filtre os resultados por categoria ou tipo de história.
Páginas fortes de categoria
As páginas da categoria principal (“EUA”, “Mundo”, “Política”, etc.), acessadas a partir da barra de navegação principal, funcionam de forma semelhante à página inicial .
Na verdade, se você não sabia em qual página estava, talvez achasse que estava na página inicial. A categoria "EUA" é mostrada abaixo:
Cada uma dessas seções exibe convenientemente as principais notícias, as últimas notícias e outros itens relacionados a essa categoria.
As legendas em preto e branco abaixo das imagens, também apresentadas na página inicial e nas páginas dos artigos, são atraentes e fáceis de ler, sem o uso de gráficos ou estilos de fonte excessivamente extravagantes .
Páginas de artigos fortes
As páginas do artigo, na maior parte, mantêm a marca viva da página inicial. Corpo texto é bem exibido em 14px Arial com uma altura de linha muito legível .
Embora alguns elementos nas páginas pareçam um pouco pequenos, eu pessoalmente gosto da maneira como o tamanho da fonte do corpo do artigo se destaca na página, para que o leitor possa se concentrar nele.
Além disso, no lado esquerdo de cada história, há uma seção chamada "Destaques da História", que resume a história atual em alguns pontos da lista com marcadores. Isso mostra que os projetistas da CNN estão cientes da tendência on-line dos usuários de “escanear” material demorado.
Sobrecarga de informação
De todos os aspectos negativos do novo design, provavelmente o primeiro problema que é imediatamente evidente é a sobrecarga de links e informações na home page - embora seja mais estruturada e organizada, como discutido anteriormente.
A home page tem cerca de duas telas e meia e inclui seções que duplicam itens na barra de navegação principal, com cerca de meia dúzia de sub-links em cada categoria. Estas seções aparecem abaixo da dobra e são mostradas nesta imagem:
Como a CNN é um dos sites mais populares do mundo (38 milhões de visitantes únicos por mês), essas seções receberão um tráfego considerável em comparação a outros sites, no entanto, porque aparecem muito abaixo da dobra, e porque há muitos links, a quantidade relativa de tráfego visitando esses links através da home page provavelmente seria bastante baixa.
Seções importantes enterradas?
Como apontado acima, muitas informações na home page aparecem bem abaixo da dobra. E, significativamente, parece que algum conteúdo importante está completamente enterrado na parte inferior da página inicial, mais de duas telas cheias abaixo do cabeçalho .
Por exemplo, uma seção intitulada "Tópicos ativos" aparece na parte inferior, à direita, logo acima de algumas promoções e anúncios.
Parece fazer mais sentido que esta seção substitua o alternador de conteúdo do acordeão, ou seja incorporada ao acordeão.
Os anúncios e promoções exibidos abaixo dos "Tópicos Quentes" também parecem ser mais importantes do que a localização deles revela. Novamente, embora um site de tráfego tão elevado receba muitos cliques nessas áreas, a taxa de cliques em comparação com as seções e os anúncios acima da dobra provavelmente seria drasticamente diferente.
Naturalmente, os produtores da CNN sabem qual conteúdo é mais importante e compreendem melhor os hábitos de seus usuários do que ninguém - mas esses desafios de layout e usabilidade são úteis para analisar se outros desenvolvedores enfrentarem decisões semelhantes.
Mistérios de Usabilidade
Existem alguns elementos no novo site que podem não ser projetados para uma ótima usabilidade.
Um exemplo é o triângulo apontando para a direita que aparece em cada um dos links do micro-site. À primeira vista, não sabia ao certo para que eram esses triângulos. Eles parecem indicar algum tipo de seção de controle deslizante de JavaScript que apareceria.
Alguns usuários que não prestam atenção total podem até confundi-los com setas apontando para baixo que produzem menus suspensos.
teria bastado - mas então isso apresentaria o problema de usuários assumindo que os links abriram em uma nova janela, que neste caso não é verdadeira. O alternador de conteúdo de acordeão, discutido anteriormente, também apresenta alguns problemas de usabilidade. Primeiro, quando o JavaScript está desabilitado, o acordeão é inutilizado e não exibe nenhum conteúdo.
Ele deve expandir por padrão para exibir todo o conteúdo ou exibir um dos itens. Além disso, os cabeçalhos com hiperlinks para as seções do acordeão ainda devem estar vinculados às respectivas seções, mas não.
Outro problema com o conteúdo do acordeão é que, como o texto que ele contém é tão pequeno, nem sempre fica claro o que é clicável dentro do acordeão. Isso torna os links menos distintos do resto do conteúdo do acordeão.
Na imagem abaixo, a seta vermelha que eu desenhei está apontando para dois itens de lista com marcadores. O texto nesses itens da lista é hiperlinkado, mas isso não é óbvio à primeira vista.
Algumas seções ainda refletem o design antigo
Como será o caso de qualquer reformulação de um site do tamanho da CNN, algumas seções ainda refletirão o design antigo até que todas as páginas estejam totalmente integradas.
Este é geralmente o caso de conteúdo antigo que não será visitado com tanta frequência, mas no caso da CNN, algumas seções importantes ainda têm a aparência antiga.
Dois exemplos são os sobre e contato Páginas.
Tipografia Pequena
Um problema de design específico que não está em conformidade com as tendências modernas de design da Web é o uso de texto pequeno e pequenos elementos tipográficos.
O tamanho pequeno da fonte no conteúdo do acordeão foi discutido anteriormente. Há também a barra de ferramentas “compartilhar” que aparece nas páginas de artigos e vídeos, a seção “Últimas Notícias” na página inicial, os links “Inscrever-se” e “Login” no cabeçalho, e os links de texto abaixo da dobra no home page, para mencionar alguns.
A barra de ferramentas "compartilhar", mostrada acima, seria mais eficaz com uma tipografia maior? E quanto à seção "recomendada", mostrada abaixo, ou outras seções com tipo menor?
Conclusão
O novo site da CNN.com adicionou vários recursos não discutidos aqui que se relacionam mais com seus serviços de notícias e conteúdo personalizado. O primeiro link abaixo contém um vídeo apresentado pela CNN que discute alguns dos novos recursos.
Eu definitivamente acho que o novo site apresenta uma experiência de usuário muito mais bonita e interessante do que a antiga, e além das fraquezas no alternador de conteúdo do acordeão, as desvantagens do novo design não são tão significativas.
Parece que muito tempo e planejamento foram para o design do novo CNN.com, e acho que os web designers e os interessados em melhorar a usabilidade em seus próprios sites fariam bem em considerar e tentar aprender com algumas das mudanças apresentadas no novo site da CNN.
Leitura Adicional
- Bem-vindo ao novo CNN.com (vídeo no CNN.com)
- O novo CNN.com (primeiras capturas de tela no TechCrunch)
- Nova CNN.com vai ao vivo: o que você acha?
Este post foi escrito exclusivamente para Webdesigner Depot por Louis Lazaris, um escritor freelance e desenvolvedor web. Louis corre Webs impressionantes onde ele publica artigos e tutoriais sobre web design. Você pode seguir Louis no Twitter ou entre em contato com ele através de seu site .
O que você gosta ou não gosta do novo design do site da CNN? Compartilhe seus comentários abaixo.