ATM: mejorando el diseño y la usabilidad

Seguramente las primeras veces que hemos utilizado un ATM (cajero automático) nos ha resultado frustrante, hemos aprendido a retirar dinero, pero ¿cuántos nos hemos atrevido a realizar algunas operaciones más complejas como una recarga telefónica, comprar una entrada o pagar una cuenta?. Definitivamente la experiencia de usuario no es la mejor y necesita de forma urgente un retoque considerable.

Por ejemplo: ¿Porqué si siempre retiro la misma cantidad de dinero de la misma cuenta, no aparece esta opción como una que se pueda realizar con 1 Click? ¿Tan díficil es programar operaciones frecuentes en un ATM?

Justamente estos problemas y muchos más son los Holger Struppek nos detalla en su artículo «That design is money! A better ATM experience from Wells Fargo» (Ese diseño es dinero! una mejor experiencia en ATM desde Wells Fargo) y que vemos a continuación:

Ingresa tu PIN

Wells Fargo contrato a Pentagram en el otoño de 2005 para trabajar en una nueva UI (interfaz de usuario) para sus ATMs, Wells Fargo se encontraba en el proceso de reemplazar sus ATMs con nuevos modelos equipados con monitores touchscreen. Esto era un proceso relativamente lento ya que el parque era de 7.000 ATMs y los reemplazos son caros. Los esfuerzos de diseño apuntaban a mejorar la experiencia y satisfacción del usuario. Wells Fargo pensó más en un flujo de presentaciones más elegante en lugar de un aburrido pantalla a pantalla, además de una apariencia más elegante para la UI (interfaz de usuario). A continuación podemos ver la pantalla de bienvenida e ingreso del PIN (clave personal), con una pantalla más simple, con botones amplios e indicadores amplios (como los puntos que permiten visualizar cuantos dígitos se han ingresado).

Diseño de la Interacción

La UI anterior tenía que correr tanto en cajeros automáticos con touchscreen como con botones. Esto implicaba que los botones siempre debían estar ubicados a los costados de la pantalla, de forma alineada con los botones de la máquina. La decisión de desacoplar el nuevo layout del antiguo basado en «botones a los lados» fue la decisión más importante en términos de diseño para el producto. En la imagen que aparece a continuación podemos ver las diferencias entre el diseño anterior y el diseño nuevo:

Con la nueva UI fue posible utilizar la pantalla completa para input del cliente. Esto fue muy útil para algunas funcionalidades como el depósito de cheques, con menores costos de procesamiento y la habilidad de imprimir recibos con la imagen del cheque.

Las transacciones de depósito de cheques con muy complejas debido al número de eventos que pueden terminar en un error, como un error en el scanner. A pesar de que éste es bastante robusto, el sistema tiene que dar la oportunidad a los usuarios de arreglar los errores del scanner.

Los usuarios podrían encontrar complejo insertar un lote de cheques directamente en un ATM sin un sobre, el proceso debía ser lo más simple posible. En la imagen siguiente se puede observar como la pantalla se va actualizando con el status de los cheques escaneados, si un error ocurre, el cliente puede ir a la sección específica del error en el cheque e ingresar el valor correcto, todo puede ser revisado y la interfaz permite incluso volver sobre los pasos anteriores:

El equipo de diseño aprendió que la funcionalidad más utilizada de los ATM es el retiro de dinero. El objetivo de la nueva UI era continuar ofreciendo giros de manera simple y rápida, a la vez que el resto de los servicios se ofrecían de manera visible y accesible. Algunos de estos servicios, como la compra de estampillas y la impresión de estados de cuenta puede ser convenientes para los clientes ya que se ahorran una viaje a la oficina de correo o a la sucursal. Para Wells Fargo, es una fuente adicional de ingresos. A cotinuación podemos ver algunas imágenes de la UI:

