Nuevo diseño de sitio web de CNN deconstruido

El lunes 26 de octubre CNN.com introdujo un nuevo diseño de sitio web, realizando una serie de cambios importantes en su diseño de gran cantidad de información.

La nuevo diseño es hermoso, limpio, organizado y bien estructurado. Invita al ojo a escanear y encontrar algo interesante con el objetivo de hacer clic en otra página.

El diseño anterior estaba algo desordenado y no muy atractivo; el contenido parecía como si estuviera siendo forzado a un espacio no estructurado. El nuevo diseño es muy diferente y adopta una serie de mejores prácticas y tendencias modernas de diseño y usabilidad web.

Entonces, veamos con más detalle no solo las mejoras notables, sino también algunas de las decisiones cuestionables de diseño y usabilidad.

Diseño inspirado en la cuadrícula

Estoy usando la frase «inspirado en la cuadrícula» porque el nuevo diseño parece estar basado en una cuadrícula, pero la alineación de precisión de los elementos no está exactamente ahí.

Echando un vistazo superficial a su hoja de estilo primaria, parecen haber basado libremente su estilo y cuadrícula en el CSS del plano marco de referencia.

Su restablecimiento de CSS tiene muchas similitudes con el marco de Blueprint, y la palabra «blueprint» se incluye en la parte superior, por lo que esta sería una evaluación lógica basada en mi propio conocimiento limitado de Blueprint.

Después de analizar una captura de pantalla de su página de inicio, llegué a la conclusión de que si basaran el nuevo diseño en una cuadrícula, los detalles de esa cuadrícula serían: 16 columnas, 50 px por columna, con canaletas de 12 px (el espacio entre columnas), totalizando 980px de ancho.

A continuación se muestra una representación visual de mi estimación de cuadrícula, como una maqueta de Photoshop:

Aunque los elementos de la página no siguen el tipo de alineación y equilibrio que normalmente se esperaría de un diseño de cuadrícula, hay una mejora notable en este diseño con respecto al diseño anterior, que se muestra a continuación:

El nuevo diseño mantiene todos los elementos de la página dentro del contenedor de 980 píxeles de ancho, a diferencia del diseño anterior de aspecto tosco que tenía un encabezado de ancho fluido que abarcaba toda la página sobre una sección de contenido de ancho fijo.

Además, aunque el diseño anterior no parecía poder decidir entre esquinas redondeadas y cuadradas, el nuevo diseño presenta consistentemente esquinas cuadradas con sutiles efectos de bisel que separan los elementos apropiados, como se muestra en la imagen a continuación.

Aunque el formato es similar a una cuadrícula, como se mencionó, no es un formato de cuadrícula estricto, y las secciones debajo del pliegue se desvían bastante en la estructura de las de arriba.

Sección de encabezado drásticamente mejorada

Una de las mejoras más evidentes del nuevo diseño es la sección de encabezado.

La barra de navegación horizontal es moderno, limpio y claro. El cuadro de búsqueda, la opción de registro y el enlace de inicio de sesión se encuentran en la esquina superior derecha, donde deberían estar.

Y, aunque no es habitual en el diseño moderno centrar el logo del sitio, en este caso funciona. Crea una experiencia de marca muy dominante y vívida que no se olvida fácilmente.

Otra característica interesante de la barra de navegación es que indica mediante colores y gráficos qué enlaces son primarios, cuáles son secundarios y cuáles se abrirán en micrositios o sitios hermanos. Estos últimos se indican mediante triángulos que apuntan a la derecha («Dinero» y «Deportes»; más sobre esto a continuación).

Uso efectivo del espacio

En el lado derecho de la página, debajo del bloque de anuncios principal, han incluido un conmutador de contenido estilo acordeón, que permite al usuario ver vistas previas, en un área relativamente pequeña, de contenido relacionado con una serie de temas diferentes.

Énfasis en la popularidad de los videos y las historias

En el diseño anterior, el video tenía un énfasis bastante fuerte, presentado en un recuadro en el lado derecho. En el nuevo diseño, el video es una categoría importante en la barra de navegación principal, que tiene prácticamente la misma importancia visual que el enlace «Inicio».

