Análisis de la usabilidad de zapateropresidente.com
Jose María Sánchez de Ocaña (Febrero 2004)

Resumen: El 13 de febrero de 2004 se puso en marcha el web www.zapateropresidente.com, la principal proyección en Internet de la campaña "Zapatero Presidente", con la que Jose Luis Rodríguez Zapatero promociona su candidatura para las elecciones generales de marzo de 2004. Según explica el propio Jose Luis R. Zapatero, En este sitio web quiero exponer las razones por las que soy candidato a la presidencia del gobierno, mostrar lo que quiero hacer por nuestro país, y también conocer tus opiniones y tus propuestas.

Un breve análisis de usabilidad muestra que en realidad el web zapateropresidente.com presenta serios errores de diseño que impiden la consecución de estos objetivos.

Índice

1. Velocidad
   • Más cosas sobre velocidad
   • JavaScript, no sólo malo para la velocidad
   • Imágenes y animaciones
   • Cuánto tiempo esperan los usuarios
2. Diseño
   • Navegación
   • Contenidos
   • Formulario de contacto
3. Conclusión

Como se hizo recientemente para el análisis de marianorajoy.es, en este artículo se intentará determinar en qué medida zapateropresidente.com cumple sus objetivos, al tiempo que se presentan diversos conceptos referentes a la disciplina de la usabilidad web.

En esta ocasión, el problema de la velocidad adquiere una dimensión crucial para la usabilidad del web. Dado que el web en sí es relativamente pequeño en cuanto a contenidos y funcionalidad, se ha aprovechado este artículo para profundizar un poco más en los aspectos de la usabilidad que hacen referencia a la velocidad.

Nota: el análisis se ha realizado sobre la versión del web existente entre los días 16 y 22 de febrero de 2004.

1. Velocidad

La velocidad de descarga, el factor que de forma aislada más influye en la usabilidad de un web, es una vez más gravemente descuidado: la página de inicio de zapateropresidente.com, con un total de 440 KBytes, pesa casi 15 veces más de lo que debería.

A continuación se muestra el desglose del peso de cada uno de los elementos de la página (16 de febrero de 2004, a las 16:33h):

Más cosas sobre velocidad

Tal y como comenta Jakob Nielsen en un artículo acerca de la necesidad de velocidad en páginas web, para que el peso de las páginas sea pequeño es crucial limitar el uso de gráficos y contenidos multimedia a aquellos casos en los que realmente estos sean útiles para que el usuario entienda la información que se desea comunicar.

En este sentido, la misma fuente indica que la cuestión más importante en cuanto al tiempo de respuesta es cuánto se tarda en mostrar al usuario una pantalla de información útil. Es menos importante que pueda llevar más tiempo el cargar la página completa junto con sus imágenes, siempre que el usuario pueda empezar pronto a usar información. En este sentido, Nielsen ofrece una serie de recomendaciones para una carga inicial rápida:

1. La parte superior de la página debería de tener significado aun y cuando no se haya cargado ninguna imagen
2. Utilizar el atributo ALT de las imágenes, para que el usuario pueda entender lo que son, antes incluso de verlas
3. Para que el navegador pueda mostrar rápidamente la parte superior de la página, especificar las dimensiones de todas las imágenes de la página, así como de las columnas de sus tablas
4. Limitar la complejidad de las tablas que se utilicen, especialmente las que estén más próximas a la parte superior de la página

Para el caso de la página de inicio de zapateropresidente.com, junto a este texto se muestra qué es lo que vería un usuario antes de conseguir descargar los 410KB de imágenes y contenidos multimedia de la página. Se puede observar que la página presenta serios problemas de diseño, ya que:

• La parte superior no sólo carece de significado, sino que está vacía: la página no muestra al usuario ni dónde está, ni existen indicios de cuál es el contenido del web en cuestión, ya que el poco texto que aparece lee cosas ambiguas e inconexas como sobran los motivos, desde la memoria, próxima estación (¿?), vivienda, 1 equipo, etc.
• Aunque se han especificado las dimensiones de las imágenes, los huecos de las mismas carecen de texto que indique a qué se refieren

Como se observa más arriba, el HTML de la página de inicio estaría dentro del límite teórico de 30KB necesario para que una página pueda descargarse en como mucho 10 segundos a través de una conexión de módem convencional. Sin embargo, tal y como se acaba de observar, el HTML en sí de esta página ofrece muy poca información útil al usuario. De hecho, los 29.517 bytes de HTML parecen totalmente desmesurados para la información útil que contienen.

JavaScript, no sólo malo para la velocidad

