Mejora el diseño de tu app para iPad

Hola, soy Rene Lee y soy diseñador del equipo de diseño de Apple. Hoy hablaré sobre cómo las nuevas actualizaciones de iPad pueden mejorar el diseño de tu app. La esencia del iPad es su sencillez. iPadOS 26 se creó sobre esa sólida premisa. El nuevo gesto para ajustar ventanas facilita la experiencia multitarea.

En la barra superior, los nuevos controles de ventana se agrandan y muestran su funcionalidad.

El nuevo puntero es más preciso y rápido. Por último, está la nueva barra de menús, que puedes llenar con todo lo que hace a tu app única y poderosa.

Con estas nuevas funcionalidades, ahora tienes todo lo que necesitas para mejorar tu app para iPad. En esta sesión, te guiaré paso a paso por este proceso, empezando por la navegación de tu app. Luego, veremos cómo funcionan las ventanas en la experiencia multitarea del iPad. Luego, hablaré del nuevo puntero del iPad y de sus nuevos efectos.

Por último, concluiré con la nueva barra de menús del iPad. Empecemos con la navegación. Primero, elige el patrón de navegación de tu app para iPad. La primera opción es la barra lateral. Esta barra es ideal para apps con muchas subvistas o contenido muy anidado, como Mail.

Veamos la barra lateral de Mail. Aquí se encuentran todos los buzones y las diversas cuentas, y se expone con claridad la jerarquía del contenido. Esto hace que la navegación de Mail en el iPad sea más rápida. Veamos otro ejemplo: Música. En la app Música hay pestañas, una biblioteca y listas de reproducción. Estas opciones se sitúan dentro de la barra lateral, por lo que la navegación es muy rápida.

Allí también hay un botón que parece una barra de pestañas. Al tocarlo, la barra lateral se transforma en una barra de pestañas.

Es un patrón de navegación más compacto y flexible. Al ser más pequeña que una barra lateral, tu app puede mostrar mucho más contenido, lo que la hace más inmersiva. La barra lateral vuelve a su forma original con fluidez. La fluidez de la barra de pestañas permite elegir cómo navegar.

Si aún no sabes cuál es mejor para tu app, empieza con una barra de pestañas.

Esta se convierte fácilmente en una barra lateral para que tu app crezca. La navegación se puede adaptar a espacios más pequeños. Al girar el iPad a la posición vertical, la barra lateral se convierte en una barra de pestañas. En términos de disposición, el cambio de orientación solo implica que tu app debe adaptarse a un ancho diferente. La navegación adaptativa permite la adaptación a cualquier ancho.

Esto también se extiende a las ventanas flotantes, que también adoptan un ancho menor. Con una barra de pestañas, tu app se adaptará a cualquier tamaño.

Las apps que no la usan pueden esconder las columnas para adaptar su navegación.

Al adaptar el tamaño, procura que la disposición no se vea comprometida. El cambio de tamaño no debe alterar la disposición. Aprovecha siempre que puedas para volver al estado inicial.

Extiende el contenido en torno a la navegación.

La gente usa tu app por su contenido. Aprovecha al máximo la pantalla para crear la experiencia más inmersiva. Puedes mostrar contenido debajo de la barra superior con el efecto borde de desplazamiento. Extender el contenido es muy útil para las ventanas flotantes, que son más pequeñas.

Hazlo también debajo de la barra lateral. Cuando el contenido se extiende de esta forma, puedes incluso saber qué fila se desplaza y en qué medida. Resumamos la navegación. Elige un patrón de navegación que se adapte al contenido.

Empieza con una barra de pestañas. Adapta la navegación a tamaños más pequeños.

Extiende el contenido en torno a la navegación.

Pasemos a las ventanas. En iPadOS 26, hay un nuevo sistema de ventanas que es a la vez más simple y más potente. Las apps que admiten multitarea muestran una marca en la esquina inferior derecha.

Al arrastrarla, la app se achicará y se convertirá en una ventana que flota sobre el fondo.