Una gran funcionalidad de los ATM de Wells Fargo es la del botón «Quick Cash» (Giro Rápido). Permite girar una cantidad de dinero generalmente utilizada desde nuestras cuentas presionando un sólo botón. No hay necesidad de navegar por los pasos de seleccionar una cuenta, la cantidad y confirmar la transacción. Sin embargo, pocas personas sabían que se podía personalizar esta opción con diferentes cantidades y cuentas. Esta siempre existía, pero requería presionar el botón «My ATM Preferenfes» (Mis Preferencias de ATM), luego de una serie bastante tediosa de pasos para cambiar la configuración.

La nueva interfaz podía ser mejor. En lugar de ofrecer al cliente una serie de alternativas genéricas basadas en procedimientos complejos, el ATM debía aprender que es lo que cada cliente realiza de forma más frecuente, y luego, hacer estas tareas más simples.

La nueva UI todavía ofrece la opción de Quick Cash, pero de una manera más inteligente. En lugar de un botón «Quick Cash» se introdujo una columna completa de botones que se comportan de manera relativamente similar a los botones del «Historial» de un Browser de Internet. Todavía es posible personalizar estas opciones a traves de la opción «Set My ATM Preferences» (Setear Mis Opciones de ATM), pero esto sería inusual y poco necesario, dado que siempre se reflejan las transacciones más recientes, como se ve en la imagen siguiente:

Diseño Virtual

Los ATM de Wells Fargo venían de distintos fabricante, diferían, en cierto grado, en el tamaño de la pantalla y la posición del pad numérico, los lectores de tarjetas y las impresoras de comprobantes entre otros elementos funcionales. Ya que la UI necesita trabajar con todos ellos, no era posible centrarse en una sola configuración de Hardware. Por esto, se eliminaron las grandes flechas apuntando a estos elementos. En la imagen se pueden ver dos ATM, fabricados por NCR y Wincor Nixdorf:

Las áreas de la parte superior e inferior de la pantalla se pueden volver invisibles para personas muy altas o muy bajas dependiendo de la instalación del equipo. Por esto, no conviene colocar información en estas secciones.

También se aprendió que los botones necesitan ser grandes ya que el vidrio-cubierta superior desvía la luz que proviene de la pantalla. Esto crea un «efecto acuario» que puede volver más complejo saber el punto exacto donde se presionó el botón de la pantalla.

Un contraste suficiente también es importante. Muchos ATMs al costado de la calle o en ubicaciones «drive-in» (utilizables desde el vehículo) reciben la luz del sol de forma directa. Comparando los diseños nuevos y antiguos en pantallas de laptops ante luz del sol para estar seguros que la nueva UI tenía suficiente contraste:

Se seleccionó una trama ( de 6×4) y un diseño visual que permitía utilizar el mayor espacio disponible sin que la información se viera demasiado agrupada y apretada. Los botones son diseñados para que el foco visual se centre en la información importante ( i.e.: el texto en el botón) y menos en la forma de éste:

La paleta de colores de Wells Fargo representa una combinación única de los dos colores primarios rojo y dorado, con una paleta secundaria de grises cálidos, cafés claros y verdes. No como el Bank of America o el Citibank, donde resalta el azul. Se exploraron distintos colores para la UI:

Durante el prototipo, el azul parecía un color más fácil a la mirada, y, a pesar de que se encontraba fuera de la paleta de colores, todos podían convivir con el. otorgaba un gran contraste para el botón «Return Card» (Devolver Tarjeta) y las cajas para alertas en color amarillo. Durante las pruebas con usuarios se obtuvieron los mismos resultados «Me da calma», «Me gusta el azul del cielo», … por lo que se continuó con ese color.

Sorprendentemente, recientemente Wells Fargo cambió la UI a la paleta «cafe claro», al parecer para estar más alineados con la imagen de la marca.

Pruebas de Usuario

Wells Fargo cuenta con su propio centro de pruebas en San Francisco. Allí se probaron los flujos de navegación y las decisiones de diseño visual.

Retire Su Tarjeta. Gracias

El proceso de diseño de interacción, diseño visual y pruebas de usuario tomo alrededor de un año. Los primeros ATM con la nueva UI comenzaron a aparecer en las calles en la primavera del 2007.