Estado De La Experiencia De Usuario De Las Principales Webs De Banca En España

BENCHMARK 2020 Estado de la experiencia de usuario de las principales webs de banca en España.

3 20 Sobre Teacup Menú y navegación

4 26 Introducción Página de producto

7 30 El reto Funnel de conversión

8 35 Metodología Diseño de formularios

9 39 Resumen de resultados Aspectos generales

11 43 Buenas prácticas Conclusiones

15 Homepage

-2

Sobre TeaCup Lab

Curious by nature.

TeaCup Lab es un estudio de UX Research e Innovación con sede en Madrid.

Desde su creación en 2016, nuestro equipo de expertos ha ayudado a marcas globales y startups a diseñar mejores experiencias a través de la investigación con usuarios, Design Sprints y auditorías de usabilidad.

En TeaCup Lab buscamos entender el “porqué” de cada actitud, opinión y comportamiento. Sólo si conocemos a nuestros usuarios podremos tomar decisiones informadas y fundamentadas en insights reales.

Ayudamos a empresas como:

-3

Foto de Nick Pampoukidis en Unsplash

Sector Bancos

País España

Fecha Octubre- Noviembre 2020

En el mundo actual el uso del teléfono móvil ha pasado a primer plano y las empresas, en general, están repensando sus estrategias digitales para ocupar este escenario. La industria ﬁnanciera también y prueba de ello es que la mayoría de los bancos han desarrollado ya aplicaciones y servicios bancarios online para poder competir en el mundo móvil.

Según datos de Forrester, empresa independiente de investigación de mercados, actualmente más de un tercio de los adultos europeos conectados son usuarios activos de banca móvil.

Entre los Estados miembros de la Unión Europea, la banca online es más popular en Dinamarca (donde el 90% de la población entre 16 y 74 años son usuarios) y los Países Bajos (89%), seguido de cerca por otros países nórdicos como Finlandia (87%) y Suecia (86%). Aunque España está aún bastante por detrás de otras regiones europeas, casi la mitad de la población en nuestro país es ya usuaria de este tipo de servicios.

Ver la fuente original aquí.

Según el informe de Raddon Research Insights, los clientes de banca móvil realizan de promedio más transacciones bancarias que los clientes que no utilizan este canal de servicio, lo que nos indica que estos usuarios se encuentran entre los clientes más atractivos para el campo ﬁnanciero.

Así como los clientes de banca realizan cada día más operaciones a través de su móvil, también aquellos que todavía no son clientes utilizan a menudo sus dispositivos móviles para informarse y contratar nuevos productos y servicios.

La experiencia del usuario en un escenario de contratación de un producto financiero sigue siendo un desafío importante. Como seguimos detectando en nuestros proyectos de investigación con usuarios reales. La complejidad de los productos financieros, y el conocimiento parcial de los mismos provocan muy a menudo una menudo una fuerte desconfianza a la hora de contratar un producto financiero online. El uso de un dispositivo móvil, además, añade la inseguridad de no llegar a consultar toda la información disponible debido al limitado tamaño de pantalla.

-5

En este estudio hemos hecho un recorrido por los sitios web de los principales bancos españoles, explorando y analizando en detalle distintos aspectos de sus interfaces a lo largo del proceso de toma de información y contratación de uno de sus productos más básicos: una cuenta corriente. Nuestro objetivo no es destapar problemas sino más bien identiﬁcar oportunidades de mejora y destacar buenas prácticas, siempre desde un enfoque de diseño centrado en el usuario.

A continuación os contamos en qué ha consistido la metodología que hemos utilizado y presentamos un resumen de las conclusiones principales. Enseguida, encontraréis una descripción más detallada de lo que hemos observado durante el análisis.

La complejidad de los “productos financieros, y el conocimiento parcial de los mismos provocan muy a menudo una menudo una fuerte desconfianza a la hora de contratar un producto financiero online.

-6

El Reto

Analizamos 10 de los principales bancos que cuentan con una web móvil que permita para evaluar la calidad de la experiencia que ofrecen a los usuarios interesados en contratar una nueva cuenta bancaria.

Todos los bancos investigados permiten, por lo menos, empezar el proceso de contratación en su web móvil. En la gran mayoría, la apertura de la cuenta se lleva a cabo utilizando el mismo dispositivos, mientras, en algunos casos, la conversión tiene como objetivo que el usuario contacte con el banco para continuar.

-7

Metodología

El análisis consiste en una revisión de experto, basada en las recomendaciones de Google para webs del sector ﬁnanciero y nuestra propia experiencia testando con usuarios.

