Romper entradas de tarjetas de crédito en átomos: ¿por qué es tan importante el diseño perfecto de UX?

Como diseñador de UI en Netguru, estuve involucrado en varios proyectos fintech durante los últimos meses. Teniendo en cuenta todos los puntos débiles de estas aplicaciones, me di cuenta de que un patrón no es lo suficientemente pensado: los formularios que le permiten ingresar los detalles de la tarjeta de pago. Hay varios contextos de este procedimiento, pero siempre, independientemente de la situación, es un paso crucial y obligatorio para finalizar la compra o comenzar a usar la aplicación.

Los datos: estadísticas del Banco Central Europeo

Actualmente tenemos cientos, si no miles, de métodos de pago, que varían según la región y su desarrollo. Sin embargo, según el Banco Central Europeo, en 2017, el 51,6% de los pagos se realizaron con tarjetas de pago. Esto nos da 135 pagos con tarjeta per cápita. Los pagos de dinero electrónico tenían solo una participación del 2.6% pero, lo que es más importante, su participación creció un 20.3% con respecto al año anterior. La conclusión de estas estadísticas es bastante clara: las tarjetas de pago están en su punto más alto: son confiables, fáciles de usar, están disponibles en todo el mundo y, lo más importante, están firmemente implantadas en nuestras rutinas diarias.

¿Qué significa para las personas involucradas en la creación de interfaces digitales? En primer lugar, estamos obligados a ofrecer soluciones perfectas que ayuden a los usuarios en todo el proceso de ingresar los datos encontrados en una tarjeta física. En segundo lugar, no debemos ignorar los pagos de dinero electrónico, que están creciendo y mejorando constantemente en el camino. Ciertamente no sabemos lo que depara el futuro, pero, en función de las tendencias actuales, podemos intentar predecirlo: las tarjetas de pago se utilizarán con menos frecuencia y el dinero electrónico, lenta pero inevitablemente, será más accesible. Sin embargo, por ahora, centrémonos en el presente: ¿cuáles son los métodos disponibles para ingresar datos en nuestros dispositivos?

Enorme desarrollo en tecnología

Los teléfonos inteligentes modernos están llenos de datos, por lo que tienen varios métodos de entrada. Tenemos teclados en pantalla, cámaras y micrófonos. Todos estos están evolucionando y mejorando, y gracias al progreso constante de la industria del hardware, cada año se están acercando a estar perfectamente diseñados.

Los teclados están cada vez más cerca de ser ideales, principalmente gracias a sensores táctiles más precisos y mejores opciones de diseño, p. sugerencias contextuales, pantalla específica de casos de uso (como teclados numéricos), etc. Las fotos de las cámaras que se pueden encontrar en todos los dispositivos modernos ahora son increíblemente nítidas. ¿Cómo podemos poner toda esa gran tecnología en uso?

Escaneo, formulario de entrada múltiple y formulario de entrada única

Escaneo: las cámaras que se encuentran en los dispositivos modernos son extraordinariamente precisas y precisas. Agregar un código moderno de mejora automática nos permite leer los datos encontrados en la tarjeta en segundos. Debido a problemas de privacidad, los códigos de seguridad a menudo se introducen manualmente.

Formularios de entrada múltiple: un patrón común basado en dividir el proceso de ingresar los datos en unas pocas secciones de entrada. Una sección le pide a un usuario que ingrese su nombre y apellido, otra le pide el número de tarjeta y así sucesivamente.

Formulario de entrada única: la idea es agregar toda la información necesaria en una sola entrada. Afortunadamente, es un patrón relativamente poco común, ya que solo complica en exceso el proceso que no es fácil en primer lugar. ¿Pero por qué sucede? ¡Por el esceptomorfismo!

“El esceptomorfismo es un término que se usa con mayor frecuencia en el diseño gráfico de la interfaz de usuario para describir objetos de interfaz que imitan a sus contrapartes del mundo real en cómo aparecen y / o cómo el usuario puede interactuar con ellos. Un ejemplo bien conocido es el icono de la papelera de reciclaje utilizado para descartar archivos. El skeuomorfismo hace que los objetos de la interfaz sean familiares para los usuarios mediante el uso de conceptos que reconocen ".

¿Pero ya no está muerto? Si y no. Cuando se considera el aspecto visual, en realidad se ocultó principalmente con el lanzamiento de iOS 7 y OS X Yosemite, pero, según la definición anterior, el esceptomorfismo no se trata solo de cómo se ven las cosas, sino también de cómo funcionan.

Antes de diseñar un formulario de entrada, asegúrese de dedicar unos minutos a la investigación. Saque una de esas tarjetas de plástico de su billetera e investigue a fondo su diseño. ¿Cómo sabes que es una tarjeta de pago? ¿Cuáles son sus características distintivas? Además de considerar elementos específicos como una tira magnética o un chip electrónico, preste mucha atención a su diseño: el orden de la información.

