18 Principios de diseño de RA, RM y RV

Soplan vientos de cambio en el mundo de la tecnología y el diseño. El futuro del diseño de aplicaciones, web y software promete todo tipo de retos y posibilidades para quienes estén dispuestos a ponerse manos a la obra. La Realidad Virtual (RV) no es sólo un truco: está a punto de volver, e incluso con más fuerza que antes.

Vimos cómo auriculares como Google Cardboard y Oculus Rift entraban en el mercado y causaban furor, para luego volver a apagarse. Su diseño de RV tenía un aire muy primitivo y experimental, y quizá por eso aún no ha despegado. Sin embargo, eso no quiere decir que no fueran decisivos para el creciente campo del diseño de RV, un campo que podría revolucionar por completo nuestra forma de vivir y antes de lo que pensamos.

Lo mismo puede decirse de la realidad aumentada (RA). Sí, se podría decir que el diseño de RA ha desempeñado un papel en la vida moderna con aplicaciones como Pokémon Go e Instagram, pero hasta ahora, aparte de las prácticas cámaras de marcha atrás con directrices de RA en los coches (introducidas por primera vez con el Infiniti Q45 de Nissan en 2001), no ha parecido más que una curiosidad, un «nice-to-have». Si avanzamos rápidamente hasta hoy, el sector se está calentando de verdad. En 2018, Google sacó su plataforma AR Core para desarrollar productos de RA más avanzados, y en 2019, Microsoft presentó sus HoloLens 2 en el Mobile World Congress, dando nueva vida al término «realidad mixta» (entre la RV y la RA).

Image credit: SAVATAGE for Intentional Futures

Estos vientos de cambio plantean nuevas preguntas a los diseñadores. ¿Merece la pena introducirse en el mundo del diseño de RA, realidad mixta (RM) y RV? Creemos que no está de más adquirir experiencia en el diseño para estas tecnologías, y que podría mejorar tus habilidades como diseñador en general. La cuestión es, ¿cómo hacerlo? Si estás interesado en el diseño de RA, RM o RV, o simplemente buscas un curso de repaso, este post debería orientarte en la dirección correcta. Sigue leyendo para conocer 18 importantes principios de diseño relacionados con estos campos relativamente inexplorados.

La RV es más o menos como su nombre indica: un mundo virtual en el que el usuario puede entrar y experimentarlo como su propia realidad. En los últimos años se ha experimentado mucho con el diseño de RV. Sin embargo, aunque se remonta a los años 60, el diseño de RV sólo ha empezado a pasar a primer plano recientemente. Dispositivos como Google Cardboard, Oculus Rift de Facebook y Gear VR de Samsung han sido los primeros pasos hacia una tecnología que crece cada año. Dispositivos como éstos permiten al usuario tener experiencias inmersivas en 3D con sólo descargarse una aplicación optimizada para RV y conectar su teléfono móvil. Por primera vez, los usuarios podían tener experiencias tridimensionales completas en Google Earth o jugar a videojuegos en 3D. También era posible interactuar con el movimiento de la cabeza o con mandos a distancia.

Image credit: Dmitrii Kharchenko

El diseño de RV tiene muchas formas y tamaños. El diseño de RV de una aplicación puede carecer prácticamente de interfaz y basarse puramente en un mundo virtual. O puede tener poco o nada de mundo virtual y consistir principalmente en interfaces 3D. Como punto de partida, la mayoría de los diseñadores de UI podrían inclinarse naturalmente por esta última opción en una herramienta de creación de prototipos, ya que necesitarían mucha experiencia en modelado 3D para crear mundos virtuales complejos. Pero no es sólo la estética del diseño de RV lo que abre muchas posibilidades apasionantes para los diseñadores, ya que la RV está cambiando la UX. ¿Por qué? Porque esta vez estás sumergiendo totalmente al usuario, creando un entorno virtual que funciona con la mayoría de sus sentidos, como la vista, el oído y el tacto (mediante mandos a distancia). Podríamos considerar entonces que el diseño de RV es el test de empatía definitivo.

