Diseña interacciones de navegación para visionOS

Hola. Soy Nathan, diseñador del equipo Apple Design. En esta sesión, hablaré del diseño de interacciones de desplazamiento en visionOS. Con nuevas formas de respuesta a la mirada de los usuarios, las apps pueden sentirse más reales, como si la mente guiara la experiencia.

Esto es lo que veremos hoy: conceptos básico de la entrada de datos oculares, efectos personalizados, desplazamiento visual y conservación de controles importantes. Comencemos. En visionOS, las personas navegan con los ojos y las manos. Ven un elemento y juntan las puntas de los dedos para seleccionarlo. Estos son algunos recordatorios para que tus apps funcionen bien con ojos y manos. Coloca el contenido más importante al frente para que sea fácil de ver y usar. Para elementos interactivos, elige formas redondeadas, como círculos, píldoras y rectángulos, que atraen la mirada al centro.

Para interacciones precisas, deja al menos 60 puntos de espacio para cada elemento. Los elementos pueden ser visualmente más pequeños si cada uno tiene un espacio total de 60 puntos.

Con objetos 3D a escala fija, 60 puntos es igual a un tamaño angular de 2.5 grados o 4.4 cm para un objeto a 1 m de distancia.

Aplica efectos de resaltado a todo elemento interactivo. Los componentes estándar como este menú se resaltarán de forma automática.

Para componentes personalizados, agrega el efecto de resaltado y asegúrate de que su forma coincida con la del contenido.

También aplica estos efectos a objetos 3D seleccionables.

Para saber más de los conceptos básicos, consulta la sesión “Design for spatial input” de 2023.

Hoy hablaremos de interacciones más potentes para tus apps, comenzando con efectos personalizados. El efecto de resaltado estándar funciona muy bien, pero puedes modificarlo con tus propias animaciones. Estos son efectos de desplazamiento personalizados. Los usamos en todo visionOS.

Las barras de pestañas se abren para mostrar los nombres de cada pestaña. Los botones para ir hacia atrás crecen para mostrar el título de la página anterior. Los controles deslizantes muestran una perilla para invitar a la interacción.

Debajo de los botones aparecen descripciones de herramientas con su función.

En Safari, la barra de navegación se expande para mostrar las pestañas del navegador. Además, en la vista de inicio, los íconos de entorno muestran más del paisaje.

Puedes crear efectos personalizados como estos en tus apps.

Son perfectos para recibir comentarios sin perder la personalidad de la app o el estilo del juego. Pero primero, entendamos cómo funcionan. Por privacidad, el sistema usa efectos de desplazamiento fuera del proceso de la app. Esta no sabe dónde se mira. En vez de responder directamente a un evento de desplazamiento, las vistas definen dos estados: la apariencia estándar y cuando se desplaza. El sistema se anima entre estos estados cuando se mira la vista o hacia otro lado.

Es ideal para reproducir animaciones, pero los efectos personalizados no sirven para realizar acciones dentro de la app. Te mostraré lo que quiero decir. Digamos que diseño una app para ver fotos. Podría agregar un botón de descarga para que la gente guarde sus fotos favoritas.

Podría usar un efecto personalizado para mostrar el tamaño de la descarga cuando la gente lo mira porque es una animación. Pero no puedo iniciar la descarga con solo mirar el botón, ya que requeriría que la app sepa cuándo aplicar el efecto.

En cambio, la gente tendrá que hacer un gesto de toque para guardar la foto.

Los efectos personalizados activan animaciones. ¿Qué animaciones funcionan mejor? Generalmente se dividen en tres categorías: Instantánea, Retrasada y Rampa. Las “Instantáneas” comienzan al mirar una vista. En Atención Plena, las flechas indican que hay más opciones.

El reproductor de video estándar muestra una marca de tiempo al mirar el cursor de reproducción. Esta información adicional es pequeña, contextual y no interactiva. A veces, las animaciones instantáneas son muy rápidas, ya que provocan movimiento al intentar mirar alrededor, por lo que podemos utilizar las “retrasadas” en su lugar. Estas muestran más contenido luego de un retraso.

Las descripciones de herramientas son un buen ejemplo. Este retraso permite presionar el botón rápidamente y solo muestra el título ante un interés prolongado.