De un análisis más detallado se observa que más del 20% del peso del HTML corresponde a código de rutinas JavaScript. El uso de JavaScript, como ya se comentaba en el el análisis del home page de repsolypf.com, es una fuente de problemas: no sólo afecta negativamente a la aprendibilidad del web, sino que obliga a validar su correcto funcionamiento en un abanico amplio de navegadores (cosa que encarece y alarga el desarrollo del web, y afecta también a su mantenibilidad); de lo contrario, es probable que se afecte negativamente a la experiencia de determinados usuarios con la aparición de errores, comportamientos y efectos extraños, e incluso impidiéndoles completar sus tareas en el web.

De un primer vistazo, el JavaScript de la página de inicio se utiliza fundamentalmente para lo siguiente:

1. Gestionar un reloj que indica al usuario, segundo a segundo, cuánto tiempo falta para que empiecen las votaciones para las elecciones generales, cosa que aporta bien poco al usuario. Si se considera que es relevante indicar cuánto tiempo falta para las votaciones, bastaría con que un rótulo estático indicase "faltan X días para el día de las elecciones"; al usuario no le aporta nada el poder saber cada segundo cuántos segundos faltan para el inicio de las votaciones. Todo ello, independientemente de la confusión que pueda ocasionar el que la fecha del ordenador del usuario sea incorrecta.
2. Gestionar elementos que aparecen y desaparecen de la zona central de la página al pulsar determinadas imágenes con forma de botón [Nota: este efecto se eliminó del web durante la redacción de este artículo]. Este tipo de usos de JavaScript (independientemente de la compatibilidad con navegadores) pueden ocasionar problemas de aprendibilidad, ya que las acciones gestionadas mediante JavaScript no son esperables ni conocidas a priori por el usuario. En este caso, los contenidos y enlaces adicionales pueden mostrarse en zonas inferiores de la página sin mayor problema.
3. Abrir nuevas ventanas en las que mostrar contenidos adicionales. Esta funcionalidad se explota de forma masiva en zapateropresidente.com; tanto es así que la única página que el usuario puede ver en la ventana original de su navegador es la propia página de inicio, ya que todos los enlaces abren las páginas destino en nuevas ventanas. Los problemas del uso de JavaScript para el control de links ya se han comentado en otras ocasiones: en este caso, se trata de un uso innecesario e incorrecto.

En definitiva: un elemento (el JavaScript) que no sólo perjudica al peso de la página más importante del web, sino que es una fuente de problemas para los usuarios y de costes innecesarios.

Imágenes y animaciones

Más arriba se comentaba que el uso de imágenes debería de limitarse a aquellos casos en los que realmente mejoren de forma significativa la comunicación de la información de la página.

En esta ocasión, prácticamente ninguna de las imágenes de la página de inicio aporta información adicional útil acerca del concepto al que están asociadas. Por ejemplo, el concepto "1 equipo" se asocia a una imagen de una mano señalando con el dedo índice, y el concepto "5 objetivos" se asocia a una imagen de una mano con los cinco dedos extendidos; en ningún caso la imagen aporta información adicional alguna sobre el concepto, ni ayuda a entenderlo mejor.

La única imagen que aporta información útil en una página como esta, centrada en la persona de un político, es la propia imagen de Jose Luis R. Zapatero, cosa que sí se incluye en la página actual. No obstante, en este caso el problema viene derivado de que la imagen en cuestión forma parte de una animación que pesa casi 200KB. A continuación se muestran 2 imágenes: a la izquierda, un recorte de la animación original, en la que aparece la imagen de Zapatero. Esta imagen pesa 61,4KB, que ya es mucho menos que lo que pesa la animación original. A la derecha, la misma imagen, manipulada para minimizar el peso a costa de una leve pérdida de calidad que no altera el resultado que se persigue: mostrar la imagen de Zapatero. Esta segunda imagen pesa sólo 9,3KB.

La imagen de la derecha transmite la misma información que la de la izquierda, y pesa sólo 9,3KB

El diseño y manipulación de imágenes para el medio web es un tema que merecería un artículo dedicado. La regla genérica de diseño sería que una imagen debe de pesar lo mínimo que permita verla lo bastante bien como para entenderla fácilmente.

Cabe recordar que el peso no es sólo una de las peores barreras a la usabilidad: es también una fuente de coste en ancho de banda y en carga del servidor.

Cuánto tiempo esperan los usuarios

En la edición de julio de 2002 de Business Communications Review, Peter Sevcik y su equipo intentaron modelizar la relación entre el tiempo de respuesta de una aplicación y el rendimiento de los usuarios, a partir de los resultados obtenidos en 6 estudios de investigación llevados a cabo entre 1968 y 2001, con la intención de extraer información útil para el caso de las aplicaciones web en Internet.

A pesar de que la primera conclusión es que no existe ninguna regla que cubra todos los casos, el modelo de Sevcik indica que existen los siguientes patrones generales de comportamiento:

