Rediseño de tramullas.com

tramullas.com cambia su aspecto y diseño visual para mejorar las prestaciones a sus lectores, con navegación y legibilidad mejoradas. Instala Hybrid e Hybrid News sobre Wordpress.

La forma sigue a la función, o así debería ser, hasta que llegan los usuarios e imponen su ley, que puede coincidir o no. Como los lectores del blog se habrán dado cuenta, desde este fin de semana ha cambiado la presentación visual y la disposición de elementos en el blog. He pasado del negro al blanco, con una disposición de elementos más simple y clásica, pero manteniendo la misma estructura de entradas, categorías, etiquetado y uso de enlaces. Los comentarios de mis lectores y la revisión de los indicadores numéricos que me daba Google Analytics me han inducido a hacer cambios profundos de enfoque.

El tema anterior, HemingwayEx, se centrada en mostrar sólo dos entradas en paralelo en la portada, incorporando navegación JavaScript desplegable a petición del usuario en tres bloques en el menú superior, en la que coloqué la navegación por categorías, el archivo histórico por mes y las páginas propias. Bajo las dos entradas de la portada, coloqué la nube de etiquetas, enlaces a otros productos de información digital propios, y complementos multimedia. Todo muy moderno, muy hipertextual, muy rompedor, muy «de diseño». Mi idea era que los usuarios centrasen su interés en las dos entradas más recientes, y que usasen la navegación y las funcionalidades de entradas relacionadas de cada post para explorar el resto del blog. En teoría, todo bien pensado, bien argumentado… vamos, incumpliendo todo lo que predico sobre estudiar lo que hacen en realidad los usuarios.

Los usuarios amigos en seguida me advirtieron: «muy oscuro, la letra es pequeña, no destaca, no se lee bien…» Así  que rápidamente modifiqué las CSS para aumentar el tamaño y la legibilidad, pero el resultado no fue satisfactorio: «tarda mucho en cargar, cambia de tamaño durante la carga…» Demasiado script en el tema, en eso no podía hacer nada si no quería perder funcionalidad. Pero el daño ya estaba hecho: los lectores ya habían cogido la sensación de molestia, de dificultad, de oscuridad… Sensación que Google Analytics rápidamente confirmó con sus indicadores: mismo número de visitantes, pero menos páginas vistas, que pasaron de 2,4 a 1,6 por visitante, menos tiempo en el sitio, alrededor de 2 minutos, y un bounce rate que llegó casi al 70%.

Lo que no se puede hacer es fastidiar a tu amable lector con castigos de diseño visual. Así que he dedicado unos días a hacer las cosas mejor. Primera decisión, cambiar a tonos claros, «el blanco es bueno, es tu amigo»; segunda, buscar tipografías claras y legibles; tercera, retomar la disposición visual vertical de panel izquierdo de contenido, derecho para funcionalidad, como en su origen con Illacrimo. La disposición de elementos de navegación ha cambiado: toda la navegación es mediante menúes horizontales, generados dinámicamente por el propio tema y situados en la parte superior de la página, rápidamente visualizables. La nube de etiquetas recupera su lugar visual preferente en la parte superior del panel derecho. Y las entradas vuelven a organizarse verticalmente en páginas, aunque aún no he decidido si será en bloques de cuatro o de seis. La parte inferior de la página queda para complementos. Y para el contenido, he pasado de ocho a seis categorías, tras poder apreciar que dos de ellas, de esas que ponen en los manuales, en realidad son tan amplias que sirven para todo, con lo cual no sirven para nada.

Para el final queda la explicación del fundamento técnico. Sobre WordPress he optado, en esta ocasión, por montar un theme framework, Hybrid, sobre el cual he montado un tema específico, Hybrid-News. Un theme framework da la estructura general de componentes y funciones para un tema, de manera que libera la capa de presentación completamente de la de funcionalidad. De esta forma el diseño se hace más rápido y se puede estandarizar. Sobre esto ya he hablado en la entrada dedicada al diseño de información con grids. Y con todo esto continuamos adelante, a ver que me dicen ahora los lectores, y qué me dicen los indicadores…