Diseño de Interfaces: Flujos y Navegación en Apps

Clase 7 de 35 • Curso de Diseño de Interfaces Móviles

Resumen

Lo primero que tendremos que definir es el flujo que va a recorrer un usuario, de esta forma vamos a poder definir cuáles son las pantallas a las que debemos dar prioridades y los elementos que deben ser descubribles.

Decidir que recursos usar va a depender de la plataforma y el tipo de usuario para la que estés diseñando.

Kevin Costa

student•

Robar está bien

clap clap

Teofilo Rosales Gama

student•

es el refran favorito de muchos politicos en sudamerica (saludos desde Peru )😪😪😪😪😪😪😪😪😪😪😪😪😪😪😪😪😪

Laura Páez

student•

No inventar la rueda 🤗

Manuel Martínez Ortiz

student•

Excelente artículo en Medium sobre la navegación en las apps, un buen refuerzo al curso

https://medium.com/@juancaferraris/patrones-básicos-de-navegación-en-apps-móviles-5b0b160ed1bb

fermin martin

student•

Ciertamente es muy buen artículo bien escrito, claro, visual y actualizado. Los links a otros artículos tienen muy buena pinta. Investigaré mas los artículos de ++Medium++ así como los del diseñador que la ha traducido (Juan Carlos Ferraris)

Victoria Yleana Goicoechea Miguel

student•

Buen aporte, gracias!

Carlos Gómez Mont

student•

Para una mejor navegaciòn lo que debemos decidir en un aplicación es el flujo que va a recorrer un usuario.
Nos ayudara a:

Decidir que pantallas son mas importantes.
Secciones mas “descubribles”.(secciones ocultas como menú hamburguesa)
Siempre tomar en cuenta cuantas secciones se van a mostrar a un usuario.
Definir en donde va a mostrarse el menú de navegación en cada pantalla.

Una good practice es tener cinco secciones máximo en interfaz.

Diego Perdomo

student•

Lo primero que tendremos que definir es el flujo que va a recorrer un usuario, de esta forma vamos a poder definir cuáles son las pantallas a las que debemos dar prioridades y los elementos que deben ser más descubribles.

Hay varias aplicaciones que tienen el menú de hamburguesa, hace que otras secciones se puedan ocultar.
La buena práctica dice que vamos a tener una cantidad máxima (5) de accesos disponibles (Android - arriba | IOS - abajo). Si hay más de 5 se recurre al hamburguer menu.
Pueden haber botones con estados interactivos o alguno que sea visible todo el tiempo.
Decidir que recursos usar va a depender de la plataforma y el tipo de usuario para la que estés diseñando.
Instagram incorporó elementos de navegación de Snapchat.
Está bien innovar pero hay que revisar que no se afecte a los usuarios.

Yessica Alondra Avila Sánchez

student•

Más acerca del Hamburguer menu y por qué no usarlo.

https://www.nngroup.com/articles/hamburger-menus/

Diego Perdomo

student•

Gracias por compartir, está muy bueno el artículo.

Responsive design has many merits; however, one of its less fortunate effects has been an excessive popularity of mobile-first designs that translate poorly onto larger desktop screens. To be clear, “mobile-first” itself is not the issue. Rather, the issue is taking sufficiently good mobile designs and porting them to desktops where they do not work as well. Mobile-first should not equal mobile-only.

Ernesto Cruz Bravo

student•

-Cantidad máxima de elementos en una barra de navegación: 5
-“Tenemos que decir al usuario dónde está parado”.

Alejandro Sol Villaseñor

student•

Muy buen rescate de información!

Melvin Juárez

student•

Hay que ver las cosas más con ojos de diseñador que de usuario.

Italika México

student•

Navigation

Martin Coronel

student•

Tratar de evitar siempre que se pueda el menú “Hamburguer”, pero también pensar que en algunas occiones puede ser una muy buena solución.

Navegación top (Android) - Navegación bottom (IOS) (una cantidad máxima de 5 opciones)

