Ejemplos de menús de navegación móvil I DevTeam.Space

¿Está interesado en los mejores ejemplos de menús de navegación móvil? Has venido al lugar correcto.

En este artículo, discutiremos algunos ejemplos de menús móviles y comenzaremos con algunas características esenciales de un buen menú móvil. Empecemos.

¿Qué características debe tener un buen menú móvil?

Cuando compite con potencialmente miles de aplicaciones por la atención de los usuarios, hacerse notar no es fácil. No olvide que algunas también pueden ser aplicaciones gratuitas, algo que hará que su trabajo sea aún más difícil.

Mantener el enfoque en las necesidades del usuario siempre debe ser su principal prioridad. Esta es la regla de oro y constituye la base del éxito.

Un buen diseño de menú móvil debe cumplir con los siguientes criterios:

Debería ser sencillo. Para lograr esto, necesitas priorizar tu contenido. Ponga los botones de acción que es más probable que los usuarios deseen al frente.

La visibilidad debe ser buena y conveniente para que sus usuarios no tengan que luchar para encontrar/recordar los botones de acción que requieren regularmente. Deberían poder verlos fácilmente en el menú móvil.

Claridad. Su menú móvil debe dejar muy claro a los usuarios exactamente cómo se debe utilizar. La regla de oro aquí es mantener los menús simples.

Consistencia. Su menú debe estar en la misma ubicación para todas las páginas para que los usuarios no tengan que buscarlo para encontrarlo.

Para ciertas aplicaciones, los usuarios de teléfonos inteligentes usan sus pulgares para realizar acciones en la pantalla. Por lo tanto, en estos casos, los botones que están al alcance del pulgar tendrán mayor prioridad. Mantenga sus importantes botones de ‘llamada a la acción’ (CTA) al alcance de los pulgares. Lea más sobre la importancia de este punto en “Las reglas de oro del diseño de navegación inferior”.

Debe configurar su objetivo táctil en 9 mm cuadrados o más, debido a la facilidad de uso que proporciona. Tenga en cuenta que para adaptarse a las personas con discapacidad, puede ofrecer una opción para aumentar el tamaño de los botones de las teclas.

Considere usar una barra de pestañas para las funciones más importantes. Un buen ejemplo es cómo Facebook tiene uno en su aplicación para las noticias.

Algunas pantallas móviles son pequeñas. Por eso, en algunos casos con pantallas pequeñas, los usuarios hacen scroll para ver más opciones. Si bien la mayoría de las aplicaciones se adaptan a las pantallas más grandes más comunes, intente minimizar la necesidad de que los usuarios se desplacen.

Recuerde usar iconos y diseños universalmente reconocidos tanto como sea posible.

Lea más sobre estos criterios en “Sugerencias, consejos y herramientas para crear, ejecutar y hacer crecer sus aplicaciones móviles. Obtenga información y mejore sus aplicaciones.”

Ahora revisemos algunos buenos ejemplos de menús de navegación móvil.

Algunos ejemplos comunes de menús móviles

Patrón de diseño n.º 1: Menú de hamburguesas

El menú Hamburguesa es uno de los patrones de navegación móvil más comunes. Dado que los usuarios a menudo eliminan aplicaciones después de usarlas solo una vez, es vital que una aplicación transmita claramente sus características más importantes, de lo contrario, los usuarios no verán su verdadero valor.

Una gran razón de este problema es la falta de espacio en la pantalla de un móvil. Como ya he comentado, es difícil que quepa mucha información en la pantalla de un móvil. El menú Hamburger oculta funciones detrás de los botones de acción principales, lo que le permite incorporar muchas más acciones/funciones de las que tendría de otra manera.

Por lo tanto, si tiene una característica principal asesina, frente a la cual todo lo demás es secundario, entonces este patrón de navegación móvil es bueno para usted, ya que le permite poner eso por adelantado. De esta manera, cuando los usuarios accedan a su aplicación, su atención se centrará en su función principal.

Una vez que se hayan familiarizado con la función, deberán hacer clic en el ícono de la hamburguesa en el otro extremo de la pantalla para acceder a otras acciones.