Arriba a la izquierda, verás los nuevos controles de ventana. Al tocarlos, se agrandan y muestran su funcionalidad. Si los mantienes presionados, se expanden aún más y muestran atajos para crear diversas disposiciones de ventanas. Estos controles son muy útiles y son esenciales para la experiencia multitarea del iPad. Veamos más en detalle cómo se ven en cada ventana. Aparecerán en el extremo izquierdo de la barra superior. Los controles existentes se moverán a la derecha para evitar que se solapen.

En las apps que no se actualizaron a iPadOS 26, se aumentará el área segura sobre la barra superior y los controles se colocarán en el extremo izquierdo.

Ten en cuenta que esta ubicación solo existe por motivos de compatibilidad.

Como se crea un área segura permanente sobre la barra superior, su uso no es adecuado para maximizar el contenido de tu app. La barra superior debería estar a la derecha de los controles en una misma línea. Al mover la barra a la derecha de los controles de ventana, evitas tener que reservar un área segura.

Podrás usar este espacio extra para mostrar más contenido sin agrandar la ventana.

Veamos un cambio importante en la forma en que tu app debe abrir documentos nuevos. Al abrir un documento, la app predeterminada se inicia y lo abre en su ventana. Sin duda, el estado actual de la app tiene cierto valor hasta que se oculta o se cierra deliberadamente. Pero ¿qué pasa si quieres abrir otro documento?

Antes de los flujos de trabajo orientados a la multitarea, si a una app se le pedía que abriera otro documento, abría el archivo en su única ventana, borrando cualquier contexto previo en el proceso. Este comportamiento de tipo “abrir en el lugar” ya no se recomienda en apps que admiten la multitarea. En adelante, tu app debe crear una nueva ventana para cada documento. Cuando la multitarea esté habilitada, cada documento se debe abrir en su propia ventana. Esto es útil porque las ventanas se retienen hasta que se cierran. Pero ¿esto no hace que se acumulen muchas ventanas y que resulte difícil encontrar la que se busca? Con este nuevo comportamiento, es muy fácil empezar a acumular muchas ventanas con el tiempo.

Para buscar una ventana, una nueva sección del menú de la app muestra la lista de las ventanas abiertas. Pero la lista no es útil si los nombres no son descriptivos. Por eso, es importante que asignes nombres descriptivos a las ventanas de tu app.

Asigna a cada ventana un nombre único, como el título del documento. Si tu app asigna un nombre descriptivo a cada una de las ventanas, será mucho más fácil encontrarlas.

Resumamos la sección: alinea la barra superior y los controles de ventana.

Crea una ventana para cada documento. Y asigna nombres descriptivos a las ventanas de tu app. Ahora, veamos las actualizaciones del puntero del iPad.

En el iPad, todo está diseñado para el tacto. Por eso, el puntero original era circular y asemejaba más a un dedo en tamaño y precisión. Pero en realidad, el puntero es mucho más preciso que un dedo. En iPadOS 26, su nueva forma permite aprovechar su verdadero potencial. El nuevo puntero se siente más preciso y rápido porque sigue tu movimiento de forma directa, uno a uno. Además de su nueva forma, también se actualizará su comportamiento al pasar sobre botones y controles. El nuevo efecto de resaltado es una burbuja de Liquid Glass y se activa al pasar el puntero sobre los botones.

Al pasar sobre los controles Liquid Glass, el resaltado se curva y refracta los elementos subyacentes para indicar qué botón está seleccionado. Al pasar sobre un control Liquid Glass con más de un botón, aparecerá el efecto de resaltado para indicar cuál estás por presionar con el puntero.

Al desplazarte por el grupo, el resaltado se moverá rápidamente con el puntero siempre que cambie su objetivo. El nuevo efecto de resaltado reemplaza el efecto original que convertía al puntero en el resaltado.

El puntero ya no se imantará ni se adherirá al objetivo, sino que seguirá tu movimiento de forma directa.