Una buena interfaz debe comunicar al usuario donde esta parado. (Puede ser cambiando el estado de los botones de navegación hasta incluso colocar un titulo de la sección en donde esta parado.

Para poder decidir cual es la mejor forma de la navegación, es tener en cuenta a los usuarios y el contenido de nuestra App.

**Martín Coronel **
Diseño UX/UI
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

Marilenny Soriano

student•

Muchas garcías Martín, siempre veo tus comentarios y uno mas completo que el otro, gracias por compartir.

Bianca Meléndez Arellana

student•

Algo que también resulta muy útil es leer la documentación de Material Design y Human Interface Guidelines, ayuda mucho sobre todo para aprender los nombres técnicos de los componentes y su comportamiento standard.

JVN PURPLE

student•

Navegación

Una buena navegación debe ser intuitiva y predecible, tanto para usuarios nuevos como para quienes vuelven a usarla. Esta nos permite que los usuarios se desplacen por las diferentes secciones, páginas o funcionalidades.

Al definir la navegación es importante tener en cuenta lo siguiente :

Jerarquía de la información: Determinar la estructura y la relación entre las diferentes secciones o pantallas de la app. Implica decidir qué información o funcionalidades son más importantes y cómo se organizan de manera lógica y coherente.
Flujo de usuario: Definir cómo los usuarios se mueven de una pantalla a otra. Esto implica establecer las rutas y los enlaces entre las diferentes secciones para facilitar la navegación fluida.
Elementos de navegación: Identificar los elementos de interfaz que se utilizarán para moverse por la app, elementos como: barras de navegación, menús desplegables, botones de navegación, enlaces, pestañas o íconos interactivos.
Diseño visual: Considerar cómo se presenta visualmente la navegación en la app para que sea clara, intuitiva y atractiva. .

También es fundamental realizar pruebas de usabilidad para validar y ajustar la navegación según la retroalimentación de los usuarios.

Sebastian Nuñez

student•

Esto tendría que decirlo en el video o en los recursos. Falta pedagogía aca mepa.

Argemiro Reyes

student•

“Robar está bien!”

Miguel Angel Velazquez Romero

student•

No es robar, sino copiar. Si hubiera sido robo, instagram hubiera tenido que obntener el código fuente directamente sin autorización de snapchat y así si sería robo. Sin embargo, no fue así.

Cecilia Salazar

student•

Me encanta que a pesar de que es una clase para dispositivos, Juani use el pizarrón para explicarnos

Niko Rivera

student•

Navegación: Lo primero: Flujo de recorrido, definición de pantallas -Menú hamburgués (interacción de TAP) -Top navigation (accesos específicos en iconos) “botón navigation” -5 secciones máximo -Donde estoy? = icono subrayado (indica donde el usuario esta) -Element flot (interacción adicional) – determina acciones adicionales -Profundidad: System Boton (Android)

Carlos G

student•

La clase se centra en la navegación dentro de aplicaciones móviles y la importancia de diseñar una experiencia de usuario intuitiva. Se discuten diferentes tipos de navegación, como la barra de navegación superior e inferior, y el menú hamburguesa. Se enfatiza que la cantidad máxima de secciones visibles debe ser cinco, considerando la practicidad y la estética. También se mencionan formas de indicar la ubicación del usuario dentro de la aplicación y cómo estos elementos deben adaptarse a las plataformas específicas. La clave está en entender el flujo del usuario y diseñar una navegación que minimice la fricción.

Alexis Cova

student•

"Los grandes artistas copian, los genios roban" Pablo Picasso

José Gregorio Roldán Arzú

student•

Primero los usuarios y luego contenido.

También recordar que para diseñar interfaces “Mobile first”

antonella rios

student••

<u>Apuntes</u>

Definir el flujo del usuario. Esto nos permite definir las pantallas mas importantes para ellos. Nos va a decir las pantallas que tienen que ser mas descubriles. Por ejemplo las sesiones mas importantes del usuario no deberian ir oculatas en el menu de hamburguesa

En la tab navigacion 5 secciones máximo. Las buenas practicas dicen que tenemos una máximos de accesos disponibles. Si tenemos mas de 5 pueden ir al menu de hamburguesa.

Una buena interfaz tiene que decirle al usuario donde está

Las apps van a tener ciertas acciones importantes para el usuario y esas vamos a querer destacarlas. Lo podemos hacer con el elemento flotante o podemos definir que habra un espacio en particular que dependiendo de la seccion se utilizará para esa interaccion.

Decidir que recurso utilizar depende de la plataforma y el tipo de usuario para el cual estemos diseñando.

Para poder decidir cual va a ser la mejor forma de presentar la navegacion es super importante tener en cuenta: Los usuario y al contenido.

Definir el flujo del usuario

Esto permite identificar las pantallas más importantes y asegurar que sean fáciles de descubrir. Las secciones clave no deberían quedar ocultas dentro de un menú hamburguesa.

Navegación inferior (tab bar)

Las buenas prácticas recomiendan un máximo de 5 secciones. Si hay más opciones, las adicionales pueden ir al menú hamburguesa para no sobrecargar la navegación principal.

Orientación del usuario

Una buena interfaz debe dejar claro dónde está el usuario en todo momento. Esto puede lograrse no solo mediante el estado activo de los íconos en la barra de navegación, sino también mostrando un título claro que indique la sección o acción actual.

Acciones principales

Cada app tiene acciones prioritarias para el usuario. Esas deben destacarse, ya sea mediante un botón flotante (FAB) o reservando un espacio específico para esa interacción según cada sección.

Elección del recurso adecuado

La decisión de cómo presentar la navegación depende de la plataforma, las necesidades del usuario y el tipo de contenido.

Criterios clave para definir la navegación

Conocer a los usuarios
Entender la estructura del contenido

Ambos factores son esenciales para decidir la mejor forma de presentar la navegación y facilitar el uso del producto.

Luis Gonzalez

student•

El menú hamburguesa se usa mucho en web y está bien que así sea. Yo no puedo dejar a la vista un menú con varios items a la vista porque quedaría mal. Al cargarlos dentro de dicho menú, estoy favoreciendo la UX.