Como paso previo a la revisión, llevamos a cabo una ronda de testing con usuarios de banca online para validar y actualizar las pautas e integrarlas con más insights sobre el comportamiento de los consumidores.

Esto nos llevó a analizar los 10 bancos según un listado de 41 buenas prácticas o heurísticos de usabilidad.

Para la revisión de los ecommerce del sector ﬁnanciero en España se ha tomado como referencia el escenario de búsqueda, selección y compra de un producto ﬁnanciero estándar válido para cualquier género y edad: una cuenta corriente..

Los aspectos que se han tenido en cuenta para la revisión son:

● Home ● Menú y navegación ● Página de producto ● Flujo de conversión ● Diseño de formularios ● Aspectos generales de la web

Evaluamos las páginas web de 10 bancos según 41 buenas prácticas o heurísticos de usabilidad.

NOTA: la revisión se ha llevado a cabo en distintos dispositivos y navegadores, durante los meses de octubre y noviembre de 2020. Es posible que algunos aspectos analizados hayan cambiado desdeFoto deel momentoMel Poole en deUnsplash la revisión.

-8

Resumen de resultados

Siguiendo los criterios determinados como buenas prácticas, analizamos las distintas partes del funnel de compra en cada web para entender los puntos fuertes y aquellos que se podrían mejorar en cuanto a criterios de usabilidad.

En este análisis, nos encontramos con que la mayoría de las webs destacan positivamente en su homepage y en su página producto, en las que no hemos observado incidencias graves ni grandes oportunidades de mejora.

Por el contrario, la parte que menos puntuación ha recibido en casi todas las webs es la correspondiente al ﬂujo de conversión, que en general tienen un amplio camino que recorrer para tornar el proceso más sencillo y eﬁciente.

Caixa Open- BBVA ING Santander Bankia Bankinter Cajamar EVO Abanca bank Bank

Homepage 100% 100% 75% 50% 75% 75% 75% 50% 75% 75%

Menú y 50% 100% 67% 83% 50% 67% 50% 67% 83% 50% navegación

Productos 83% 100% 67% 83% 100% 67% 100% 50% 83% 100%

Conversión 66% 56% 33% 67% 67% 78% 56% 57% 89% 56%

Diseño de 100% 50% 38% 88% 100% 75% 75% 88% 75% 63% formularios Aspectos 88% 75% 25% 75% 88% 63% 88% 75% 63% 88% generales TOTAL 80% 76% 46% 76% 80% 71% 73% 66% 78% 71%

-9

BBVA y Bankinter destacan como los bancos con mejor puntuación tras nuestro análisis.

Bankinter y BBVA son los bancos que han obtenido mejor puntuación. Ambos destacan principalmente por el uso y la optimización que hacen de sus formularios, cumpliendo todas las pautas recomendadas para este elemento de la interfaz.

Por el contrario, el banco donde hemos identificado más oportunidades de mejora es el Banco Santander, donde hemos encontrado problemas significativos en varios aspectos, y en especial, en su flujo de conversión.

También existe un margen de mejora importante en las webs de La Caixa y Cajamar.

-10

Buenas Prácticas

Homepage

1. Se muestra un Call To Action claro sobre la línea de scroll.

2. Se enseña una propuesta de valor clara por encima de la línea de scroll.

3. Se muestran las principales categorías de producto en la página de inicio.

4. No se utilizan carruseles automáticos.

Menú y navegación

5. Se muestran las categorías principales del menú sin hacer scroll.

6. Si existen muchos productos, se incluye un buscador.

7. El buscador cuenta con autocompletado, muestra el número de resultados y cuenta con ﬁltros fáciles de encontrar y utilizar.

8. El buscador ofrece resultados relevantes o sugerencias, como por ejemplo lo más buscado.

La agrupación de los contenidos dentro del menú es clara y estos están 9. priorizados adecuadamente.

En las páginas de categorías es fácil ver de un vistazo la oferta de 10. productos.

-11

Buenas Prácticas

Página de producto

11. Se muestra un Call to Action claro sin hacer scroll.

Se presenta la información del producto siguiendo una estructura 12. lógica y consistente para facilitar la comprensión. Se utilizan encabezados, listas, negritas y iconos para formatear el 13. texto y facilitar el escaneo de la información.

Se proporciona un acceso fácil de encontrar a los términos y 14. condiciones completos del producto.

La información de los productos se presenta de manera consistente 15. en todos los productos para favorecer su comparación.

Las condiciones principales del producto y las eventuales comisiones 16. son visibles y fáciles de encontrar.

Funnel de conversión

17. Se repite una propuesta de valor clara durante todo el proceso.