Las historias en video se presentan en todo el sitio y están claramente indicadas por el enlace del «botón de reproducción» habitual en las fotos que enlazan con el contenido del video, como se muestra a continuación:

Otra categoría a la que se le da la misma importancia que “Inicio” y “Video”, como se muestra en la imagen de arriba, es la sección “NewsPulse”, que es nueva y aún está en beta.

Esta sección muestra noticias por popularidad (que parece calcularse por el total de visitas a la página, no por comentarios) y permite al lector filtrar los resultados por categoría o tipo de historia.

Páginas de categoría fuerte

Las páginas de categorías principales («EE. UU.», «Mundo», «Política», etc.), a las que se accede desde la barra de navegación principal, funciona de manera similar a la página de inicio.

De hecho, si no supiera en qué página estaba, podría pensar que estaba en la página de inicio. La categoría «EE. UU.» Se muestra a continuación:

Cada una de estas secciones muestra cómodamente las noticias principales, las últimas noticias y otros elementos relacionados con esa categoría.

Los subtítulos en blanco y negro debajo de las imágenes, que también aparecen en la página de inicio y en las páginas de los artículos, son llamativos y fáciles de leer. sin el uso de gráficos demasiado sofisticados o estilos de fuente.

Páginas de artículos fuertes

Las páginas de los artículos, en su mayor parte, mantienen la marca vívida de la página de inicio. El texto del cuerpo se muestra muy bien en 14px Arial con un muy legible altura de la línea.

Aunque algunos elementos de las páginas parecen algo pequeños, a mí personalmente me gusta la forma en que el tamaño de fuente del cuerpo del artículo se destaca en la página, para que el lector pueda concentrarse en él.

Además, en el lado izquierdo de cada historia, hay una sección llamada «Puntos destacados de la historia» que resume la historia actual en algunas listas con viñetas. Esto muestra que los diseñadores de CNN son conscientes de la tendencia en línea de los usuarios a “escanear” material extenso.

Sobrecarga de información

De todos los aspectos negativos del nuevo diseño, probablemente el primer problema que se hace evidente de inmediato es la sobrecarga de enlaces e información en la página de inicio, aunque está más estructurada y organizada, como se discutió anteriormente.

La La página de inicio tiene aproximadamente dos pantallas y media.e incluye secciones que duplican elementos en la barra de navegación principal, con aproximadamente media docena de subvínculos en cada categoría. Estas secciones aparecen debajo del pliegue y se muestran en esta imagen:

Dado que CNN es uno de los sitios más populares del mundo (38 millones de visitantes únicos cada mes), estas secciones recibirán un tráfico considerable en comparación con otros sitios, sin embargo, porque aparecen muy por debajo del pliegue y porque hay tantos enlaces, la cantidad relativa de tráfico que visita esos enlaces a través de la página de inicio probablemente sea bastante baja.

¿Secciones importantes enterradas?

Como se señaló anteriormente, una gran cantidad de información en la página de inicio aparece muy por debajo de la página. Y, significativamente, parece que algunos contenidos importantes están completamente enterrados en la parte inferior de la página de inicio, más de dos pantallas completas debajo del encabezado.

Por ejemplo, una sección titulada «Temas de actualidad» aparece cerca de la parte inferior, en el lado derecho, justo encima de algunas promociones y anuncios.

Parece tener más sentido que esta sección reemplace el conmutador de contenido de acordeón o se incorpore al acordeón.

Los anuncios y promociones que aparecen debajo de los «Temas candentes» también parecen ser más importantes de lo que revela su ubicación. Nuevamente, aunque un sitio web con un tráfico tan alto recibiría muchos clics en estas áreas, la tasa de clics en comparación con las secciones y los anuncios en la mitad superior de la página probablemente sería drásticamente diferente.

Por supuesto, los productores de CNN saben qué contenido es más importante y comprenden los hábitos de sus usuarios mejor que nadie, pero estos desafíos de diseño y usabilidad son útiles para analizar si otros desarrolladores enfrentan decisiones similares.