Otro ejemplo es el botón de perfil de Safari, que sigue el mismo patrón con un diseño diferente.

Por último, están las animaciones “Rampa”. Son como animaciones retrasadas, pero con una pista al inicio y una curva personalizada. Consulta los íconos de entorno en la vista de inicio. Cuando la gente los mira, comienzan a agrandarse lentamente y, luego, se abren para mostrar más del paisaje. Este efecto de escala demuestra que el ícono se abrirá, pero no se expandirá por completo sin una intención clara. Esto permite mirar la cuadrícula sin que se abran íconos en el camino.

Aquí hay otro ejemplo, donde este cuadro se expande para mostrar el texto completo. Estas animaciones de rampa son un equilibrio entre las “instantáneas” y las “retrasadas”. Ofrecen una respuesta inmediata, sin distraer.

Para crear tu animación de rampa, prueba la curva. Comienza con una entrada lenta y fluida, para después completarse con un salto rápido. Esta curva de animación tiende a funcionar mejor cuando las vistas se expanden para mostrar más contenido. Cuando pienses en estos efecto para tus apps, ten en cuenta algunas de las prácticas recomendadas. Primero, proporciona elementos de anclaje. Los mejores efectos personalizados mantienen una parte de la vista sin cambios. Estos elementos estáticos, como el título, son un anclaje: brindan contexto y ayudan a comprender lo nuevo.

El movimiento puede interrumpir la lectura si el texto cambia al mirar una vista, así que intenta mantener el texto en una posición fija.

Si una vista es muy diferente en los dos estados, la gente se confundirá sobre lo que está viendo.

Los efectos de desplazamiento siempre deben comenzar desde un elemento visible. Si no hay ninguna pista sobre dónde está algo, será difícil encontrarlo o la gente lo descubrirá por accidente. En cambio, si tienes elementos ocultos, muéstralos cuando se mire algo visible. Aquí, por ejemplo, el control de cambio de tamaño aparece cuando miramos la esquina de la ventana. Esto permite encontrar los controles buscados.

Lo siguiente es aplicar los efectos con cuidado.

Piensa en dónde los efectos personalizados podrían aumentar el foco, como en la brújula. Muestra más información, como el estado de la ubicación, o crea momentos increíbles, como una cascada animada.

Pero no cambies demasiado cuando la gente mira alrededor. Demasiados efectos personalizados pueden distraer la atención del contenido o causar incomodidad visual. Incluso un efecto de pequeña escala puede distraer en vistas de uso frecuente, como botones o celdas, ya que mueven lo que se intenta mirar. Para estas vistas, usa el resaltado estándar. Intenta mantener los efectos sencillos.

Los mejores efectos personalizados son sutiles y funcionan en vistas pequeñas, como el botón de descarga. Evita aplicar efectos personalizados a vistas grandes, como toda esta foto, ya que generan mucho movimiento y es difícil saber qué sucede. Para imágenes como esta, evita efectos que atenúen los colores.

Una buena solución es un efecto de resaltado que ofrece una respuesta instantánea y, luego, se desvanece para ver los verdaderos colores. Esto se aplica a objetos 3D como esta planta. Se resalta y se desvanece para mostrar los colores reales.

Por último, evita movimientos inesperados. Esto es algo que veo muy a menudo. Creerás que tienes una buena idea, pero terminará teniendo efectos secundarios. Te mostraré. La descripción de pestañas de Safari muestra una cuadrícula de pestañas abiertas. Quizás tengas una gran idea: ¿Y si ocultamos los botones de cierre por defecto y solo los mostramos cuando miramos una pestaña? Se ve mejor, ¿verdad? Pero cuando miras una pestaña y aparece el botón, la mirada instintivamente se enfoca en él. Esto puede causar el cierre accidental de la pestaña, ya que se mira el botón de cierre al realizar el gesto de toque. En lugar de eso, podrías intentar lo siguiente: haz que aparezca la mitad del botón con la vista en la pestaña, luego aplícalo por completo con la vista en el botón.

Esto reduce el ruido visual en una cuadrícula grande de pestañas, pero la gente no las cierra accidentalmente. Debes probar estos efectos en un dispositivo real. Es imposible probarlos viendo un video, ya que reaccionan según hacia dónde se mire. A mí también me gusta el simulador de visionOS, pero no reemplaza las pruebas en un dispositivo real.