Se permite cualquier tipo de contacto (llamadas, chat, etc) dando la 18. posibilidad de soporte en tiempo real durante todo el funnel. Se utiliza barra de indicación de proceso para señalar al usuario en 19. qué momento del proceso se encuentra.

Puntos de salida limitados a atención al cliente o aclaraciones sobre 20. el producto.

21. Los Call to Action son descriptivos.

22. Se permite una conversión multidispositivo y multicanal .

Se explica claramente al usuario cuáles son los pasos para ﬁnalizar la 23. contratación.

Se proporciona una forma digital ágil para proporcionar la 24. documentación necesaria.

Se proporciona la posibilidad de que la contratación se haga 25. completamente online.

-12

Buenas Prácticas

Diseño de formularios

26. Se usa validación instantánea de los campos.

27. Los formularios están correctamente conﬁgurados por el autocompletado de los campos.

28. Se utiliza un número reducido de campos.

29. Se especiﬁca claramente por qué se pide la información y los beneﬁcios para el usuario en aquellos campos donde la información no es obvia.

30. Se usa el input adecuado a cada tipo de dato que se pide en el campo.

31. Se enseña el teclado adecuado al tipo de dato que insertar.

32. Se da la posibilidad al usuario de moverse con libertad entre las distintas páginas del formulario sin perder la información ya cumplimentada.

33. Se enseñan de manera clara los mensajes de error y se proporciona ayuda sobre cómo solucionarlos.

-13

Buenas Prácticas

Aspectos generales

34. Los elementos clicables tienen un tamaño y contraste adecuado.

35. Se evidencia la seguridad del sitio.

36. Se utilizan fuentes legibles y botones suﬁcientemente grandes.

37. Se permite llamar a los números de contacto con un clic.

38. Los iconos van acompañados de un literal (excepto para búsqueda).

39 Se proporciona feedback visual al usuario para indicar el estado de la acción que ha realizado (barra de carga, etc,).

40. Las imágenes y vídeos son de buena calidad.

41. Se proporciona una sección de ayuda.

-14

Los propósitos principales de la home de una web de banca tienen que ser proporcionar una visión completa de los productos disponibles, facilitar la navegación hacia ellos y enseñar las ventajas de contratarlos

-15

Homepage

En esta sección revisamos las siguientes pautas: ● Se muestra un Call to action claro sobre la línea de scroll.

● Se enseña una propuesta de valor clara por encima de la línea de scroll. ● Se muestran las principales categorías de producto en la página de

inicio. ● No se utilizan carruseles automáticos.

La homepage es un componente de comunicación clave de cualquier sitio web. En muchas ocasiones, se trata de la primera mirada que el usuario tendrá sobre un producto o servicio, y por lo tanto, es fundamental para captar y mantener la atención de la persona. Este contacto inicial suele ser decisivo, ya sea para atraer o para alejar a los usuarios del sitio en cuestión. Esto es especialmente relevante en el entorno mediático actual, donde el volumen de información es enorme y está en continua transformación.

Uno de los elementos más importantes de la homepage son las llamadas La homepage debe CTA (Calls to action). Se trata de elementos que comunicar la identidad de la indican al usuario de una marca y también informar manera clara y sencilla cuáles son los productos y sobre el contenido de la las ofertas más relevantes web, las categorías del sitio web y estimulan a la persona a iniciar el principales y qué tipo de proceso de adquisición o acciones es posible realizar compra; en el caso que nos ocupa, sería, por ejemplo, la en ella. contratación de una cuenta con el banco en cuestión.

Además de esto, la homepage debe responder rápidamente a la pregunta "¿Por qué debería estar aquí?". Es lo que se llama la propuesta de valor, con la que se presentan los beneﬁcios del producto o servicio ofertados de una forma directa y clara.

-16

Por ser una página clave del sitio web, en general todos los bancos analizados para este estudio atendían ambos criterios: CTA claros y una propuesta de valor visible desde el inicio.

Por ejemplo, en la homepage de BBVA es posible captar de un solo vistazo el beneﬁcio de abrirte una cuenta con ellos, que es la ausencia de comisiones. En el caso de ING, se trata de la contratación de una hipoteca, mediante un proceso totalmente online y con un gestor personalizado a disposición del usuario.

Las homepage de ING y BBVA muestran su propuesta de valor de manera clara y directa.

-17

Aunque en general los sitios webs permiten realizar varias acciones, es recomendable limitarse a un único CTA en la homepage en el área visible de la pantalla. En caso de tener más de un CTA, es importante que estén priorizados de forma adecuada para permitir que el usuario enfoque su atención en una opción concreta -que normalmente es la más relevante o aquella en la que la empresa desea poner el énfasis en ese determinado momento.

