Una guía rápida para diseñar para realidad aumentada en dispositivos móviles (Parte 3)

Este artículo es la parte 3 de una serie en curso, ponte al día con la Parte 1 y la Parte 2 y la Parte 4.

AR es impulsado por el comportamiento y la interacción. Este artículo profundizará en diferentes tipos de experiencias, así como en patrones y estilos de diseño comunes que se encuentran en las aplicaciones AR actuales.

La definición temprana de estas experiencias facilita el alcance del tipo de contenido que será necesario producir. Las pruebas son una parte crucial del proceso de diseño, y comprender el enfoque de cada experiencia le permitirá producir planes de pruebas de manera temprana y frecuente.

Definiendo el enfoque principal de la experiencia

ENFOQUE 1: Primero en tiempo real

p.ej.; Aplicación Ikea Place
En una primera experiencia en tiempo real, el éxito de la experiencia depende de que el usuario interactúe en tiempo real con contenido 2D o 3D.
Este tipo de experiencia es más común en las aplicaciones de comercio. Los usuarios a menudo necesitan obtener una vista previa de un producto para observarlo o comprenderlo mejor. Pueden colocar, manipular o navegar por el contenido.

ENFOQUE 2: Narrativa Primero

p.ej.; Pokemon Go
En una primera experiencia narrativa, el éxito de la experiencia depende de que el usuario realice una secuencia de acciones para alcanzar un objetivo o destino final.
Las primeras experiencias narrativas se usan con mayor frecuencia para juegos y experiencias basadas en historias, también dependen mucho de la orientación, ubicación y mapas del dispositivo.

ENFOQUE 3: Captura primero

p.ej.; Instagram
En una primera experiencia de captura, el éxito de la experiencia depende de que el usuario finalmente capture un video o una imagen. Una primera experiencia de captura es la base de la mayoría de las aplicaciones compartidas y basadas en plataformas. Estas experiencias generalmente involucran la superposición de datos en el mundo real y, a menudo, la fijación y el seguimiento a un espacio u objeto real.

Diseño

Los diseñadores deben crear elementos que sean independientes de su entorno y funcionen en todos los tonos y niveles de contraste.

1, 2, 3, 4, 5

En AR, esencialmente estamos colocando datos en capas sobre una alimentación de cámara en vivo. No tenemos control sobre lo que muestra la cámara, y tenemos que diseñar en consecuencia.
Es una buena práctica obtener una vista previa y probar la interfaz en una variedad de imágenes de fondo y videos a medida que el diseño evoluciona.

Una sombra puede garantizar que los elementos ligeros de la interfaz de usuario no se pierdan al enfrentar algo brillante

Observaciones actuales

Aquí hay algunos patrones de diseño comunes en el panorama actual de AR. En este momento no hay muchas aplicaciones de AR disponibles para el público, por lo que el grupo de investigación aún es relativamente pequeño. ¡Los siguientes están sujetos a cambios!

Color

Encabezado de degradado en Instagram, color de marca IKEA como color de acento, color de alerta rojo de Pokemon GO
  • El blanco es el color más común para texto, iconos y guías.
  • Algunas aplicaciones tienen viñetas o gradientes adicionales en el encabezado y pie de página para que los elementos fijos sean más legibles.
  • Los colores de la marca se usan con moderación o no se usan en absoluto en la vista de cámara.
  • Los colores del sistema fuera de los colores de la marca pueden usarse para hacer referencia a errores, advertencias o estados completados. Por ejemplo, advertencia roja cuando se acerca demasiado.
  • Los colores opacos generalmente se reservan para botones o funciones de llamada a la acción, como activadores que la mano del usuario puede ocultar.

Posición

Snapchat, Snow e Instagram
  • Los elementos fijos generalmente se encuentran en la parte superior o inferior de la pantalla. Esto permite al usuario enfocarse en el centro de la cámara y la composición.
  • Indicaciones y elementos adicionales que no se centran en el contenido permanecen cerca de la parte inferior. p.ej.; carruseles y opciones adicionales.

Texto

Modo de retrato de iOS, etiqueta de ubicación de Instagram, estadísticas de Pokemon Go
  • El texto generalmente se trata como un título o etiqueta y en sans-serif, ya que es más fácil de leer.
  • El texto suele ser blanco o amarillo, a menos que esté en un color de fondo.
  • El texto generalmente tiene un contenedor opaco o semi opaco para mejorar la legibilidad.
  • El texto sin contenedores se trata con sombras suaves y / o un trazo sutil.

Íconos

Los íconos de Snapchat están llenos, delineados y también dentro de un contenedor opaco.
  • Los tratamientos con íconos varían entre detallado, completo y delineado.
  • Los iconos detallados a menudo tienen contenedores para distinguirlos de la alimentación de la cámara en el fondo.
  • Los iconos se usan con moderación al igual que el texto.
  • Los iconos a menudo tienen contornos o sombras para ayudarlos a destacarse.

Indicadores

La aplicación Volskwagen hace referencia al automóvil en sí, House Craft combina el artilugio con el indicador.
  • Los indicadores van desde ser súper mínimos hasta ser complejos y animados.
  • Los indicadores suelen aparecer en blanco, amarillo, azul o negro de baja opacidad.
  • Los indicadores son dinámicos y se ajustan en consecuencia, tampoco son persistentes y desaparecen cuando se produce una acción.

Modos de mezcla

Overwatch por Blizzard

La interfaz de usuario de videojuegos tiene mucho en común con AR: ambos medios manejan una cámara activa controlada por el usuario.
Las interfaces de videojuegos son dinámicas y cambian constantemente para adaptarse a las necesidades del usuario con el tiempo. También hacen un uso intensivo de iconos y elementos gráficos para mantener al usuario alerta y enfocado en el medio ambiente.

Ejemplos de modos de mezcla utilizados sobre fondos oscuros y claros en Overwatch

Siguiendo el ejemplo de los videojuegos, los diseñadores pueden deambular más allá de la interfaz de usuario opaca y transparente y considerar agregar modos de mezcla a sus elementos gráficos. Este método permitirá al usuario ver partes del fondo sin obstruir completamente la vista. Los modos de fusión también pueden reducir el peso visual de un elemento fijo.

Tipos de interfaces de usuario AR

AR puede manifestarse en varias interfaces diferentes. Los siguientes son acrónimos comunes para algunos de ellos:

  • GUI (interfaz gráfica de usuario): interactúa con datos a través de indicadores gráficos y visuales.
    por ejemplo, presionando para cancelar
  • HUD (Heads Up Display): interactuando con datos en capas sobre una pantalla transparente fija.
    Por ejemplo, guías en una cámara de respaldo.
  • VUI (interfaz de usuario de voz): interactúa con los datos a través de la voz o el habla. por ejemplo, pedirle a Siri que establezca una alarma
  • FUI (Future User Interface): una interpretación futura de la interacción con los datos.
    por ejemplo, imágenes de Iron Man
  • TUI (interfaz de usuario tangible): datos influenciados por la interacción con el mundo físico.
    por ejemplo, el seguimiento de sus pasos diarios con un Fitbit

En la cuarta parte, exploraré lo que significa diseñar para 3D en AR.
Gracias nuevamente a Devon Ko y Brendan Ford por la ayuda y el soporte de edición.