Por ejemplo, Uber quiere que primero ubiques un taxi. Esta es su función principal. El pago y otras funcionalidades vienen después y por lo tanto son secundarias. Una vez que los usuarios han localizado un taxi con acceso rápido a la función principal, pueden hacer clic en el menú Hamburguesa para realizar las acciones subsiguientes o secundarias.

Lea más sobre esto en “Patrones básicos para la navegación móvil: pros y contras”.

Pros y contras del menú Hamburguesa

La principal ventaja de este sistema de menús es que libera espacio en la pantalla. La otra ventaja importante es la gran cantidad de opciones de navegación que permite. Esto significa que los usuarios no tendrán que luchar con menús abarrotados que ofrecen muchas opciones a la vez.

También es un patrón de menú muy conocido, por lo que la mayoría de los usuarios están familiarizados con él.

Sin embargo, también hay desventajas en el menú de hamburguesas. En primer lugar, la mayoría de las funciones están ocultas detrás del menú animado principal para que los usuarios no puedan verlas por adelantado. Esto reduce la visibilidad y requiere que los usuarios se tomen más tiempo para conocer el potencial real de su aplicación.

Otra desventaja de este sistema de menús es que es más complejo. Los usuarios a menudo no pueden entender claramente dónde se encuentran en el sistema de menús de la aplicación. Como resultado, deben hacer clic en el ícono del menú desplegable Hamburguesa para saber dónde están.

Al ser un ícono de menú que se encuentra en la parte superior de la pantalla, el botón Hamburguesa también es difícil de alcanzar con el pulgar.

Otra desventaja más del patrón Hamburger es que entra en conflicto con los botones de navegación de iOS. Se adapta bien a los teléfonos Android, sin embargo, interfiere con el botón Atrás de iOS, que también se encuentra en la esquina superior izquierda de la pantalla. Esto significa que los usuarios de iOS deben hacer ambos más pequeños u optar por usar solo uno de ellos.

Lea más sobre estas desventajas en “La guía definitiva del menú de hamburguesas y sus alternativas”.

Patrón de diseño n.º 2: barra de pestañas

¿Tendrá varias acciones igualmente importantes en su aplicación? Si lo hace, entonces ya habrá identificado una limitación crucial con el menú de hamburguesas.

Dicho sistema de menú ocultará todo detrás de un cajón y solo mostrará su función de acción principal en la pantalla. En tal situación, es mejor optar por un diseño de menú de barra de pestañas diseñado para abordar esta situación.

Las barras de pestañas generalmente se colocan en la parte inferior de la pantalla, y cada acción importante se coloca una al lado de la otra dentro del menú. Dado que todas estas acciones pueden considerarse igualmente importantes, sus usuarios deberían poder acceder a ellas desde cualquier lugar de la aplicación.

Este es el problema que resuelve una barra de pestañas. Un menú de barra de pestañas típico es persistente, es decir, siempre permanece a la vista. La aplicación iOS Medium es un ejemplo de un sistema de menús de este tipo.

Pros y contras del menú de la barra de navegación de pestañas

Un menú de barra de pestañas ofrece las siguientes ventajas:

• Tienes un menú viable en todo momento, a diferencia del menú Hamburguesa. Lea más sobre esta ventaja en “3 buenas razones por las que podría querer eliminar ese menú de hamburguesas de su producto”.
• Los usuarios móviles pueden acceder claramente al menú en todo momento.
• Los menús típicos de la barra de pestañas incluyen iconos reconocibles. Aunque la barra de pestañas en la parte inferior de la pantalla es estrecha, el uso de dichos íconos ayuda a incluir acciones importantes que son esenciales para el funcionamiento de la aplicación. Imagínese tratar de usar sus teléfonos móviles sin botón de retroceso para comprender por qué esto es tan importante.
• Las etiquetas o los colores se pueden usar en la barra de pestañas como herramientas fáciles para que los usuarios sepan dónde están.
• Los menús de la barra de pestañas se encuentran en la ‘zona de operación del pulgar’, por lo que los usuarios pueden acceder a ellos fácilmente incluso cuando sostienen el móvil con una mano.

También hay desventajas del menú de la barra de pestañas, por ejemplo:

• Si tiene más de 5 acciones de igual importancia, entonces no puede incluirlas todas en la barra de pestañas.
• Debe usar el menú de la barra de pestañas en la vista infantil; de lo contrario, su diseño confundirá a los usuarios. Lea más sobre esto en “Las barras de pestañas son los nuevos menús de hamburguesas”.
• iOS y Android tienen diferentes ubicaciones y opciones para las barras de pestañas. Debe tener en cuenta estas diferencias al diseñar la aplicación. Esto complica su proceso de desarrollo.
• A veces, los íconos universalmente reconocibles son difíciles de encontrar para ciertas acciones/funciones. Recuerde, a menos que use íconos fácilmente reconocibles, corre el riesgo de que los usuarios no puedan entender el menú de la barra de pestañas.

Patrón de diseño de navegación móvil n.º 3: el menú “Prioridad +”

Como sin duda habrá notado, las revistas de noticias populares o los sitios web de medios tecnológicos tienen aplicaciones móviles. También puede imaginar la gran cantidad de contenido que tienen, por lo tanto, encuentran que el tamaño limitado de la pantalla móvil es un tremendo desafío.

Sin embargo, la buena noticia es que siempre tienen elementos prioritarios y enlaces importantes, como noticias de última hora, etc. para colocarlos al principio.

En este caso, una barra de pestañas no es adecuada porque las prioridades de la aplicación son diferentes. Además, dado que estas aplicaciones quieren mostrar un menú más grande, el menú Hamburguesa tampoco funciona.

En tal caso, el menú “Prioridad +” responde perfectamente a estos requisitos. Aquí, el contenido principal se clasifica claramente dentro del menú, mientras que el contenido de menor prioridad se oculta bajo un botón “Más” que se encuentra en la parte inferior del menú que contiene enlaces secundarios.

El periódico The Guardian es un ejemplo de una empresa que utiliza este diseño de navegación de aplicaciones móviles.

Pros y contras del menú “Prioridad +”

Este diseño de menú receptivo ofrece las siguientes ventajas:

• Utiliza el espacio limitado de la pantalla móvil para contenido prioritario. Lea sobre esto en “Una breve descripción de los patrones de navegación receptiva”.
• Si aumenta el espacio de la pantalla, se puede mostrar más contenido prioritario.
• Es un diseño de menú de navegación móvil adaptable y receptivo, es decir, escalarlo para diferentes tamaños de pantalla es fácil.

La principal desventaja de este sistema de menús es que debes priorizar ciertas acciones. Dado que los diferentes usuarios tienen diferentes prioridades, deberá adaptar el menú de su aplicación para que se adapte a la mayoría en lugar de a la minoría.

Diseño de menú móvil n.º 4: botón de acción flotante

Supongamos que tiene un enfoque de uso esencial para su aplicación. Naturalmente, esperaría que sus usuarios hicieran esta acción la mayor parte del tiempo, por lo tanto, debe ser prominente. En tal caso, el botón de acción flotante podría ser la mejor opción de diseño de menú móvil para sus necesidades.

Los usuarios de Android están bastante familiarizados con este sistema de menús, ya que Android utiliza el sistema de diseño de materiales. Anteriormente expliqué las distintas características del diseño de material de Android, si desea leer más, lea “¿Cómo convertir una aplicación de Android a iOS?”.

Este sistema aparece como un círculo flotante sobre la acción prevista con efectos de desplazamiento. Cambiará de color cuando te enfoques en él y lo levantará cuando lo selecciones. Las aplicaciones de música a menudo usan este enfoque para su botón de reproducción.

Si elige seguir esta ruta, recuerde usar solo un botón de este tipo por pantalla, ya que no debería tener demasiadas acciones importantes por pantalla.

Ventajas y desventajas del ‘Botón de acción flotante’

Hay varias ventajas de este enfoque de diseño de animación de menú móvil, por ejemplo:

• El botón es muy prominente, por lo tanto, dirige efectivamente a los usuarios a la acción más importante.
• Ocupa muy poco espacio en la pantalla.
• La mayoría de los diseñadores utilizan colores estéticamente agradables, lo que produce una emoción positiva en la mente de los usuarios.
• Es más fácil de usar que los botones de acción tradicionales.

Sin embargo, también hay algunas desventajas:

• Al ser tan prominentes debido a su color y diseño, estos botones pueden distraer a los usuarios del contenido de la aplicación.
• Los botones de acción flotantes solo pueden acomodar íconos y no etiquetas de texto. Encontrar un ícono universalmente reconocible es difícil, por lo tanto, en algunos casos, el botón puede confundir a los usuarios.

Obtenga más información sobre los botones de acción flotantes en “Botón de acción flotante en diseño UX”.

Diseño de menú móvil n.º 5: navegación a pantalla completa

Supongamos que tiene una aplicación basada en tareas o direcciones, su atención se centrará naturalmente en crear una dirección precisa para guiar a los usuarios al contenido. La navegación a pantalla completa es una excelente opción en estos casos. En este enfoque de diseño, toda la pantalla se utiliza con fines de navegación.

El menú móvil de pantalla completa se utiliza para mostrar todas las diferentes acciones que el usuario puede realizar. Una vez que los usuarios toman una decisión e inician una acción, la siguiente página se usa para enfocarse completamente en el contenido requerido. Obtenga más información al respecto en “22 conceptos y ejemplos en vivo de menús de navegación a pantalla completa”.

Un buen ejemplo de esto es el holamente aplicación, que ayuda a los usuarios con la meditación, la relajación y la atención plena. La ventaja de este enfoque es el enfoque similar a una navaja que utiliza para ayudar a los usuarios a tomar una decisión.

Ningún contenido adicional u opciones de menú los distraerá mientras aún deciden cuál de las opciones más adecuadas elegir.

La desventaja de este sistema de menús de pantalla completa es que no puede mostrar ningún contenido en la primera pantalla, porque su menú de navegación ocupa todo el espacio.

Diseño de menú móvil n.º 6: navegación basada en gestos

Con la adopción masiva de dispositivos móviles con pantalla táctil, comprender los mejores movimientos de la mano para operar dichos dispositivos se volvió importante para los diseñadores de dispositivos móviles. Hoy en día, el éxito de una aplicación móvil a menudo depende de qué tan bien utilice gestos como tocar, tocar dos veces, deslizar, etc.

Tinder es un buen ejemplo de una aplicación que utiliza navegación basada en gestos. Tinder popularizó la selección por deslizamiento y la convirtió en una gran parte de su producto. Lea “¿Cómo crear una aplicación de citas como Tinder?” si necesita crear una aplicación similar.

Este enfoque tiene muchas ventajas, por ejemplo:

• El diseño depende de la comprensión de los gestos, por lo tanto, puede liberar espacio en la pantalla para el contenido.
• Su interfaz de usuario se sentirá más natural ya que la mayoría de las personas en todo el mundo usan los mismos gestos para una variedad de otras aplicaciones.

Sin embargo, también hay ventajas, por ejemplo:

• Esto hace que su menú de navegación sea invisible, por lo tanto, algunos usuarios pueden encontrarlo difícil de usar.
• Mientras que algunos gestos son naturales para ciertas acciones, muchos otros no lo son. Si crea una aplicación que hace que los usuarios aprendan gestos poco naturales, habrá resistencia a la adopción.

Lea más sobre esto en “Para usar o no usar: controles de gestos táctiles para interfaces móviles”.

Pensamientos finales

He explicado varios ejemplos de menús móviles. Todos estos ejemplos de menús móviles representan los mejores enfoques, sin embargo, son los requisitos de su aplicación los que finalmente definirán cuál usará.

Debe pensar detenidamente en su usuario para establecer el mejor enfoque. Para comenzar, realice una encuesta de mercado sobre cómo usan su tipo de aplicación y observe otras aplicaciones existentes en el mercado. Decida su enfoque basado en una investigación sólida. En caso de duda, considere obtener asesoramiento profesional.

Las empresas profesionales de desarrollo de software, como DevTeam.Space, pueden ayudarlo a crear una aplicación móvil competitiva en el mercado que incluya una interfaz de aplicación fácil de usar y orientada al usuario.

Puede asociarse con la comunidad de desarrolladores de aplicaciones móviles expertos en el campo en DevTeam.Space completando este formulario rápido con las especificaciones iniciales de su aplicación móvil y uno de nuestros gerentes de cuenta se comunicará con usted para discutir más detalles.

Preguntas frecuentes sobre ejemplos de menús móviles