Escaneo como el método más confiable, seguro y rápido

En mi opinión, usar el escaneo como el método principal para ingresar los datos tiene muchos beneficios. En primer lugar, es mucho más rápido que escribir los datos manualmente. Si se implementa correctamente, no debería causar ningún problema, como malinterpretar información en la tarjeta. Otro gran beneficio es hacer una pequeña contribución a la prevención del fraude, ya que para escanear una tarjeta debe tenerla consigo.

La forma ideal: 7 reglas de oro

Como con todo, es difícil proporcionar reglas estrictas para cada escenario posible. Sin embargo, considere estas siete reglas para hacer que su formulario lleve a su usuario a la meta de una manera agradable.

  1. Orden y forma correctos y lógicos
    Como mencioné anteriormente, es muy importante mantener el pedido similar a una tarjeta física. Esto ayuda a los usuarios a escanear el formulario más rápido. Leen la información en orden y la completan en consecuencia. Además, evite usar selectores de fecha, solo mire la tarjeta. No dice enero de 2020, sino 20/01. Lo mismo ocurre con el número de tarjeta, que generalmente se divide en fragmentos de 4 dígitos. Asegúrese de presentarlo de la misma manera.
  2. Solicite solo la información necesaria
    Pedir el nombre completo y la dirección del titular de la tarjeta puede ser una medida de seguridad adicional, pero no siempre es necesario que lo haga. Por ejemplo, si su aplicación hace KYC (proceso de verificación de identidad basado en un documento y una foto) de antemano, ya sabe el nombre completo. Asegúrese de reutilizar la información proporcionada anteriormente. El número de tarjeta incluye mucha más información de la que puede esperar. Por ejemplo, no tiene que preguntar sobre el tipo de tarjeta, ya que se puede decodificar fácilmente desde el número.
  3. Usuario el tipo de teclado correcto
    Esta regla es simple de implementar, pero a menudo se olvida. Nuestros teléfonos inteligentes tienen algunos tipos de teclados según el contexto. Tenemos una versión especial para ingresar nuestra dirección de correo electrónico, número de teléfono o dirección de página web. Use un teclado numérico para facilitar la entrada del número CVV para el cliente.
  4. La representación visual es una buena adición.
    Si tiene los recursos necesarios, muestre una representación visual de la tarjeta que se actualiza a medida que el usuario ingresa los detalles. Verificar si los datos son correctos será mucho más rápido de esta manera.
  5. Minimice los errores, informe claramente si ocurren
    Asegúrese de seguir las reglas básicas de accesibilidad, como el contraste adecuado, el tamaño de fuente, etc. Esto probablemente minimizará la cantidad de errores, porque su formulario será fácil de leer y escanear. Sin embargo, si se producen algunos errores, asegúrese de poner una pista al lado del lugar donde el usuario tiene que corregir cierta información.
  6. Habilite los servicios de terceros que ya tienen los detalles (por ejemplo, Apple Pay)
    Si es posible, habilite los servicios de terceros que su usuario ya está utilizando. Podría ser tan simple como habilitar Apple Pay o implementar PayPal como método de pago. ¡Seguir esta simple regla podría mejorar enormemente sus tasas de conversión!
  7. Seguridad: brinde una solución confiable
    Asegúrese de que los datos privados de los usuarios estén seguros de su lado. Otro paso sería informar a sus usuarios sobre las precauciones. Podría ser cualquier cosa: un icono sutil, una pequeña pista o simplemente un diseño limpio. Tranquilizar a sus usuarios sobre su privacidad hará que su producto sea más confiable. No se complique, no agregue grandes detalles sobre la seguridad en este lugar; una pequeña pista será más que suficiente.

Para resumirlo…

Teniendo en cuenta los datos proporcionados, podemos estar seguros de que las tarjetas de pago son el método de pago más universal y accesible para la mayoría de los usuarios. De hecho, es el segundo método más popular, justo después del efectivo. Es por eso que las formas de diseño perfectamente diseñadas son útiles. Los pagos electrónicos persiguen dinámicamente otros métodos de pago, pero pasará mucho tiempo antes de que sean igualmente populares.

  • Siga el mismo diseño de información que se encuentra en la contraparte física,
  • El escaneo debe ser un método primario, pero no el único,
  • Siga los principios de diseño de accesibilidad,
  • Informar al usuario sobre la seguridad,
  • Siempre recuerda sobre el usuario.

¿Cuál es tu opinión? ¿Has enfrentado problemas similares al diseñar para fintech? Comparta su opinión en la sección de comentarios y si encuentra útil esta información, deje un aplauso.

Consulte el blog de Netguru para obtener artículos de diseño más interesantes y el estudio de caso de Swap Behance, que fue la base de este artículo.

Gracias por todas las personas involucradas en la lectura de pruebas y comentarios: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Natalia Chrzanowska