Misterios de usabilidad

Hay algunos elementos en el nuevo sitio que pueden no estar diseñados para una usabilidad óptima.

Un ejemplo es el triángulo que apunta a la derecha que aparece en cada uno de los enlaces del micrositio. A primera vista, no estaba seguro de para qué eran esos triángulos. Parece que indican algún tipo de sección deslizante de JavaScript que aparecería.

Algunos usuarios que no prestan toda la atención pueden incluso confundirlos con flechas que apuntan hacia abajo que producen menús desplegables.

¿Existe una mejor manera de indicar un enlace de micrositio de la misma ventana? Realmente no estoy seguro. Quizás algo similar al conocido ícono de Wikipedia hubiera sido suficiente, pero eso presentaría el problema de que los usuarios supongan que los enlaces se abren en una nueva ventana, lo que en este caso no es cierto.

El conmutador de contenido de acordeón, mencionado anteriormente, también tiene algunos problemas de usabilidad. Primero, cuando JavaScript está deshabilitado, el acordeón se vuelve inútil y no muestra ningún contenido.

Debería expandirse de forma predeterminada para mostrar todo el contenido, o bien mostrar uno de los elementos. Además, los encabezados con hipervínculos para las secciones de acordeón aún deberían vincularse a sus respectivas secciones, pero no es así.

Otro problema con el contenido del acordeón es que, dado que el texto que contiene es tan pequeño, no siempre está claro en qué se puede hacer clic dentro del acordeón. Esto hace que el enlaces menos distintos del resto del contenido del acordeón.

En la imagen de abajo, la flecha roja que dibujé apunta a dos elementos de lista con viñetas. El texto de esos elementos de la lista tiene un hipervínculo, pero esto no es obvio a primera vista.

Algunas secciones aún reflejan un diseño antiguo

Como será el caso con cualquier rediseño de un sitio del tamaño de CNN, algunas secciones seguirán reflejando el diseño anterior hasta que todas las páginas estén completamente integradas.

Este suele ser el caso del contenido más antiguo que no se visitará con tanta frecuencia, pero en el caso de CNN, algunas secciones importantes todavía tienen el aspecto antiguo.

Dos ejemplos son los acerca de y contacto páginas.

Tipografía pequeña

Un problema de diseño particular que no se ajusta a las tendencias modernas de diseño web es el uso de texto pequeño y pequeños elementos tipográficos.

El pequeño tamaño de la fuente en el contenido del acordeón se discutió anteriormente. También está la barra de herramientas «compartir» que aparece en las páginas de artículos y videos, la sección «Últimas noticias» en la página de inicio, los vínculos «Registrarse» e «Iniciar sesión» en el encabezado, y los vínculos de texto debajo del pliegue en el página de inicio, por mencionar algunos.

¿La barra de herramientas «compartir», que se muestra arriba, sería más efectiva con una tipografía más grande? ¿Qué pasa con la sección «recomendada», que se muestra a continuación, u otras secciones con letra más pequeña?

Conclusión

El nuevo sitio CNN.com ha agregado una serie de características que no se comentan aquí y que se relacionan más con sus servicios de noticias y contenido personalizado. El primer enlace a continuación contiene un video presentado por CNN que analiza algunas de las nuevas funciones.

Definitivamente creo que el nuevo sitio presenta una experiencia de usuario mucho más hermosa e interesante que la anterior, y aparte de las debilidades en el conmutador de contenido de acordeón, los inconvenientes del nuevo diseño no son realmente tan significativos.

Parece que se dedicó mucho tiempo y planificación al diseño del nuevo CNN.com, y creo que los diseñadores web y aquellos interesados ​​en mejorar la usabilidad en sus propios sitios haría bien en considerar e intentar aprender de algunos de los cambios presentados en el nuevo sitio web de CNN.

Otras lecturas

Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Impresionantes webs donde publica artículos y tutoriales sobre diseño web. Puedes seguir a Louis en Twitter o ponte en contacto con el a través de su sitio web.

¿Qué le gusta o no le gusta del nuevo diseño del sitio de CNN? Comparta sus comentarios a continuación.