Sistemas de Menú y

Esquemas de Navegación
Loarte Benites, Jonathan Joseph
Preguntándonos
Debe ser simple y consistente.

Se obtiene por medio de preguntas:

¿Cómo el usuario recorrerá la aplicación?

¿Por medio de menús o del contenido en sí mismo?

Si viene una notificación ¿Cómo volverá atrás cuando haya avanzado?

Boom Menú Pros:
Es atractivo
visualmente y hace
que usuario pueda
navegar
centrándose
totalmente en las
opciones que le
aparecen.

Contras:
Jamás aplicar si se
tiene demasiadas
opciones que
mostrar.
Circle Menú Pro:

Usuario jamás presionará por

error una opción.

Usar cuando se tienen pocas

opciones que mostrar.

Contras:

Cantidad de opciones limitadas.

Pone a segundo plano ya que
crea un nuevo nivel de
profundidad temporal.
Fantasy Slide Menú
Pro:

Puedes setear información en ambos extremos de la

pantalla.
Usar cuando se desea ahorrar espacio en la vista de
interacción principal.

Contras:

La información de la pantalla principal pasa a

segundo plano.
Fácil de inducir a error al de pronto hacer display
siempre que se desplace a los extremos del
smartphone.
Flyout Menú
Pro:

Sirve para ahorrar espacio y no tener que colocar por

ejemplo toda la paleta de colores en primer plano.

Contra:

A un usuario que no es asiduo al uso de aplicaciones

móviles este menú le puede marear un poco debido a
que nada indica que se abrirá un conjunto de opciones.
Tap Bar Menu
Pro:

Ahorrar espacio y permitir anidar

funcionalidad y vistas.

Contra

Solo se puede poner pocas opciones.

En la última opción se puede poner una
opción de más para poner otras
funcionalidades.
Spin Menú
Pro:

Permite visualizar distintas vistas.

Contra:

Nada indica que puedas hacer eso.

No hay nada que indique al usuario
esta funcionalidad.
Puede provocar confusión en la
navegación-
Filter Menú
Pro:

Cuando se desee dar una serie de

funcionalidades es una buena opción a usar
por su forma dinámica de hacer display.

Contra:

Ocupa mucho espacio al hacer el display.

Duo Navigation
Pro:

Usar cuando la información de la

ventana principal no hay tanto problema
que quede en segundo plano por un
momento.

Contra:

Nos lleva a un nuevo nivel de

profundidad y si queremos qué usuario
recuerde opciones anteriores es un
problema.
Gooey Menú
Pro:

Usar cuando se desee seleccionar más de una opción

a la vez.

Contra:

Ocupa un espacio más grande que un simple tap bar.

Cantidad de opciones limitadas.

All Angle Expandable Button
Pro:

Se pueden listas muchas opciones ya qué la opción

de angulo 90 hace qué no haya confusión al
seleccionar opciones.

Contra:

Pantalla anterior queda inmediatamente a segundo

plano.
Android Snake Menú
Pro:

Información no pasa a segundo plano ya qué se puede

seguir interactuando con la pantalla anterior.

Contra:

Puede causar confusión a usuarios no asiduos a

aplicaciones móviles.
Thumbnail Menú
Pro:

Se puede mostrar mucha información.

Contra:

Se agregan otros niveles con misma jerarquía.

Solo usar cuando la información de las otras vistas no

tengan qué ser recordadas.
Si se desea ver varios platos de comida. por ejemplo.
Navegación por hamburger
Patrón más común para ahorrar
espacio. Nos permite ocultar la
navegación en el borde izquierdo de la
pantalla y se muestra solo luego de la
acción del usuario.

Cuando usar? Cuando queremos qué

usuario se concentre en contenido
principal.
Pros
Espacio para una gran cantidad de elementos a mostrar. La principal ventaja de
este tipo de menú es que puede contener cómodamente una larga lista de
opciones de navegación en un espacio pequeño.

Diseño limpio. Libera espacio en la pantalla al colocar todos los elementos

relacionados a la navegación en un menú desplegable.
Contras

Es menos “descubrible”. Lo que está fuera de la vista, está fuera de la mente.

Cuando la navegación está oculta, los usuarios son menos propensos a utilizar la
navegación. Aún cuando esta opción parece convertirse en un estándar, muchos
usuarios sencillamente ni siquiera piensan en abrirlo.

Colisiona con reglas de navegación de varias plataformas. El hamburger menu se