Cuando el usuario se encuentra ya desde la página de inicio con varios CTA es más fácil que se genere una cierta confusión y la persona pierda el foco.

En la homepage de Caixabank encontramos tres CTA diferentes.

-18

Otro aspecto importante de la homepage es facilitar la navegación entre las categorías más destacadas, en particular si se ofrecen muchos productos. Por ejemplo, el site de ING muestra en la homepage diferentes productos y servicios asociados al banco y te permite diferenciarlos y navegar por ellos de una manera clara.

La homepage de ING presenta servicios diferentes categorizados de una forma clara.

-19

Nos centramos en valorar la organización del contenido y los recursos a disposición de los usuarios a la hora de navegar en la página web de un banco.

-20

Menú y navegación

En esta sección revisamos las siguientes pautas: ● Se muestran las categorías principales del menú sin hacer scroll. ● Si existen muchos productos, se incluye un buscador. ● El buscador cuenta con autocompletado, muestra el número de resultados y cuenta con ﬁltros fáciles de encontrar y utilizar. ● El buscador ofrece resultados relevantes o sugerencias, como por ejemplo lo más buscado. ● La agrupación de los contenidos dentro del menú es clara y estos están priorizados adecuadamente. ● En las páginas de categorías es fácil ver de un vistazo la oferta de productos.

El menú y las categorías de productos son elementos indispensables para una buena arquitectura de la información de cualquier web.

Tras realizar el análisis de las distintas webs ﬁnancieras hemos observado cómo el reducido número de productos que podrían existir en estas sites, incentiva el uso de la navegación, en vez de hacer un uso inicial de la búsqueda por parte de los usuarios.

Por este motivo, la manera en la que están organizados los contenidos y su clasiﬁcación en el menú es muy importante para que el usuarios con un sólo vistazo, identiﬁquen y reconozcan los productos que ofrece tendiendo a continuar con el proceso y estar más satisfechos.

La estructura del menú debe ser simple y clara para que los usuarios

no tengan problema en escanear Una buena agrupación la información que se presenta.

Por ello, es necesario que los y estructuración de los conceptos que se utilizan conceptos impacta compartan el mismo lenguaje de los usuarios para así no causar positivamente en el

confusión. proceso de búsqueda.

Por otro lado, los contenidos deben mantener una estructura lógica en cuanto a la agrupación de los mismos, utilizando así categorías y subcategorías con las que los usuarios estén familiarizados, para poder reconocerlos fácilmente durante la navegación.

En este análisis hemos visto como la mayoría de las webs móviles de los bancos utilizan una estructura y un lenguaje accesible y claro.

Como muestra de un ejemplo de mejora, la web de La Caixa cuenta con un menú en el que se utiliza una terminología más cercana al marketing. El uso de conceptos como “Mi día a día” o “Dormir tranquilo” no reﬂejan el contenido que se encuentra en estas categorías de una forma clara y directa, lo que puede suscitar en los usuarios confusión debido a una interpretación errónea por la subjetividad de los mismos. Durante los test de usuarios realizados para el estudio, se ha podido ver como estos términos diﬁcultan la navegación.

En el menú principal propuesto por La Caixa se utiliza terminología poco clara que puede generar confusión en el usuario, pudiendo ser más sencillos y directos.

-22

Por el contrario, Bankia destaca positivamente debido a la utilización de una terminología clara y un orden sencillo en la presentación de las categorías de productos y servicios.

Además, incluye un buscador dentro del menú que ayuda al usuario en caso de realizar la búsqueda de una forma más activa.

El menú de Bankia es un buen ejemplo de sencillez y organización de conceptos y categorías, fácil de entender para cualquier usuario. Además de incluir un buscador dentro del menú.

Para que los usuarios puedan identiﬁcar cuáles son los productos y servicios principales del banco online en el que están navegando, es importante que las categorías principales del menú se vean sin la necesidad de hacer scroll.

Cabe destacar que todos los bancos que han sido analizados cumplen con esta buena práctica ya que en todos sus menús se pueden identiﬁcar las categorías de un sólo vistazo.

-23

Un buen ejemplo es ING ya que destaca por la simpleza en la categorización de su menú donde todos los productos, servicios e información relevante se muestra sin necesidad de hacer scroll.

ING destaca por su simpleza y concreción en los términos lo que hace que se puedan ver todos los productos sin necesidad de hacer scroll.

-24

En el caso de BBVA, la lista de términos utilizados en el menú es más amplía, obligando a los usuarios a hacer scroll para así poder ver todos los productos y servicios que ofrecen.

