Análisis de usabilidad del nuevo Home Page de El País
Jose María Sánchez de Ocaña (Noviembre 2002)

Resumen: A mediados de noviembre, el diario El País lanzó la nueva versión del web que, a pesar de evidenciar un esfuerzo considerable (tanto en recursos como en cuidado e imagen), desde el punto de vista de la usabilidad web era muy mejorable.

Este artículo es un ejemplo de cómo un sencillo análisis heurístico realizado por un conocedor de la usabilidad puede ofrecer soluciones prácticas, concretas y viables para conseguir que la visita de un usuario a la versión digital de este diario sea una experiencia fructífera y agradable.

Durante un par de días he dedicado algún tiempo a plasmar las ideas que expongo más abajo en una Home Page alternativa (nota: los enlaces que aparecen en la página propuesta no funcionan porque se han conservado los originales para no afectar a la comparativa de peso).

El trabajo realizado se ha centrado en simplificar al máximo la página, de cara a:

1. Rebajar su peso, ya que la velocidad es el factor más crítico en la usabilidad de un web.
   
   

   	Home Page actual	Home Page revisado
   Peso total	190 Kbytes	88,4 Kbytes
   HTML	85 Kbytes	34 Kbytes
   Imágenes	48 Kbytes	31,4 Kbytes
   Hoja de estilos	27 Kbytes	23 Kbytes
   Hojas de JavaScript	30 Kbytes	0 Kbytes

   Estoy seguro de que dedicándole algo más de tiempo todavía se podría rebajar más el peso de la página, hasta dejar el HTML por debajo de los 30 Kbytes, que es el límite máximo recomendado en usabilidad. También podrían realizarse mejoras estéticas sin afectar por ello al peso.

2. Hacer un HTML lo más sencillo y estándar posible, lo cual no solo facilita que la misma página funcione desde un mayor número de navegadores y plataformas, sino que además mejora los costes de mantenimiento y la flexibilidad del web.

A continuación enumero en detalle las diferentes adaptaciones que he realizado. Soy consciente de que algunas son más complejas de llevar a la práctica que otras, pero hay un buen número de recomendaciones que son sencillas y se pueden realizar con relativamente poco esfuerzo:

• Eliminar del código HTML todo lo que no sea imprescindible de cara a la legibilidad del código (blancos, saltos de línea, comentarios innecesarios). Ayuda a rebajar el peso.
• Sustituir imágenes que sólo tienen texto por texto HTML (por ejemplo, "Pruebe Gratis El País", enlaces a secciones en la barra de navegación, y muchos otros).
• Simplificar las tablas que componen la página, de manera que el navegador no necesite descargar toda la página para mostrarla, sino que pueda ir componiéndola a medida que la va recibiendo.
• Quitar imágenes de fondo ("El País" de fondo del logo, fondos de "Destacamos", "A fondo", etc.)
• Links estándar. Numerosos estudios demuestran que los enlaces en formato estándar (azul subrayado para enlaces no visitados y violeta subrayado para enlaces visitados) son los más usables.
• Hacer que el texto fluya adaptándose al tamaño de la ventana, en lugar de ocupar un tamaño fijo. No debemos asumir que el usuario carga la página en una ventana que tiene un tamaño concreto, en una pantalla con una resolución concreta. La página debería de comportarse bien para cualquier pantalla, resolución y tamaño de ventana. En este sentido, en lugar de tablas con tamaño fijo en píxels, deberían utilizarse tablas con tamaño relativo (%).
• En la encuesta se podrían utilizar "radio-buttons" en lugar de un selector desplegable, pues permiten al usuario ver y comparar todas las opciones al mismo tiempo y minimizan el número de clics a realizar.
• Posición del nombre del web. Una cuestión fundamental en usabiliad es ayudar al usuario a posicionarse, es decir: a saber dónde está, tanto respecto de internet (en qué web está) como respecto del web en cuestión (en qué ubicación de éste se encuentra). En cuanto al posicionamiento respecto de internet, la ubicación demostradamente más usable para el nombre del web (en este caso, el logo de "El País") es arriba a la izquierda.
• Eliminar JavaScript siempre que sea posible, ya que es una fuente de problemas a la hora de garantizar la compatibilidad de la página con los diferentes modelos y versiones de navegador. Además, el usuario puede tener la función de JavaScript desactivada, y si nuestra página depende demasiado de JavaScript, puede incluso dejar de ser utilizable.
• Separar los elementos de una página mediante el uso de espacio en blanco suele ser la forma más usable de hacerlo, y suele ser más efectivo que utilizar líneas separadoras. Además, en este caso la gestión de líneas y separadores es demasiado compleja, dificultando innecesariamente el mantenimiento.
• No conviene utilizar imágenes transparentes para crear espacios o para posicionar los elementos de la página. Suele ser una fuente de problemas en la compatibilidad con navegadores. Utilizar para ello recursos del HTML (cellpadding, cellspacing, etc.).

