Contenidos
Regiones y orientación de la UI
Esta sección se encarga de mostrar la estructura de alto nivel de nuestras apps, ya sea en móviles como en tablets y ordenadores. También contiene orientaciones.
Nota: Para las orientaciones en relación a la hora de ordenar los elementos en el espacio Z para conseguir un correcto comportamiento y sombras, observa las secciones de Entorno y Objetos en un Espacio 3D.
Las apps son muy diferentes en función de las necesidades que se encarguen de cubrir. Por ejemplo:
- Apps que se crean alrededor de una única actividad como puede ser una calculadora, cámara o muchos juegos.
- Apps cuyo propósito principal es desplazarse entre actividades diferentes sin llegar a tener una navegación excesivamente profunda como la aplicación del marcador del teléfono que solo ofrece “favoritos”, “recientes”, y contactos.
- Apps que combinan un amplio conjunto de vistas de datos con una navegación profunda como puede ser una alta cantidad de directorios diferentes de una aplicación de correo o categorías de productos en una app de compras.
La estructura de tu app dependerá tanto del contenido como de las tareas que tu quieres proporcionar a tus usuarios.
Empieza desde arriba
La pantalla de inicio requiere de una atención especial. Esta la primera pantalla que las personas ven tras lanzar tu app, así que debería ofrecer una experiencia gratificante para todos los usuarios, ya sean nuevos o frecuentes.
Pregúntate a ti mismo: ¿Qué querrán los usuarios habituales de mi app?, y estructura tu pantalla de inicio de acuerdo a dicha experiencia.
Presenta el contenido. Muchas apps se enfocan en mostrar el contenido. Evitar la navegación solo entre pantallas y en su lugar permite a los usuarios conseguir conseguir la experiencia de tu app de un modo correcto haciendo que el contenido sea la pieza fundamental de tu pantalla de inicio. Elige que provocaría una mayor satisfacción visualmente además de ser apropiada para los tipos de datos que vas a mostrar en función del tamaño de pantalla.
Navegación anclada y acciones. Como cualquier toolbar, la barra de la app puede organizar las acciones importantes. Su posición en la parte superior de la pantalla es ideal para presentar controles de navegación, incluyéndose los desplazamientos entre pestañas o el menú lateral de la izquierda. Si el usuario puede buscar dentro de tu contenido, incluye la acción Buscar en la barra de la app para que las personas puedan acortar a través de la jerarquía de navegación.
Se obstinado sobre las funciones. Cuando tu app tenga una gran cantidad de contenidos o de capacidades, enfoca al usuario a los aspectos más críticos de tu producto. Resalta la navegación hacía los elementos importantes dentro del área de contenido. Promociona las acciones más características como puede ser con un botón de acción flotante.
Estrategias de la vista de nivel superior
El nivel superior transmite las capacidades de tu app mostrando al usuario las áreas de mayor funcionalidad. Algunas apps estarán muy enfocadas y tendrán una necesidades de navegación modestas. Sin embargo en otras apps el nivel superior se constituirá de varias vistas, así que querrás asegurarte de que el usuario puede navegar eficientemente entre ellas.
Selecciona el método que mejor se adapte a las necesidades de navegación de tu app.
Mantén el enfoque en una única vista con una navegación integrada. Colocando toda la navegación necesaria directamente junto al resto de contenido de tu app, conseguirás que sea extremadamente visible al usuario. Esto puede ser apropiados para apps con un modelo muy simple de navegación. Sin embargo, presentar un gran número de rutas de navegación puede reducir el espacio disponible para mostrar el contenido principal. Esas vías podrían ser distribuidas por toda la pantalla en lugar de situarse en un sitio predecible.
Usa navegación en contexto si:
- Tu app tiene una vista principal muy solida, y no hay ninguna otra alternativa.
- Tus usuarios pueden completar la mayoría de las tareas habituales fácilmente dentro de la vista principal.
- Esperas que tus usuarios usarán tu app con poca frecuencia y apreciarán unas rutas bien expuestas.
Usa pestañas para desplazarse entre un número pequeño de vistas de igual importancia. Si tu app tiene unas cuantas áreas funcionales, y cada una de ellas con jerarquías poco profundas, utilizar pestañas incrementa coherencia de esas vistas de nivel superior. También acelerará el desplazamiento entre las mismas, trayendo la vista solo con un clic o un deslizamiento. Por otro lado, mostrar pestañas toma un espacio significativo en pantallas pequeñas, por lo que es eficiente solo para unas pocas vistas.
Usa pestañas si:
- Esperas que los usuarios de tu app se desplacen entre vistas frecuentemente.
- Tienes un número límite de vistas de nivel superior.
- Quieres que el usuario sea consciente de las alternativas existentes.
Administra la estructura más compleja a través de un navigation drawer. El menú lateral puede mostrar un gran número de elementos de navegación concurrente. Es realmente útil cuando tu app tiene una pantalla única y natural de “inicio”, y el cajón puede entonces actuar como un índice de menor frecuencia para los destinos menos visitados. Si tu app requiere una navegación cruzada entre pantallas de bajo nivel y otras secciones importantes, la habilidad de deslizar el menú lateral desde cualquier punto de tu app hará que los desplazamientos sean mas eficientes para el usuario. Sin embargo, es menos obvio, por lo que puede provocar que los usuarios tomen más tiempo para familiarizarse con los contenidos.
Usa un navigation drawer si:
- Tu app tiene un gran número de vistas de nivel superior.
- Tu app habilita una rápida navegación cruzada entre vistas que no están estrechamente relacionadas.
- Si tienes una navegación profunda y quieres acelerar que el usuario pueda regresar a la pantalla principal de tu app.
- Si quieres reducir la visibilidad de los elementos de navegación menos importantes y que se visitan con menor frecuencia.
Independientemente de la estrategia de la vista de nivel superior que elijas, la navegación en contexto es siempre una poderosa táctica para moverse entre conjuntos de datos relacionados. Algunos ejemplos son proporcionar enlaces directos entre una canción y otra del mismo artista, entre elementos recientes y un historial completo, o entre una entrada de un usuario y su perfil. Esas rutas directas son naturales ya que extienden una tarea principal con otra relacionada.