Aún contando con este pequeño margen de mejora, el BBVA prioriza los servicios que se muestran antes de la línea de scroll mostrando aquellos más relevantes, además de utilizar términos simples que ayudan al usuario a escanear la información rápidamente.

El menú de BBVA propone una lista de productos más larga en la que es necesario hacer Scroll. La web resuelve esto priorizando los productos y servicios más importantes mostrándolos por encima de la línea de scroll.

-25

Comprobamos que la página de producto permite que los usuarios encuentren toda la información que puedan necesitar de forma rápida, fácil y ordenada para tomar la decisión de contratación. Revisamos que todas las variantes del producto (condiciones, comisiones, etc.) son claras y fácilmente identiﬁcables.

-26

Ficha de producto

En esta sección revisamos las siguientes pautas: ● Se muestra un Call to Action claro sin hacer scroll. ● Se presenta la información del producto siguiendo una estructura lógica y consistente para facilitar la comprensión. ● Se utilizan encabezados, listas, negritas y iconos para formatear el texto y facilitar el escaneo de la información. ● Se proporciona un acceso fácil de encontrar a los términos y condiciones completos del producto. ● La información de los productos se presenta de manera consistente en todos los productos para favorecer su comparación. ● Las condiciones principales del producto y las eventuales comisiones son visibles y fáciles de encontrar.

En la gran mayoría de las páginas web de cualquier sector, la página de producto es habitualmente el lugar dónde los visitantes toman la decisión de continuar con la compra del mismo.

Esto es especialmente cierto en el caso de los productos ﬁnancieros, donde los detalles de las condiciones, la conﬁanza generada en el consumidor y la letra pequeña cobran mucha importancia.

La contratación de una cuenta corriente es el resultado de una decisión meditada y nunca impulsiva. Por esta razón, en nuestra revisión hemos hecho especial hincapié no solo en la información que se proporciona a los potenciales clientes sino también en la manera en la que esta se está presentando. Consideramos especialmente importante que las características de las cuentas sean destacadas de manera apropiada y que la estructura de la página facilite el escaneado de la información además de la comparación con otros productos similares.

En este sentido, la mayoría de las páginas revisadas hacen una buena labor aunque algunas son susceptibles de mejorar su estructura.

EVO y bankia por ejemplo, presentan una ﬁcha de producto sencilla y bien estructurada, aunque EVO no proporciona un acceso a las condiciones completas de la cuenta.

La información que se da en la página de producto de Bankia y EVO Banco es clara y sencilla.

-28

Para que una página de una cuenta corriente proporcione una buena experiencia de usuario, sea útil para sus visitantes y favorezca la conversión, recomendamos que la información relacionada con las comisiones de la cuenta se presente de manera clara y prominente.

De nuevo, la mayoría de las webs revisadas cumple con esta pauta, aunque en algunas de ellas observamos márgenes de mejora.

La web de Cajamar es la única que falla en esta pauta. La información sobre el producto es escasa y no se indican los detalles acerca de las comisiones, forzando al usuario a descargar el documento informativo o a contactar el banco a través de un formulario.

Aunque ambos métodos permiten acceder a la información deseada, consideramos que se está pidiendo al usuario realizar un esfuerzo extra para obtener información básica que debería estar disponible de un vistazo.

La necesidad de rellenar un formulario es una barrera importante para la conversión. El usuario debería ser libre de evaluar el producto sin necesidad de proporcionar sus datos (entre los que se encuentra, de manera probablemente innecesaria e injustiﬁcada, su DNI) o empezar una conversación con un comercial del banco.

Cajamar proporciona muy poca información acerca de su producto, obligando a un potencial cliente a descargar un PDF o a contactar con el banco para saber más.

-29

Analizamos los puntos clave del proceso de contratación de una cuenta online. Comprobamos que, una vez se selecciona el producto, el usuario puede elegir si quiere comenzar el proceso de contratación. Revisamos si las condiciones de la cuenta y los pasos del proceso están claros, así como si se permite retomar el proceso en otro momento y desde diferentes dispositivos.

-30

Conversión

En esta sección revisamos las siguientes pautas: ● Se repite una propuesta de valor clara durante todo el proceso. ● Si las llamadas son importantes, se da la posibilidad de soporte en tiempo real en todo momento del funnel. ● Se utiliza una guía para el usuario indicando en qué momento del proceso se encuentra. ● Puntos de salida limitados a atención al cliente o aclaraciones sobre el producto. ● Los Call to Action son descriptivos. ● Se permite una conversión multidispositivo y multicanal. ● Se explica claramente al usuario cuáles son los pasos para ﬁnalizar la contratación. ● Se proporciona una forma digital ágil para proporcionar la documentación necesaria. ● Se proporciona la posibilidad de que la contratación se haga completamente online.