RV: los términos son sencillos, ¿verdad? Se explican por sí solos. ¿Pero qué pasa con la RA? Aquí es donde mucha gente se confunde: la distinción entre diseño de RA y RV. Pero en realidad es bastante simple. De hecho, muchas aplicaciones populares que utilizamos hoy en día son un gran ejemplo de diseño de RA en acción. Instagram y Snapchat son ejemplos de apps que utilizan la realidad aumentada. Cuando se trata de editar imágenes y selfies, superponer trajes digitales, aplicar maquillaje, cambiar la cara, modificar la voz… todos ellos son ejemplos de diseño de RA en acción. Otro ejemplo de diseño de RA en el uso cotidiano podría ser la cámara de marcha atrás de tu coche. Esta cámara de visión trasera utiliza líneas virtuales de distancia y dirección superpuestas sobre una señal de vídeo para guiarte mientras mueves tu vehículo. El GPS que utilizas mientras conduces es otro gran ejemplo: la voz que te dice qué rampa tomar en la autopista es el mundo digital interactuando con el mundo real.

Image credit: PLATFORM

Sin embargo, la primera vez que empezamos a ver el verdadero potencial de la RA para influir en el mundo real fue con la aplicación Pokémon Go. En 2016, cuando esta aplicación irrumpió en escena, hasta 45 millones de usuarios descargaron la aplicación para buscar Pokémon virtuales en el mundo real. Parece un juego de niños… hasta que introduces recompensas en el mundo real que provocan el deleite de los usuarios. Eso es lo que intentamos conseguir en muchos de nuestros diseños de aplicaciones y páginas web. En el caso de la aplicación Pokémon Go, el principal motivador es el aspecto social. Sin embargo, no sólo las recompensas sociales pueden contribuir al deleite del usuario. La aplicación IKEA Place permite a los usuarios ver cómo quedarían los muebles en su casa y les anima a realizar su próxima compra. También les ayuda a ahorrar tiempo y dinero. En pocas palabras, y como su nombre indica, la RA aumenta o mejora de algún modo tu realidad actual.

La RM es donde las cosas empiezan a complicarse un poco. Es un término que existe desde hace muchos años, pero puede que no esté claro en qué se diferencia el diseño de RM del diseño de RA o RV. De hecho, mucha gente tiende a utilizar estos tres términos indistintamente. Sin embargo, hay algunas diferencias fundamentales que pueden parecer sutiles al principio, pero que separan el diseño de RM del diseño de RA y RV. En primer lugar, al igual que el diseño de RV, la RM suele requerir el uso de un casco. Sin embargo, los auriculares de RM tienden a ser más ligeros y a ajustarse de forma más natural, como unas gafas ajustadas. Las HoloLens de Microsoft son un gran ejemplo. En lo que respecta a la experiencia visual, puedes pensar en el diseño de la RM como una combinación del diseño de la RA y la RV. Sin embargo, la RM no es un mundo completamente virtual, ni consiste simplemente en elementos virtuales superpuestos sobre el mundo real. Va un paso más allá al permitir que lo virtual y lo real interactúen realmente. Fusiona objetos digitales o sprites totalmente rastreables en el mundo físico del usuario.

Image credit: Fabien Michaud

La mejor forma de entender el diseño de RM quizá sea mediante el ejemplo. Imagina una rana virtual que salta de una mesa y pasa por debajo de ella. La rana desaparecería de tu campo de visión hasta que miraras por debajo de la mesa. Eso es diseño MR. Es una verdadera interacción entre lo material y lo inmaterial. Por supuesto, el diseño MR está aún en una fase relativamente primitiva, pero ofrece un montón de posibilidades apasionantes a los diseñadores dispuestos a aprender y explorar territorios inexplorados. Quién sabe, ¡podrías ser pionero o incluso establecer un punto de referencia para el próximo avance tecnológico de nuestra era!