Prueba el nuevo puntero en tu app para detectar resultados inesperados. No dudes en volver a consultar esta sección mientras perfeccionas y mejoras la interacción con el puntero. Por último, veamos la barra de menús del iPad. Esta barra siempre ha sido parte de macOS y comparte muchos principios básicos con la barra de menús del iPad. En esta sección, veremos qué hace única a la barra de menús del iPad. En iPad, la barra de menús se muestra llevando el puntero al borde superior. También, deslizando el dedo hacia abajo. En cada barra de menús, verás el menú de la app, seguido de menús predeterminados del sistema y menús personalizados de la app. En adelante, todas las apps del iPad tendrán su propia barra. Veamos algunos consejos para diseñar una gran barra de menús. Organiza los elementos del menú.

Te explicaré cómo organizar un menú personalizado. Como ejemplo, usaremos el menú Mensaje de Mail. Primero, debes incluir en el menú todas las acciones que se relacionan con su nombre.

Debes ordenar estas acciones por frecuencia de uso, no alfabéticamente. Agrupa las acciones relacionadas en sus propias secciones para crear más separación. Si el menú se vuelve muy largo, puedes mover las acciones secundarias a un submenú. Luego, asigna un símbolo a cada elemento. Lo ideal sería que sea coherente con tu app. Por último, asigna atajos de teclado a las acciones más frecuentes. El resultado es un menú personalizado y organizado con comandos individuales que refleja un mapa mental que las personas pueden interiorizar para comprender mejor tu app. Luego, rellena el menú Vista.

Este es uno de los menús que proporciona el sistema. Pero depende de tu app rellenarlo con acciones útiles. Si tu app se organiza por pestañas, es ideal incluirlas en este menú.

Agrega tus pestañas como elemento del menú Vista y asígnales atajos para alternar ágilmente entre ellas.

Ya tienes un menú Vista sumamente funcional. También es útil un control de navegación. Cualquier botón que muestre u oculte la barra lateral será una gran adición. Esto permitirá a las personas mostrar u ocultar elementos de navegación.

Ten en cuenta que nunca debes ocultar ningún menú o elemento en función del contexto de tu app. Con el uso de tu app, su contexto cambia. Al abrir un menú, algunos elementos pueden aparecer atenuados, ya que están inactivos. Esto es intencional. Los elementos deben permanecer en su lugar, incluso si están inactivos. Se muestran totalmente opacos cuando se pueden usar y se atenúan cuando no. Quizá te preguntes por qué las acciones inactivas no se ocultan para ahorrar lugar.

No se recomienda ocultar elementos porque es confuso para las personas. Si el menú cambia todo el tiempo, las personas deben leerlo cada vez que lo abran, ya que ya no podrán recurrir a su memoria espacial. Mantén intacto el contenido de tu menú para que la barra de menús sea predecible y ayude a las personas a encontrar funcionalidades nuevas. Por último, según el contexto, quizá no se pueda usar ningún elemento.

Incluso en este caso, evita ocultar el menú en su totalidad. La barra de menús deja de ser predecible si los menús aparecen y desaparecen.

Mantén intactos los menús y su contenido para que las personas siempre obtengan la experiencia que esperan.

Repasemos lo aprendido sobre la barra de menús. Organiza los elementos del menú. Incluye pestañas en el menú Vista y un control en la barra lateral. Evita ocultar menús y elementos. Ten en cuenta estas pautas para diseñar la mejor barra de menús para tu app. Eso es todo por hoy. Con la navegación fluida y la experiencia multitarea, las apps para iPad son más potentes que nunca. El nuevo puntero ofrece mayor precisión y la barra de menús ayuda a organizar las acciones de tu app, por lo que es más fácil encontrarlas. Si deseas obtener más información sobre el nuevo sistema de diseño, te recomiendo consultar estas otras sesiones.

Al incorporar estos componentes en tus apps, estoy seguro de que el resultado final superará con creces la suma de sus partes. Sin duda aprovecharás lo aprendido hoy para transformar y mejorar la experiencia de tu app para iPad. Gracias por acompañarnos.