Dentro del diseño web, la conversión se refiere a la consecución del objetivo que quieres que los usuarios realicen. El flujo de conversión son, entonces, los pasos necesarios para alcanzar ese objetivo. Se trata de una parte fundamental del diseño web porque esa conversión genera, de forma más o menos directa, un beneficio para el negocio. En el escenario que hemos analizado, la finalización con éxito del flujo de conversión se traducirá en nuevos clientes de una cuenta en el banco en cuestión.

Existen varias pautas para tornar este proceso más eficiente. El punto de partida debe ser siempre un Call to Action claro y descriptivo y una propuesta de valor que transmita claramente el beneficio para los usuarios. Este mensaje debe, no sólo incitar a las personas a iniciar la conversión, sino que debe estimularles a seguir el proceso hasta el final.

Puesto que estos ﬂujos habitualmente involucran una secuencia de pasos más o menos larga, una práctica muy recomendable es utilizar guías visuales para que el usuario sepa en todo momento en qué paso del proceso se encuentra. Esto suele hacerse o bien con una barra de progreso que va cambiando conforme se avanza en el ﬂujo, o con una indicación del porcentaje de lo que ya se ha realizado.

Por ejemplo, tanto en la página de BBVA como de ING desde el primer momento en que iniciamos el proceso para abrir una cuenta ya sabemos cuántos pasos nos va a llevar y el punto en el que nos encontramos.

Tanto BBVA como ING ofrecen una guía para indicar al usuario en qué momento del proceso se encuentra.

Otra cuestión interesante es dar facilidades de soporte en tiempo real en cualquier punto a lo largo del flujo. Es recomendable permitir llamadas en vez de otros tipos de soporte como FAQs o chatbots, debido a la complejidad de las dudas posibles y a lo sensible de la temática. Dado que es una parte tan importante dentro del sitio web, y que el éxito del flujo impactará directamente en los beneficios del negocio, es crucial tener un especial cuidado con la experiencia de los usuarios; perderlos en este momento significa que no habremos conseguido el objetivo previsto.

-32

Algunas webs analizadas, como ING, muestran una opción clara de contacto en el menú, pero esta información no aparece en el flujo de contratación, lo que dificulta el soporte en caso de que el usuario lo necesite. Cuando la persona experimenta un problema a lo largo del flujo, ser capaz de darle un soporte eficaz y rápido en ese instante suele ser decisivo para el éxito o no de la conversión.

La información de contacto en la website de ING aparece fuera del ﬂujo de conversión, pero no durante el proceso de conversión, lo que diﬁculta el soporte en tiempo real.

Un aspecto en el que hemos encontrado claras opciones de mejoría por la mayor parte de los bancos analizados es la cuestión de la conversión multicanal y multidispositivos. Nos referimos a la posibilidad de que los usuarios cambien o alternen de dispositivo durante el proceso de conversión.

-33

Sabemos que hoy en día la mayor parte de los usuarios utilizan múltiples dispositivos para conectarse a internet, y se ha comprobado que en muchos casos los usuarios empiezan y terminan un proceso de compra utilizando dispositivos diferentes. Sin embargo la mayoría de los ejemplos que hemos analizado, no tienen esto en consideración y no permiten guardar los datos y continuar el ﬂujo desde otro dispositivo. No obstante, hay algunas excepciones, como por ejemplo CaixaBank, que te permite guardar una solicitud en curso y acceder a ella desde cualquier canal desde un enlace enviado a tu e-mail personal.

CaixaBank nos permite empezar y terminar el proceso de contratación en momentos y dispositivos diferentes.

-34

Comprobamos que los formularios de registro contienen solo los campos necesarios para la contratación de la cuenta, que resulta fácil introducir los datos y devuelven mensajes de error que guían y facilitan la tarea al usuario.

-35

Diseño de formularios

En esta sección revisamos las siguientes pautas: ● Se usa validación instantánea de los campos. ● Los formularios están correctamente configurados por el autocompletado de los campos. ● Se utiliza un número reducido de campos. ● Se especifica claramente por qué se pide la información y los beneficios para el usuario en aquellos campos donde la información no es obvia. ● Se usa el input adecuado a cada tipo de dato que se pide en el campo. ● Se enseña el teclado adecuado al tipo de dato que insertar. ● Se da la posibilidad al usuario de moverse con libertad entre las distintas páginas del formulario sin perder la información ya cumplimentada. ● Se enseñan de manera clara los mensajes de error y se proporciona ayuda sobre cómo solucionarlos.

