La barra de pestañas inferior, el cajón lateral y el botón de acción flotante (FAB) son los patrones más utilizados para la navegación móvil de nivel superior. Si quieres diseñar rutas de navegación claras y sencillas, utiliza uno de estos patrones en tu app.
Incorporar copia real
Después de que estés satisfecho con tu jerarquía visual, empieza a sustituir los marcadores de posición y el texto ficticio por contenido real (copia real o que sea relevante para el usuario). Hay una razón importante por la que debemos evitar el texto ficticio en esta fase: el Lorem Ipsum no comunica cómo la página ayuda a los usuarios a alcanzar sus objetivos. Además, muchos de los elementos visuales que creamos se basan en el contenido que tenemos en nuestros productos. A medida que empieces a añadir contenido real, te darás cuenta de que algunos elementos de interfaz de usuario (o incluso secciones de interfaz de usuario) no son necesarios para tu producto.
A veces, a medida que llenas tus wireframes con detalles reales, puedes notar que el diseño que tienes no funciona bien. En este caso, es importante iterar y encontrar una mejor manera de representar la información que está tratando de comunicar.
Después de llenar la página con la copia real, pruebe si la página fluye para el usuario. Algunos contenidos de su página podrían estar desordenados. Este es el momento perfecto para reorganizar el contenido de la página y mejorar la composición.
Abajo hay un ejemplo de nuestro wireframe para nuestra pantalla de inicio que tiene datos reales. Se utilizan diferentes tamaños de fuente para priorizar algunos bloques de la UI (como las categorías de alimentos).
Asegúrate de que tu contenido se escala bien
Si tu diseño se ve muy bien en una pantalla de teléfono de tamaño medio como la del iPhone XS, no significa que los usuarios del iPhone 5 y del iPhone XS Max vayan a tener la misma gran experiencia. Aunque está absolutamente bien empezar con una pantalla de tamaño medio cuando se hace un wireframe, también es esencial comprobar cómo se ve el contenido en diferentes tamaños de pantalla (tanto en pantallas más pequeñas como más grandes) y ajustarlo si es necesario.
Conecta las páginas para crear un flujo
Aunque es posible enviar tu diseño como una colección de pantallas individuales, es mejor crear un flujo a partir de ellas. Los flujos de UX facilitan al equipo la comprensión de los detalles de los escenarios de interacción – comunican cómo se supone que la gente interactúa con un producto.
Los flujos de UX también te harán pensar en la funcionalidad de la aplicación como un todo. Por ejemplo, después de visualizar el flujo UX, puede que te des cuenta de que necesitas introducir un estado extra entre la pantalla de inicio y una página con resultados de búsqueda (porque el backend de tu sistema tardará unos segundos en devolver los resultados).
También es una buena idea dar a cada pantalla un número de referencia. Los números de referencia le harán la vida mucho más fácil a la hora de discutir el proyecto con otros miembros del equipo o con las partes interesadas.
Prueba tus decisiones de diseño
La prueba es el paso final (y uno de los más importantes) del wireframing. Probar implica interacciones con el usuario, por eso este término se utiliza a menudo en el contexto de los prototipos. Pero es posible realizar pruebas sencillas para un flujo creado a partir de wireframes. Utilizando Balsamiq, es posible crear prototipos sencillos en los que se puede hacer clic uniendo los wireframes. El objetivo de estas pruebas es ver si las pantallas funcionan juntas.
Conclusión
El objetivo final de los wireframes es identificar el esquema del contenido y crear una base sólida para los futuros pasos del proceso de diseño. Los wireframes bien diseñados facilitan mucho el diseño visual y de interacción.
Como en cualquier actividad de diseño, dedica el tiempo suficiente a experimentar con diferentes herramientas y procesos y encontrarás tu propio estilo para hacer wireframes. La práctica hace la perfección.
Palabras de Nick Babich
Publicado originalmente en Balsamiq’s UI Education Site