Evaluación de la usabilidad del Home Page de Repsol-YPF
Jose María Sánchez de Ocaña (Mayo 2003)

Resumen: Este artículo contiene una evaluación heurística detallada del home page de www.repsolypf.com, que permitirá al lector no iniciado en usabilidad web comprender un poco mejor esta disciplina.

La evaluación heurística de un web es un método rápido y económico para detectar sus carencias en usabilidad.

Este artículo muestra un ejemplo de los resultados que esta técnica permite obtener: a lo largo de 3 días, he llevado a cabo una evaluación heurística del home page de Repsol-YPF (www.repsolypf.com) y he recogido sus resultados en este artículo.

De hecho, el entregable típico de una evaluación heurística es bastante más conciso que lo que refleja este documento, y los resultados del análisis suelen mostrarse en forma de tabla o "check-list" de heurísticos, acompañada de alguna breve explicación. Aquí, he querido entrar en un nivel de detalle que permitirá al desconocedor de la usabilidad web adentrarse un poco en esta disciplina y entender su complejidad.

Nota: la presente evaluación hace referencia a la versión de Home page de www.repsolypf.com existente el día 25 de Marzo de 2003

Contenido

1. Splash-screen
2. Home page
   • Aspectos técnicos
   • Aspectos de diseño
3. Pantallazos en los diversos navegadores
   • Splash-screen
   • Home page
4. Desglose del peso del Home page
   • Sin Flash
   • Con Flash