Los formularios son una pieza clave de la interacción entre los usuarios y las páginas web. Pese a ser un elemento muy extendido, es común encontrarse con formularios excesivamente largos o invasivos.

Cuando un formulario genera dudas, frustra o pide más de lo necesario, el riesgo de perder al usuario en el proceso de conversión es muy alto. Por eso es muy importante cuidar el diseño de los formularios para que sean claros y concisos desde el primer momento.

Entre las recomendaciones más importantes para acertar con su diseño está la de capturar el propósito del formulario en la menor cantidad de pasos posible. Cada campo adicional reduce la probabilidad de que los usuarios lleguen hasta el ﬁnal, por lo que es importante simpliﬁcarlo al máximo.

También es recomendable ser muy transparente a la hora de explicar por qué se pide la información y cuáles son los beneﬁcios para el usuario, especialmente en aquellos campos donde esto pueda generar dudas.

-36

Por ejemplo, si el usuario está rellenando un formulario para abrir una cuenta en el banco, puede no ser obvio por qué debería especiﬁcar su nivel de estudios, puesto que la relación entre las dos cosas no es del todo evidente. En casos así, es mejor o bien dejar el campo como opcional o bien explicar al usuario el propósito de pedirle esa información. Además, de esa manera se reducen las posibilidades de que el usuario cometa errores, algo que suele ser más habitual al usar el móvil; cuantos menos datos se vea obligado a introducir, menores serán las ocasiones de equivocarse.

Al rellenar el formulario para abrir una cuenta en el Banco Santander se nos pide que demos información sobre nuestro nivel de estudios, sin especiﬁcar por qué esta información es relevante en este momento.

Otra de las pautas más importantes a la hora de diseñar un formulario es asegurarse de que los datos no se pierden cuando el usuario sale del formulario o se mueve entre las diferentes páginas del mismo. Hay que tener muy presente el tiempo y el esfuerzo que estos formularios demandan por parte de los clientes y evitar siempre que sea posible obligarles a replicar acciones.

-37

En este sentido es crucial dar la posibilidad de salir o moverse por el formulario sin que se pierda la información cumplimentada. La mayor parte de los bancos analizados cumplían con este requisito.

Un buen ejemplo de ello es CaixaBank, que además de darnos la posibilidad de guardar los datos para completar el formulario en otro momento, nos avisa con un mensaje en caso de que intentemos salir de la página sin haber salvado los cambios, de manera que podemos salir o movernos por el site y retomar más tarde el formulario, sin tener que rellenar de nuevo campos ya completados.

El site de CaixaBank nos da la posibilidad de salir del formulario sin haberlo completado para retomarlo más tarde. Además refuerza esta información con una pantalla de aviso, en caso de no haber guardado los datos.

-38

Analizamos pautas que aplican a toda la web como la visibilidad de una sección de ayuda, el tamaño adecuado de los elementos clicables o que se evidencie la seguridad del sitio, siempre que sea necesario.

-39

Aspectos generales

En esta sección revisamos las siguientes pautas: ● Los elementos clicables tienen un tamaño y contraste adecuado.

● Se evidencia la seguridad del sitio. ● Se utilizan fuentes legibles y botones suﬁcientemente grandes.

● Se permite llamar a los números de contacto con un clic. ● Los iconos van acompañados de un literal (excepto para búsqueda)

● Se proporciona feedback visual al usuario para indicar el estado de la acción que ha realizado (Barra de carga, etc,)

● Las imágenes y vídeos son de buena calidad. ● Se proporciona una sección de ayuda.

Como hemos visto a lo largo de las diferentes secciones, existen pautas especíﬁcas para distintos lugares dentro de la web. En este caso nos centraremos en explicar las buenas prácticas que aplican a toda la web en su conjunto.

Las webs de bancos pueden contar con un punto elevado de complejidad para el usuario derivado de la utilización de terminología especíﬁca relacionada con las ﬁnanzas o por la importancia que toma para el usuario la necesidad de conocer todas y cada una de las características y condiciones de los productos que se quieren contratar. Por este motivo, toma una especial relevancia la visibilidad de la sección de información de contacto o ayuda a la que los usuarios acudirán en caso de duda.

Esta información tiene que estar presente para que los usuarios puedan realizar sus consultas y aclarar cualquier tipo de duda duda para así seguir con su proceso de contratación. Cabe destacar que la mayoría de las web de bancos que hemos analizado cumplen con esta pauta y cuentan con una sección de ayuda que encontramos generalmente en las páginas principales, como son la home, o el menú inicial. Existen ejemplos en los que esta sección de ayuda no está en las páginas iniciales, pero cuentan con ella en otros lugares de la web como puede ser la página de producto.

