Versión en portugués

Análisis del nuevo diseño de Yahoo.com

Resumen: La nueva versión de Yahoo.com tiene un diseño más claro y fácil de leer. Aumenta el espacio para contenidos con un mayor scroll, reduce el número de links, introduce más espacios en blanco y elementos que estructuran la información. Mejora el tipo de letra y el diseño de los iconos. El nuevo diseño tiene cierta personalización, incluyendo accesos directos a prestaciones personales como el correo.

Se ha analizado la versión actual de Yahoo.com y la antigua versión (aún disponible y actualizada). Recomiendo tener abiertas versiones en nuevas ventanas o pestañas del navegador para una mejor ilustración de este artículo.

Aunque los cambios en el diseño de Yahoo.com son mínimos estos tienen especial valor porque es fácil suponer que han sido diseñados tras muchos test de usuarios y contando con los mejores especialistas en diseño web y usabilidad. Estos cambios pueden darnos la claves de hacia donde se dirige el diseño de sitios web.

Mayor scroll

La nueva versión de Yahoo.com tiene un scroll de 3,6 páginas, frente a las 2,9 páginas de la versión antigua en una resolución de 800x600 (en 1024x768: 2,7páginas en la nueva y 2,1 en la antigua).

Los usuarios hacen scroll vertical, su comportamiento cambió hace tiempo y ya no se quedan solo en la parte de arriba del sitio web. Se debe perder el miedo al scroll, ya no es necesario crear diseños donde toda la información esté comprimida en la parte superior para no requerir scroll. Amazon.com por ejemplo, tiene un largo scroll de más de 4 páginas (en 1024x768) .

Realizar diseños con scroll vertical permite disponer más espacio para contenidos y jerarquizarlos según su importancia. Los contenidos principales del sitio deben ser visibles sin necesidad de scroll, sin embargo los contenidos que solo deben ser vistos por los usuarios que específicamente los buscan pueden requerir scroll, de este modo no interfieren con los contenidos principales y no recargan el área superior de la página. Por ejemplo, la información de tarifas o contacto puede requerir scroll porque no es algo que se deje de buscar sin hacer scroll.

Gestión del espacio

La nueva versión genera más espacio por su uso del scroll y el mayor aprovechamiento del ancho de la ventana, lo que permite una mejor utilización del espacio en blanco y la introducción de recursos que separan contenidos.

Aumentan y se hacen más frecuentes los espacios en blanco entre diferentes elementos de información. Estos espacios introducen una separación visual que hace que aparezcan como elementos diferenciados unos de otros y rompen con la homogeneidad de los antiguos bloques de información.

También se introducen recursos como las "pestañas" y fondos coloreados en la columna de la derecha, barras horizontales de color gris claro y viñetas más grandes.

Todos estos recursos facilitan el "escaneo" visual de la página, la distinción y el destacado de elementos de información Como se comenta en el artículo, "Estética, usabilidad y emoción" la excesiva simetría y armoniosidad perjudica a la diferenciación de los contenidos.

El directorio

El directorio incluye ahora un título explicativo, que no existía en la antigua versión.

En los comienzos de Internet se aprendía rápidamente el concepto de directorio porque todos los buscadores incluían uno en su página inicial. Su uso era imprescindible porque los resultados de las búsquedas no eran siempre eran efectivos (Google no existía). Ahora apenas se usan los directorios por eso es necesario explicarlos.

En consonancia con lo anterior algunas versiones locales (yahoo.es) han añadido también el icono de carpeta para provocar una transferencia de aprendizaje. Se intenta que los usuarios asimilen las categorías del directorio de Yahoo.com, a las carpetas del Explorador de Windows que ya conocen. Su funcionamiento es parecido, ambas contienen más carpetas o categorías en una ordenación de tipo jerárquico.

Carpetas del directorio de Yahoo.es

Carpetas del Explorador de Windows

Estas modificaciones, seguramente forzadas por pruebas de usuario, vienen a demostrar que los usuarios cada vez son menos expertos, necesitan más aclaraciones y difícilmente se pueden dar por sabidos conceptos que pueden parecer sencillos.

Los iconos superiores

Los iconos de "E-mail" y "Messenger" se han desplazado del área superior de la izquierda a la derecha. "Personalize" y "Shop" han ocupado su lugar. Además los iconos han sido rediseñados.

Antiguo diseño:

Nuevo diseño:

Por nuestro modo de lectura de izquierda a derecha, los iconos alineados a la izquierda se perciben más fácilmente. Los iconos de "E-mail" y "Messenger" no necesitan ser tan visibles porque los usuarios que los buscan son usuarios fieles de este servicio, ya están captados y no es necesario usar recursos incitándolos, puesto que tienen motivación suficiente para buscarlos. Así se pueden destacar más los iconos "Personalize" y "Shop" servicios que necesitan de mayor incitación al uso.

Los nuevos iconos están sobre un circulo de fondo casi blanco, antes era de color. De este modo los dibujos interiores indicativos del icono resaltan más, el icono significado del icono es más claro y se rompe la simetría de los antiguos iconos que al tener todos un circulo de color parecían más iguales.

Fuentes

Se han introducido cambios para mejorar la legibilidad, un nuevo tipo de letra y un aumento en su tamaño.

El tipo de letra pasa de Times New Roman (fuente tipo serif) a Arial (tipo sans-serif) en la nueva versión. Se reconoce por tanto la superioridad de las fuentes sans serif para lectura en pantalla.

El tamaño de las fuentes es mayor en la nueva versión, excepto en las categorias del directorio que tenían un tamaño mayor y ahora pasan a tener un tamaño de letra igual al resto de contenidos.

Número de links

El número de links ha sido reducido un 9,6% en la nueva versión, 240 vínculos en la vieja, frente a 217 en la nueva. En la versión local en castellano el número de vínculos es incluso menor, 195.

El menor número de links permite escanear más fácil y rápidamente la página para localizar la información buscada.

Personalización

La nueva versión de Yahoo.com facilita el acceso directo desde la página inicial a las prestaciones personales como el correo.

El proceso no requiere registro adicional para antiguos usuarios del correo de Yahoo, un simple log-in y el área de "Personal Assistant" se personaliza. Es una personalización centrada en el usuario que no necesita ser configurada manualmente.

A los usuarios no les gusta el largo trabajo de completar todas las opciones de personalización. Además es difícil para el propio usuario predecir de antemano todos su temas de interés. Por ello es mucho más efectiva la estrategia de facilitar al máximo un log-in cuyo verdadero valor es monitorizar la actividad para servir contenidos de acuerdo con su comportamiento real, más allá de inexactas predicciones o suposiciones.

Referencias:

- Yahoo to give home page a makeover Este artículo de Cnet.com sugiere que la función del nuevo diseño es dar más espacio y relevancia a la publicidad.

- Yahoo relaunches with streamlined look. Más comentarios sobre el rediseño de Yahoo.

- Yahoo launches redesigned home page. Comentarios de los responsables de Yahoo sobre el rediseño.