convirtió en un estándar en Android (con el nombre de Navigation drawer en
Material Design), pero en iOS no puede implementarse sin colisionar los elementos
básicos de navegación, y esto puede sobrecargar la barra de navegación
Tab Bar
Este patrón fue heredado del diseño de
interacción para Desktop. Usualmente
contiene pocas opciones de importancia
similar que requieren acceso directo
desde cualquier parte de la app.
Pros
Comunica de manera rápida y sencilla la posición actual del usuario. Con pistas
visuales correctamente utilizadas (iconos, etiquetas y colores) no es necesario
ninguna explicación extra.
Contras
Número limitado de opciones. Si tu app tiene más de cinco opciones sería muy
difícil de acomodarlas en un navigation bar respetando el tamaño “óptimo de
objetivo de toque”.
Navegación basada en gestos
Ejemplo:
Tinder cambió su
industria con el gesto
swipe, de hecho, este
gesto se transformó en
la definición del
producto en sí mismo.
La gente asocia la app
con el “swipe a la
izquierda” o “swipe a la
derecha.”
Pros
Libera espacio en la UI. Agregando gestos en el corazón de tu diseño te permite
crear interfaces minimalistas y salvar espacio en pantalla para mostrar contenido
valioso.

“Interface Natural.” Luke Wroblewski, en su articulo, nos cuenta sobre cómo 40

personas en nueve diferentes países fueron consultadas para crear gestos para
28 diferentes tareas tales como borrar, escrollear, zoomear, etc. Lo importante a
notar es los mismos tienden a ser similares sin importar cultura y experiencia. Por
ejemplo, cuando les pidieron un gesto para “borrar” la mayoria de los
entrevistados— sin importar nacionalidad — intentaron mover el objeto fuera de la
pantalla.
Contra
Navegación invisible. Una de las reglas de diseño más importantes en UI es
visibilidad: a través de los menues, todas las acciones posibles son visibles, o
sencillamente descubribles. Una interface invisible puede ser muy seductora, pero
por el hecho de ser invisible también se enfrentará a varios problemas de
usabilidad: siendo que los gestos siempre están ocultos, los usuarios necesitan
encontrarlos primero y, tal como ocurre con el hamburger menu: si escondes una
opción, menos personas la van a utilizar.

Agrega esfuerzo al usuario. Si bien la mayoría de los gestos son naturales,

algunos de ellos no son simples de aprender o recordar. Cuando diseñamos una
navegación basada en el gesto debemos considerar que cada vez que quitamos
algo de la interface, la curva de aprendizaje de la app se incrementa y sin unas
buenas pistas visuales el usuario puede sentirse confundido sobre cómo
interactuar con la app.
Botón de acción flotante
El patrón; botón de acción flotante, le
permite a los programadores resaltar un
sola aplicación que sus usuarios pueden
realizar mientras en una sección de una
aplicación. Ejemplos de tales acciones
son una composición de un botón de
acción flotante en un correo de un cliente,
un botón play/pause en una aplicación de
música, o un botón añadir en aplicaciones
que manipulan eventos o datos.
Utilizar poco nivel de profundidad
Para que el usuario no se pierda en aplicación
siempre sepa dónde se encuentra.

Se sugiere solo 2 o 3 niveles.

Ejemplo:
Usar las Action Bar
Para qué?

Para concentrar las acciones

principales de la aplicación en un
mismo lugar.
Evitar uso de botones
Los botones recuerdan mucho a la web y aplicaciones de escritorio.

La experiencia táctil se basa en contenido.

La navegación debe basarse en imágenes o textviews y en la medida de lo

posible trasladar los botones a la ActionBar.
Sustituir pestañas por vistas desplazables
Las pestañas obligan al usuario a presionar
en un área reducida normalmente en la parte
superior de la pantalla para moverse de un
elemento a otro.
No crear botones para volver atrás
Es un error grave cuando se porta una app de Ios a Android.
Ese boton ya existe en android.
En caso que desees usar pestañas o mejor tabs!
Las pestañas —o tabs— se pueden utilizar para filtrar contenidos o cambiar entre
pantallas que, de acuerdo a la arquitectura de información, tienen el mismo nivel
de jerarquía, indicando siempre dónde se está y hacia dónde más se puede ir.

Las buenas prácticas indican que es necesario destacar siempre la pestaña

seleccionada, mantener el orden y la ubicación inicial —que no cambien de
pantalla en pantalla— y no usarlas para incluir otras acciones distintas a la
navegación.
Listas
Las listas pueden mostrar tanto textos como imágenes, pero es importante
siempre jerarquizar su contenido. Por ejemplo, en una aplicación de correo
electrónico es habitual darle mayor importancia al nombre del remitente que al
asunto del correo, la fecha de recepción o las primeras palabras del mensaje.
Ordenar los elementos dentro de una lista ayuda a visualizar el nombre del
remitente —en este caso el dato más importante— de un primer vistazo.
Navegación del lado derecho
La navegación y las relaciones maestro detalle en Android se leen de izquierda a
derecha. por tanto la posición adecuada es la izquierda.
Drawer con navegación profunda
No debe existir sub navegación en los drawer, si los niveles deben tener hijos lo
harán anidados en el mismo drawer no anidando drawers.
Volver atravesando pestañas
Al desplazarnos por pestañas el botón de back conduce a la página anterior no a
la pestaña anterior.
Navegación en el overflow
El overflow del action bar es para acciones secundarias no para la navegación.
Página para aquellos que usan mapas
https://www.xatakandroid.com/aplicaciones-android/siete-aplicaciones-mapas-offli
ne-para-viajar-te-quedes-conexion