-40

Aunque muchos de ellos cumplen el criterio, existen webs en las que no hemos podido encontrar esta sección, como LaCaixa. Uno de los problemas que puede ocurrir cuando no se encuentra la sección de ayuda es el abandono de la contratación, ya que el usuario no contará con el soporte necesario para resolver sus dudas.

En otros casos, como en el Banco Santander, se utilizan herramientas como el chatbot, que reemplaza al número de teléfono convencional. Durante los test de usuario realizados para este estudio, comprobamos que algunas personas no podían resolver sus dudas con esta herramienta, porque las respuestas del chatbot no eran lo que ellos buscaban y echaban en falta un contacto telefónico u otro medio de atención más directo.

El Banco Santander nos da la posibilidad de contactar con ellos en caso de ayuda a través de un Chatbot.

-41

Entre los ejemplos analizados, destaca positivamente Bankia ya que muestra la sección de ayuda en el menú de una forma clara y de fácil acceso. Cajamar también cumple con esta pauta de manera adecuada, puesto que la sección aparece en la home de la página destacándose de forma clara dentro de la misma.

Tanto Cajamar como Bankia presentan la sección de ayuda en dos lugares principales de la web, la home y el menú, dándonos la posibilidad de contactar facilmente.

-42

-43

Conclusiones

En general hemos comprobado que el sector de la banca en España ya ha realizado una buena parte del recorrido hacia la digitalización de sus servicios de contratación de cuentas y productos.

Entre los bancos analizados hay algunos ejemplos que sobresalen, como Bankinter y BBVA, que han conseguido la puntuación más alta. En ambos casos, cabe destacar la gestión que hacen de los formularios, uno de los puntos que suele ser más problemático dentro de las páginas web en general, pese a ser una pieza clave de la interacción con los usuarios.

Les siguen de cerca las páginas de EVO Banco, ING y Bankia, que tienen un menú y navegación sencillo y una página de producto clara.

Un ejemplo donde encontramos oportunidades de mejora evidentes es el Banco Santander. Varios de los problemas encontrados tienen que ver con cuestiones de usabilidad genéricas de diseño web, tales como uso de fuentes difícilmente legibles o imágenes y videos de baja calidad. En muchos casos se trata de cuestiones que con poco esfuerzo mejorarían bastante la experiencia de los usuarios.

Foto de David Lezcano en Unsplash

-44

Foto de William Iven en Unsplash

Un aspecto en el que prácticamente todos los bancos han obtenido una puntuación baja es en el ﬂujo de conversión. Hemos comprobado que en muchos casos no se ofrece una propuesta de valor clara a lo largo del proceso, ni se da la posibilidad de soporte real, algo que suele ser muy importante en este momento por el tipo de dudas que pueden surgir y lo sensible de la información que se está solicitando.

También es muy habitual que no se facilite la conversión multidispositivos a lo largo del ﬂujo, a pesar de que es muy común que las personas empiecen y acaben el proceso de contratación desde dispositivos diferente. En este sentido, queremos destacar las páginas de Caixabank y EVO Banco, por ser los únicos que permiten retomar el ﬂujo de conversión desde canales y dispositivos diferentes.

Como es habitual, la home es el elemento más cuidado en la mayoría de las páginas web de bancos analizados. La página de producto también suele estar bien pautada y en general no hemos encontrado aquí problemas graves. No obstante, la experiencia del usuario es importante a lo largo de toda la interacción con la interfaz, especialmente cuando la interacción está dirigida a la compra o contratación de productos y servicios. En ese sentido, aún existen claras oportunidades de mejora para tornar ese proceso más sencillo y eﬁciente.

-45

En resumen, a pesar de que de forma general todas los bancos proporcionan una buena experiencia de usuario, existen puntos de mejora para optimizar aún más sus webs y ofrecer una mejor usabilidad, especialmente en la optimización de formularios y en los ﬂujos de conversión.

Esto podría generar clientes más satisfechos y mayor volumen de usuarios, tan importantes en un contexto incierto en el que los servicios digitales están cobrando cada vez más presencia.

Estudio realizado por:

Stefano Seraﬁnelli Natalia Álvarez Isabel Lafuente Laura Abad

Foto de Marcus Loke en Unsplash

-46

[email protected] +34 910 59 21 36

www.teacuplab.com

Calle de Jaén, 2. 1ºG. 28020 Madrid