1. 10 segundos es el tiempo límite para mantener al usuario en la Zona de Satisfacción, en la que el usuario no es consciente del tiempo que está tardando en cargarse cada página.
2. A partir de dicho tiempo límite, el usuario toma conciencia del hecho de que la página está tardando en llegar. El tiempo pasa a jugar un papel clave en la satisfacción del usuario. Se sabe poco acerca del comportamiento de los usuarios en esta Zona de Tolerancia, pero muchos usuarios soportan la espera sin abandonar la tarea. A medida que pasa el tiempo, la tolerancia se convierte en frustración.
3. Una vez se ha rebasado 4 veces el tiempo límite, la frustración y pérdida de interés del usuario aumenta de forma muy acusada.

Son estos 10 segundos los que determinan el límite máximo de 30KB para que una página se descargue dentro de la Zona de Satisfacción a través de una conexión de módem convencional.

El estudio arroja otras conclusiones interesantes:

• El umbral de los 10'' puede variar en función de la tarea, pero en general la norma de 4 veces el umbral para identificar la Zona de frustración es aplicable a webs de cualquier naturaleza.
• De hecho, el umbral puede variar dentro de un mismo web, según lo que esté haciendo el usuario.
• Otro factor que afecta al umbral es cuánta información útil espera encontrar el usuario en la página que está esperando. La Zona de Satisfacción puede agrandarse si el usuario intuye que la página tendrá mucha información útil.
• Al contrario de lo que indica la sabiduría popular, las diferencias entre usuarios son poco relevantes a la hora de determinar la tolerancia al rendimiento de una aplicación, siendo más relevante el tipo de tarea. Es decir: la mayoría de usuarios tienen una tolerancia muy similar al rendimiento.

Volviendo al caso que nos ocupa, y recopilando la información recogida en los apartados anteriores, tenemos que:

1. El HTML de la página de inicio carece de información útil para el usuario.
2. La página tarda aproximadamente 2' 25'' en cargarse completa bajo una conexión de módem convencional, y unos 16 segundos en una conexión ADSL básica.
3. El modelo de navegación (ventanas que se abren desde la página de inicio) hace que el acceso a contenidos internos obligue siempre a cargar la página de inicio (a menos que, como se ha hecho más arriba en este artículo, se acceda desde el exterior a una página del web desde la cual no se puede hacer nada más que "Volver atrás").

Conclusión: El web zapateropresidente.com es inusable para la mayoría de usuarios.

2. Diseño

Navegación

A falta de un buscador, es crítico acertar en el diseño de la navegación para ayudar al usuario a localizar fácilmente la información que busca.

Antes de profundizar en el análisis de los elementos de navegación, vale la pena no obstante preguntarse lo siguiente: ¿le hace falta un buscador a zapateropresidente.com? De entrada no parece una decisión sencilla: el usuario observará que en realidad en este web existen pocos contenidos, cosa que hace pensar que un buscador en este caso carece de sentido (sería como matar moscas a cañonazos). Sin embargo, a falta de un test de usuarios, si tuviera que recomendar algo sería el incluir un buscador, por los siguientes motivos:

• El que un web tenga pocos contenidos, ¿justifica que el usuario tenga menos herramientas para localizar, de entre ellos, lo que le interesa?
• Lo realmente importante es ayudar al usuario a localizar la información. Si no ponemos un buscador sólo porque hay pocos contenidos quiere decir que no nos preocupa demasiado que el usuario tenga que probar varias páginas hasta encontrar la información que busca. Eso es un error. Un usuario que no encuentra rápido lo que busca es un usuario que está construyendo una percepción negativa sobre nuestro web.
• De hecho, los usuarios usan mucho los buscadores para encontrar lo que les interesa.

En cuanto al diseño de la navegación, ya se ha comentado anteriormente que el modelo de abrir ventanas nuevas para cada link crea problemas de usabilidad y accesibilidad. Este recurso puede estar indicado para determinados casos (por ejemplo, para mostrar puntualmente información de apoyo durante la realización de una tarea sin romper el principal hilo conductor de la misma), pero no como modelo general de navegación de un web.

Por último, otro tema que también se ha mencionado anteriormente: el diseño de los links. En este caso, el problema no viene dado tanto por el hecho de que los links no sigan un formato estándar, ya que en la página de inicio casi todo lo que aparentemente debería de ser un link en efecto lo es (de hecho, casi todos los elementos de la página son links), a excepción de:

• las 3 imágenes que encabezan las 3 columnas en que se ha dividido el espacio ocupado por el web ("Ahora", "Significados", "Realidades"), que tienen forma de botón y sin embargo no son links
• unas imágenes que, con forma parecida a una flecha, adornan la esquina superior derecha de los recuadros del cuerpo central de la página:

  

  En estos recuadros, tanto la imagen de la izquierda como el texto son links. Pero la "flecha" de la esquina superior derecha no lo es. En realidad debería serlo: un usuario que haga clic sobre dicha imagen estará esperando que sea un link.

