Patrones modernos de navegación en iOS
(frankrausch.com)- La navegación en apps de iOS debe distinguir claramente entre jerarquías, superposiciones y flujos dentro de una vista para que el usuario entienda su ubicación actual y el camino para volver
- Los patrones estructurales se dividen en Drill-Down, Flat, Pyramid y Hub-and-Spoke, y el significado de las transiciones de pantalla cambia según se trate de explorar un árbol, dividir por pestañas, moverse entre pantallas hermanas o volver a un hub
- Las superposiciones son recursos para llamar la atención, pero según si son modales y su nivel de fricción, cambia cuánto bloquean la pantalla de atrás y qué acción debe realizar el usuario
- La navegación embebida debe estar dentro de una vista o modal específica, y debe diseñarse para que un cambio de estado o un flujo Step-by-Step no parezca un desplazamiento jerárquico
- Las pestañas deben ser predecibles, Cancel no debe descartar datos de inmediato, y en apps de iOS conviene mantener límites claros entre jerarquía, estado y modal en lugar de desplazamientos arbitrarios
Los tres ejes de la navegación en iOS
- Las apps de iOS suelen estar compuestas por un árbol jerárquico fijo de varios niveles
- La navegación estructural ayuda al usuario a entender de dónde vino, dónde está dentro de la jerarquía y cómo volver a su ubicación original
- Las superposiciones pueden aparecer sobre cualquier contexto y también apilarse sobre otras superposiciones
- Una superposición modal no desaparece hasta que el usuario realiza una acción y bloquea la interfaz que queda detrás
- Una superposición no modal no bloquea la app
- La navegación embebida encaja mejor cuando se incluye dentro de una vista específica o una superposición modal, de acuerdo con el modelo estructural y espacial de iOS
Patrones de navegación estructural
-
Drill-Down
- Drill-Down es un patrón para explorar una estructura de árbol de información mediante listas por etapas
- La transición animada sugiere un desplazamiento horizontal entre columnas
- Moverse hacia la derecha es entrar a un nivel más profundo de la jerarquía del árbol
- Moverse hacia la izquierda es volver a un nivel superior
- La navegación Drill-Down tiene una estructura modeless, por lo que preguntas como si se debe guardar no interrumpen la exploración jerárquica
- La Navigation Bar muestra el título de la pantalla actual, y el Disclosure indicator en una fila de lista indica que se puede entrar a un nivel más profundo
- El botón Back es una ruta clara para volver al nivel superior, y si el espacio lo permite conviene usar como etiqueta el título de la pantalla padre en lugar de un “Back” genérico
- Deslizar desde el borde izquierdo de la pantalla hacia la derecha cumple la misma función que el botón Back
- Las implementaciones personalizadas deben ofrecer transiciones interactivas y cancelables, controladas por un screen-edge pan gesture, como en el estándar de iOS
- En idiomas que se leen de derecha a izquierda, la dirección de navegación y la ubicación de los controles se reflejan según la dirección de lectura
- La estructura de árbol puede crearse dinámicamente para filtrar bases de datos
- En una app de música, se puede hacer Drill-Down hasta el mismo álbum desde distintos puntos de partida, como Artist, Album o Genre, y también usar una interfaz de búsqueda
- Drill-Down es una variante de una columna por pantalla de las Miller columns al estilo del Finder de macOS
-
Flat
- El patrón Flat divide la jerarquía en el nivel raíz y la muestra con una tab bar
- En iPad puede mostrarse como una sidebar
- Los elementos de la tab bar se seleccionan en torno a las funciones principales de la app y forman las expectativas del usuario y su modelo mental de la app
- Siempre hay un elemento de la tab bar seleccionado, y la selección activa determina lo que se muestra en el área principal de contenido de la app
- El elemento seleccionado actualmente en la tab bar no debe cambiar de forma programática sin interacción del usuario ni cambiar indirectamente al tocar otro botón de la interfaz
- La tab bar permanece visible en toda la pantalla de la app, salvo cuando queda cubierta temporalmente por una hoja modal
- Las pestañas pueden usarse como filtros o como distintos puntos de entrada a grandes colecciones de contenido, como bibliotecas de música, videos o fotos
- Cada sección mantiene su propio estado de navegación de subjerarquía
- Los elementos de la tab bar deben comportarse de forma predecible y no deben abrir hojas ni ejecutar acciones
- El menú Hamburger es una forma de navegación oculta que contrasta con la tab bar
- Cuando toda la interfaz de navegación queda escondida detrás de un pequeño ícono, disminuye la capacidad de descubrimiento
- Fue popular en iOS alrededor de 2015, pero cuando aparecieron estudios que mostraban que la tab bar era mucho más fácil de descubrir, los desarrolladores de apps abandonaron el menú Hamburger
- El patrón Flat divide la jerarquía en el nivel raíz y la muestra con una tab bar
-
Pyramid
- El patrón Pyramid permite moverse rápidamente entre vistas hermanas del mismo nivel jerárquico sin volver a la pantalla padre
- En apps de medios, el gesto de deslizar horizontalmente se usa con frecuencia para moverse entre vistas hermanas
- También se pueden usar botones, como los botones con chevrones Next Message y Previous Message en la app Mail de iOS
- La app Photos de iOS es un ejemplo del patrón Pyramid
- Después de tocar una foto para abrirla en pantalla completa, se desliza a izquierda o derecha para pasar a imágenes adyacentes
- En colecciones pequeñas, se usa un page control para visualizar el número total de elementos y la posición del elemento actual entre sus hermanos
- El iOS App Switcher implementa un patrón Pyramid para moverse rápidamente entre apps y ofrece una navegación más rápida que pasar por la pantalla Home
-
Hub-and-Spoke
- El patrón Hub-and-Spoke es adecuado cuando hay grandes colecciones no relacionadas entre sí en la parte superior de la jerarquía
- Para cambiar entre vistas hijas de pantalla completa, siempre se vuelve primero al hub
- La pantalla Home de iOS es una colección de todas las aplicaciones instaladas y actúa como un estado neutral confiable del sistema operativo
- El Home indicator en la parte inferior de la pantalla es una salida fácil de aprender y siempre disponible, que devuelve al usuario a la interfaz familiar de la pantalla Home
- Este patrón casi no se usa dentro de las apps
- Rara vez se necesita dentro de una app una separación tan fuerte como la que existe entre aplicaciones a nivel del sistema operativo
Navegación con superposiciones
-
High-Friction Modal
- Una superposición High-Friction Modal bloquea la pantalla de atrás hasta que el usuario toma una decisión, como una hoja o un cuadro de alerta con varias acciones
- Al escribir un correo o crear un evento de calendario, hace falta elegir entre continuar con Done o Send, o cambiar de opinión con Cancel
- El botón Cancel no debe descartar directamente ningún estado ni dato
- Al tocar Cancel en una hoja modal, siempre debe mostrarse un diálogo de confirmación adicional como medida de seguridad
- En un cuadro de alerta, Cancel nunca debe ser una acción destructiva
- Los modales se enfocan en completar una tarea específica e independiente, como redactar un correo o agregar un evento al calendario
-
Low-Friction Modal
- Un Low-Friction Modal bloquea el resto de la app, como una hoja, un menú o un popover, pero no exige una decisión de “una cosa u otra”
- Debe poder cerrarse fácilmente, por ejemplo, tocando un botón de cerrar o deslizando la hoja hacia abajo
- Desaparece al tocar fuera de un context menu o un popover
- Un cuadro de alerta con un solo botón OK es fácil de cerrar, pero baja fricción no es lo mismo que sin fricción
- Las alertas de una sola acción deben evitarse siempre que sea posible
- Interrumpen el flujo del usuario y muchas veces pueden reemplazarse por texto inline o una notificación no modal
-
Non-Modal
- Una superposición Non-Modal cubre parte de la pantalla, pero no bloquea la interfaz de atrás
- Al no bloquear, tiene poca o ninguna fricción
- Puede aparecer en respuesta a disparadores externos a la app, como las notificaciones del sistema operativo
- Cuando desaparece automáticamente, debe ofrecer información periférica que pueda entenderse de un vistazo y con una interrupción mínima
- Las superposiciones no modales temporales pueden incluir interacción opcional
- Es posible tocar una notificación o deslizar el indicador de volumen antes de que desaparezca para cambiar el volumen
- Una superposición que no bloquea el resto de la aplicación y que tampoco aparece o desaparece automáticamente puede llamarse palette
Navegación embebida
-
State Change
- Una sola vista puede tener varios estados
- Una vista de lista puede tener estados empty, loading y populated sin que parezca que cambió su ubicación dentro de la jerarquía de navegación
- Hay que asegurarse de que el cambio de estado no sea realmente jerárquico ni modal
- Para cambios de estado en el mismo lugar, deben evitarse las transiciones de pantalla completa
- Algunos ejemplos incluyen el modo de edición de una lista, una interfaz de navegador web, un mapa de calles que se puede desplazar y una imagen que se puede ampliar
- Las opciones de vista solo cambian la forma en que se muestra el contenido, sin modificar la ubicación del usuario
- Alternar entre list view y thumbnail view cambia entre dos visualizaciones de la misma información en el mismo contexto
-
Step-by-Step
- El patrón Step-by-Step conecta una serie de pantallas en un flujo lineal, como una visita guiada, un flujo de configuración o un tutorial de onboarding
- Los procesos en los que hay que ingresar muchos datos, como el checkout de una tienda en línea, también requieren varios pasos
- Moverse hacia adelante y hacia atrás dentro de la secuencia no cambia el nivel jerárquico; esa es la diferencia con el patrón Drill-Down
- Es mejor mostrar las secuencias Step-by-Step dentro de una superposición modal
- En este contexto, el botón Back tiene un propósito distinto al botón Back de un Drill-Down jerárquico
- El proceso suele completarse con un botón Done o Close, que también cierra el modal contenedor
- La cantidad de pasos y la ruta pueden variar según las opciones elegidas
- Wizard y assistant son otros nombres para este patrón
- Un proceso Step-by-Step puede sentirse tedioso
- Si se espera que el usuario lo realice con frecuencia, se puede considerar combinar varios pasos como distintos estados dentro de una sola vista para aumentar la resolución de la información y reducir los cambios de contexto
-
Content-Driven
- La navegación Content-Driven es aquella en la que hipervínculos o botones teletransportan al usuario a otra página o vista
- La navegación web del navegador funciona de esta manera
- En apps de iOS conviene evitar este patrón, salvo en apps que muestran hipertexto, juegos inmersivos y contenido no lineal similar
- Si una app debe mostrar contenido de hipertexto, se puede considerar incluirlo dentro de una interfaz de navegador con controles para ir atrás y adelante
- Un cambio de estado en una interfaz de navegador independiente es más fácil de entender que un cambio inesperado de ubicación dentro de la jerarquía de la aplicación
- Se pueden usar enlaces para moverse entre apps
- Los Deep Links usan un URL scheme o Universal Links asociados a un dominio para mover al usuario desde una app o sitio web hacia un nivel profundo de otra app
Referencias
- Apple WWDC 2022: Explore navigation design for iOS
- Jenifer Tidwell, Designing Interfaces, Third edition, O’Reilly, 2020
- Apple Human Interface Guidelines / Navigation, Archive.org, 2022-01-19
3 comentarios
Opiniones de Hacker News
Ya se ha dicho mucho, pero el buen uso de estos patrones fue una de las varias razones por las que Apollo era mucho mejor que la app oficial de Reddit
La navegación, los gestos y las acciones eran consistentes, y estos conceptos tampoco son difíciles. Solo hay que preocuparse lo suficiente como para respetarlos, pero es desalentador que tantas apps no lo hagan
Es parecido a cuando los supermercados cambian periódicamente la disposición de los estantes. Si la navegación, los gestos y las acciones son consistentes, los usuarios pueden obtener lo que quieren con demasiada eficiencia y salir
Modero un subreddit de 30 mil personas, así que necesito poder usar Reddit desde el teléfono, pero es casi imposible. Todo requiere demasiadas acciones, y no puedes saber dónde estás; es una completa basura
Ya había dejado Reddit hace unos años, pero esto fue el clavo final
Volver a la pantalla principal requiere tanta energía mental que simplemente la cierro a la fuerza y la vuelvo a abrir
Después de unos pocos niveles, para volver a la primera pantalla hay que seguir deslizando o tocando atrás hasta llegar ahí, lo cual es bastante molesto. Quizá haya algún gesto mágico que no conozco
Me da repelús cuando veo la frase “patrones de navegación de iOS”. No hay patrón, y es una de las peores cosas de iOS en comparación con Android
En Android, volver atrás es fácil y puede tener varios significados. Llevo más de un año usando iOS, y termino probando a ciegas uno de los dos “patrones” para volver atrás y luego buscando un botón fuera del alcance de mi mano. A veces ni siquiera funciona
No deberían dejarles los patrones a los desarrolladores; deberían arreglarlo a nivel del sistema operativo. Los desarrolladores no quieren que el usuario salga de una parte de la app. Por ejemplo, basta con intentar volver atrás en Instagram Reels
No hay ninguna consistencia sobre lo que hace el botón de volver atrás. Incluso yo, como desarrollador, me quedo pensando qué debería hacer volver atrás en cierta situación. No queda claro si debería ir a la pantalla anterior o subir un nivel en una navegación de profundización; a veces ambas cosas coinciden, pero no siempre
A veces sube un nivel en la estructura de navegación, a veces va a la pantalla anterior, a veces cierra un cuadro de diálogo e incluso a veces cierra la app. Según el contexto puede hacer cualquier cosa, y si varias aplican, no queda claro cuál será. La única forma de averiguarlo es presionarlo y ver qué pasa
Odio los elementos ambiguos de la interfaz de usuario. Cuando hago clic en algo, quiero saber qué acción se va a ejecutar
Crea una consistencia profunda que hace que la navegación no sea pesada. De verdad me habría gustado que iOS la tuviera integrada de la misma manera
La pila de actividades funciona a través de distintas apps, así que aunque varias apps participen juntas en una tarea, el gesto de volver atrás siempre te devuelve a la pantalla inmediatamente anterior
A veces está arriba a la izquierda, a veces abajo a la izquierda, a veces abajo a la derecha, y seguramente hay apps que lo ponen en otros lugares
Android tiene un botón de volver atrás del sistema operativo que siempre está al alcance incluso al usar el teléfono con una mano. Ese enfoque es muy superior
Por ejemplo, si puedes cambiar el contenido de una vista, también puedes borrar todo y reemplazarlo por contenido completamente nuevo. Si esto ocurre por alguna acción del usuario, en la práctica es lo mismo que “ir a una nueva pantalla”. Pero si el desarrollador no usa la llamada a la API del sistema operativo propuesta,
createNewView, y solo cambia el contenido de la vista actual, el gesto a nivel del sistema operativo no funcionaDicho eso, Apple podría exigir el uso de esta API del sistema operativo para aprobar la revisión. Aun así, creo que en cierta medida es subjetivo qué es una “nueva vista a la que se puede volver atrás” y qué es una “vista existente cuyo contenido solo cambió”
Muestra contactos, aplicaciones, elementos en orientación vertical, elementos en orientación horizontal y otros elementos en la parte inferior, que además solo aparecen después de que descubres que hay que arrastrar hacia arriba. La ubicación cambia según la app, y el ícono no tiene nada que ver con “compartir” ni con “copiar/pegar”
Quienes crecieron con smartphones pueden adaptarse, como siempre. Si no tenías más de 40 o 50 años cuando se introdujeron, en general puedes adaptarte. La mayoría de las cosas modernas están terriblemente diseñadas y suelen ser inestables. AppleTV también es así; dan ganas de hablar de cambiar la contraseña del Wi-Fi. Es necesario para esquivar bugs, pero no entiendo por qué presionar el botón de encendido/apagado no lo reinicia
No sé si sea lo suficientemente relevante, pero en Mac y ahora en iPadOS (https://useyourloaf.com/blog/ipad-customizable-toolbars/), los controles de barra de herramientas integrados admiten un alto nivel de personalización por parte del usuario
Se puede probar en varias apps nativas, incluido Finder
Los widgets integrados potentes son un elemento subestimado en el escritorio de Mac, y también algo que me preocupa ahora que SwiftUI está tomando el control. En iOS también son una gran ventaja, pero se notan relativamente menos porque es demasiado común que las apps quieran aplicar su propio diseño
Aunque quizá recuerdo mal, pero creo que las apps antiguas de iOS admitían de forma predeterminada la personalización de la barra de pestañas. Claramente no es lo mismo que una barra de herramientas, pero permitir editar el orden de las pestañas y cuáles se muestran realmente se sentía como el equivalente espiritual de la personalización integrada de barras de herramientas. Pero hace años que no lo veo
Según la documentación, todavía existe. Me pregunto si alguien conoce una app que todavía use este patrón: https://developer.apple.com/documentation/uikit/uitabbarcont...
En todo caso, la barra de pestañas es genial. Es la forma en que la usan la mayoría de las apps de Apple TV que he probado, y la experiencia consistente es excelente
Recuerdo que cuando Facebook todavía era aceptable, quizá por la época de iOS 7, se podían cambiar así elementos como chat, feed, notificaciones y grupos
Fuera de Apple, las apps que se me vienen a la mente se pasaron hace mucho a menús hamburguesa difíciles de descubrir
La posibilidad de personalización es buena, pero casi no se encuentra en implementaciones propias
UITabBarsiempre fue dolorosamente limitada para personalizar, incluso desde el punto de vista del programador, y casi ningún proyecto se preocupaba por el aspecto de que el usuario pudiera cambiarla directamenteCreo que Apple bloqueó tanto su apariencia que terminó haciendo que todos la reemplazaran por otra cosa
Literalmente no uso para nada 2 de las pestañas de Apple Music. Me gustaría poder ir directo a playlists y álbumes
La frase del primer punto, “la navegación drill-down no tiene estado”, me parece al revés
La pantalla N depende de lo que se hizo antes, y también se puede volver ahí, así que es una estructura con mucho estado. Para que sea útil, hay que rastrear realmente el estado interno. Por ejemplo, el contenido de la lista depende del estado N-1; si no, sería horrible
Una UI sin estado sería algo como un modal de un solo nivel. Está o no está. Sobre todo si es temporal y no hay forma de “reanudarlo”, se puede considerar aún más fuertemente como sin estado
Durante años he visto bastantes discusiones que usan “con estado” con significados totalmente distintos, y últimamente muchísimas más. Así que estoy llegando a la conclusión de que casi nadie se pone de acuerdo sobre lo que significa, y pocos son conscientes de ese hecho
Me da curiosidad qué significa para ustedes una UI con estado. La diferencia es interesante
En una jerarquía como la de iOS, cada hijo debe tener exactamente un padre, así que con saber la página actual se puede saber qué hará el botón “atrás”. Sin importar cómo llegaste a esa página, sube un nivel en la jerarquía hacia la página padre
En una pila de actividades como la de Android, la página actual no basta; hay que saber cómo llegaste a ella. Porque el botón “atrás” significa retroceder en el historial
Muchos sitios web admiten ambas cosas. El botón Atrás del navegador tiene estado y navega por el historial personal, pero la navegación dentro de la página, como las migas de pan, por lo general no tiene estado y no depende del camino específico por el que se llegó a esa página. Por supuesto, hay excepciones. Muchas interfaces de búsqueda pueden considerarse con estado, porque si entras a un elemento y luego vuelves con la navegación dentro de la página, no regresas a la página padre, sino a la búsqueda anterior
Veo aquí una formulación imprecisa. Es la parte que dice: “deslizar hacia la derecha desde el borde izquierdo de la pantalla es lo mismo que presionar el botón Atrás”
Si lo implementas directamente, esto no debería ser un gesto de swipe, sino un gesto de pan desde el borde. Debe seguir el dedo y ser un pan interactivo cancelable; de lo contrario, se siente mal
Demasiadas veces estoy escribiendo algo con ganas y, solo por tocar apenas el borde del teléfono, se me borra todo el comentario
La razón es que existen las personas zurdas. No es un movimiento natural ni cómodo para hacerlo con el pulgar izquierdo. Tampoco se puede invertir la dirección para las personas zurdas. Si lees de izquierda a derecha, un swipe hacia la derecha parece avanzar, no retroceder
En general no me gusta navegar con swipes. En iOS es especialmente malo. Si deslizas de abajo hacia arriba aparece algún menú que contiene cosas realmente importantes, pero no puedes encontrarlo cuando lo necesitas y se activa por error constantemente al desplazarte por una página web
Más en general, iOS se degradó hasta convertirse en un sistema operativo horriblemente complejo y una pesadilla para navegar, y siento que Apple debería volver a tomarse en serio la UI/UX. El principal problema parece ser la expectativa de que los teléfonos resuelvan muchísimas tareas para las que, de entrada, no son adecuados
https://sailfishos.org/
En general me parece más simple y mejor que iOS y Android
Es un recurso realmente bueno para quienes tienen dificultades con el aspecto visual del software
Los diagramas y las explicaciones claras son excelentes
Frank Rausch es la persona que creó “V for Wiki”, la mejor app de Wikipedia.
Por eso, cuando habla sobre diseño y experiencia de usuario en iOS, creo que vale la pena escucharlo.
https://web.archive.org/web/20211223231349/https://v-for-wik...
La usaba todos los días y, de repente, un día dejó de funcionar; la busqué en la App Store y había desaparecido. Me dio mucha pena.
Me gustaría poder desactivar el gesto de “deslizar desde el borde izquierdo de la pantalla hacia la derecha equivale a presionar el botón de volver”.
Me pasa demasiado seguido que, al hacer scroll horizontal en páginas web que no caben en la pantalla, se activa volver atrás.
iOS hace esto bastante bien.
Una aplicación típica de iOS tiene una arquitectura fija, como un árbol jerárquico de varios niveles, y esa estructura estricta hace que las opciones de navegación sean predecibles. Los patrones de navegación estructural le dan al usuario certeza sobre de dónde viene, en qué parte de la jerarquía está y cómo volver al lugar donde estaba originalmente.
En Android, en cambio, el gesto de volver a veces te lleva a la página anterior y otras veces cierra la app por completo. Es tan inconsistente que, después de usar Android durante 12 años, me cambié a iOS.
Me sorprende haber aguantado nada menos que 12 años antes de decidir que ya no lo soportaba.
Cuando empecé a desarrollar para iPhone, es decir, justo cuando acababa de salir el SDK oficial, Apple era muy estricta con sus Human Interface Guidelines, y la documentación sobre qué hacía una buena UI y qué patrones estándar había que seguir también era muy buena.
Pero con el paso al diseño “flat”, siento que todo eso desapareció por completo. Creo que la razón principal es que esos documentos ya no tenían sentido.
Antes eran muy claros, con cosas como “haz que las interacciones del usuario sean claramente visibles”; ahora se convirtió en “esto podría ser clickeable, podría ser solo texto o quizá haya que mantenerlo presionado”.
¡Hola! Yo también me enteré de esto mientras compartía este artículo con un colega. Resulta que, en coreano, la forma estándar según la ortografía correcta no es
네비게이션, sino내비게이션. Jaja. Como es una pronunciación tomada del inglés, en realidad puede ser ambiguo decir cuál es la “correcta”, pero como es un lugar que ve mucha gente, pensé en dejar discretamente este comentario porque estaría bien que, ya que estamos, se usara la forma estándar.Este artículo es un resumen hecho por GPT-4. Parece que GPT usa bien “navegación”, pero a veces también mezcla otra variante del término. Ya lo corregí jaja