Diseñar efectos personalizados es un proceso iterativo, más que otras partes de la interfaz. Prepárate para probar muchas opciones y dedicar tiempo a ajustarlas hasta conseguir la perfecta.

Con el tiempo, desarrollarás una intuición sobre lo que funciona y lo que no, ¡prueba tus ideas! Podrían funcionar. Ahora, veamos otra interacción poderosa: Mirar para desplazarse. Mirar para desplazarse permite el desplazamiento solo con la mirada. En Safari, al mirar la parte inferior, esta se anima de forma fluida hacia arriba.

O en Música, cuando miro la última lista de reproducción, se desplaza hacia el centro.

Por lo tanto, la navegación es más sencilla porque tus ojos siguen el contenido, casi atrayéndolo. Es una interacción ligera que funciona con el desplazamiento con las manos.

El desplazamiento empieza al mirar el borde de la vista, arriba y abajo para vertical o en los lados para horizontal.

Puede que Mirar para desplazarse no esté activada por defecto. Deberás elegir las vistas si las activas. Para decidir, ten en cuenta lo siguiente:

primero, si la vista es para leer o navegar, es opcional. Mirar para desplazarse es ideal para leer un artículo en apps como Safari o buscar la próxima serie en apps como TV.

Pero en apps como Configuración, la gente quiere mirar rápidamente para encontrar la opción correcta, por lo que Mirar para desplazarse no es la opción adecuada. No actives la opción Mirar para desplazarse si la vista incluye principalmente controles de IU.

Lo siguiente es considerar el contenido. En general, Mirar para desplazarse funciona mejor en el contenido principal de la app. En Notas, la nota en sí se desplaza al mirar los bordes, pero la lista de la izquierda no, sigue el patrón anterior.

Por último, piensa en la coherencia en tu app.

En TV, hay una lista de series relacionadas, y se espera que Mirar para desplazarse también esté aquí.

Teniendo una idea de qué vistas de desplazamiento puedes activar, veamos cómo hacerlas más naturales y predecibles.

Idealmente, las vistas con Mirar para desplazarse tienen el ancho completo o la altura completa de la ventana. Esto ofrece un buen espacio para desplazarse y proporciona bordes claros para mirar.

Si la vista de desplazamiento está insertada en la ventana, proporciona límites claros para que se sepa dónde mirar.

Si la app usa la posición de desplazamiento para animar contenido a otra velocidad, aplicar efectos de paralaje o activar animaciones personalizadas, ajusta el diseño a una normal. O, tal vez, Mirar para desplazarse no sea la opción correcta para estas vistas.

Pero cuando la vista llena la ventana, tiene borde claros y se desplaza normalmente, la navegación será fluida y predecible. Por último, veamos los controles persistentes, una función sutil que marca una gran diferencia. Este es un reproductor de video estándar en visionOS. Los controles se muestran y ocultan con un toque. Si los controles están arriba, se ocultarán automáticamente después de un retraso. Esto funciona bien, pero es posible que los controles se oculten mientras los miras. Ahora, mantenemos los controles visibles al mirarlos y los ocultamos cuando se vuelve a mirar el video. Puede que ni siquiera lo notes al principio porque funciona tal como lo habías previsto.

Si tu app usa un reproductor de video estándar, en línea, en ventana o inmersivo, obtendrás esto de forma gratuita. Pero si la app usa controles de video personalizados, deberás activar este comportamiento. ¡No solo sirve para apps de video! FaceTime mantiene los controles de llamadas y Atención Plena los controles de sesión. Siempre que tengas una IU que se oculta automáticamente luego de un retraso, usa el comportamiento de persistencia. Como vimos, hay muchas formas de darle vida a tus apps con interacciones de desplazamiento: animación de interfaces con efectos personalizados, desplazamiento por vistas con la mirada y controles multimedia fijos.

Al diseñar apps con estas funciones en mente, ¡primero, prueba algunas ideas y descubre qué funciona! Busca oportunidades de aplicar efectos de desplazamiento personalizados en tus apps. Puedes crearlos en SwiftUI o RealityKit y aprender más sobre ellos en las sesiones a partir de 2024. Para activar Mirar para desplazarse y los comportamientos, consulta la documentación en developer.apple.com. ¡Gracias y diviértete!