Formularios y entradas
Con Justinmind, puedes crear prototipos de formularios interactivos para simular experiencias de entrada de usuarios, como formularios de registro, inicio de sesión y búsqueda.
Crear un formulario
Para crear un formulario en Justinmind, tendrás que utilizar widgets. Busca en la Barra de Herramientas situada bajo el signo más en la esquina superior izquierda de tu pantalla. Aquí encontrarás los widgets que se utilizan habitualmente en los formularios, como: Campos de texto de entrada, Casillas de verificación y Botones de radio, Listas de selección, etc.
También puedes descargar nuestros formularios prefabricados e importarlos a tu paleta de Widgets.
Sólo tienes que arrastrar un widget al Lienzo para empezar a crear tu formulario.
Todos los widgets de formularios y entradas son automáticamente interactivos durante la simulación, sin necesidad de Eventos. Sólo tienes que hacer clic en «Simular» y podrás interactuar con ellos.
Dependiendo del dispositivo que estés utilizando en tu prototipo, el aspecto y la funcionalidad de estos widgets serán diferentes. Por ejemplo, en los prototipos de dispositivos iPhone, al enfocar un Campo de texto de entrada durante la simulación se mostrará automáticamente un teclado interactivo del dispositivo.
Puedes añadir widgets adicionales con un estilo de entrada en tu prototipo añadiendo otras bibliotecas de widgets.
Una vez que hayas diseñado tu formulario, puedes empezar a añadir Eventos para crear interacciones sofisticadas. Hemos creado algunos ejercicios de ejemplo para darte una idea de algunas formas de hacerlo. Échales un vistazo a continuación.
Autocompletar formularios
En este ejercicio, aprenderás a autocompletar dos Campos de Texto de Entrada después de pulsar la tecla tabulador en el primer Campo de Texto de Entrada.
Sigue estos pasos para completar el ejercicio:
- Crea un nuevo prototipo, para tu formulario; utiliza un Texto, Campos de Texto de Entrada y un botón de la Barra de Herramientas.
- Selecciona el Botón y ve a la paleta Eventos.
- Haz clic en «Añadir evento» y selecciona el activador «Al hacer clic»; selecciona una acción «Establecer valor».
- Para el objetivo, selecciona el segundo Campo de Texto de Entrada, y escribe «Nombre del producto» como valor. Haz clic en «Aceptar» para terminar de crear el evento.
- Ve a la paleta Eventos, haz clic en el icono de engranaje situado junto a la palabra «Hacer» y selecciona «Añadir acción». Crea otra acción «Al hacer clic» + «Establecer valor» y selecciona el tercer Campo de texto de entrada como objetivo, e introduce algo como valor establecido por la acción.
- Volviendo a la paleta Eventos, haz clic en «Añadir interacción». Deja el desencadenante como «Al hacer clic» y cambia la acción resultante a «Enfocar» y selecciona el segundo Campo de Texto de Entrada como objetivo a enfocar.
Así es como deberían verse todos tus eventos:
Ya está. Haz clic en «Simular» e introduce algún texto en el primer Campo de Texto de Entrada. A continuación, pulsa la tecla TAB y te centrarás en el segundo Campo de Texto de Entrada y verás cómo se autocompletan los valores.
Puedes descargar el ejemplo aquí.
Validación del flujo de malla
Con Justinmind, puedes crear y simular un formulario de varios pasos utilizando variables y validación de flujo de pantalla. En este ejemplo, aprenderás a crear un formulario de entrada móvil con varias pantallas. En la última pantalla, el usuario verá un resumen de todos los datos que ha rellenado.
Para diseñar un formulario de varios pasos en tu prototipo, sigue los pasos que se indican a continuación:
Diseño de las pantallas
- Crea un nuevo prototipo con dos pantallas.
- En la primera pantalla, arrastra tres Textos y nómbralos «Nombre de usuario», «Dirección de correo electrónico» y «Contraseña».
- Arrastra un Campo de Texto de Entrada debajo de cada Campo de Texto, debería haber tres en total
- Añade un botón en la esquina inferior derecha de la pantalla que se utilizará para navegar a la siguiente pantalla.
- Ve a la pantalla 2 y añade los mismos Campos de Texto con los Campos de Texto de Entrada debajo de cada texto.
- Ve a la paleta Variables y añade tres variables, una para cada campo de entrada.
Añadir los Eventos
- Ve a la Pantalla 1 y crea un evento «Al tocar» + «Enlazar a», y enlaza con la Pantalla
- Repite el Paso 2 para los dos siguientes Campos de Texto de Entrada.
- Ve a la Pantalla 2 y observa la paleta Variables. Selecciona una variable y arrástrala al elemento de texto correspondiente en la Pantalla. Esto creará un evento «Al cargar la página» + «Establecer valor», y fijará el valor del elemento Texto al valor de la variable.
- Repite el Paso 3 hasta que a cada elemento de Texto se le haya asignado su variable correspondiente.
- ¡Y ya está! Haz clic en «Simular» e interactúa con tu prototipo. Verás que tus respuestas aparecen en el resumen de la última página.
Puedes descargar el ejemplo aquí.
Validar campos obligatorios
En este ejemplo, aprenderemos a utilizar condiciones para validar un formulario de entrada de forma que todos los campos obligatorios se rellenen correctamente.
Sigue estos pasos para aprender a hacerlo:
Diseño de la forma
- Crea un prototipo y crea tres Campos de Texto de Entrada en el lienzo (puedes encontrar los campos de entrada en la barra de herramientas dentro del menú del icono más).
- En la paleta Propiedades, asigna a cada Campo de Texto de Entrada un valor de marcador de posición de «Nombre», «Correo electrónico*» y «Número de teléfono*». Puedes definir el texto del marcador de posición en la paleta Propiedades.
Nota: Los campos de entrada que contienen el carácter «*» requerirán que el usuario introduzca texto en ellos para completar el formulario. Además, ten en cuenta que el campo de correo electrónico requerirá un formato «xxx@xxx».
- Crea el widget Botón en la parte inferior de la Pantalla 1.
- Ve a la Pantalla 2 y crea un mensaje de «Éxito» para informar al usuario de que ha introducido correctamente sus datos.
Añadir los Eventos
Hemos creado un formulario de entrada estático. Ahora, añadiremos eventos mediante condiciones para que nuestro formulario sea interactivo e identifique qué campos deben rellenarse para pasar con éxito a la siguiente pantalla.
- Selecciona el Botón en la Pantalla 1 y ve a la paleta Eventos. Añade una acción «Al hacer clic» + «Cambiar estilo», seleccionando el Campo de Texto de Entrada «Email*». Campo de Texto de Entrada. Selecciona las opciones de color del borde y del texto en el desplegable, y ajústalas al color actual del Campo de Texto de Entrada. A continuación, haz clic en «Aceptar» para salir del diálogo. Esto cambiará la apariencia del Campo de Texto de Entrada a su color por defecto cuando el usuario haya introducido la información correcta.
- Vuelve a la paleta Eventos y haz clic en el texto «añadir condición» situado encima del evento que acabas de crear. En el constructor de Expresiones Condicionales, sigue estos pasos para crear la condición:
1. Arrastra la función de texto Expresión regular al primer espacio de la expresión. 2. En el espacio que aparece, arrastra el Campo de texto de entrada del código postal desde el Lienzo de diálogo o desde el contorno del diálogo. 3. En el segundo espacio, arrastra la constante Código postal. Haz clic en «Aceptar» para terminar de construir la condición. - Mira en los Eventos que acabas de crear, y haz clic en el texto «Si no». Añade otra acción «Al hacer clic» + «Cambiar estilo», seleccionando de nuevo el «Código postal*» Campo de Texto de Entrada y selecciona las opciones Color del Borde y Color del Texto del desplegable. Esta vez, cambia el estilo del borde y del texto a rojo. El estilo rojo indicará a los usuarios que el Campo de Texto de Entrada Código Postal no se ha rellenado correctamente.
- Repite los Pasos 1-3 para el otro campo de entrada obligatorio (Número de teléfono). Recuerda cambiar los componentes en el Constructor de expresiones y en los Campos de texto de entrada según corresponda.
- Una vez que tengas eventos para los dos campos obligatorios, añade un evento más al Botón. Crea un evento «Al hacer clic» + «Navegar a», y luego selecciona la Pantalla 2.
- Haz clic en el texto «añadir condición» para este evento. Añade la siguiente expresión:
Nota: la condición debe coincidir exactamente con esta imagen para que el evento se active correctamente
¡Y ya está! Haz clic en «Simular» para interactuar y disfrutar de tu formulario de entrada en tu prototipo.