Su prototipo no es honesto con los usuarios (aquí se explica cómo solucionarlo) — Smashing Magazine

En casi todas las sesiones de usabilidad, los participantes hacen una pausa en la pantalla de inicio de sesión, escriben algo y luego miran hacia arriba para comprobar que “lo hicieron bien”. Esta pausa es una señal reveladora. Se han dado cuenta de que esta no es una aplicación real y cada punto de datos recopilado después de ese momento se filtra a través de esta conciencia.

En las pruebas de productos financieros, el problema es aún más grave. Los usuarios financieros están capacitados para darse cuenta cuando algo parece estar mal: los saldos no cuadran, los campos aceptan cualquier cosa. Cuando los prototipos bancarios omiten la autenticación real, los participantes no sólo se desconectan, sino que se involucran. Se detuvieron a mitad de la sesión para marcarlo. Las conclusiones que sacó el equipo reflejaron el comportamiento del usuario en la demostración, no en el producto real.

El alcance de la reparación es más limitado de lo que cree. Identifique momentos en los que los participantes generen confianza y hagan real esta interacción. En una aplicación bancaria, ese momento es iniciar sesión.

Este tutorial lo desarrolla: validación de credenciales, estado de error instantáneo y animaciones biométricas que parecen nativas, sin necesidad de codificación.

Qué estamos creando: un inicio de sesión que se comporta como un producto enviado

El proceso de inicio de sesión creado en torno al prototipo de banca móvil Pie Bank incluye entrada de texto funcional, campo de contraseña bloqueado, verificación de credenciales, estado de error en tiempo real y animación de Face ID cronometrada. No se siente diferente de iOS.

Lo que necesitas:

• IU de inicio de sesión para Figma (o cualquier herramienta de diseño compatible)
• estudio prototipo — Empieza gratistodo en este tutorial se aplica al plan gratuito
• Perfil de Lottie animado con Face ID (este Es lo que usamos)
• este Archivo prototipo de Pie Bank completado — Descárgalo para seguirlo o úsalo como referencia después de construir

Paso 1: importe escenas seleccionadas de Figma en lugar de aplanarlas

En Figma, abra el complemento ProtoPie, seleccione su marco de inicio de sesión y seleccione escena Al exportar. Flatten colapsa todo en una sola imagen; la escena conserva la jerarquía de capas, por lo que cada elemento llega a ProtoPie como una capa posicionable separada.

Antes de continuar: cambie el nombre de cada capa de manera significativa. “Ingrese nombre de usuario” en lugar de “Rectángulo 14”. Hará referencia a estos nombres en fórmulas: los nombres ambiguos se combinan en nombres que faltan instantáneamente.

Paso 2: reemplace el campo estático por uno que realmente acepte entrada de texto

ProtoPie nativo ingresar La capa acepta entradas de teclado reales: los participantes ingresan texto real en lugar de hacer clic en marcadores de posición. Ir a Text → Inputarrastre la capa de entrada al lienzo y anídela dentro del grupo de campos Nombre de usuario. Coincidir visualmente: texto del marcador de posición nombre de usuariorelleno de fondo y fuente que combinen con su diseño.

Haga clic en Vista previa. Haga clic en el campo. tipo. Aquí es donde el prototipo comienza a comportarse como una aplicación en lugar de representar una aplicación.

Cambiar el nombre de la capa Ingrese el nombre de usuariocópielo y anide la copia dentro del grupo de campos de contraseña.

Paso 3: un cambio de atributo enmascara la contraseña

En la capa copiada, cambie el texto del marcador de posición a contraseña y establecer tipo llegar contraseña SMS. ProtoPie maneja el enmascaramiento: no se requiere lógica personalizada.

Vista previa de dos campos: texto para mostrar el nombre de usuario, puntos para mostrar la contraseña. Ya parece real y aún no has escrito ni una sola condición.

Paso 4: Establecer el escenario de destino antes de conectar la navegación

Añade una nueva escena, incluso una escena en blanco. El error de clasificación más común en ProtoPie es intentar conectar las respuestas de navegación antes de que exista el destino. Créelo primero.

Paso 5: Botón Conectar: ​​funciona pero aún permite que todos puedan comunicarse