Aprender lo que separa el diseño de RA, RM y RV del diseño tradicional de UI nos ayuda a establecer un conjunto común de principios de diseño para los tres campos: espacio, movimiento y alcance.

Image credit: Guilherme Schmitt for Intrepid Pursuits

El primer principio, y el más importante, es el propio espacio. La mayoría de los tipos de productos de diseño de RA, RM y RV requerirán algún tipo de diseño visual en 3D. Al crear prototipos con cualquiera de ellos, tendrás que tener en cuenta la distancia entre el usuario y la interfaz o el objeto que estás diseñando. ¿Es clara la tipografía y legible desde distintos ángulos? ¿Están visibles todos los botones? ¿Está la UI o el objeto a una distancia cómoda del usuario?

Lo siguiente en la lista es el movimiento. Cuando trabajes en un diseño de RA, RM o RV, tus usuarios tendrán más oportunidades de utilizar el movimiento para manipular el contenido, y a mayor escala. Por ejemplo, en lugar de pulsar o deslizar con los dedos y los pulgares, tus usuarios pueden utilizar todo el brazo o, en algunos casos, la cabeza o las expresiones faciales. También debes tener en cuenta el tamaño y el comportamiento de los botones cuando consideres cómo puede interactuar la gente con los controles de los diseños de RA, RM y RV.

Por último, y lo más importante, tenemos que considerar qué uso real obtendrá la gente de nuestro diseño de RA, RM o RV. Tiene que haber algún tipo de recompensa o deleite para el usuario en mente, de lo contrario, no tiene mucho sentido. Diseñar y desarrollar en estos campos puede resultar costoso, y no querrás que tu producto o función sea un fracaso.

Image credit: Pawel Olek for Buddy

Tanto si se trata de una experiencia turística de RV, una aplicación de decoración del hogar de RA o un juego de RM, tendrás que asegurarte de que llena un vacío en la vida de la gente. Esto puede hacerse realizando previamente una investigación adecuada de los usuarios.

Si sigues y aplicas los mismos procedimientos que cuando diseñas interfaces 2D, el diseño de RV debería ser un paseo (¡en 3D!). Después de realizar tus tests de usabilidad y trazar tus flujos de usuario, el diseño de una interfaz 3D sigue la misma lógica que el diseño de una bidimensional, pero con algunos pasos adicionales.

Sourabh Purwar, que escribe para UX Planet sobre UX para RV, ofrece una explicación directa de cómo se puede diseñar una interfaz 3D para RV. Imagina que tienes una imagen de RV en 3D lista para proyectar. Básicamente es una imagen de 360 grados que se proyecta sobre una esfera, que mide 180 grados verticales. Convierte estos grados en píxeles y obtendrás una imagen de 3600 × 1800 píxeles cuando se aplane.

Image credit: René Pi

Esta sería la imagen con la que trabajarías. El único problema es la propia interfaz, no la imagen. El rango de visualización aceptable está dentro del intervalo de 1200 píxeles × 600, por lo que tendrías que crear un segundo lienzo que superpusiera esta versión recortada de la imagen más grande.

Luego hay que tener en cuenta los gráficos en el diseño de la RV. El ojo humano puede ver por encima de «8K», es decir, 8000 píxeles. Actualmente no hay ningún dispositivo de RV disponible que pueda proporcionar este grado de resolución. La pantalla de RV más potente, el Oculus Rift, puede ver en un rango de píxeles de hasta 1440. Como consecuencia de estas restricciones en las resoluciones, quienes trabajan en el diseño de RV tienen que prestar especial atención a los detalles más sutiles de los elementos de su mundo virtual. Uno de ellos es el tipo de letra, y muchos diseñadores insisten en la necesidad de tener en cuenta el diseño impreso a la hora de diseñar fuentes que sean legibles.

Sí, cuando se trata de diseño de RV, el diseño impreso tradicional resulta útil. ¿Por qué? Porque el diseño impreso utiliza tipos de letra diseñados para el mundo real, el mundo 3D.

