Las mejoras de la interfaz de publicación on-line han sido uno de los factores determinantes en el crecimiento de la blogósfera en los últimos años. Al menos este fue el punto de partida para la tesina que realizó Tomás para el diCom (Carrera de Especialización en Teoría del Diseño Comunicacional, FADU – UBA).
A raiz de esto, me llamó la atención el artículo A Small Design Study of Big Blogs, publicado por Smashing Magazine. El artículo se basa en un análisis del diseño de 50 blogs, listados en Technorati como los Top Blogs e identifica 30 problemas de diseño que presentan este tipo de sitios.
Lo interesante de estos datos sería ver por qué la tendencia tiene estos resultados. ¿Se debe a que son decisiones de diseño que se toman en función de un mejoramiento de la interfaz visual y de la comprensión de contenidos o la causa es que la mayoría de los blogs están armados con la misma tecnología, que brinda de entrada un modelo casi fijo de layout y estilos que la mayoría de los bloggers no cambia?
Las conclusiones muestran algunos resultados alentadores en lo que se refiere a nuestra experiencia de usabilidad y a lo que recomiendan algunos expertos:
- Los blogs con mucho contenido requieren un layout de 3 columnas o más
- Los layouts son en su mayoría centrados y tienen un ancho fijo
- El ancho del mismo suele ser entre 951 y 1000 pixeles
- El contenido principal ocupa un 58% del ancho total
- El 90% usa CSS para hacer el layout
- El fondo de la página es claro y el texto oscuro
- El ancho de texto más usual oscila entre 80 y 100 caracteres por línea
- Verdana, Lucida Grande, Arial y Georgia son las preferidas para el texto principal
- Arial y Georgia son las favoritas para los títulares
- El cuerpo tipográfico varía entre 12 y 14px para textos y 17 y 25px para títulos
Estos resultados en muchos casos no sorprenden, ni son tampoco una receta de satisfacción o éxito. En el caso del uso de textos no son un ejemplo de mejor legibilidad o lecturabilidad. Curiosamente muchos de estos resultados condicen con los de nuestra investigación realizada hace unos años sobre legibilidad y comprensión en pantalla.
Los puntos que analizan en esta primera etapa son:
El Layout
Cantidad de columnas
¿Qué es más conveniente? ¿2 ó 3 columnas? La respuesta es casi obvia: depende del contenido. En general se utiliza una columna primaria, y la secundaria se divide a su vez en dos columnas. El de los blogs 58% usa 3 columnas o más.
Alineación del texto: centrado o alineado a la izquierda
La tendencia a utilizar un layout que centre el contenido fue creciendo en los últimos años debido a que se busca una solución óptima al problema de diferentes formatos/resoluciones de pantallas. El mercado ha ido evolucionando hacia monitores más grandes y por lo general la mayoría (el 94%) de los blogs usan el contenido centrado con espacio libre a los costados.
Tipo de layout: layout elástico o fijo
Contrariamente a lo que se hubiera pensado, el 92% de los tops Blogs utiliza un layout fijo. El layout elástico tiene la ventaja de poder adaptarse a las preferencias del usuario pero el layout fijo es más fácil de diseñar porque se tiene más control sobre como se visualiza finalmente la página. Los primeros pueden aumentar tanto su ancho que la línea de texto se hace demasiado larga para leer óptimamente.
Ancho del layout (fijo)
Como decíamos, se observa una fuerte tendencia a realizar layouts fijos, pero ¿qué medida tienen como ancho de los mismos? Acá los resultados están más repartidos pero la tendencia parecería ser el uso de un ancho entre 951 y 1000 pixeles.
Proporción entre el area principal de contenidos y el area secundaria
La mayoría de los layouts están organizados en una columna de contenido principal y una columna a un costado de contenido secundario y navegación. A veces ambas compiten pero en casi todos los casos cerca del 60% del ancho del sitio es usado para el contenido principal.
Layout con CSS o con tablas
Hoy en día los blogs más populares utilizan CSS -en un 90%- y el restante 10% usa tablas en combinación con CSS.
La tipografía
La prioridad la tiene el contenido, esto es una afirmación tanto para blogs como para cualquier sitio, y el rol del diseñador consiste también en encontrar un equilibrio para que el lector esté cómodo a la hora de leer en pantalla.
Color: ¿oscuro sobre claro o claro sobre oscuro?
Como era de esperar el 98% tiene fondo blanco con tipografía oscura. Supongo que -en gran parte- es una decisión de diseño que tiene que ver con la versatilidad ante diferentes elementos del contenido.
Caracteres por línea
En textos impresos en ancho óptimo ronda los 60 caracteres por línea, sin embargo en pantalla la tendencia parece ser de más cantidad. En la encuesta el mayor porcentaje fue de 34% para un ancho de 85-94 caracteres por línea, y es curioso cómo el resultado está más repartido tanto para los 65-74 caracteres por línea como para el lado de más de 100.
Lo notable es que el 100% de los blogs usa texto alineado a la izquierda! Bien por esto.
Características tipografícas del contenido principal
Las fuentes sans serif se han convertido en un standard, aparentemente porque la tipografía con serif tiene ojos más pequeños que hacen que el texto en la pantalla sea menos legible. Las tipografías favoritas son Verdana en un 34%, Lucida Grande en un 24% y le siguen en menor proporción Arial, Georgia, Trebuchet, Helvetica.
Con respecto al cuerpo tipográfico acá también los porcentajes están más repartidos, de todos modos un 34% usa 12px, el 30% usa 13px, y el resto se reparte más o menos equitativamente hacia mayor y menor tamaño. Si bien un tamaño generoso de cuerpo para el texto lo hace más fácil de leer, y en pantalla el standard es un poco mayor que en textos impresos, con cuerpos muy grandes se pueden generar bloques muy densos que además requieren mayor cantidad de scrolls.
Tipografía para títulos
Los porcentajes están tambien bastante repartidos, en el caso de las familias tipográficas hay un 30% que usa Arial, un 22% usa Georgia, y el resto se reparte entre Lucida Grande, Helvetica, Verdana, Trebuchet. Es notable cómo si bien Verdana es muy usada como tipografía de textos no sucede lo mismo para títulos, y se debe a que en cuerpos mayores a 12/13px empieza a ser un poco tosca, comparativamente con otras sans serif. A la inversa, Georgia es muy grácil para cuerpos de títulos y pierde legibilidad cuando se usa en cuerpos menores a 11/10px. En el tamaño para los títulos hay un 24% que usa entre 20-22px, en un 22% usa un cuerpo mayor 23-25px y un cuerpo menor 17-19px.
