En las sesiones de prueba de usabilidad, hay un instante clave cuando los participantes llegan a la pantalla de inicio de sesión; escriben sus datos y lanzan una mirada buscando confirmación de que están haciéndolo correctamente. Esa pausa es reveladora: demuestran haber detectado que no están interactuando con una app real y cualquier comportamiento posterior queda condicionado por esa conciencia.
Este problema se acentúa en prototipos financieros. Los usuarios acostumbrados a gestionar dinero reconocen inmediatamente cuando algo no encaja: un saldo incorrecto, campos que aceptan cualquier valor. Si el prototipo omite mecanismos auténticos de autenticación, los usuarios no sólo pierden interés, sino que detienen la prueba para señalarlo. Esto conduce a conclusiones sesgadas que reflejan una experiencia meramente demostrativa, no un producto válido.
La solución, sin embargo, es sencilla y concreta: hay que detectar el momento clave en que el usuario deposita su confianza y hacerlo real. En las apps bancarias, ese momento medular es el login.
Este tutorial práctico explica cómo crear esta pantalla de inicio de sesión fiel al producto final, con validación de credenciales, mensajes de error en tiempo real y una animación biométrica nativa — todo sin necesidad de escribir código.
Lo que vamos a construir: un login que se comporta como un producto lanzado
Tomaremos como base Pie Bank, un prototipo móvil bancario. El flujo de acceso incluirá campos de texto funcionales, ocultación de contraseña, validación que rechaza entradas erróneas, un estado en vivo para errores, y una animación Face ID perfectamente sincronizada para simular iOS.
More Read
Material necesario:
- Una interfaz de login creada en Figma o una herramienta de diseño compatible.
- ProtoPie Studio, que permite pruebas gratis e incluye todas las funciones usadas en este tutorial.
- Un archivo Lottie para la animación Face ID.
- El archivo final del prototipo Pie Bank para seguir los pasos o tomarlo como referencia.
Paso 1: Importar desde Figma sin aplanar capas
Al exportar el diseño desde Figma mediante el plugin de ProtoPie, selecciona la opción “Scene” en lugar de “Flattened”. Así cada elemento llegará como capa independiente y editable, manteniendo la jerarquía.
Asegúrate de renombrar las capas con términos claros, como “Input Username”, para facilitar referencias posteriores en las fórmulas y evitar pérdidas de tiempo.
Paso 2: Incorporar campos de texto que acepten entrada real
ProtoPie ofrece una capa “Input” que permite que el usuario escriba con el teclado, sustituyendo al típico marcador estático. Arrastra esta capa dentro del grupo del campo “Username” y ajusta visualmente para igualar el diseño original.
More Read
Repite idénticamente para el campo de contraseña.
Paso 3: Configurar el campo de contraseña para ocultar texto
En el campo ‘password’, cambia la propiedad “Type” a “Text Password” para que el texto aparezca enmascarado automáticamente.
Paso 4: Crear la escena de destino antes de enlazar la navegación
Antes de programar la lógica que cambia de pantalla al pulsar “Log In”, crea la escena destino que simboliza el dashboard o principal.
Paso 5: Añadir la navegación básica en el botón login
Configura el botón para que, al pulsarlo, active una transición a la siguiente pantalla. En este punto con cualquier dato o incluso vacío se navega, por lo que aún no hay validación.
Paso 6: Definir variables para capturar el texto escrito
Agrega variables de texto para ‘username’ y ‘password’ y vincúlalas con las entradas correspondientes para captar el contenido en tiempo real.
Paso 7: Incorporar una condición que valide las credenciales
Modifica el trigger del botón para que sólo permita avanzar si el usuario y contraseña coinciden con valores predefinidos (ejemplo: usuario ‘alex.c@gmail.com’ y contraseña ‘ABC123’). Esto impide pasos sin autorización.
More Read
Paso 8: Crear un estado de error visible
Marca una capa con mensaje de error e inicialízala oculta. Si las credenciales fallan, activa una animación o cambio de opacidad que muestre este mensaje. De esta forma, la interfaz responde como en un entorno real y el usuario recibe feedback efectivo.
Paso 9: Añadir animación de Face ID
Incorpora una capa Lottie con la animación biométrica e impúlsala mediante un trigger en el botón Face ID. La animación debe empezar desde fuera del marco, descender, reproducirse y luego realizar la transición hacia el dashboard.
Paso 10: Ajustar tiempos para lograr naturalidad
Introduce retardos entre las acciones para que el flujo de la animación y la transición parezcan naturales y se asemejen a un sistema operativo real. Habilita el reinicio de escenas para evitar estados erróneos al volver atrás.
El resultado es un prototipo que simula de manera creíble un acceso seguro, destaca inmediatamente durante la prueba y arroja resultados fiables sobre la experiencia de usuario.
Cuando un login funciona de verdad, el estado de error puede evaluarse como un punto relevante de investigación: ¿entienden los usuarios el mensaje? ¿Reintentaron? ¿Prefirieron usar Face ID? Son preguntas que no se pueden responder con un login falso.
Durante la revisión con stakeholders, el flujo se comprende fácilmente. En la transferencia al equipo de desarrollo, las condiciones, variables y tiempos documentan perfectamente la intención, reduciendo ambigüedades y errores.
Por eso, los equipos de FinTech invierten recursos en replicar un login fiel, incluso si no es la función principal testeada. Es la entrada que legitima la confianza del participante y mejora toda la cadena de resultados posteriores.
