Tutorial Axure: cómo crear un formulario interactivo

Aprende, desde cero, a componer un formulario con todos los elementos necesarios en Axure RP, con Diga33!

En el desarrollo de páginas y apps para e-commerce, una tarea fundamental es crear un buen mecanismo para interactuar con el cliente, entender sus necesidades, conocer sus gustos y ofrecerle los productos y servicios que busca.

Para ello está la inclusión de formularios en tus páginas. En este tutorial, Luz de León, directora general de la compañía de diseño estratégico y tecnología creativa Diga33!, nos enseña cómo hacerlo de una manera sencilla utilizando el software Axure.

Descúbrelo en el vídeo.

5 pasos para insertar formularios en tus apps utilizando Axure

1. Ubica los elementos del formulario y empieza por el 'input' de texto

Los elementos que necesitarás para crear tu formulario –texto básico, contraseña, listas, etc.– están en la sección "Forms". Empieza insertando a tu pantalla en blanco un "input" básico, el elemento de texto. Luego, escribe la descripción de esa caja: nombre, apellido o cualquier otro dato que pedirás a tu usuario en este formulario.

2. Explora otros tipos de campos

Si necesitas un campo de texto de ayuda, con letra más pequeña y diferente, por ejemplo, utiliza la herramienta "Label". Para la contraseña, cuyos componentes, por su propia naturaleza, no están visibles en pantalla todo el tiempo, hay un elemento propio: "Password". Ve insertando cada uno de esos elementos en tu pantalla en blanco y añadiendo la descripción de cada campo.

3. Descubre el comando "Hint"

Es muy útil para cuando quieres que un texto escrito dentro de una caja en tu formulario desaparezca según el usuario haga clic en ella. Para ello, utiliza el elemento "Hint" que está en la biblioteca de "Forms".

4. Añadiendo elementos desplegables

Una fecha de nacimiento, por ejemplo, suele tener la opción de selección en un formulario a través de un listado desplegable con los meses del año y los días del mes, por ejemplo. Para crear algo así en tu página, utiliza la herramienta "Droplist".

5. Utilizando el comando "Checkbox"

Finalmente, para determinar los elementos que el usuario podrá marcar (como, por ejemplo, su género o estado civil, entre otros), escoge la herramienta "Checkbox" y añádela a tu formulario.

No te olvides de agrupar los elementos haciendo clic con el botón derecho y seleccionando "Assign Radio Group", en el caso de que quieras crear un campo de "Checkbox" en el que haya una única opción de respuesta posible.

¿Te han gustado estos tips? Recuerda que puedes aprender con Luz a diseñar experiencias de usuario y mostrarlas mediante prototipos avanzados en Axure en su curso online 'Prototipado y diseño UX para aplicaciones de e-commerce'.

También te puede interesar:

- Diseño de aplicaciones: creación de prototipos para principiantes, un curso de Filippos Protogeridis
- Creación de UI Kits con Sketch, un curso de Nodos.
- Diseño de producto digital con Lean y UX, un curso de Óscar Santos Pérez
- Dos & Don'ts del diseño UX
- Cómo usar guías y cuadrículas en Adobe XD