Image credit: Payam Daliri

Como resultado, la tipografía del diseño impreso está especialmente diseñada para ser legible a la mayor distancia posible y desde multitud de ángulos. Si observas varios ejemplos de diseños de RV y sus interfaces 3D, te darás cuenta de que hay algo que definitivamente recuerda a esta forma primitiva de diseño impreso.

Cuando se trata de controles de UI en el diseño de RV, como los botones, asegúrate de que están situados dentro del campo de visión inmediato del usuario. Es mejor no tener a nuestros usuarios mirando arriba y abajo y aquí y allá en busca de los controles. La curva de aprendizaje debe reducirse al mínimo, ya que se encontrarán en un entorno poco familiar. Considera la posibilidad de implementar en tu diseño de RV los mismos tipos de botones y controles que los utilizados en el diseño de interfaces 2D, siempre que sea posible. El razonamiento que subyace a esto es que las personas forman modelos mentales, ideas conceptuales basadas en lo que ya conocen. En resumen, prefieren utilizar una tecnología que les resulte familiar.

Image credit: DarkCube Studio

Otro punto a tener en cuenta es que si estás planeando que los controles de UI de tu diseño de RV se utilicen junto con el movimiento de la cabeza, asegúrate de que estén a un lado de la pantalla que controlan. Esto se debe a que la tendencia natural del usuario es volver a mirar al contenido en el centro de la pantalla después de seleccionar un botón. Esto ayudará a evitar que se frustre al posar accidentalmente su mirada demasiado tiempo en un control concreto y seleccionarlo sin querer. Por último, si vas a utilizar botones automáticos en tu diseño de RV (a menudo utilizados para el control de movimiento de la cabeza) que se seleccionan automáticamente si el usuario no hace nada al cabo de unos segundos, utiliza un temporizador o una cuenta atrás. Esto informará al usuario de que se va a realizar un cambio, para que sepa lo que ocurre una vez que cambie la pantalla.

Hay tantas cosas visuales en el diseño de la RV que tendemos a perder de vista otros factores importantes que rigen esta tecnología. La RV es un campo que arroja nuevas consideraciones a la mezcla. Éstas son, concretamente: la ubicación del usuario en el espacio físico y su grado de comodidad, junto con, y lo más importante de todo, su seguridad. Piensa en una aplicación de RV que permita al usuario navegar por un entorno 3D. La primera consideración que debemos hacer es si el usuario podría chocar con objetos físicos de la sala o tropezar. Esto es una auténtica pesadilla que haría que cualquier diseñador de UX que se precie se despertara con sudores fríos. No sólo sería una mala experiencia de usuario, sino que el diseño habría causado lesiones al usuario. Proporciona consejos muy claros al usuario que establezcan cuánto espacio necesita, ya sea al iniciar la aplicación o durante el proceso de incorporación. Incluso puedes plantearte incluir vallas divisorias o líneas que detecten objetos físicos en la habitación y lancen una barrera que alerte al usuario.

La tecnología de RV puede provocar náuseas, que son el resultado de las disparidades entre el movimiento percibido dentro del mundo virtual en relación con el grado de movimiento del usuario en el mundo físico. Esto se debe a un desajuste entre el movimiento detectado por el cerebro y lo que ven los ojos. La falta de información visual para contextualizar ese movimiento provoca náuseas, similares al mareo en el asiento trasero del coche. Lo mismo puede ocurrir en los mundos de RV y es tarea del diseñador evitarlo.

Puedes evitar que tus usuarios sientan náuseas si limitas la cantidad de rotación necesaria en tu diseño de RV y te aseguras de que todo en el mundo virtual se mueve a una velocidad relativa al movimiento real del usuario. Utiliza la iluminación y el audio como indicaciones adicionales para dirigir al usuario por tu espacio de RV. También debes asegurarte de que el entorno del usuario sea el adecuado. Crear un entorno demasiado pequeño o estrecho podría provocar claustrofobia en tus usuarios, mientras que si está demasiado amplificado, el usuario podría perderse.

