Cajamadrid vs La Caixa
por Juan Carlos García, 1 de Mayo de 2006
Como ya comentamos alguna vez, se aprende bastante de la crítica del trabajo ajeno, aunque al criticado no suele gustarle que le critiquen ni arreglar nada de lo criticado.
Les dejo un ejemplo de comparativa de usabilidad y accesibilidad entre las web de Cajamadrid y de La Caixa.
La comparativa formaba parte de un ejemplo de ejercicio que hemos empleado en el recién finalizado II Curso Online de Diseño de Web Eficaces.
La idea era que el alumno utilizara Hera (o algunas otras herramientas automáticas) y una heurística propuesta durante el curso como herramientas de ayuda para detectar fallos de accesibilidad y usabilidad a partir de los cuales hacer propuestas de mejora y realizar una pequeña comparativa entre ambas.
Ejemplo de ejercicio resuelto
Para ello hemos utilizado el modelo de heurística empleado en este curso (También en formato .odt) que lleva detalladas anotaciones sobre la metodología para recopilación de datos, recomendada para facilitar las primeras evaluaciones, al tener a mano las instrucciones para la recogida de datos.
El otro formato es una hoja de Excell en la que sólo figuran las preguntas a responder para cada indicador de la heurística. Este formato es el ideal para la recogida de datos de varios sitios a comparar, una vez adquirida cierta práctica con la tabla .doc.
Hemos revisado dos Cajas de Ahorro: Cajamadrid y La Caixa. Puedes ver las tablas de datos correspondientes:
- Heurística de Cajamadrid (.doc) . [También en formato .odt]
- Heurística de La Caixa (.doc) [También en formato .odt]
- Hoja Excell con los datos de ambas [También en formato .ods]
A partir de los datos extraídos y la revisión personal realizamos diversas recomendaciones.
Recomendaciones de rediseño para cajamadrid.es
Grado de cumplimiento de indicadores de usabilidad: 54%
Accesibilidad:
Con la herramienta de revisón atumática HERA en la página principal se detectan 6 problemas de accesibilidad.
Prioridad 1:
- Enlaces: Hay enlaces que se activan mediante scripts. (<a href=’***’onClick=’x=screen.width-455;Conversacion=window.open***)
Incluye diversos scripts (javascript) que podrían comprometer la Accesibilidad de la página en determinadas circunstancias. Debería revisarse si es realmente necesario usar dicha tecnología y, en cualquier caso, tratar de ofrecer una alternativa accesible que realice la misma función.
Prioridad 2:
- CSS: El código de las hojas de estilo contiene errores (p.e. display static).
- Unidades absolutas en CSS: Se detectaron unidades absolutas (in|cm|mm|pt|pc) o tamaños de fuente definidos en px en los valores de las hojas de estilo. (Los tamaños de los tipos de letra deberían indicarse en unidades de medida escalables, como .em ó %).
- Manejadores de evento: Se utilizan eventos dependientes del dispositivo (<a href=’***’onClick=’x=screen.width-455;Conversacion=window.open***)
- Tecnologías del W3C: Se utiliza una versión anticuada de HTML (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">).
Prioridad 3:
- Enlaces adyacentes: Hay 3 casos de enlaces adyacentes que no contienen caracteres imprimibles no enlazados entre ellos. (P.e. <a href="/CajaMadrid/Home/cruce/0,0,2004,00.html" target="_top" class="noHandheld">
< img alt="Obra Social" src="/Portal_Corporativo/imagenes/tag_obrasocial_off_an.gif" title="Obra
Social" /></a>)
Utilizando la extensión para Firefox Colour Contrast de Juicy Studio se detecta que en en buena parte de la página el contraste entre texto y fondo no es suficiente.
No supera ninguno de los niveles de Prioridad de Accesibilidad al contenido tras realizar una revión automática (con HERA). Recomendamos que se realice un seguimiento de los puntos de verificación de accesibilidad para garantizar, al menos, el nivel de cumplimiento AA.
La página aporta algunas ayudas pensadas para mejorar la accesibilidad, tales como ataos de teclado, títulos de enlaces o css optimizada para impresión. Sin embargo tiene algunos fallos de accesibilidad que, aunque fácilmente subsanables, no permiten decir con contundencia que la página sea plenamente accesible. Por ello, es totalmente desacertado que se incorpore un logotipo de supuesta certificación de Accesibilidad de nivel AA.
Usabilidad:
Presenta algunos problemas de visualización, pues tiene un diseño con ajuste fijo y, además, superior a los 800 px. de ancho, que parece el máximo recomendado si se desea diseñar con un ancho fijo. No obstante este aspecto más parece un fallo de diseño que una intención de los desarrolladores.
Sería bueno que mejorara la ayuda a la navegación proporcionando un buscador, que debería estar ubicado arriba a la derecha.
Ofrece una página de redireccionamiento, lo que podría desconcertar a los usuarios.
Problemas de identificación y ayuda, pues la página de inicio carece de un eslogan que ayude a diferenciar esta caja del resto, no incluye enlaces con información de contacto ni acerca de la empresa.
Problemas de legibilidad pues el tamaño de letra es demasiado pequeño y el contraste con el fondo insuficiente.
Además, los enlaces no son estándar, lo que podría ser una dificultad añadida para la navegación.
En cuanto a recomendaciones basadas en la observación personal recomendaríamos disminuir el tamaño del anuncio que aparece en el centro de la pantalla y procurar que no fuera un gráfico animado ni basado en tecnología Flash. Distrae excesivamente la atención del resto de contenidos y tiene un aspecto demasiado similar a la publicidad típica, que el usuario mediotiende a descartar casi inconscientemente, precisamente por identificarlo como publicidad.
Recomendaciones de rediseño para lacaixa.es
Grado de cumplimiento de indicadores de usabilidad: 74.5%
Accesibilidad:
Con la herramienta de revisón atumática HERA en la página principal se detectan 10 problemas de accesibilidad
Prioridad 1:
- Scripts: Se utilizan eventos dependientes del dispositivo y no existen eventos redundantes.
Incluye diversos scripts (javascript) que podrían comprometer la Accesibilidad de la página en determinadas circunstancias. Debería revisarse
si es realmente necesario usar dicha tecnología y, en cualquier caso, tratar de ofrecer una alternativa accesible que realice la misma función.
Prioridad 2:
- DTD: La página NO es válido. (p.e. hay tablas sin cerrar con </table>")
- CSS: El código de las hojas de estilo contiene errores (p.e. #right
.menu-01 h5 a:hover, #right .bloc h2 a:hover ). - Elementos de presentación: Se utilizan 6 elementos HTML para controlar la presentación. (p.e. <b>)
- Propiedades de presentación: Se utilizan 8 atributos HTML para controlar la presentación. (P.e. <font color="#003399">. La presentación debe controlarse desde la CSS)
- Unidades absolutas en CSS: Se detectaron unidades absolutas (in|cm|mm|pt|pc) o tamaños de fuente definidos en px en los valores de las hojas de estilo. (Los tamaños de los tipos de letra deberían indicarse en unidades de medida escalables, como .em ó %)
- Manejadores de evento: Se utilizan eventos dependientes del dispositivo y no existen eventos redundantes.
- Manejadores de evento: Se utilizan eventos dependientes del dispositivo (<body onload="parsea_url();"> Los eventos deben ser independientes del dispositivo y ofrecer una redundancia para los casos en los que no se pueda activar).
- Elementos obsoletos: Se utilizan 4 elementos obsoletos en HTML 4.01. (p.e. <font color="#ffcc66">. El color debe darse desde la CSS)
- Atributos obsoletos: Se utilizan 8 atributos obsoletos en HTML 4.01. (p.e. <img src="***.jpg" alt="***" border="0"> en lugar de gestionar el borde desde la CSS y cerrar la etiqueta con "/>")
Prioridad 3:
- Resúmenes de las tablas: Hay 2 tablas y 1 contienen el atributo "summary" pero no son tablas de datos (ninguna tiene celdas de encabezado). (p.e. <table cellspacing="0" id="p-05" summary="">)
- Atajos de teclado: No se proporcionan atajos de teclado (se deberían proporcionar atajos de teclado para los enlaces y apartados más importantes de la página mediante el atributo "accesskey")
No supera ninguno de los niveles de Prioridad de Accesibilidad al contenido. Recomendamos que se realice un seguimiento de los puntos de verificación de accesibilidad para garantizar, al menos, el nivel de cumplimiento AA.
Usabilidad:
La institución presenta algunos problemas de identificación.
Aunque el nombre de la marca es ampliamente conocido, en la página web no se hace una buena identificación del elemento diferencial de esta caja respecto a las demás. Un buen eslogan podría aclarar dicho aspecto.
Tampoco es adecuado el Título (<title>) que se limita a reproducir el nombre del dominio. Algo similar pasa con la coherencia de diseño. Las páginas secundarias sólo mantienen el encabezado como elemento común. El resto del diseño varía sustancialmente, tanto como para exigir al usuario un esfuerzo adicional para cerciorarse de que sigue dentro del mismo sitio web.
Otras dificultades al acceso al contenido consisten en que:
- Se ofrece una página de inicio, únicamente para elegir el idioma. Debería elegirse un idioma como principal y desde la página principal ofrecer claramente enlaces al resto de idiomas disponibles.
- También debería evitarse que la página redireccionara automáticamente al entrar en ella, ello puede desconcertar a los usuarios.
- No se ofrece una página de ayuda.
En cuanto a recomendaciones basadas en la observación personal recomendaríamos disminuir el tamaño del anuncio que aparece en el centro de la pantalla. Distrae excesivamente la atención del resto de contenidos y tiene un aspecto demasiado similar a la publicidad típica, que el usuario medio tiende a descartar casi inconscientemente, precisamente por identificarlo como publicidad.
Comparativa cajamadrid.es vs lacaixa.es
En líneas generales da la sensación de que los desarrolladores de lacaixa.es se han preocupado más por los problemas de usabilidad, mientras que los de cajamadrid.es se han centrado sobre todo en algunos aspectos relacionados con la accesibilidad.
No obstante, ninguno de los dos consigue un alto nivel en términos de experiencia de usuario.
Así, las mejoras de accesibilidad que aporta cajamadrid.es posiblemente mejoren la experiencia de usuario de personas ciegas o que utilicen un navegador de texto. Sin embargo, descuidan aspectos que sí son sensibles para los usuarios sin problemas de visión, tales como utilizar un tamaño de letra demasiado pequeño o poco contraste entre el texto y el fondo o utilizar menús desplegables.
lacaixa.es, en cambio, parece haber cuidado ciertos aspectos de usabilidad, como proporcionar un tamaño de texto aceptable, subrayar los vínculos, ofrecer un buscador, etc. pero ha descuidado algunos aspectos de accesibilidad, quizá los menos perceptibles, relacionados con la adecuada gesión del código html o la creación expresa de ayudas de accesibilidad (p.e. atajos
de teclado).
La utilización de ayudas cuantitativas, pese a su imperfección, también refuerza la idea anterioremente expuesta. Así, al someter ambos sitios web a nuestra heurística observamos que lacaixa.es cumple el 74.5 % de los criterios de usabilidad, mientras que cajamadrid.es sólo cumple el 54%.
Si utilizamos la herramienta automática Examinator obtenemos que la página principal de cajamadrid.es obtiene una puntuación de 7.2 (sobre 10) y lacaixa.es de 5.7.
Es decir, mientras que una cajamadrid.es ofrece mejores resultados en un aspecto lacaixa.es lo hace en otro.
Si convertimos los porcentajes de usabilidad en una nota de 0 a 10 y sacamos medias de accesibilidad y usabilidad obtenemos que lacaixa.es obtiene una media de 6.57 y cajamadrid.es de 6.3, lo que significaría un empate técnico.
Por supuesto, debemos dejar claro de nuevo que esta última comparativa deberíamos tomarla como una aproximación, casi anecdótica, más que como un experimento o cálculo riguroso.
Falla el enlace al documento excel heuristica.xls.
Estimado Juan Carlos, ante todo enhorabuena por este ejercicio y por comàrtirlo con todos, no esd e gran ayuda a los que queremos aprender sobre esto.
He estado revisando la documentación del ejercicio, en concreto el informe de “La Caixa”, y hay algunos puntos que no me quedan claros. Te los expongo para que aclares si se trata de errores tuyos en el informe o míos en la comprensión del mismo:
- Indicador “Anchura de la página”: das 2 puntos cuando debería ser 0 segun lo dicho en “Metodología”, ya que es necesaria usar la barra de desplazamiento (son dos pantallazos) y el diseño no es líquido
- Indicador “Normas de privacidad”. Dices que no existe tal enlace y sí existe (por duplicado, pues tanto “Aviso legal” abajo como “Seguridad” arriba llevan a esa información) Otra cosa es que el rótulo no sea el más indicado, pero eso es el siguiente indicador.
- Indicador “Ayuda”. Esto no me queda claro ¿cuándo decimos que el sitio es complejo y necesita ayuda? ¿este lo es? ¿por qué? Y si el sitio no es complejo y por tanto no hay ayuda (esto no está contemplado en “metodología”) ¿qué pasa entonces? ¿2 puntos?
- Indicador “Color de los enlaces” (visitados y no visitados) Se cumple en las páginas secundarias, pero no en la página principal ¿es correcto entonces otorgarle esa puntuación?
- Indicador “Tablas” Eso de que no se usan tablas para maquetar… Claro que las usa, mucho…
Espero tus observaciones. Y, sobre todo, muchas gracias por tus artículos y ejercicios, que nos ayudan a aprender un montón.
Un saludo
Bueno, hay un poco de todo, algún despiste mío y algunas cosas que son interpretables. Veamos:
Indicador “Anchura de la página”:
En realidad puntúo mal, pero debería ser un 1, no un 0, pues la propuesta era dar al menos un punto si a 800 se vería bien, y otro más si era líquido, pero no es líquido.
Normas de privacidad. Le doy un 0, pero quizá la nota sería un 0,5, pero no más, pues esas normas de privacidad que buscamos son las que se refieren a la privacidad de los datos del cliente, no los de los contenidos de la página web (propiedad del banco). Los primeros cuatro párrafos hablan del propio banco. Sólo a partir del quinto párrafo hablan de los datos del usuario, y lo hacen con lenguaje de abogados, que es de poca ayuda al usuario que quiere quedarse tranquilo de que sus datos están a salvo.
Ayuda. Es complejo decidir cúando un sitio es complejo
Yo a este lo calificaría de complejo, pero como dices, quizás habría que pensar una forma de delimitar donde empieza lo complejo. Y el 0 es porque no la ví, la verdad. En principio es error mío, pero ahora que he mirado con más detenimiento veo que está arriba, en un gris claro y con un tamaño de letra 8 o así. Vamos, que hay que tener buena vista y casi casi es como si no estuviera. Elige lo que quieras, un fallo mío por no verlo, o de ellos por no dejarme verlo.
Color de los enlaces. En el momento que no lo cumplía en la principal no seguí mirando más allá. En casos similares yo le doy mucha más importancia a lo que pase en la principal. Es decir, si en otra ocasión sí son de color distinto en la principal y no en las secundarias lo mismo hasta se le podría dar un puntico y todo, pero así como está me da pereza.
Lo de las tablas sí que es total metedura de pata mía. Miré el código vi bastantes divs y tal pero no ví las etiquetas de tabla que, dentro de lo que cabe, no usan tantas como en otros sitios, de hecho no las ví en un vistazo rápido. Ahí sí, fallo mío del todo.
Salu2
Chapeau! Muy buen ejercicio y muy buen resumen.
Felicidades!
“…aunque al criticado no suele gustarle que le critiquen ni arreglar nada de lo criticado.”
A mi personalmente, y sin ningún tipo de acritud, me parece bastante hipócrita que un sitio que se jacta de erudito en el tema de la accesibilidad, no tenga mejor ocurrencia que falicitar datos en dos formatos propietarios como son .doc y .xls, y más teniendo en cuenta que el 3 de mayo se aprobó el formato OpenDocument como estándar ISO (ISO/IEC 26300). Confío en que nos os gustará ni lo vais a arreglar.
Marc, como sabes, las herramientas de OpenOffice manejan a la perfección sus formatos, y los de Bill Gates, pero las herramientas de Bill Gates no hacen lo propio con las otras.
Lo que aquí ofrezco es un documento de trabajo de un curso (allí puse tb versión .odt precisamente por lo que dices), pero de momento, puestos a elegir sólo uno de ellos, de momento pongo los que se abren bien en ambos sitios. Además, aviso de ello. Además, es un documento secundario para los fines del post en el que salen.
En conclusión, aunque no es la solución perfecta, no es mala solución. Si me haces una generosa donación dineraria podré tener más tiempo libre y perfeccionar ese tipo de detalles. Avisa y te paso el número de cuenta.
No obstante, luego te pongo las versiones Open que puse en el curso. Espero no saturar con tanto enlace.
Algunos matices sobre los comentarios de accesibilidad de los dos portales
CSS
En la Caixa
#right .bloc h2 a:hover
¿Por qué está mal el siguiente selector? ¿Acaso no se puede definir una clase bloc? Esto no tiene nada que ver con un “display:block” mal escrito (es decir, display:bloc), que es lo que parece que se da a entender.
Unidades absolutas
Supongo que serán importante cuando afecten a las fuentes y no en otros casos (como border). Por ejemplo, en Caja Madrid se puede comprobar de manera inmediata que las fuentes escalan, de hecho hace un efecto zoom más o menos aceptable (mejor en las páginas interiores que en la de inicio). Otra cosa es las fuentes con px definidas para efectos de borde decorativos, para apuntar exclusivamente a Opera, que no necesita px, para formatos de impresión, donde creo que podemos ser un poco más laxos (¿alguien sabe como manipular el tamaño de la fuente antes de imprimir?) o para handhelds.
Javascript.
¿Por qué prohibirlo? Por qué no es accesible algo como
Meto el comentario de nuevo porque parece que al poner codigo html para explicarme (etiquetas a) se ha cortado:
Algunos matices sobre los comentarios de accesibilidad de los dos portales
CSS
En la Caixa
#right .bloc h2 a:hover
¿Por qué está mal el siguiente selector? ¿Acaso no se puede definir una clase bloc? Esto no tiene nada que ver con un “display:block” mal escrito (es decir, display:bloc), que es lo que parece que se da a entender.
Unidades absolutas
Supongo que serán importante cuando afecten a las fuentes y no en otros casos (como border). Por ejemplo, en Caja Madrid se puede comprobar de manera inmediata que las fuentes escalan, de hecho hace un efecto zoom más o menos aceptable (mejor en las páginas interiores que en la de inicio). Otra cosa es las fuentes con px definidas para efectos de borde decorativos, para apuntar exclusivamente a Opera, que no necesita px, para formatos de impresión, donde creo que podemos ser un poco más laxos (¿alguien sabe como manipular el tamaño de la fuente antes de imprimir?) o para handhelds.
Javascript.
¿Por qué prohibirlo? Por qué no es accesible algo como
<a href=”miurl” onclick=”abremipopup(’miurl’); return false” …
Con javascript desactivado se puede acceder a la url, perfectamente, proporcionandose una alternativa equivalente.
Otra cosas es que hubiesen puesto lo siguiente (mucho más común, por otra parte):
<a href=”#” onclick=”abremipopup(’miurl’); return false” …
Manejadores de evento
Con onClick y onKeyPress se controlan los eventos de cualquier tipo de dispositivo. No entiendo bien esta objeción.
Además, no entiendo como el onload de la Caixa se dice que es un manejador dependiente del dispositivo. El onClick, lo entiendo, pues puede que no tengas ratón, y lo mismo con el onKeyPress, al utilizar el ratón. Pero el ¿onload? Además, mirando el javascript de parsea_url parece que se utiliza para añadir un conjunto parámetros a las urls de los enlaces de las páginas que no tienen ningún efecto en la navegación. Yo diría que su utilidad debe ser funciones de medición de que enlaces se utilizan realmente en la web.
Perdón por el ladrillo
Creo que es en la critica de cajamadrid que dices
“Se ofrece una página de inicio, únicamente para elegir el idioma. Debería elegirse un idioma como principal y desde la página principal ofrecer claramente enlaces al resto de idiomas disponibles.”
Aquí mi gran duda: Si tuvieramos por ejemplo 6 idiomas más como sería la manera correcta de hacerlo.
1. En la version por defecto ES poner “Idiomas”
P: Un aleman entiende que significa “Idiomas”
2. ¿Banderitas?
P: ¿No pareceria una convencion de la ONU?
3. “WorldWide” o “Global Sites” como utilizan microsoft, apple, symantec,…
P: Aunque no sean sitios especificos para el pais si no un simple cambio de idioma
4. Como Texto abajo de la web estilo “Español - English - Deutsch - Français - Italiano”.
P: Teniendo el riego de que el usuario no lo vea
5. Poner “Lenguages” en inglés con la escusa todo el mundo sabe que es.
P: ¿o no?
6. Otras y bienvenidas propuestas
Gracias