Ilustración de Matt Rae
Al iniciar un proyecto de diseño de aplicaciones móviles, es recomendable empezar por crear mallas metálicas de la experiencia, o segmentos de esta, antes de lanzar maquetas de mayor fidelidad. El proceso de creación de mallas metálicas puede ayudar a identificar cualquier deficiencia en el flujo del usuario o resaltar puntos de fricción antes de invertir tiempo en los detalles más específicos de la interfaz.
En este tutorial, sigue los pasos en la creación de mallas metálicas para el flujo de registro de aplicaciones móviles. Mediante formas básicas y una paleta de colores en escala de grises, diseñarás varias pantallas en un flujo que te permitirá validar y probar la experiencia antes de incluir detalles como el color, gráficos y la tipografía final.
Creación de elementos básicos
Una malla metálica se compone de una serie de elementos sencillos, normalmente con colores en escala de grises o apagados, y que se simplifican a formas básicas como rectángulos y elipses. Dado que muchos de estos objetos se utilizan repetidamente, se puede crear una biblioteca básica de elementos reutilizables.
Para ello, dibuja primero un rectángulo y asígnale el estilo que quieras para representar un determinado elemento como un botón. Puede resultar útil añadirle un marcador de texto a un botón, dependiendo de la fidelidad del diseño. Dado que los botones se utilizan en un flujo de registro para avanzar a la siguiente fase del proceso, añade un cuadro de texto y céntralo en la forma del botón con las herramientas de alineación.
A continuación, combina estos elementos en un grupo y conviértelos en un componente mediante las opciones del menú que aparece al hacer clic con el botón derecho. Una vez completada esta operación, el elemento se puede arrastrar y utilizar varias veces, lo que elimina la necesidad de empezar de nuevo cada vez que se requiera un elemento de botón.
Repite este proceso con otros elementos comunes, como barras de navegación, marcadores de imagen y bloques generales. Invertir tiempo ahora en configurar los elementos comunes te ahorra tiempo durante todo el proceso y estos componentes se pueden utilizar para convertir tu diseño a una mayor fidelidad cuando llegue el momento.
Si no, se pueden utilizar complementos y kits de IU para crear estos elementos. Los complementos como Quick Mockup proporcionan una colección de elementos de malla metálica que se pueden convertir rápidamente en componentes o utilizarse tal como están.
Pasos importantes del flujo de registro
Para este flujo de registro, el primer paso es crear mesas de trabajo para cada una de las distintas pantallas o pasos del proceso. Un flujo de registro típico incluirá, entre otras cosas, lo siguiente:
Página principal: esta página suele incluir un mensaje de bienvenida o el logotipo de la aplicación, así como opciones para iniciar sesión o registrarse en el servicio.
Página de registro: puede ser una sola página o una serie de páginas utilizadas para recopilar información como la dirección de correo electrónico, el nombre y otros datos necesarios para la creación de la cuenta.
Páginas de proceso correcto y error: estas páginas son fundamentales para informar al usuario sobre el estado de la creación de la cuenta; si se ha realizado correctamente o si se ha producido un error, y cómo puede solucionarlo.
Este tutorial se centra en el flujo de registro, que permite a los nuevos clientes registrarse para obtener una cuenta. El mismo proceso mostrado aquí se puede aplicar para crear un diseño de página de inicio de sesión para los usuarios con cuentas existentes; sin embargo, en lugar de introducir su información para crear la cuenta, solo tendrían que introducir su nombre de usuario y contraseña para completar el proceso de inicio de sesión.
Diseño de la página principal
La página principal o pantalla de inicio tiene algunos elementos clave que se deben incluir. Ten en cuenta que tu caso de uso en particular puede tener diferentes requisitos u objetivos, por lo que tu diseño debería reflejarlos. Normalmente, se incluye lo siguiente:
• Logotipo de la aplicación
• Mensaje de bienvenida
• Opciones de registro o vínculo a la página de registro
• Opciones de inicio de sesión o vínculo a la página de inicio de sesión
En esta página, normalmente se resaltan las opciones de inicio de sesión o de registro. En este caso, para capturar los nuevos registros de usuarios de forma más fluida, se resaltan las opciones de registro en este flujo de trabajo, con las opciones de inicio de sesión disponibles, pero atenuadas en la parte inferior de la página.
Comienza arrastrando un componente de bloque general creado anteriormente y amplíalo por la parte superior de la pantalla, para crear un marcador para el reloj, la señal y otros elementos del sistema operativo. A continuación, dibuja un rectángulo básico o un marcador de imagen para un logotipo, centrado en la pantalla.
A continuación, añade un marcador para un mensaje de bienvenida. Este texto se puede escribir con la herramienta de texto o simplemente representarse mediante rectángulos redondeados simples. En las primeras fases del diseño, puede que sea más fácil simplemente bloquear este texto con formas en lugar de preocuparse por escribir el contenido.
La parte inferior de la página incluirá las opciones para registrarse (crear una cuenta) o iniciar sesión si el usuario ya tiene una. Es posible que tu diseño requiera opciones para servicios de autenticación de terceros como Registrarse con Google o Iniciar sesión con Facebook; si es tu caso, el diseño incluirá varios botones para registrarse que incluyan estas opciones específicas.
Para este tutorial, se creará un solo botón Crear una cuenta. Es el botón que permite que el usuario avance a la siguiente pantalla para introducir sus datos y crear una cuenta.
Con el elemento de botón, colócalo en el tercio inferior de la página, centrado horizontalmente debajo del mensaje de bienvenida. Debajo, dibuja una línea horizontalmente en la página, que abarque el ancho del botón y, a continuación, añade un botón más que diga Iniciar sesión debajo de la línea. Este botón será una opción secundaria, por lo que el estilo del botón se puede cambiar para reflejarlo.
Creación del formulario de registro
Ahora que la página principal está completa, se puede crear la siguiente vista del flujo. Los usuarios acceden a esta página después de hacer clic en el botón Crear una cuenta creado en la pantalla anterior. En esta página, los usuarios introducirán información como su nombre, correo electrónico y contraseña para crear una cuenta.
En esta vista, se añadirán algunos elementos de texto para indicar cuáles son los campos que, al igual que los botones de la pantalla anterior, tenían etiquetas. Puedes elegir añadir texto al título de la página o simplemente duplicar el marcador de texto y colocarlo en la parte superior de la página.
Debajo del título, hay varios elementos de formulario. Para facilitar las cosas, aquí se puede utilizar el elemento de bloque básico o se puede crear uno específico para los campos de entrada, incluido un borde. Coloca uno centrado en la página y, a continuación, con la herramienta de texto, añade una etiqueta en la parte superior izquierda que diga Nombre. Esto servirá de etiqueta para este campo de entrada: asegúrate de que el texto sea lo suficientemente pequeño como para que no parezca un título.
A continuación, copia y pega los elementos de campos de entrada de nuevo para crear campos adicionales para el correo electrónico, la contraseña y cualquier otro campo que represente los datos que quieres recopilar durante el registro. Agrupar los elementos facilitará este proceso. Añade un elemento de botón en la parte inferior que se utilizará para enviar el formulario y completar la entrada de formulario.
Con los flujos de registro, ten en cuenta que los formularios largos y con muchas preguntas pueden disuadir a los usuarios de registrarse, lo que puede reducir la tasa de conversión: mantén este formulario claro y conciso. Como alternativa, puede que quieras dividir los formularios individuales en vistas independientes, para que el usuario centre su atención en un solo paso en cada pantalla. En este caso, la vista sería un único campo de entrada, con un botón que dice Continuar o Siguiente. Intenta crear un flujo con cada método y pruébalos para ver cuál es el que mejor se adapta a tu audiencia.
Conexión con vínculos de prototipos
Una de las muchas ventajas de la creación de mallas metálicas en Adobe XD es que los flujos que estás creando se pueden convertir en prototipos en tiempo real, sin tener que exportar los diseños a otra aplicación.
Para configurar un vínculo de prototipo, cambia al modo Prototipo usando las pestañas de la parte superior de la pantalla. Una vez en el modo de prototipo, al hacer clic en una mesa de trabajo o un elemento, aparece una flecha azul que se puede arrastrar hasta el destino que elijas.
Prueba esto con las pantallas que has creado hasta ahora. Usa un activador Tocar y experimenta con las diferentes acciones. Simplifica el diseño de fases de malla metálica con Disolver o una Diapositiva sencilla. El uso de animaciones más complejas puede distraerte de lo que estás intentando probar en esta fase del diseño.
Finalización del flujo
Con el flujo de registro casi completado, se debe añadir un conjunto más de pantallas para informar al usuario sobre si su registro se ha realizado correctamente o no. Los mensajes de proceso correcto y error son esenciales para una buena experiencia y no deben pasarse por alto en las mallas metálicas.
El mensaje de proceso correcto se adapta bien a una página independiente que aparece al hacer clic en el botón Enviar. Habrá una pantalla de procesamiento y, a continuación, se puede mostrar el mensaje de proceso correcto. El mensaje de error funciona de forma similar, pero resulta muy útil mostrar el error en contexto siempre que sea posible. Esto significa que, si hay algún problema con el correo electrónico o la contraseña, resalta ese campo de entrada y ofrece información sobre lo que se puede corregir.
Creación de la pantalla de proceso correcto
La pantalla de proceso correcto se puede crear simplemente copiando la primera pantalla y eliminando el botón de registro y la línea horizontal. A continuación, reemplazaremos el marcador cuadrado por un icono de marca de verificación para indicar que se ha realizado correctamente. Si quieres, también puedes reemplazar los marcadores de texto por un mensaje real como “El registro se ha completado correctamente”.
Creación de la pantalla de error
Para crear la pantalla de error, duplica la página del formulario. Como los errores deberían mostrarse en contexto, esta página se puede manipular para mostrar el error. En este ejemplo, el campo de correo electrónico es el culpable. Selecciona ese bloque y aplica un estilo al campo de entrada para incluir un borde gris oscuro (probablemente será rojo en el diseño final). Con la herramienta de texto, añade un cuadro de texto debajo del campo de entrada que diga “Error: formato del correo electrónico no válido” o un mensaje adecuado que refleje el error que estás probando.
Otros elementos de la página, como el botón Enviar, se pueden modificar para reflejar el error o impedir que se siga avanzando hasta que este se resuelva.
Para conectar las pantallas de error o de proceso correcto al prototipo, puedes elegir conectarlas de una en una o duplicar las otras pantallas del flujo y crear dos flujos independientes, uno en caso de error y otro en caso de éxito. Esto te permitirá probar ambos flujos de trabajo con los usuarios e iterarlos.
Otra opción consiste en utilizar rectángulos transparentes como puntos de destino sobre el botón Enviar, cada uno de los cuales apunte a la pantalla de proceso correcto o error, para añadir misterio durante la prueba.
Se trata de una malla metálica de muy baja fidelidad, y la clave está en entender cómo varias pantallas y vistas se conectan para crear un recorrido del usuario. Empezar por agrupar elementos básicos en componentes para reutilizarlos hará que la transición a una mayor fidelidad sea más fácil. Se puede cambiar el estilo de los componentes para cada fase del proyecto y aplicarlos en todo el diseño, lo que hace que sea más eficaz iterarlos a lo largo del proyecto.
Comparte la malla metálica para recibir comentarios
Por último, con el modo Compartir en Adobe XD, este flujo se puede compartir para pruebas de usuario remoto o comentarios de diseño generales. Con el flujo seleccionado, elige Revisión de diseño o Pruebas de usuario en el menú desplegable de tipo de vínculo. Este vínculo se puede distribuir y, a medida que se completan las iteraciones, se puede actualizar fácilmente con un clic.
Enhorabuena, acabas de crear una malla metálica para un flujo de registro en Adobe XD. A continuación, aprovecha lo que has aprendido y aplícalo al flujo de inicio de sesión de este diseño de aplicaciones.
