Nuevo diseño de sitio web de CNN deconstruido
El lunes 26 de octubre CNN.com introdujo un nuevo diseño de sitio web , haciendo una serie de cambios importantes en su diseño con mucha información.
El 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 se veía como si estuviera siendo forzado a entrar en un espacio no estructurado. El nuevo diseño es muy diferente y abarca varias prácticas y tendencias modernas de diseño web y usabilidad .
Por lo tanto, veamos con más detalle no solo las mejoras notables, sino algunas decisiones de diseño y usabilidad cuestionables.
Diseño inspirado en la cuadrícula
Estoy usando la frase "inspirado en la grilla" porque el nuevo diseño parece estar basado en una grilla, pero la alineación de precisión de los elementos no está exactamente allí.
Dando un vistazo superficial a su hoja de estilo primaria , parecen haber basado libremente su estilo y cuadrícula en el Blueprint CSS marco de referencia.
Su restablecimiento CSS tiene muchas similitudes con el marco 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, concluí que si basaban el nuevo diseño en una grilla, los detalles de esa grilla serían: 16 columnas, 50 píxeles por columna, con canales de 12 píxeles (el espacio entre columnas), un total de 980px de ancho
A continuación hay 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 página dentro del contenedor de 980px de ancho, a diferencia del diseño anterior de aspecto torpe que tenía un encabezado de ancho de fluido que abarcaba toda la página sobre una sección de contenido de ancho fijo.
Además, si bien el diseño anterior no podía decidir entre las esquinas redondeadas y el cuadrado, el nuevo diseño consistentemente presenta esquinas cuadradas con efectos de bisel sutiles 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 un poco en la estructura de las anteriores.
Sección de encabezado drásticamente mejorada
Una de las mejoras más evidentes en el nuevo diseño es la sección de encabezado.
La barra de navegación horizontal es moderna, limpia y clara . El cuadro de búsqueda, la opción de registro y el enlace de inicio de sesión están en la esquina superior derecha, donde deberían estar.
Y, aunque no es habitual en el diseño moderno centrar el logotipo del sitio, en este caso funciona. Crea una experiencia de marca muy dominante y vívida que no se olvida fácilmente .
Otra buena característica de la barra de navegación es que indica mediante color y gráficos qué enlaces son primarios, cuáles secundarios y cuáles se abrirán en micro sitios o sitios hermanos. Estos últimos están indicados por triángulos que apuntan hacia la derecha ("Dinero" y "Deportes", más sobre esto a continuación).
Uso eficaz del espacio
En el lado derecho de la página, debajo del bloque de anuncios principal, han incluido un selector de contenido de estilo acordeón, lo que permite al usuario ver vistas previas, en un área relativamente pequeña , del contenido relacionado con una serie de temas diferentes.
Énfasis en la popularidad del video y la historia
En el diseño anterior, el video tenía bastante énfasis, aparece en una caja en el lado derecho. En el nuevo diseño, el video es una categoría principal en la barra de navegación principal, que tiene prácticamente la misma importancia visual que el vínculo "Inicio".
Las historias de video se muestran en todo el sitio, y se indican claramente mediante el enlace de "botón de reproducción" habitual en las fotos que enlazan al contenido del video, como se muestra a continuación:
Otra categoría con la misma importancia que "Inicio" y "Video", como se muestra en la imagen de arriba, es la sección "NewsPulse", que es nueva y está todavía en fase beta.
Esta sección muestra las noticias por popularidad (que parece ser calculada 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 principales páginas de categorías ("EE. UU.", "Mundo", "Política", etc.), a las que se accede desde la barra de navegación principal, funcionan de forma similar a la página de inicio .
De hecho, si no sabía 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 historias principales, últimas noticias y otros artículos relacionados con esa categoría.
Los subtítulos en blanco y negro debajo de las imágenes, que también se muestran en la página de inicio y en las páginas del artículo, 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 del artículo, 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 una altura de línea muy legible .
Aunque algunos elementos en las páginas parecen algo pequeños, personalmente me gusta la forma en que el tamaño de fuente del cuerpo del artículo se destaca en la página, por lo que el lector puede mantenerse enfocado en él.
Además, en el lado izquierdo de cada historia, hay una sección llamada "Aspectos destacados de la historia" que resume la historia actual en algunos puntos de lista 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 es inmediatamente evidente es la sobrecarga de enlaces e información en la página de inicio, aunque es más estructurado y organizado, como se discutió anteriormente.
La página de inicio tiene aproximadamente dos pantallas y media de largo e incluye secciones que duplican elementos en la barra de navegación principal, con aproximadamente media docena de enlaces secundarios en cada categoría. Estas secciones aparecen debajo de la tapa y se muestran en esta imagen:
Dado que CNN es uno de los sitios más populares en el mundo (38 millones de visitantes únicos cada mes), estas secciones recibirán un tráfico considerable en comparación con otros sitios, sin embargo, debido a que aparecen muy por debajo del doblez, y debido a que 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, mucha información en la página de inicio aparece muy abajo. Y, significativamente, parece que algún contenido importante está completamente oculto 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 calientes" aparece cerca de la parte inferior, en el lado derecho, justo arriba de algunas promociones y anuncios.
Parece tener más sentido que esta sección reemplace al conmutador de contenido de acordeón o que se incorpore al acordeón.
Los anuncios y las promociones que aparecen debajo de los "Temas principales" también parecen ser más importantes de lo que revela su ubicación. Una vez más, aunque un sitio web con tanto tráfico recibiría muchos clics en estas áreas, la tasa de clics en comparación con las secciones y los anuncios en la mitad superior probablemente sería drásticamente diferente.
Por supuesto, los productores de CNN saben qué contenido es más importante y entienden 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 para qué eran esos triángulos. Parecen indicar algún tipo de sección del control 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.
habría bastado, pero entonces eso presentaría el problema de los usuarios suponiendo que los enlaces se abrieron en una nueva ventana, que en este caso no es cierta. El conmutador de contenido de acordeón, discutido anteriormente, también tiene algunos problemas de usabilidad. Primero, cuando JavaScript está desactivado, el acordeón se vuelve inútil y no muestra ningún contenido.
Debería expandirse de manera predeterminada para mostrar todo el contenido, o bien mostrar uno de los elementos. Además, los encabezados hipervinculados para las secciones de acordeón aún deben 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 muy pequeño, no siempre está claro en qué se puede hacer clic dentro del acordeón. Esto hace que los enlaces sean menos distintos del resto del contenido del acordeón.
En la imagen a continuación, la flecha roja que he dibujado apunta a dos elementos de la lista con viñetas. El texto de los elementos de la lista está hipervinculado, pero esto no es evidente a primera vista.
Algunas secciones aún reflejan el viejo diseño
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 con contenido antiguo que no se visitará con tanta frecuencia, pero en el caso de la CNN, algunas secciones importantes siguen teniendo el aspecto anterior.
Dos ejemplos son acerca de y contacto páginas.
Pequeña tipografía
Un problema de diseño particular que no se ajusta a las tendencias modernas del 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 de 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 enlaces "Registrarse" e "Iniciar sesión" en el encabezado, y los enlaces de texto debajo de la tapa 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 un tipo más pequeño?
Conclusión
El nuevo sitio de CNN.com ha agregado una serie de características no mencionadas aquí 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 características.
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 tan significativos.
Parece que se invirtió mucho tiempo y planificación en el diseño del nuevo CNN.com, y creo que los diseñadores web y aquellos interesados en mejorar la usabilidad en sus propios sitios deberían considerar e intentar aprender de algunos de los cambios presentados. en el nuevo sitio web de CNN.
Otras lecturas
- Bienvenido a la nueva CNN.com (Video en CNN.com)
- The New CNN.com (Primeras capturas de pantalla en TechCrunch)
- Nace el nuevo CNN.com: ¿qué piensas?
Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Webs impresionantes donde publica artículos y tutoriales sobre diseño web. Puedes seguir a Louis en Twitter o ponte en contacto con él a través de su sitio web .
¿Qué le gusta o no le gusta del nuevo diseño del sitio de CNN? Comparte tus comentarios a continuación.