elegir Accesoagrega uno nuevo grifo Activar, establecer respuesta Saltarposiciona la escena del tablero, transición Deslizarse de derecha a izquierda.

Vista previa y haga clic. Puede navegar: pero para cualquier entrada, incluida cualquier entrada. El prototipo aún yace. Los siguientes dos pasos son las reparaciones.

Paso 6: agregue variables para que el prototipo recuerde lo que escribió

En la esquina inferior izquierda de ProtoPie, agrega dos texto Variables de tipo: username y password. Vincula cada capa a su capa de entrada usando una fórmula:

input("Input Username").text
input("Input Password").text

Habilite los íconos de depuración: una superposición verde mostrará valores de variables instantáneas a medida que escribe. Cuando vea que sus claves aparecen instantáneamente, se confirma la vinculación.

Paso 7: Agrega condiciones para que solo pasen las credenciales válidas

devolver grifo Se disparó en el botón de inicio de sesión. agregar un estado Hay dos reglas, ambas deben ser ciertas:

• username igual alex.c@gmail.com
• password igual ABC123

mover Saltar respuesta en estas condiciones. Credenciales incorrectas, campos en blanco, formato incorrecto: ninguno pasa. Los participantes ahora deben iniciar sesión físicamente. Esta única restricción cambia la estructura de cada sesión de prueba posterior.

Paso 8: Establecer estados de error, interacciones que la mayoría de los prototipos omiten

Busque la capa del mensaje de error y cámbiele el nombre Texto de errorestableciendo la opacidad inicial en 0. Agregue una segunda condición (la condición inversa de la primera condición) y agregue una cambiar propiedades Configuración de respuesta Texto de error opacidad 100.

Error de credencial: se produjo un error. Credenciales correctas: Panel de control. Dos consecuencias: esto lo hace comprobable, no sólo demostrable.

Paso 9: agregue la animación Face ID. Este detalle hizo que los evaluadores preguntaran “¿Es esto real?”

Ir a medios de comunicaciónarrastra un lotty Colóquelo sobre el lienzo, cargue su archivo Face ID y colóquelo fuera de la pantalla sobre el marco del iPhone. en tu Iniciar sesión con Face ID botón, agregue uno nuevo grifo Gatillo (renombrado a Haga clic en ID de cara) tiene cuatro respuestas en secuencia:

• mover: contenedor de loti Y: 60
• Reproducción:buscar:tiempo 0s (Restablecer para que la reproducción siempre comience desde el principio)
• jugar: jugar:archivo loti
• Saltar: al tablero

Paso 10: escalonar el tiempo, eso es lo que lo hace sentir natural

No hay demora, las cuatro respuestas se activan inmediatamente y la escena salta antes de que se reproduzca la animación. Agregar compensación:

permitir Restablecer escena seleccionada en Jump: sin él, navegar hacia atrás haría que la animación permaneciera en Y: 60.

Vista previa: haga clic en Face ID, inserción de animación, reproducción y transición de pantalla. Los inicios de sesión biométricos no se pueden distinguir de los inicios de sesión reales.

Iniciar sesión Esto realmente cambia lo que puedes aprender de los prototipos

Cuando la autenticación realmente funciona, el estado de error se convierte en un verdadero punto de contacto de investigación: ¿los usuarios entienden el mensaje, lo intentan de nuevo, cambian a Face ID? Estas son preguntas que un inicio de sesión falso no puede responder.

En las revisiones de las partes interesadas, el proceso se explica por sí mismo. Durante las transferencias de ingeniería, los paneles interactivos registran comportamientos (lógica condicional, vinculación de variables, sincronización) para que los ingenieros vean la intención, no la interpretación.

Es por eso que los equipos de fintech invierten en la fidelidad del inicio de sesión, incluso si el inicio de sesión no es una característica que se esté probando. Aquí es donde se construye la confianza entre los participantes. Si se hace correctamente, todo lo que se realice en sentido descendente producirá una mejor señal.

Este tutorial es Creación de prototipos fintech con ProtoPie Serie en el blog ProtoPie. La serie construye Pie Bank desde cero, dividida en cuatro capítulos que cubren el tablero, la lógica de transferencia y la integración de la cámara. Si este tutorial fue útil, el resto de la serie irá más allá.

(mnj, él)