Impulsando las conversiones con animaciones en el diseño de la sección de pago

Impulsando las conversiones con animaciones en el diseño de la sección de pago

Impulsando las conversiones con animaciones en el diseño de la sección de pago

El diseño con animaciones entre sus elementos ha estado con nosotros desde hace años, pero solo recientemente ha llegado a ser tan frecuente y el hardware que tenemos ahora puede soportarlos con fluidez. Las animaciones dan vida al contenido estático y su comportamiento representa la física real que los humanos perciben como segunda naturaleza. Tenemos animaciones significativas en casi todos los aspectos de una aplicación o un sitio web que son relevantes, embellecen el contenido y mejoran la experiencia de los usuarios. Experimentamos estas animaciones en páginas de inicio, página de productos e incluso carritos de compras, pero rara vez las experimentamos en la página de pago donde ocurren las conversiones.

Uso de animaciones en la página de pago

A continuación, ofrecemos algunos factores, tips y datos para mejorar las conversiones a traves de elementos animados.

El movimiento impulsa la confianza

Las animaciones ayudan a orientar los momentos de un estado a otro. Si un usuario hace clic en un botón, debe saber de inmediato mediante elementos visuales que se ha presionado un botón y que algo está a punto de suceder, todo de manera sutil pero “fácilmente perceptible”.

Llegar a la página de pago generalmente para la mayoría de las personas es un paso crucial en el que desean sentirse seguros sobre su información. Después de hacer clic en el botón “Pagar”, su cerebro espera comentarios inmediatos. Las “marcas correctas” y el “color verde” son percibidas por nuestro córtex visual como positivas y “oye, todo salió bien”, lo que crea confianza en los usuarios y suma una gran experiencia de usuario.

También es importante para los diseñadores tener en cuenta que no todos los lugares o momentos en el flujo de salida deben ser animados. A veces, un usuario puede sentirse abrumado con un montón de movimiento que puede minimizar la confianza de su parte.

El movimiento representa un cambio funcional

En algunos sistemas podemos mirar cómo se voltea la tarjeta para el número CVV que indica al usuario dónde buscar exactamente este número en su tarjeta real. El giro también representa que todo está bien por ahora y está bien proceder más allá, brindando aún más confianza al usuario.

Otro ejemplo de “cambio funcional” para la entrada del usuario en la página de pagos es la capacidad del sistema para determinar el tipo de tarjeta (Visa, Mastercard, etc.) y expresarla visualmente. Esta retroalimentación visual a la entrada del usuario los pone en confianza simplemente cambiando el logotipo y el color de la tarjeta, es decir, de American Express a Visa (en el ejemplo anterior) cuando ingresan los primeros cuatro dígitos de su número de tarjeta.

Guía de animaciones para “Destacados”

Las animaciones también se utilizan para dirigir la atención del usuario a una sección del diseño que le dice al usuario “¡oye, mira, esto podría ser importante!”.

  • En una página de pagos, a veces, debe haber un mensaje importante que sea crucial para cada titular de la tarjeta, por ejemplo, “la tarjeta de X banco no funcionará aquí”; en este caso, cuando el usuario llega a la página de pago debe ser guiado a ese mensaje de una manera sutil a través de animaciones. El uso de un punto continuo en el campo de mensaje justo debajo del panel de navegación es una buena manera de mejorar la comunicación crucial y mantener al usuario informado en todo momento.
  • (Si algo salió mal) Si tienen sus “Caps activadas” al ingresar una contraseña, se les debe notificar al escribir en el campo de texto una vez. Se les debe solicitar educadamente con una casilla de alerta antes de emprender su segundo intento.

Uno de los mejores patrones de diseño cuando se trata de llenar formularios es la divulgación progresiva. P.ej. Si un usuario tiene una tarjeta guardada previamente en el sitio web y desea usarla, se le mostrará exactamente eso y tal vez un campo donde pueda ingresar el CVV, sin embargo, si elige no usar esa tarjeta e ingrese los datos de una tarjeta diferente , se revela una nueva forma que le permite entrar por esa otra vía/datos.

La retroalimentación visual en el flujo de comprobación anterior para la divulgación progresiva indica al usuario que al marcar la casilla de verificación se agregaron más campos de datos. El desvanecimiento lento en la animación del área de casillas de verificación le da al usuario un sentido de relatividad en contexto entre la acción de marcar la casilla de verificación y los campos que aparecieron debido a eso.