Por lo general, las interfaces móviles utilizan los mismos componentes de navegación y entrada que los ordenadores de sobremesa. Los componentes de navegación ayudan a los usuarios a navegar por una aplicación de la manera más lógica e intuitiva. A su vez, los componentes de entrada se centran en recopilar datos sin ningún coste de interacción adicional ni conjeturas.
¿Qué hace que el diseño de estos componentes para móviles sea tan difícil? Las personas tienden a usar sus teléfonos para múltiples tareas, como navegar por noticias, escribir mensajes o pagar facturas cuando están de viaje y no usar ambas manos. Además, los dispositivos móviles carecen de espacio en la pantalla. Por lo tanto, los diseñadores deben saber cómo presentar las principales características de la aplicación con un espacio mínimo sin comprometer la claridad.
Tener una comprensión clara de la anatomía de la navegación, los componentes de entrada y sus usos más comunes puede ayudar a los diseñadores a anticiparse a las limitaciones técnicas y contextuales y a diseñar utilizando las mejores prácticas.
En el móvil, los menús son componentes de la interfaz de usuario de navegación que presentan una lista de opciones al tocar. La ventaja de usar menús es que proporcionan muchas opciones de acción adicionales sin ocupar mucho espacio en la pantalla.
Hay diferentes tipos de menús. Por ejemplo, los menús básicos aparecen al pulsar un botón, un icono (por ejemplo, un menú de hamburguesas) u otros controles. Pueden o no contener iconos que acompañan a las etiquetas para ayudar a los usuarios a identificar la acción más rápido.
Los menús contextuales aparecen cuando los usuarios interactúan con un elemento específico y generalmente se activan mediante el gesto de tocar y mantener pulsado. Normalmente, los menús contextuales contienen las acciones más comunes relacionadas con el contexto actual.
¿Cuáles son las mejores prácticas para diseñar menús eficientes?
Selecciona la posición del menú derecha
Los menús suelen estar cerca o delante del elemento que activa su apariencia. Si se cortan por el borde de la pantalla, muévelo al otro borde del elemento o por encima de él.
Priorizar las opciones del menú
Coloca los elementos más utilizados en la parte superior del menú para minimizar las acciones de los usuarios.
Haz que el menú destaque
Los menús que aparecen en la parte superior del contenido pueden carecer de contraste y perderse en segundo plano. Añade sombras y elevación para indicar la prioridad de un menú.
Separar visualmente los elementos del menú
Utiliza divisores para ayudar a los usuarios a escanear los menús más rápido.
Establecer la altura adecuada
Material Design recomienda elegir la altura máxima del menú para que sea al menos una fila menos que la altura de la interfaz de la aplicación.
Mejora los menús con una pequeña animación de entrada. Proporciona comentarios a los usuarios y hace que la interacción sea más atractiva.