El problema en este caso viene derivado de que en demasiadas ocasiones resulta complicado saber qué puede haber en la página a la que lleva cada enlace, dado que se abusa del uso de metáforas en los textos de los links. Algunos ejemplos:

• Parece razonable pensar que tras el link 1 equipo aparecerá una página que hable del equipo de Zapatero, aunque no está tan claro si será el equipo que lleva la campaña, la cúpula del PSOE, los principales cabezas de lista, etc.
• La diferencia entre 5 objetivos y 10 compromisos es un tanto difusa... ¿los compromisos no estarían más o menos entre los objetivos y viceversa?
• Algunos son todavía más crípticos, como los ya mencionados de sobran los motivos, desde la memoria, o última estación.
• El link en directo lleva a una página donde es posible descargarse unos vídeos... en diferido.

Como ejemplos de textos de links claros, es posible extraer de los objetivos manifiestos del web 3 candidatos a links que deberían de tener una posición predominante en la página de inicio:

1. Por qué soy candidato a la presidencia del gobierno
2. Programa electoral
3. Envíame tus opiniones y propuestas

El diseño de links usables es, cómo no, un pequeño mundo en sí. El lector podrá encontrar más información al respecto a partir, por ejemplo, del artículo Enlaces, etiquetado y posición de Ainda.info.

Contenidos

Lo primero que salta a la vista respecto de los contenidos es que hay pocos, cosa que no es necesariamente buena ni mala. En realidad, cuantos menos contenidos se necesiten para comunicar una idea, más probable es que ello ocurra con éxito.

En este caso los textos son razonablemente cortos y concisos, y están organizados bajo subapartados que ayudan al usuario a "escanear" en busca de las piezas de información que le interesan.

El mayor problema de los contenidos del web es su presentación. Como ya se ha comentado, los contenidos se presentan en ventanas que se abren desde la página de inicio. Por si los problemas antes comentados al respecto fueran pocos, como se observa en la siguiente figura, la ventana que se abre inicialmente es muy pequeña; afortunadamente, es posible redimensionarla manualmente para poder ver más contenido al mismo tiempo; y de nuevo por desgracia, el texto de la ventana no fluye horizontalmente, con lo que sólo es posible ampliar el campo de visión verticalmente.

Sólo se destina un 34% del espacio que ocupa el web en pantalla para mostrar contenidos

Finalmente, añadir que deberían de revisarse los textos para evitar errores ortográficos o sintácticos. El tercer contenido al azar que he leído (sección Seguridad) dice: Es imprescindible aumentar la presencia de efectivos en las calles crearemos 36.000 nuevos puestos de Policía...; los textos poco cuidados transmiten una imagen negativa de un web.

Formulario de contacto

Por último, al utilizar el formulario de contacto, he comprobado que también este aspecto esencial del web (uno de los 3 objetivos originales) se ha descuidado.

El formulario está diseñado para lanzar un mensaje desde la cuenta que el usuario tenga configurada en el gestor de correo de su ordenador. Esto presenta los siguientes problemas:

• Si la cuenta del ordenador que se está utilizando para navegar no tiene configurado el correo, el usuario no podrá enviar el mensaje.
• Una situación como la que se describe no es nada extraña; por ejemplo, será bastante típica en un cibercafé, o desde un puesto de trabajo que simplemente se utilice para navegar (como ha sido mi caso).
• Caso de llegar a enviarse el correo, la cuenta remitente será la configurada en el ordenador, y no la especificada en el formulario, cosa que no sólo es engañosa sino delicada desde el punto de vista de la privacidad.

Sería mucho más sencillo (y presentaría menos barreras) que el formulario enviase los datos del mensaje a una página que los procesase y devolviese una respuesta sencilla de aceptación.

3. Conclusión

Todo lo anterior lleva a concluir lo siguiente:

1. O bien los asesores del PSOE no conocen cómo funciona Internet
2. O bien el PSOE no hace caso a quien le asesora para temas de Internet
3. O bien la razón de ser de zapateropresidente.com tiene poco que ver con exponer las razones de la candidatura, mostrar qué se quiere hacer por el país, y conocer las opiniones y propuestas de los usuarios

ya que hoy por hoy, el web zapateropresidente.com:

• Es prácticamente inusable por motivos de velocidad.
• Descuida la presentación de los contenidos.
• Es pesado de navegar.
• Presenta barreras innecesarias a la comunicación.

En el apartado sobran los motivos, se puede leer: He querido que sea una página web sencilla, directa y dinámica. Reflejo de mi forma de hacer política.

Y uno medita: Del dicho al hecho...