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 800×600 (en 1024×768: 2,7páginas en la nueva y 2,1 en la antigua).
No hay que tener miedo al scroll. Los usuarios si hacen scroll vertical y ya no se quedan solo en la parte de arriba del sitio web como en los principios de Internet. Ya no es necesario crear diseños donde toda la información esté comprimida en la parte superior para no evitar el scroll. Amazon.com por ejemplo, tiene un largo scroll de más de 4 páginas (en 1024×768) .
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 dispone de más espacio por su uso del scroll y aprovechamiento mejor el ancho de la ventana, lo que permite una mejor utilización del espacio en blanco y la introducción de recursos que separan contenidos.
Los espacios en blanco aumentan en tamaño y cantidad entre diferentes elementos de información. Estos espacios en blanco introducen una separación visual que hace que los elementos se diferencien unos de otros y permiten romper con la homogeneidad de los antiguos bloques de información.
En este sentido también se introducen recursos como las "pestañas", fondos coloreados en la columna de la derecha, barras horizontales de color gris claro y viñetas más grandes.
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_separador1.jpg")
Todos estos recursos facilitan el "escaneo" visual de la página, la distinción y el destacado de elementos de información porque fracturan la homogeneidad. 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. Seguramente porque los usuarios no están familiarizados con el concepto de "directorio".
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_titulo_directorio.gif")
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 tan efectivos como ahora (Google no existÃa). Ahora apenas se usan los directorios y 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 identifiquen las categorÃas del directorio de Yahoo.com, con 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. Nota: las carpetas ya no existen en la versión actual.
Carpetas del directorio de Yahoo.es
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_carpetas_direct.jpg")
Carpetas del Explorador de Windows
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_expl_wind.jpg")
Estas modificaciones, seguramente forzadas por pruebas de usuario, vienen a demostrar que los usuarios cada vez son menos expertos y necesitan más aclaraciones. 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 de la izquierda a la derecha. "Personalize" y "Shop" han ocupado su lugar alineados a la izquierda. Además todos los iconos han sido rediseñados.
Antiguo diseño:
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_icon_old.jpg"){kind=icon}
Nuevo diseño:
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_icon_new.jpg"){kind=icon}
Por nuestro modo de lectura, de izquierda a derecha, los iconos alineados a la izquierda se perciben más rápidamente. Los iconos de "E-mail" y "Messenger" ya no necesitan estar a la izquierda y ser tan visibles porque los usuarios que los buscan son usuarios que ya están captados y tienen motivación suficiente para encontrarlos. 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 del icono resaltan más y su significado es más claro. Se rompe la simetrÃa de los antiguos iconos que al tener todos un fondo 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 las categorias del directorio que 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.
![]("http://www.alzado.org/imgconts/autor_id3/yahoo_personaliza.jpg")
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 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 el registro y log-in para monitorizar su actividad y en el futuro servir contenidos de acuerdo con su comportamiento real, más allá de inexactas predicciones o suposiciones.