Utiliza el audio 3D en tu diseño de RV. Este tipo de tecnología está aún en sus primeras fases, pero puede transformar la forma en que percibimos las cosas en el mundo virtual. Sonido 3D significa sonido que es relativo a nuestro posicionamiento espacial respecto a su fuente.

Image credit: Flavio Montiel

Piensa en fuegos artificiales gritando en la distancia antes de explotar con un sonido reverberante, o en un avión pasando por encima. Imagina el bajo estruendo del subsuelo. Este tipo de retroalimentación auditiva puede ser genial para establecer el contexto en tu diseño de RV y puede hacer que tus experiencias 3D cobren vida.

Antes de diseñar una aplicación o función de RA, debes tener en cuenta algunas cosas. Un diseño de RA no será tan intensivo como un diseño de RV, principalmente porque el mundo 3D lo proporcionará la cámara del dispositivo del usuario. Sin embargo, como el lienzo será el mundo físico, hay una serie de consideraciones y concesiones importantes que debes tener en cuenta en tu diseño de RA.

Primero tendrás que entender el entorno del usuario y diseñar en consecuencia. Por ejemplo, ¿está pensada la función de RA para utilizarla en modo selfie? ¿Será para probar nuevos diseños de interiores y ver cómo quedan determinados muebles en su casa u oficina? Es importante que el usuario comprenda el alcance de tu aplicación antes de usarla, para que sepa cuánto espacio necesitará para utilizarla. Puede parecer de sentido común, pero dejar claro este alcance garantiza que el usuario tenga la mejor primera impresión posible. No quieres que su primera sensación sea de frustración porque el espacio es demasiado grande o pequeño.

Image credit: Adrian Reznicek for PLATFORM

También debes establecer el entorno de RA previsto para conseguir el escalado correcto. Debes asegurarte de que tus diseños tienen la altura y anchura adecuadas para los espacios que van a ocupar. Establecer el entorno previsto también te obliga a tener en cuenta las distintas condiciones de iluminación.

A diferencia del diseño de RV, en el mundo de la RA querrás que los objetos visuales respondan a la luz con sombras y reflejos adecuados. O, si las condiciones de iluminación no son óptimas, puedes plantearte añadir una indicación para instruir al usuario sobre cómo puede ajustar la iluminación de la sala para mejorar la experiencia. Podrías tener las mismas consideraciones con el sonido. Un ejemplo podría ser en una aplicación GPS en la que el modo de voz puede no ser una opción viable si la radio del coche está a todo volumen, por lo que la aplicación comunicará al usuario que conecte la aplicación al equipo de música mediante bluetooth.

Por último, de forma similar al diseño de RV, tienes que ser consciente del movimiento del usuario al diseñar una aplicación de RA. Es muy importante que alertes al usuario de los peligros potenciales del entorno que le rodea. Al fin y al cabo, si va a estar concentrado en una pantalla 2D, puede que no sea muy consciente de lo que le rodea.

Image credit: Hayley Gregg

Disponer de avisos o proporcionar al usuario un mensaje de advertencia adecuado de antemano puede ayudar a evitar que el usuario sufra un accidente grave, ¡como entrar en una carretera muy transitada en busca de un Magikarp!

Ten en cuenta las herramientas que se utilizarán para desarrollar tu diseño de RA. Cuando diseñas la UI de una aplicación o software para su uso en 2D, sabes más o menos lo que va a ser factible. Sin embargo, cuando se trata del diseño de RA, RM o RV, puede que no estés seguro de que lo que crees será posible a la hora del desarrollo. Por eso merece la pena conocer la herramienta que se utilizará para desarrollar el diseño de tu aplicación o software. Un ejemplo de plataforma utilizada para desarrollar aplicaciones de RA para iOS y Android es AR Core de Google. AR Core tiene muchas funciones, como la Detección del Plano de Superficie y la Estimación de la Luz. Estas funciones significan que tus diseños podrían hacer uso de la capacidad de identificar varias superficies y reaccionar a la luz mediante sombras y reflejos. Dedicar algo de tiempo a conocer la plataforma de desarrollo es imprescindible para diseñar funciones de RA con éxito.