Algunos aspectos adicionales que podrían revisarse...

• Links poco claros ("viñetas", "autonomías", "lo más", etc.). El tiempo del usuario es muy valioso, así que antes de hacer clic en un enlace debería de tener claro qué es lo que va a encontrarse como respuesta. Los textos de algunos enlaces deberían de ser más explícitos del contenido al que llevan.
• Usar fuentes estándar (se usa Georgia, por ejemplo), por dos motivos: para que la página se vea igual en una mayor variedad de navegadores, y porque el usuario estará más confortable con una fuente a la que ya esté habituado. Recomendaría, por este orden: Verdana, Arial, Helvetica, Geneva, o bien alguna otra fuente sans-serif.
• Los botones deberían de ser 3D (ej. Buscar, Votar), aunque realmente el formato más usable es utilizar un botón HTML en lugar de imágenes que representan botones.
• No utilizar imágenes animadas (usar banners sin animaciones).
• No abrir nuevas ventanas, sobre todo si no se avisa (ej. "Titulares del Día").
• El uso de mayúsculas (por ejemplo, en títulos) dificulta la lectura, que ya es suficientemente dura en una pantalla. Cuando una persona lee un texto lo que hace es detectar formas de palabras, en lugar de leer letras y componer palabras. El texto en mayúsculas tiene una forma homogénea y por tanto es más difícil de leer.
• El tamaño de las fuentes debería ser más grande, lo cual ayudaría a escanear el texto. No es crítico que eso implique que, al ser todo más grande, ocupa más espacio y el usuario tiene que paginar más (hacer scroll vertical). Es preferible que el usuario vea pocas cosas claras a que vea muchas cosas confusas. La Home Page de Amazon, por ejemplo, es bastante larga debido al tamaño de letra usado.
• En el mismo sentido, una cuestión importante: el tamaño de las fuentes es preferible fijarlo de forma relativa (%, o unidades "em") en lugar de fijarlo en píxels. De esta manera, cada usuario verá el texto con el tamaño que haya elegido en las preferencias de su navegador. Esto es especialmente importante si pensamos en usuarios con problemas de visión. Y por añadidura, esta adaptación puede servir para simplificar bastante la hoja de estilos y rebajar su peso.
• El objeto "Mi carpeta" es difícil de gestionar y mantener, ya que está básicamente hecho en JavaScript. No tengo claro si funcionalmente le aporta algo al usuario, ya que mediante el uso de los enlaces favoritos (bookmarks), que es algo que los usuarios ya conocen y saben utilizar, prácticamente tiene la misma funcionalidad. Plantearía eliminarlo, o bien gestionarlo sin JavaScript, como un Carrito de la Compra típico.
• Cuando se ofrece una descarga (por ejemplo, las versiones del diario en PDF), es útil indicarle al usuario el tamaño del fichero que se va a descargar (si está utilizando una conexión lenta, tal vez ni se plantee empezar a descargárselo).
• Banners. A menos que algún acuerdo comercial así lo requiera, sería recomendable relegar los banners a zonas inferiores de la pantalla (sobre todo el banner grande). En la página de muestra, lo hemos dejado en un lugar predominante pero que no afecta tanto a la distribución del resto de contenidos.
• Los pop-ups (ventanitas que se abren cuando entramos en una página), como el que aparece para promocionar la suscripción, se consideran una intromisión en el espacio de trabajo del usuario. Dado que suelen contener información de publicidad, los usuarios han desarrollado el hábito de ignorarlos y cerrarlos incluso antes de que lleguen a cargarse. En este caso, además, el pop-up no aporta ninguna información adicional, ya que desde el homepage ya está bastante visible la promoción de la suscripción.

Aplicando varias de estas sugerencias se puede conseguir, con toda seguridad, un web más sencillo, lo cual tiene un impacto favorable no solo en el usuario final, sino también en cuanto a los recursos que necesite el web (máquinas, ancho de banda, etc.).