1. Splash-screen (http://www.repsolypf.com/home00.asp)

Todo usuario que accede por vez primera al web repsolypf.com indicando "repsolypf.com" en la dirección de su navegador es redirigido a la página que se muestra junto a este texto.

Desde ella, el usuario deberá elegir un idioma y una ubicación geográfica para poder acceder a la página de inicio "real". Dicha configuración quedará almacenada en una cookie en el navegador del usuario, de manera que en futuros accesos a la página de inicio ya se pueda acceder directamente a dicha página con el idioma y ubicación memorizados.

Se trata de un tipo de página que se conoce con el nombre de "splash-screen": una página que no es realmente la home page del site, sino un paso previo a dicha página. Normalmente este tipo de páginas contienen logos y mensajes corporativos o de bienvenida, y en ocasiones (como ocurre aquí), se utilizan para establecer un primer nivel de navegación por idioma o ubicación geográfica.

Normalmente son páginas inútiles, salvo en contadas excepciones (por ejemplo, cuando se utilizan para mostrar mensajes de advertencia sobre el contenido de la verdadera home page), y los usuarios tienden a "saltárselas" tan rápido como pueden: no les aportan nada. Es preferible integrar el mensaje o posible funcionalidad de la "splash-screen" en la propia home page, y permitir al usuario acceder a contenido útil lo antes posible.

En este caso, el problema no viene dado tanto por el hecho de tener que "saltarse" siempre esta página, ya que como se ha observado eso solo ocurre para la primera visita [1]. El verdadero problema de esta "splash screen" radica en las siguientes deficiencias técnicas que presenta la codificación de la página:

Las acciones de selección de idioma, selección de ubicación geográfica y navegación a la página de inicio correspondiente se apoyan en el uso de rutinas JavaScript [2].

Esto implica que:

• Un usuario que navegue con el soporte para JavaScript de su navegador deshabilitado nunca podrá acceder a la home page de repsolypf.com, ya que nunca será capaz de pasar de la "splash-screen".
• Adicionalmente, el código JavaScript utilizado ha dado problemas con 5 de los 8 navegadores + plataformas con los que se ha probado. La página ha funcionado en los siguientes casos:
  • Internet Explorer 5.0 sobre Windows 2000 Pro
  • Internet Explorer 6.0 sobre Windows 2000 Pro
  • Opera 6.05 sobre Windows 2000 Pro
  Pero no ha funcionado para las configuraciones:
  • Netscape 4.78 sobre Windows 2000 Pro
  • Netscape 7.0 sobre Windows 2000 Pro
  • Phoenix 0.5 sobre Windows 2000 Pro
  • Konqueror 3.03 sobre Red Hat Linux 8.0
  • Mozilla 1.01 sobre Red Hat Linux 8.0

En definitiva: el 5% de los usuarios potenciales, excluídos innecesariamente (la página puede hacerse perfectamente compatible con las configuraciones probadas sin necesidad de usar JavaScript) por una página que no aporta nada.

Se podría entrar en consideraciones adicionales de diseño; por ejemplo: ¿Es intuitiva la selección de ubicación geográfica? ¿Qué debo seleccionar, el lugar donde estoy yo, o el país de la sede de RepsolYpf que me interesa? ¿Y si vivo en Alemania? ¿Cuál es la sede oficial? ¿Hay contenidos que están en unas sedes y no en las otras? ¿Cuál es la buena?...

Recomendación: eliminar esta página.

2. Home page (http://www.repsolypf.com/esp/home/home.asp)

Aspectos técnicos

Peso total de la página (25 Marzo 2003):

• Si el navegador tiene instalado el plugin de Macromedia Flash: 158.2 Kb.
• Si no lo tiene: 134.6 Kb.

La velocidad de descarga es el factor más crítico de la usabilidad de un web. Es preferible un web rápido mal diseñado que un web bien diseñado en el que las páginas nunca llegan, ya que el usuario por lo menos tiene la oportunidad de intentar hacer algo útil. La velocidad de descarga depende de múltiples factores, todos ellos importantes: del ancho de banda existente entre el site y el usuario, de los procesos que generen la página, de la carga del site, de los diferentes niveles de cacheo que actúen entre el navegador del usuario y el servidor del site, de la velocidad de renderización del navegador del usuario, y de la propia página.

El tiempo límite que un usuario puede esperar las respuestas de un sistema informático manteniendo la atención sobre la tarea que realiza es de 10 segundos (Business Comm. Review, Julio 2002).

A pesar de la creciente difusión de la conectividad de banda ancha, la población de usuarios que se conectan con módems de una velocidad menor o igual a 56Kbps sigue siendo dominante. Asumiendo un retardo nulo en la respuesta del servidor y en la renderización de la página (lo que tarde el navegador en "dibujarla"), esta debería de medir un máximo de 34 Kb para descargarse a 28 Kbps en el tiempo máximo de 10 segundos.

La home page de repsolypf.com cuadriplica dicho tamaño máximo.

Siguiendo el hilo de la velocidad de descarga, cabe mencionar las siguientes apreciaciones técnicas:

• Uso de contenidos rich-media (Flash)

  Al igual que ocurre con el uso de JavaScript, cabe utilizar cada recurso técnico para los propósitos para los que dicho recurso presenta mayores ventajas (primero para el usuario, y también para el web) frente al resto de técnicas alternativas.

  En este caso, si el navegador del usuario tiene instalado el plug-in de Macromedia Flash, se le descargará una animación .swf; de lo contrario, ocupará su lugar una imagen .gif.

  La pregunta sería: ¿por qué se da preferencia a una animación Flash frente a una imagen GIF? Las imágenes en movimiento tienen un efecto muy poderoso sobre la visión periférica humana: cualquier cosa que se mueve en la visión periférica de un usuario tiende a dominar su atención. Esto hace que sea extremadamente difícil concentrarse en leer texto que esté rodeado de cosas en movimiento. De hecho, la mayoría de usuarios manifiestan que les molestan las animaciones o textos en movimiento.

  Esto no significa que las animaciones no sean un recurso valioso a utilizar en determinadas ocasiones, pero no es el caso en esta página.

  Al incluir el contenido Flash en esta página, se ha perjudicado su usabilidad como sigue:

  • El peso ha aumentado en 25.22 Kb (es la diferencia entre el peso total de la página con Flash y la página sin Flash, más el código JavaScript necesario para detectar si el navegador tiene el plug-in correspondiente). Esto alarga la descarga en 7.42 segundos en un modem convencional.
  • Se ha dificultado la lectura de los textos de la página.

  Otro efecto colateral derivado de la implementación realizada es el siguiente: el código JavaScript valida si existe el plug-in, pero no valida la versión del mismo. Si la animación se ha desarrollado en una versión de Flash posterior a la que tiene instalada el navegador, quedará un hueco vacío en la página.

  Recomendación: eliminar la animación Flash.

• Imágenes

  Al respecto del uso de imágenes, es posible hacer una aportación básica: dado que las imágenes consumen muchos bytes, y el peso es probablemente el factor más crítico en usabilidad web, el uso de imágenes debe de estar plenamente justificado.

  A menudo se recurre al uso de imágenes para conseguir efectos estéticos que puedan estar totalmente controlados por el diseñador y no por el navegador. Esto puede estar justificado, siempre y cuando no comprometa la usabilidad de la página.

  Idealmente, debería de recurrirse al uso de hojas de estilos (CSS) para representar el formato de los contenidos de una página web; en la realidad ocurre que sólo es posible utilizar los recursos de la tecnología CSS de forma limitada si se quiere garantizar un comportamiento uniforme y correcto en un abanico amplio de navegadores.

  En el ámbito de una intranet, no obstante, las cuestiones de formato sí deberían resolverse de forma preferente mediante el uso de hojas de estilos, gracias una vez más al hecho de poder acotar la plataforma cliente.

  En el caso de esta home page, cabe mencionar lo siguiente respecto del uso de imágenes:

  • Banners. El GIF animado de la esquina superior derecha pesa más de 34 Kb. Es demasiado peso, sobre todo teniendo en cuenta que los usuarios habituales de Internet desarrollan mecanismos para, de forma inconsciente, ignorar todo contenido con forma o aspecto de banner (lo que se conoce como "banner blindness"). Adicionalmente, presenta los inconvenientes de una animación antes mencionados. Lo mismo aplica para los 2 banners más pequeños que aparecen en la parte inferior derecha de la página. Estas 3 imágenes juntas ocupan 54.6 Kb.
  • Iconos de los links a "Correo", "Chat", "Juegos", etc. No resultan nada intuitivos; de hecho, al pasar el ratón por encima se provoca la aparición de títulos explicativos mediante el uso de JavaScript.
    
    
    
    Se podrían suprimir, junto con dicho código JavaScript, y sustituirse por links de texto. Otra alternativa es mejorarlos haciéndolos más grandes y claros, y acompañarlos de links de texto.
  • Imágenes de fondo. Por ejemplo, la imagen "home_cuadrados.gif" ocupa 4Kb, peso injustificado por lo que aporta este contenido al usuario.

  Otras consideraciones adicionales respecto del uso de imágenes:

  • Es importante indicar siempre en el TAG IMG el alto y ancho de la imagen, de manera que el navegador pueda renderizar la página sin esperar a descargar la imagen. Eso se hace bien.
  • También es importante indicar en dicho TAG el texto alternativo a la imagen (atributo ALT). Esto tiene dos ventajas: por una parte, si el navegador no carga la imagen, mostrará dicho texto en su lugar y el usuario podrá leer la información que se deseaba transmitir con la imagen. Por otra, es importante para usuarios con limitaciones de visión que utilizan navegadores que "leen en voz alta" el contenido de las páginas. Esto permite al navegador leer el texto explicativo, de forma que el usuario pueda entender la información contenida en la imagen. El texto del atributo ALT aparece también como un mensaje de ayuda ("tooltip") al pasar el puntero del ratón sobre la imagen. No obstante, para que este efecto funcione también en navegadores de la familia de Netscape, cabe indicar el mismo texto en el atributo TITLE (cosa que aquí no se hace).
• Compatibilidad con navegadores

  Como se mencionaba anteriormente, el uso de JavaScript suele ser fuente de problemas o complicaciones. En la home page se han detectado, adicionalmente, los siguientes:

  • Se utiliza JavaScript para, en función de la versión de navegador, cargar una hoja de estilos u otra. Es preferible trabajar sobre una única versión de HTML y CSS sencilla que funcione bien para un abanico amplio de navegadores. Es decir, no programar para ninguno en particular, sino buscar un "denominador común" que funcione bien para todos. De lo contrario, cada vez que aparezca un nuevo modelo o versión de un navegador, cabrá revisar el web para adaptarlo a las características del mismo. No hacer detección del navegador ("browser detection"). De rebote, se ahorraría el peso del código JavaScript correspondiente a la lógica necesaria para hacer la detección.
  • Se utiliza también JavaScript para controlar algunos efectos en pantalla, como por ejemplo los siguientes:
    1. Al pasar el ratón sobre una imagen correspondiente a una noticia, se muestra el titular de la noticia y una breve descripción bajo la misma.
       
       
       
       Este efecto funciona bien en Internet Explorer 6.0 sobre Windows 2000 Pro, pero no funciona, por ejemplo, en Phoenix 0.5 sobre Windows 2000 Pro.
    2. Al hacer "clic" sobre el triángulo que sigue al número 05 correspondiente a la 5ª noticia, se desplaza el carrusel de noticias.
       
       
       
       Igualmente, este efecto funciona en Internet Explorer 6.0 pero no en Phoenix 0.5.
    3. Al pasar el ratón sobre el icono de "El tiempo", hacer sonar una melodía. En este caso, donde funciona bien es en Phoenix 0.5, y no así en Internet Explorer 6.0, por ejemplo.

    Lo realmente importante de todos estos ejemplos no es que el uso de JavaScript sea una fuente de problemas de compatibilidad con navegadores o un coste añadido de mantenimiento: el problema real es que ninguno de estos comportamientos es esperable por los usuarios, ya que ninguno de ellos es un comportamiento estándar del medio web. Un factor crucial de la usabilidad de una aplicación (web o no) es la aprendibilidad de la misma, es decir, lo fácil que le resulta al usuario aprender a utilizar la aplicación para realizar sus tareas.

    Esto es especialmente importante en un medio como Internet, donde no se puede formar a los usuarios de las aplicaciones, y las características (edad, visión, conocimientos técnicos, costumbres, plataformas de acceso, etc.) de los mismos son totalmente heterogéneas.

    Un usuario esperará que, en repsolypf.com, las cosas funcionen más o menos como funcionan en el resto de webs de Internet que ya sabe utilizar.

    Si un usuario accede a repsolypf.com para consultar un mapa, su experiencia será más positiva si le resulta sencillo hacerlo, es decir, si puede conseguirlo aplicando el conocimiento adquirido previamente.

    Si el comportamiento de los elementos de la página es el esperado, todos los refuerzos que el usuario obtiene a base de interaccionar con el web son positivos y le dirigen a lograr su objetivo; de lo contrario, algunos comportamientos le desconcertarán o confundirán, y no sabrá qué esperar de cada acción suya en el web.

    Solo los usuarios más motivados dedicarán su tiempo a aprender a usar un web. El resto simplemente se irá a completar su tarea a otro sitio, ya que en Internet la competencia no está más que a un clic de distancia.

    Por lo tanto, una vez más: uso incorrecto de JavaScript, que resulta en una página más cara de programar y mantener, y menos usable (más peso, y un interfaz menos aprendible).

• Tamaño en pantalla

  La página parece diseñada para encajar perfectamente en un navegador ejecutándose en una ventana maximizada sobre un monitor trabajando a una resolución de 800x600 píxeles.

  Si bien es probable que esta configuración sea la más común, es un error diseñar las páginas para que se comporten bien para una resolución de pantalla concreta, para un tamaño de monitor concreto, o para una ventana de navegador de unas dimensiones concretas. No solo la elección puede dejar de ser válida (según www.thecounter.com, si bien 800x600 es la resolución de pantalla mayoritaria, son más los usuarios que ya usan resoluciones de pantalla superiores), sino que los hábitos de dimensionamiento de ventanas de navegador pueden ser diversos.

  Si se diseña para la resolución mayoritaria, ¿cabrá rediseñar la página cuando la resolución mayoritaria sea otra?

  En cualquier caso, la cuestión es que la página debería de comportarse bien sea cual sea la configuración o hábito del usuario. Esto pasa por que la página cumpla lo siguiente:

  • Hacer que los conjuntos de información ocupen un espacio relativo al tamaño de la ventana (esto pasa, por ejemplo, por establecer el tamaño de tablas y columnas en tantos por ciento). En la home page actual se establecen en valores absolutos (en píxels).
  • Hacer que el texto pueda fluir para que la página se adapte sin problemas al tamaño de ventana elegido por el usuario. En este sentido, cabe apuntar que la página debería de comportarse especialmente bien para ventanas estrechas, ya que la paginación (o "scroll") horizontal es especialmente molesta para los usuarios (no así la paginación vertical).
• HTML utilizado

  Una vez más, para resolver cada problema debe de utilizarse el recurso tecnológico más apropiado para ello. El lenguaje HTML fue inicialmente diseñado para estructurar la información según su significado, y no para reflejar aspectos de presentación (para ello existen las hojas de estilos).

  Por desgracia, los diferentes navegadores han ido incorporando a las evoluciones de "su" HTML diferentes extensiones del lenguaje que no han respetado esta filosofía de diseño, introduciendo tags para permitir a los programadores controlar con el HTML aspectos de presentación (por ejemplo, el tag B o el tag FONT).

  Aunque no siempre es posible utilizar HTML solo para estructurar información (ya que como se ha comentado el soporte de CSS de los diferentes navegadores es limitado), hacerlo supone diversas ventajas:

  • Accesibilidad: los navegadores que "leen en voz alta" el contenido de una página pueden manipular mejor dicha información. Por ejemplo, pueden indicar que un texto es un título o subtítulo (si está contenido en un tag H1, H2, etc.), pueden permitir al usuario leer una tabla por la columna que le interese, o dejar de recorrer los elementos de una lista.
  • Facilita la portabilidad de contenidos a canales alternativos o de características de presentación diferentes.
  • El uso de CSS como recurso de presentación ayuda a mejorar el peso global de la descarga. De hecho, los dispositivos que pueden prescindir de los aspectos de presentación (como es el caso de los lectores para invidentes), no tienen por qué descargarse las hojas de estilos.

  En la home page actual, se ha encontrado el siguiente uso problemático de HTML:

  • Imágenes (IMG) para las que no se indica el atributo ALT (importante como ya se ha indicado).
  • Uso del atributo VSPACE para controlar el espacio vacío alrededor de una imagen.
  • Uso de imágenes vacías ("void.gif") para crear espacios en la página.
  • Uso del tag FONT para especificar la presentación de las fuentes (debería de hacerse con CSS).
  • Elementos cuyo tamaño se establece en píxeles (columnas de tablas, menús desplegables, cuadros de texto para entrada de datos, etc.).
  • Uso de tags U para subrayar palabras (lo cual es especialmente delicado ya que puede facilitar que se confundan con links) o de tags B para negritas.
  • Fuentes cuyo tamaño se especifica en unidades fijas (más adelante se trata el tema de las fuentes a fondo).
  • Posicionamiento absoluto (en pixeles) de contenidos englobados en tags DIV.
  • Uso exhaustivo de tablas para posicionar los contenidos. En un medio Internet, como ya se ha comentado, suele ser inevitable utilizar este recurso debido al soporte limitado de CSS para un abanico amplio de navegadores. No obstante, cabe usarlo de forma moderada; en un entorno de intranet, debería de poderse utilizar CSS para controlar todos los aspectos de presentación.

  El uso de HTML para estructurar la información tiene un efecto colateral muy importante: hace que los buscadores (o robots) de Internet (por ejemplo, el de Google) puedan indexar el contenido de las páginas de forma más eficiente. Por ejemplo, para Google las palabras "petrolera internacional" son más relevantes en una página codificada así:

     Repsol es una <STRONG>petrolera internacional</STRONG>

  que en una página codificada así:

     Repsol es una <B>petrolera internacional</B>

  aunque ambas se rendericen típicamente con el mismo aspecto en los navegadores.

Aspectos de diseño

El desglose realizado del espacio en pantalla parte de la clasificación típicamente utilizada por J.Nielsen para realizar una evaluación de alto nivel de una página de inicio.

Si bien podría discutirse si algún contenido encaja mejor en una u otra categoría, de este desglose destaca lo siguiente:

Hay un claro desperdicio del espacio disponible en la pantalla:

• el 56% del espacio dejado por el sistema operativo y los controles del navegador está en blanco ("sin usar") o tiene algún tipo de contenido (imagen o Flash) de relleno (decorativa).
• solo el 16% del espacio dejado por el sistema operativo y los controles del navegador se destina a elementos de navegación (que deberían de ser predominantes en la home page de un web razonablemente grande como este), y solo el 13% a contenidos de interés para el usuario.

Una vez más, este no es el problema más grave de esta home page; el mayor problema es que falla a la hora de responder a dos preguntas básicas:

¿Quién es RepsolYpf? y ¿A qué se dedica?

Probablemente no se trata de preguntas triviales de responder, ya que están ligadas a la que debería de ser la vocación del web, y eso no parece nada claro, dado que en este caso no cuadra la URL con la página:

Si este web es el web corporativo de RepsolYpf, entonces la URL está bien, pero lo que no encaja es el contenido de la página (¿noticias de casa y hogar, motor y competición? ¿tienda? ¿el tiempo?).

Si este web pretende ser un portal con contenidos diversos (noticias, una tienda, guía de carreteras, etc.), entonces lo que no encaja es la URL, ya que un usuario que se dirige a www.repsolypf.com, lo que esperará encontrar es el web corporativo de RepsolYpf. Esto no quiere decir que desde el web corporativo no se pueda acceder a las secciones o servicios relacionados con las noticias, la tienda o la guía Campsa: solo significa que estos no deben de ser los contenidos predominantes en esta página.

Cabe notar que la idea anterior no es necesariamente válida siempre. Por ejemplo, un usuario que accede a www.iberia.com, lo que espera encontrar es un web para realizar reservas en los vuelos de esta compañía. Los contenidos referentes a Iberia como empresa deberán de ser accesibles desde la home page, pero no deberán de ser los predominantes.

Esta confusión en la vocación del web queda patente en el título que aparece en la ventana del navegador: "RepsolYpf - restaurantes, rutas, viajes, mapas, productos y servicios". Este título asocia a RepsolYpf unas actividades que no encajan con la percepción de lo que es RepsolYpf para un usuario, lo cual resulta confuso.

El análisis que sigue asumirá que la página estudiada debería de ser coherente con lo que intuitivamente esperaría encontrar un usuario que navega a la URL www.repsolypf.com: el web corporativo de RepsolYpf.

Por lo tanto, es posible dar respuesta en el diseño de la página a las dos preguntas básicas formuladas anteriormente.

¿Quién es RepsolYpf? La respuesta está en la página Todo sobre RepsolYpf: "Repsol YPF es una compañía petrolera internacional que realiza todas las actividades del sector de hidrocarburos ...".

En ningún lugar de dicha página se menciona nada sobre noticias de motor y competición, casa y hogar, tiendas, servicios meteorológicos o guías de carreteras y hostelería.

Si bien estas pueden ser actividades importantes de cara al público para RepsolYpf, la home page debe de transmitir el mensaje de lo que es RepsolYpf, y de a qué se dedica.

Sí se menciona también otra cosa muy importante a efectos de lo que debe de transmitir la home page: "El objetivo fundamental de Repsol YPF es la creación de valor para el accionista ..."

Llegados a este punto, es posible enumerar las siguientes sugerencias para la home page:

1. Acompañar el logo con una "best line" corta que indique de forma clara el espíritu diferencial de la organización. Un ejemplo: "Energía en nuestras acciones" (transmite un mensaje doble).
2. El cuerpo central de la página podría estar ocupado por las 2 o 3 noticias más recientes sobre la empresa que sean relevantes para los accionistas. Los titulares deberían de elegirse para evocar el tipo de negocio y actividades a los que se dedica RepsolYPF.

   Una buena idea sería complementar esta información con información breve sobre la cotización actualizada (indicando la fecha) de las acciones de RepsolYpf en los diferentes mercados y la tendencia del valor.

3. También en el cuerpo central cabría dedicar espacio a resaltar las diferentes actividades, productos y servicios de la empresa, indicando algún ejemplo para cada caso.
4. El cuerpo de la izquierda se podría dedicar como menú de navegación a las diferentes secciones del web (noticias de interés para los accionistas, actividades, productos y servicios, empresas participadas, historia, etc.). El cuerpo izquierdo de la página es el lugar estándar para situar los menús de navegación, y por ello resulta la ubicación más usable. También sería válida la disposición superior en forma de barra de pestañas.
5. El cuerpo derecho podría dedicarse al formulario de login (como ya se hace ahora), ya que ese es el lugar estándar para hacerlo. Debajo de este área podría habilitarse espacio para enlaces hacia otros servicios ofrecidos al gran público:
   • noticias de motor y competición
   • contenidos sobre casa y hogar
   • viajes
   • tienda
   • servicio meteorológico
   • guía Campsa

Cómo organizar estos contenidos tan heterogéneos no es tarea sencilla; intiuitivamente, no tiene demasiado sentido que bajo el mismo dominio de repsolypf.com exista un web sobre contenidos de casa y hogar. Un usuario al que le guste dicha página difícilmente recordará una URL del estilo de "www.repsolypf.com/casayhogar", o como "casayhogar.repsolypf.com", independientemente de que, una vez más, el dominio repsolypf.com no parece el lugar donde tiene que existir dicha página.

Una alternativa sería redirigir hacia un dominio nuevo que actuase como portal englobador de todos estos servicios (algo del estilo de "gruporepsol.com", por poner un ejemplo).

La otra sería redirigir hacia webs especializados en cada uno de los servicios (lo cual parece bastante claro en el caso de guiacampsa.com, pero quizás no lo es tanto para el resto).

Por último, cabe revisar el diseño de los siguientes elementos de la página:

• Links (enlaces)

  El formato de link demostradamente más usable es el que aparece en forma de texto azul subrayado (para enlaces no visitados) o texto lila subrayado (para enlaces visitados). Si bien en algunos casos es posible saltarse esta regla sin comprometer demasiado la usabilidad de una página (por ejemplo, porque un color de fondo sea incompatible con estos colores, como en este caso), no conviene hacerlo.

  Este formato de link es el más usable, una vez más, porque es el comportamiento aprendido (y por tanto esperado) por los usuarios.

  Al respecto de los links usados en repsolypf.com, cabe añadir los siguientes comentarios:

  • Cabe cuidar lo que se conoce como "retórica de despegue" de un link; es decir, el texto de un link debería de ser sugerente de lo que puede esperar encontrar el usuario como resultado de navegar a dicho enlace. Links como "Descubre las ofertas de la semana", "Bienvenido al infinito", "Tienda" no sugieren nada de la página a la que apuntan (¿ofertas sobre qué?, ¿qué será esto del infinito?, ¿de qué es esta tienda?). Dado que Internet es un medio inherentemente lento, los usuarios necesitan tener una información clara de a dónde van sus clics de ratón para dedicar su tiempo a visitar las páginas correspondientes.
  • Igualmente, cabe cuidar lo que se conoce como "retórica de aterrizaje": el contenido de una página debe de coincidir con lo que sugería el link a través del cual se llegó a ella. De lo contrario el usuario se confundirá o pensará que se ha equivocado, y en definitiva perderá confianza en pensar que puede conseguir lo que quiere hacer en el web. Un ejemplo de este link es el propio "Todo sobre RepsolYpf".
    
    
    
    En este caso, lo que confunde no es este texto, sino el tooltip que aparece al posicionar el puntero del ratón sobre el mismo, que lee "Junta General de Accionistas 2003". En la página resultante no aparece ninguna referencia a la junta del año 2003.
  • Links que apuntan a la propia página a la que pertenecen (por ejemplo, el link de "inicio" junto a la selección de idioma y país). Son links que no aportan ninguna utilidad al usuario y solo pueden conseguir desconcertarlo y transmitir una imagen negativa del web.
  • Links que funcionan mediante JavaScript. Suelen asociarse a rutinas que lo que hacen es cargar la página de destino en una nueva ventana (como es el caso del link "Nota legal" en el pie de la página). Esto presenta varios problemas:
    1. No se ve la URL destino del link en el pie de la ventana del navegador. Esto es útil porque si las URLs están bien diseñadas, pueden dar información adicional al usuario que le permita intuir el tipo de información que obtendrá si sigue el link.
    2. Los ya tan mencionados inherentes a JavaScript (mantenibilidad, compatibilidad con navegadores, y encima el peso).
    3. Probablemente más grave que todos estos: no es recomendable (salvo en contadas excepciones) abrir una nueva ventana para presentar una página, ni aunque sea para seguir un link que lleva al web de otro dominio.

       Abrir una nueva ventana no solo es una intromisión en el espacio de trabajo del usuario, que ya tiene las ventanas como desea tenerlas, sino que además tiene efectos colaterales muy negativos de cara a la usabilidad: el botón "atrás" de la nueva ventana estará deshabilitado (ya que se está en la primera página de dicha ventana). Si el usuario no se ha dado cuenta de que se le ha abierto una nueva ventana, estará desconcertado al ver que el botón atrás no le devuelve a la página en la que estaba. Cabe notar que la acción de "hacer clic en el botón atrás" es la segunda acción básica más realizada por los usuarios de Internet (la primera es "seguir un link").

       Esto es especialmente grave si la nueva ventana se abre suprimiendo deliberadamente los controles del navegador (adelante/atrás/stop, etc.).

  • Navegación oculta o "mystery meat navigation". Esto se refiere al hecho de que los elementos de navegación que aparecen en una página deberían de ser autoexplicativos de forma directa para el usuario. En esta página, este concepto se puede mostrar con un ejemplo claro: los ya mencionados iconos asociados al texto "Ventajas del portal". Dado que no son iconos intuitivos, el usuario debe de pasar el ratón por encima de cada uno para que se le muestre un texto con la explicación correspondiente.

    

    Un efecto colateral radica en el hecho de que el usuario nunca puede comparar todas las opciones de un vistazo (y así elegir fácilmente cuál es la que más le interesa), ya que para ello necesita recordar las palabras que le han ido apareciendo para cada icono, así como recordar a qué icono corresponde cada palabra. Sería más usable señalar las diferentes opciones como una lista de palabras, siendo cada una un link a la página correspondiente: ahorro del JavaScript y de sus problemas, menor peso (imágenes y JavaScript), y más usabilidad.

    Nota: el link a "Mucho más..." debería de revisarse en cualquier caso para aclarar a dónde lleva.

  • Por último, menús desplegables que se comportan como links. En este caso, aplican también los problemas mencionados para el caso de los links que activan procesos JavaScript.

    No entra dentro del comportamiento esperable por un desplegable el que un cambio de elemento seleccionado provoque la descarga de una nueva página, por lo que esto es desconcertante para los usuarios. Además, puede llevarles a intuir que ese es el comportamiento de este tipo de elementos en el resto del web, y eso puede generar problemas o dudas a la hora de rellenar formularios o realizar otras acciones.

    En la home page, esto ocurre por ejemplo con los desplegables de selección de idioma y ubicación geográfica.

    Al respecto de estos dos elementos de la página, mencionar adicionalmente lo siguiente:

  • Respecto de la selección de idioma, un comportamiento razonable y estándar es hacer que se cargue la página correspondiente al idioma del navegador del usuario. También, si el web está dirigido a un público internacional, es conveniente cuidar el lenguaje utilizado de manera que sea lo suficientemente "llano" como para que un usuario con un conocimiento limitado del idioma pueda hacerse a la idea de la información que se ofrece.

    Para resolver el problema del cambio de idioma, basta con añadir dos links con las palabras "español" y "english" en algún lugar estándar de posicionamiento de este tipo de links (por ejemplo, en la esquina superior derecha de la página).

    No es recomendable utilizar para ello banderas u otros recursos similares, dado que pueden tener connotaciones políticas negativas o discriminatorias para algunos usuarios.

  • En cuanto a la selección de la ubicación geográfica, bastaría con añadir un texto del tipo

    Sedes: Argentina, España

    por ejemplo, en algún lugar próximo a la selección de idioma. El texto "Sede" ayuda a aclarar que el link lleva a la home page de la sede argentina de RepsolYpf, y evita posibles confusiones acerca de a qué se refiere la selección geográfica. También se podría aclarar a dónde lleva el link indicando un texto explicativo en su atributo TITLE.

• Buscador

  El buscador es un elemento muy importante de usabilidad, sobre todo si el web puede llegar a tener un volumen importante de contenidos (por ejemplo, por el hecho de tener un banco de noticias). La mayoría de usuarios tiende a localizar la información que busca en un web a través del buscador, en lugar de a base de navegar.

  La ubicación actual es correcta, ya que el lugar más estándar para ubicar un buscador es arriba a la derecha (curiosamente hasta no hace mucho tiempo la tendencia mayoritaria era situarlo a la izquierda, bajo el logo).

  No obstante, cabe recomendar lo siguiente:

  • Dar más espacio a la caja de texto. Los usuarios tienden de forma inconsciente a escribir textos de búsqueda más cortos cuanto más corto es el espacio disponible, lo cual es negativo a efectos de la función que se pretende lograr: localizar información con búsquedas precisas.
  • Utilizar fuentes monospaced en el texto de la búsqueda (por ejemplo, Courier New), ya que ello facilita la edición y corrección del texto.
  • Por último, la activación de la búsqueda debería de ocurrir tanto si el usuario pulsa "Enter" tras escribir el texto de la búsqeuda (ahora ya ocurre así) como si hace "clic" sobre un botón titulado "Buscar".

  Actualmente, en lugar de un botón "Buscar" hay un link con el texto "ir" que activa un proceso JavaScript.

  Recomendación: sustituir dicho link por un botón "Buscar". En ocasiones por motivos estéticos se sustituye el botón estándar de HTML por una imágen con el texto "Buscar".

  Esto es aceptable siempre y cuando:

  • El peso de la imagen sea razonable.
  • Tenga apariencia de botón (3D).

  No obstante, la opción más usable es la de utilizar un botón HTML, ya que el comportamiento del botón (efectos de hundimiento en las diferentes acciones con el ratón) está controlado por el navegador y es por tanto coherente con la interficie propia del usuario (de su sistema operativo o de su entorno gráfico de ventanas).

• Fuentes y textos

  Algunas consideraciones básicas sobre el uso de fuentes son las siguientes:

  • Utilizar preferentemente fuentes sans-serif, ya que su lectura en pantalla es más cómoda.
  • Utilizar fuentes estándar y ofrecer al navegador la posibilidad de utilizar varias fuentes alternativas. Evitar que el navegador tenga que descargar fuentes para renderizar la página.
  • Controlar las características de las fuentes mediante el uso de hojas de estilos (CSS).
  • Especificar el tamaño de las fuentes en unidades relativas ("em" o %), de manera que el usuario pueda mantener el control sobre el tamaño de fuente que desea utilizar (muy importante para usuarios de edad avanzada o con problemas de visión).
  • Evitar un abuso del texto en mayúsculas, ya que eso dificulta la escaneabilidad del texto (por ejemplo, "GUIA CAMPSA INTERACTIVA", o "PRODUCTOS Y SERVICIOS DE REPSOL YPF").
  • Maximizar el contraste entre el texto y su fondo. En este sentido, las combinaciones más usables son texto negro sobre fondo blanco o a la inversa. En el caso de la home page, los colores corporativos podrían reflejarse de formas más sutiles sin necesidad de comprometer el color de fondo de toda la página.

  En cuanto a los textos en sí, cabe pensar que, dado que la lectura en pantalla es especialmente dura, los textos deben de estar específicamente orientados a este medio: deben de ser especialmente cortos y claros. En ocasiones es conveniente usar negritas para ayudar a la escaneabilidad del texto, pero un uso abusivo de este recurso puede ser contraproducente.

• Formulario de Login

  Al margen de las recomendaciones que ya se han mencionado para otros elementos (por ejemplo, sustituir los links "ir" por botones), cabe mencionar lo siguiente:

  • Las ventajas o servicios que se ofrecen a los "clientes" (cuenta de correo, boletines informativos gratuitos, acceso a la tienda, agenda personal, etc.) estarían más relacionadas con los servicios propios de un portal generalista que con algo relacionado con un web corporativo, opción que se plantea aquí.
  • No obstante, sí puede tener sentido incluir aquí un formulario de login a una extranet de empleados como aparentemente ya ocurre en la página actual (el link a "Acceso Gerentes EE.S."). De todas formas, cabría explicitarlo con una cabecera del tipo "Acceso colaboradores", seguida del formulario de login.
  • Adicionalmente, sería conveniente añadir el típico link a "He olvidado mi contraseña".
• Otras cuestiones

  Idealmente, la URL de la página de inicio debería de ser simplemente: http://www.repsolypf.com

  También, observar que el pie de página reza: "RepsolYPF 2001". Esto transmite la idea de que esta página no se actualiza desde el 2001; detalles de este estilo pueden afectar a la imagen del web.

3. Pantallazos en los diversos navegadores

Splash-screen

Internet Explorer 5.0 sobre Windows 2000 Pro

Internet Explorer 6.0 sobre Windows 2000 Pro

Konqueror 3.0.3 sobre Red Hat Linux 8.0

Mozilla 1.0.1 sobre Red Hat Linux 8.0

Netscape 4.7.8 sobre Windows 2000 Pro

Netscape 7.0 sobre Windows 2000 Pro

Opera 6.0.5 sobre Windows 2000 Pro

Phoenix 0.5 sobre Windows 2000 Pro

Home page

Internet Explorer 5.0 sobre Windows 2000 Pro

Internet Explorer 6.0 sobre Windows 2000 Pro

Konqueror 3.0.3 sobre Red Hat Linux 8.0

Mozilla 1.0.1 sobre Red Hat Linux 8.0

Netscape 4.7.8 sobre Windows 2000 Pro

Netscape 7.0 sobre Windows 2000 Pro

Opera 6.0.5 sobre Windows 2000 Pro

Phoenix 0.5 sobre Windows 2000 Pro

4. Desglose del peso de la home page

Sin Flash

Con Flash

[1] Esto es cierto siempre y cuando el navegador del usuario tenga el uso de cookies habilitado (por lo menos, para el dominio repsolypf.com), y asumiendo que el usuario siempre accede desde el mismo ordenador + cuenta + navegador, y que nadie borra las cookies del navegador entre las sucesivas visitas.

[2] Es conveniente limitar el uso de JavaScript a aquellos puntos de un web en el que sea estrictamente necesario. Es una fuente de problemas de compatibilidad con los diferentes navegadores (un mal un tanto menor en el caso de una intranet, donde la plataforma cliente puede acotarse), lo cual complica y encarece innecesariamente el desarrollo, la mantenibilidad y adaptabilidad del web.