Como la RV puede considerarse una combinación de diseño de RA y RV, tiene muchos principios en común con estos dos últimos. Podrías considerarlo una especie de triángulo de diseño. Sin embargo, si vas a dar el paso y diseñar para un software de realidad mixta, hay ciertos principios que diferencian a la RM y que siempre debes tener en cuenta.

En primer lugar, tienes que respetar el espacio personal del usuario. Tanto en el diseño de RA como en el de RV, hacer que los objetos aparezcan muy cerca del usuario hará que se sienta incómodo y tenga menos control de su realidad mixta.

Image credit: Rachel Frankel

Lo que puedes hacer para mitigarlo es asegurarte de que cualquier sprite u objeto que se materialice en tu aplicación MR no aparezca a menos de dos metros de distancia, que es lo que Microsoft considera la distancia óptima.

Evita utilizar activos 2D en tu diseño de realidad mixta. A diferencia del diseño de RA y RV, la RM tiene que fundirse a la perfección con el mundo real. Los objetos 2D no pueden reaccionar a la luz y reflejarla, ni pueden crear sombras. Incluso cuando diseñes cosas como menús para tu interfaz, intenta que sean siempre 3D.

Sé realista con tus diseños de MR UI. Sabemos que apesta a ironía, pero es cierto en un sentido práctico. ¿Cuántas películas de Hollywood has visto en las que los personajes puedan manipular elementos holográficos? Seguro que te imaginas a Tony Stark girando en su silla, deslizando el dedo por el aire hacia un vertiginoso popurrí de gráficos, estadísticas, botones y opciones de interfaz. Parece chulo, pero queremos evitarlo en la vida real. Es más que probable que tus usuarios no utilicen tu diseño para salvar el mundo. Al menos, ¡todavía no! En MR es importante que tu diseño nunca abrume al usuario. El mundo real no suele ser abrumador, así que ¿por qué debería serlo tu aplicación de RM? Sobre todo porque quieres que se integre perfectamente en el mundo físico.

Image credit: Anton Fritsler for Kit8

Además, quieres que los elementos de UI sean claros y concisos, no desordenados y confusos. Incluye sólo los elementos de UI y visuales que sean absolutamente necesarios. Conseguir que las cosas se hagan de la forma más fácil y rápida posible es la esencia de una gran UX.

Por favor, ¡que alguien piense en las herramientas! Por último, al igual que con el diseño de RA y RV, querrás trabajar pensando en las herramientas de desarrollo pertinentes. Asegúrate de utilizar geometría y shaders optimizados en tu diseño de RM. El uso de estos efectos es absolutamente necesario para el Holotoolkit de Microsoft y hará que tus diseños de RM sean aún más realistas.

El hecho de que hayamos pasado de simples teléfonos, que sólo podían enviar llamadas y mensajes SMS, a ordenadores de bolsillo demuestra lo rápido que se está desarrollando la tecnología. Y el diseño de RA, RM y RV parece que crecerá exponencialmente en el futuro. Con este crecimiento llegan nuevas oportunidades para diseñadores y desarrolladores. También abre muchas áreas interesantes de investigación en el campo de la UX, como los efectos en la fisiología, el comportamiento y la psicología del usuario. Introducirse en el diseño de RA, RM y RV puede parecer un reto al principio, pero parece que puede dar sus frutos en el futuro. Para muchos diseñadores, dar este salto a lo desconocido ofrece un mundo de posibilidades de diseño y retos apasionantes. No hay duda de que trabajar en las áreas del diseño de RA, RM y RV ayudará a impulsar la carrera de cualquier diseñador y seguro que será bien acogido.