Si tuviera mi camino, junto con todos los demás diseñadores web, las páginas web siempre tendrían una cantidad bastante limitada de contenido para mantener el enfoque claro y la línea de comunicación fácil de seguir.
Desafortunadamente, las situaciones del mundo real requieren páginas web con inmensas cantidades de contenido. Para aprender a abordar los problemas que surgen en este ámbito, vamos a ver una sección particular de sitios web que quizás estén más saturados que cualquier otro: sitios web de noticias. ¿Cómo manejan los diseñadores de CNN, MSNBC, Fox y otros el diseño de tanta información? Averígualo después del salto.
Encabezado y navegación
El encabezado es un aspecto absolutamente crucial para un sitio de noticias. Todos los usuarios saben, al visitar un sitio de noticias, que habrá un montón de contenido para analizar y, si desean algo específico, irán directamente al encabezado para encontrarlo.
Aquí vemos por primera vez el problema que nos afectará durante el resto del artículo: ¡demasiadas cosas! Como mencioné en la introducción, los sitios de noticias necesitan transmitir mucha información, por eso existen. Organizar toda esta información no es una tarea fácil y casi todas las decisiones que tomas pueden afectar drásticamente la facilidad de uso del sitio.
Echemos un vistazo a nuestro primer ejemplo. La imagen de abajo muestra el encabezado y la navegación de MSNBC.com.
Como puedes ver, hay una mucho Pasando en las primeras pulgadas de este sitio. La parte superior de la página contiene alrededor de quince enlaces, y estos son solo para otros sitios, la navegación interna se encuentra debajo de eso y contiene otros doce.
MSNBC está utilizando su propio giro interesante en un menú desplegable para cada sección del sitio que se muestra en la navegación. Aquí puede ver de cinco a seis titulares de texto, algunas imágenes y aún más contenido que conduce a otro sitio. Después de varias capas de navegación, finalmente llegamos al logotipo del sitio cerca de la parte inferior del encabezado, junto con el tiempo y los widgets de búsqueda.
Creo que el encabezado de MSNBC es un poco desordenado, la marca se pierde y la carga de contenido secundario distrae. Contrasta esto con el encabezado de uno de los sitios de noticias con mejor aspecto que encontré, CNN.
Aquí tenemos una marca fuerte y clara, una barra de búsqueda justo donde la buscarías y un menú de navegación simple sin un solo menú desplegable. Este menú es un buen equilibrio entre diseño minimalista y funcionalidad suficiente para llevarlo a donde desea ir sin ningún problema.
Fox toma una ruta similar a la CNN. Es un poco más desordenado y abarca varios sitios como MSNBC, pero las pestañas ayudan a que la metáfora sea comprensible.
El Washington Post comenzó con una idea similar a la de MSNBC, pero lo logró mucho mejor. Como puede ver, el nombre del sitio es bonito y grande, seguido de un widget del tiempo.
Al pasar el cursor sobre la navegación, aparece un gran menú desplegable, pero en lugar de presionar el contenido de manera incómoda como en MSNBC, se ha estructurado para cubrir el gran? Washington Post? zona.
La leccion
"Tenga cuidado con los mega-menús desplegables que realmente no cumplen con su promesa de hacer que su sitio sea más fácil de navegar".Creo que la lección aquí es no abrumar a los usuarios de inmediato con un encabezado desordenado. Esto no significa que no pueda tener mucho contenido, solo desconfíe de los mega-menús desplegables que no cumplen su promesa de hacer que su sitio sea más fácil de navegar. CNN demuestra que a veces una simple lista de enlaces horizontal y algunos espacios en blanco bien estructurados pueden funcionar bien incluso en un entorno de contenido masivo.
Artículos destacados
Lo siguiente que quiero discutir es cómo estos sitios captan su atención y la dirigen hacia lo que es importante. Cada sitio de noticias tiene una o dos historias principales que saben que son elementos candentes del día y tienen que estructurar la página para resaltar adecuadamente estas historias.
Mi ejemplo favorito de esto es The Huffington Post, que opta por resaltar una sola noticia con una gran imagen y un encabezado en negrita, que abarcan todo el ancho del contenedor de la página.
Basta con echar un vistazo a lo limpio y hermoso que se compara con otros sitios de noticias que ha visto. Está lejos de ser popular para los sitios de noticias que usan este formato, pero no puedes dejar de admitir que parece funcionar bastante bien aquí.
MSNBC toma una ruta similar, pero no es tan drástica como para presentar solo una historia cerca de la parte superior de la página. Tienen una gran imagen flanqueada a la izquierda con varios titulares. Realmente me gusta el diseño básico, aunque creo que los titulares minúsculos aleatorios entre las historias principales lo saturan significativamente.
CNN y Fox eligen un enfoque un poco más abarrotado, principalmente porque no estaban dispuestos a renunciar al valioso espacio publicitario de noticias importantes. CNN tiene un diseño de tres columnas: el centro es el más ancho y el último de ellos es el espacio publicitario seguido de una barra lateral de inicio de sesión.
Fox presenta una imagen grande con tres columnas debajo, todas al lado de una columna ancha en el extremo derecho para espacio publicitario, indicadores de cotización e información social.
La leccion
Con la página de Fox, recibo mucha información, lo cual es genial, pero mis ojos no saben muy bien dónde aterrizar y tienden a rebotar mucho antes de que realmente lea algo. Actualmente, CNN me llama la atención con algunas caras, que siempre son buenas para guiar a los usuarios hacia dónde quieres que vayan.
Sin embargo, me parece que las imágenes realmente grandes, como las que se encuentran en Huffington y MSNBC, son realmente la herramienta para hacerme notar algo importante. Esto se refuerza de manera importante con el enorme y audaz encabezado del texto de Huffington.
"A veces, una gran cantidad de contenido organizado cuidadosamente en un espacio pequeño es una gran cosa".Qué método es mejor para todos los usuarios es una llamada difícil. Solo hay que pasar por la popular y popular Craigslist para ver que las grandes imágenes no siempre son necesarias para hacer que el sitio resulte atractivo para los visitantes.A veces, una gran cantidad de contenido organizado de manera ordenada en un espacio pequeño es una gran cosa, especialmente si desea obtener una visión general rápida de todo lo importante.
El mundo no es un lugar donde un solo evento es generalmente más importante que cualquier otro, por lo que es comprensible que los sitios como Fox sientan la necesidad de dividir esta sección un poco. Mi mejor consejo es dar la mayor importancia posible a las pocas cosas que son verdaderamente importantes. Si puedes hacer pivotar una gran historia destacada, hazlo. Si no, intente mantener el número bajo, de lo contrario, ¿no es realmente un? Destacado? sección es?
The Story Grid
A medida que avanzamos más allá del encabezado y el contenido destacado, los sitios de noticias son cada vez más diferentes, lo que dificulta su comparación punto por punto. Sin embargo, es en este punto que comienza el verdadero desafío. Aquí es donde a los diseñadores se les da una montaña de otro contenido y se les dice que lo organicen.
Cada sitio se divide en varios módulos únicos y secciones organizadas en diferentes cuadrículas, pero encontrará que es una tendencia bastante popular para, en algún momento de la página, dividirse en una configuración de tres columnas para cubrir los diversos artículos. Aquí hay ejemplos de The Huffington Post, The Washington Post y The Economist que hacen exactamente eso.
Tener tres columnas divide su contenido muy bien, ya sea de manera uniforme o utilizando un enfoque de ancho variable como The Economist para un mayor control sobre el énfasis. ¡Un problema importante con el enfoque de tres columnas es que hemos enseñado a nuestros cerebros a ignorar esa tercera columna! Todos sabemos que aquí es donde se ubican los anuncios junto con toda esa basura que no queremos ver, por lo que en gran medida mantenemos nuestra navegación limitada a las dos primeras columnas.
Esto puede ser malo para los sitios que realmente esparcen alguna columna importante allí ya que es probable que se pierda en la mezcla. Solo tenga en cuenta esta tendencia de los usuarios y asegúrese de que su tercera columna no se vea como un montón de anuncios una vez que obtenga contenido sólido.
Un cambio refrescante
CNN tiene uno de los mejores enfoques de organización de contenido que he visto en un sitio de noticias. Usan una cuadrícula de cuatro columnas de tarjetas de igual altura rematadas con un título de categoría. El resultado realmente se siente vacío del desorden desordenado típico de estas secciones.
"Cuando extraemos casi todas las imágenes y normalizamos el contenido, el resultado es algo mucho más útil". Curiosamente, cuando sacamos casi todas las imágenes y normalizamos el contenido, el resultado es algo mucho más útil. En un sitio de noticias típico simplemente compite demasiado por mi atención. Cada historia se siente como si intentara gritar más fuerte que la que está al lado y el resultado tiende a ser bastante abrumador. Por el contrario, la cuadrícula de la historia de CNN es fácil y agradable de navegar.
MSNBC también tiene un enfoque diferente. Organizan sus historias en categorías y las colocan en cajas horizontales claramente definidas. Ponen mucho control en sus manos aquí, permitiéndole elegir cuántas historias para mostrar e incluso darle controles para reorganizar las cajas.
La leccion
Lo que noté aquí es que disfruté usando los sitios que organizaron su contenido en secciones y categorías claramente diferenciadas. El formato de tres columnas, aunque probado y verdadero, hace que la navegación de trabajo intensivo se sienta más como cribar el desorden.
CNN y MSNBC tomaron medidas para crear una clara separación visual entre las historias y varios tipos de contenido y tenían diseños que parecían menos aleatorios. Una de las razones por las que el formato de las tres columnas parece desordenado es la altura variable de cada módulo, que establece el contenido de forma horizontal y hace que muchos movimientos de los ojos hacia arriba y hacia abajo. El formato de igual altura ayuda enormemente.
¿Por qué esto me importa?
La mayoría de las personas que leen esto no son los mejores diseñadores de The Washington Post, ¿por qué estas observaciones son valiosas para esta audiencia? La respuesta es que, si bien no todos trabajamos en sitios de noticias, todos le hemos dado a nuestros clientes "demasiado contenido". habla.
Simplemente odiamos cuando nuestros clientes nos dan un montón de cosas y exigimos que lo pongamos todo en una sola página. Por más que intentemos argumentar en contra, varias situaciones requieren este enfoque. Agrupar un montón de contenido en una sola página mientras intentas que sea usable y atractivo es una de las situaciones más difíciles a las que te enfrentarás como diseñador. Si puedes superarlo, puedes diseñar tu manera de salir de cualquier cosa.
"En caso de duda, la respuesta suele ser simplificar".Las lecciones que aprendimos hoy aquí se pueden aplicar a cualquier sitio web que crees donde estés luchando con la disputa de demasiado contenido. En caso de duda, la respuesta suele ser simplificar. Recorte ese gran y feo encabezado, intente encontrar uno o dos puntos realmente importantes y maximícelos, y luego separe el resto del contenido en secciones separadas visualmente que sean fáciles de explorar y que no requieran demasiada atención para leer.
Conclusión
Ahora que has visto mi análisis, ¿qué te parece? ¿Qué sitios de noticias crees que son los más atractivos? ¿Cuáles son las más usables? ¿Pueden los dos objetivos ser sinérgicos?
Deje un comentario a continuación y háganos saber sus opiniones sobre la información y los ejemplos anteriores.