Creación de usabilidad con Motion: el manifiesto UX in Motion

El siguiente manifiesto representa mi respuesta a la pregunta: "Como UX o UI, diseñador, ¿cómo sé cuándo y dónde implementar el movimiento para apoyar la usabilidad?"

En los últimos 5 años, he tenido el privilegio de entrenar y orientar a diseñadores de UX y UI en más de 40 países, y en cientos de las mejores marcas y consultorías de diseño a través de mis talleres y tutoriales sobre Animación de UI.

Después de más de quince años estudiando el movimiento en las interfaces de usuario, he llegado a la conclusión de que hay 12 oportunidades específicas para apoyar la usabilidad en sus proyectos UX usando el movimiento.

Llamo a estas oportunidades "Los 12 Principios de UX in Motion", y se pueden apilar y combinar sinérgicamente en una miríada de formas innovadoras.

He dividido el manifiesto en 5 partes:

  1. Abordar el tema de la animación de la interfaz de usuario: no es lo que piensas
  2. Interacciones en tiempo real versus no en tiempo real
  3. Cuatro formas en que el movimiento admite la usabilidad
  4. Principios, técnicas, propiedades y valores.
  5. Los 12 principios de UX en movimiento

Como complemento rápido, si está interesado en que yo dirija un taller de movimiento y usabilidad para su equipo, haga clic aquí para obtener más información: https://uxinmotion.net/creating-usability-with-motion-workshop/

No se trata de UI Animation

Debido a que el tema del movimiento en las interfaces de usuario es entendido principalmente por los diseñadores como "Animación UI", lo cual no es así, siento que necesito crear un poco de contexto antes de saltar a los 12 Principios.

Los diseñadores generalmente piensan que la "Animación de la interfaz de usuario" es algo que hace que la experiencia del usuario sea más agradable, pero en general no agrega mucho valor. Por lo tanto, UI Animation a menudo se trata como el hijastro pelirrojo de UX (disculpas a los hijastros pelirrojos en todas partes). En todo caso, generalmente viene al final, como un pase final de lápiz labial.

Además, es comprensible que el movimiento en el contexto de las interfaces de usuario esté bajo el dominio de los 12 Principios de Animación de Disney, algo en contra de lo que argumento en mi artículo "Principios de Animación de IU - Disney está muerto".

En mi manifiesto, expondré que UI Animation es para los "12 Principios de UX in Motion" como lo es la construcción para la arquitectura.

Con esto quiero decir que, si bien una estructura debe construirse físicamente para existir (que requiere construcción), la mano guía que determina lo que se construye proviene del dominio de los Principios.

La animación se trata de herramientas. Los Principios son la aplicación práctica de ideas que guían el uso de herramientas y, como tales, los Principios brindan grandes oportunidades de apalancamiento para los diseñadores.

Lo que la mayoría de los diseñadores consideran "Animación de interfaz de usuario" es, de hecho, la ejecución de una modalidad de diseño superior: el comportamiento temporal de los objetos de interfaz durante eventos en tiempo real y no en tiempo real.

Interacciones en tiempo real versus no en tiempo real

En este momento, es importante distinguir entre "estado" y "actuar". El estado de algo en UX es fundamentalmente estático, como una composición de diseño. El acto de algo en UX es fundamentalmente temporal y se basa en el movimiento. Un objeto puede estar enmascarado o puede estar enmascarado. Si es lo último, sabemos que el movimiento está involucrado y de una manera que podría apoyar la usabilidad.

Además, se puede pensar que todos los aspectos temporales de la interacción suceden en tiempo real o no en tiempo real. Tiempo real significa que el usuario está interactuando directamente con los objetos en la interfaz de usuario. No en tiempo real significa que el comportamiento del objeto es post-interactivo: ocurre después de una acción del usuario y es transitorio.

Esta es una distinción importante.

Las interacciones en tiempo real también pueden considerarse como "manipulación directa", ya que el usuario está interactuando con los objetos de la interfaz directa e inmediatamente. El comportamiento de la interfaz está sucediendo cuando el usuario la está utilizando.

Las interacciones no en tiempo real ocurren solo después de la entrada del usuario y tienen el efecto de bloquear brevemente al usuario fuera de la experiencia del usuario hasta que se complete la transición.

Estas distinciones nos darán influencia a medida que continuamos nuestro viaje hacia el mundo de los 12 Principios de UX in Motion.

Motion admite usabilidad de cuatro maneras

Estos cuatro pilares representan las cuatro formas en que el comportamiento temporal de las experiencias del usuario respalda la usabilidad.

Expectativa

Las expectativas se dividen en dos áreas: cómo perciben los usuarios qué es un objeto y cómo se comporta. Otra forma de decir esto es que, como diseñadores, queremos minimizar la brecha entre lo que el usuario espera y lo que experimenta.

Continuidad

La continuidad habla tanto del flujo de usuarios como de la "consistencia" de la experiencia del usuario. Se puede pensar en la continuidad en términos de "intra-continuidad", la continuidad dentro de una escena e "inter-continuidad", la continuidad dentro de una serie de escenas que conforman la experiencia total del usuario.

Narrativa

La narrativa es la progresión lineal de eventos en la experiencia del usuario que resulta en un marco temporal / espacial. Esto puede considerarse como la serie de momentos y eventos discretos que se conectan a lo largo de la experiencia del usuario.

Relación

La relación se refiere a las representaciones espaciales, temporales y jerárquicas entre los objetos de la interfaz que guían la comprensión del usuario y la toma de decisiones.

Principios, técnicas, propiedades y valores.

Tyler Waye dice que es tan bueno como cualquier otro cuando escribe: “Los principios ... son las premisas subyacentes y las reglas de función que dan lugar a cualquier cantidad de técnicas. Estos elementos permanecen consistentes, sin importar lo que esté sucediendo ”. Vale la pena repetir que los Principios son agnósticos de diseño.

A partir de ahí, podemos imaginar una jerarquía con Principios en la parte superior, Técnicas más abajo, Propiedades debajo de eso y Valores en la parte inferior.

Las técnicas pueden considerarse como las ejecuciones diversas e ilimitadas de los Principios y / o la combinación de Principios. Creo que la técnica es similar al "estilo".

Las propiedades son los parámetros de objeto específicos que se están animando para crear la técnica. Estos incluyen (y no se limitan a) posición, opacidad, escala, rotación, punto de anclaje, color, ancho de trazo, forma, etc.

Los valores son los valores de propiedad numéricos reales que varían con el tiempo para crear lo que llamamos "animación".

Entonces, para aterrizar el avión aquí (y saltar un poco hacia adelante), podríamos decir que una referencia de animación de interfaz de usuario hipotética está utilizando el Principio de Obscuración con una Técnica de 'vidrio borroso' que afecta las Propiedades de Desenfoque y Opacidad a un Valor de 25px y 70% respectivamente.

Ahora tenemos algunas herramientas para trabajar. Y lo que es más importante, estas herramientas lingüísticas son independientes de cualquier herramienta de creación de prototipos específica.

Los 12 principios de UX en movimiento

La flexibilización y la compensación y el retraso se relacionan con el tiempo. La paternidad se relaciona con la relación de objeto. La transformación, el cambio de valor, el enmascaramiento, la superposición y la clonación se relacionan con la continuidad del objeto. El paralaje se relaciona con la jerarquía temporal. Obscuration, Dimensionality y Dolly & Zoom se relacionan con la continuidad espacial.

Principio 1: flexibilización

El comportamiento del objeto se alinea con las expectativas del usuario cuando ocurren eventos temporales.

Todos los objetos de interfaz que exhiben un comportamiento temporal (ya sea en tiempo real o no en tiempo real), facilidad. La relajación crea y refuerza el "naturalismo" inherente a la fluidez de las experiencias del usuario, y crea una sensación de continuidad cuando los objetos se comportan como los usuarios esperan que lo hagan. Por cierto, Disney se refiere a esto como "Slow In y Slow Out".

El ejemplo de la izquierda tiene movimiento lineal y se ve "malo". El primer ejemplo en la parte superior ha facilitado el movimiento y se ve "bien". Los tres ejemplos anteriores tienen el número exacto de cuadros y tienen lugar durante la misma cantidad de tiempo. La única diferencia está en su relajación.

Como diseñadores preocupados por la usabilidad, debemos exigirnos rigor e indagar, además de la estética, ¿qué ejemplo respalda más la usabilidad?

El caso que presento aquí es que un cierto grado de esceptomorfismo es inherente a la relajación. Puede imaginar un "gradiente de relajación" en el que los comportamientos que caen fuera de las expectativas del usuario resultan en interacciones menos utilizables. En el caso de un movimiento suavizado adecuadamente, los usuarios experimentan el movimiento en sí mismo como perfecto y en gran medida invisible, lo cual es bueno porque no distrae. El movimiento lineal es visiblemente obvio y se siente de alguna manera fuera de lugar, inacabado, discordante y distractor.

Ahora voy a contradecirme completamente aquí y hablar sobre el ejemplo de la derecha. La moción no es perfecta. De hecho, tiene una sensación de "diseño". Notamos cómo aterriza el objeto. Se siente diferente, pero aún se siente más "correcto" que el ejemplo con movimiento lineal.

¿Se puede emplear la flexibilización y aún así no tener soporte (o peor, socavar) la usabilidad? La respuesta es sí, y hay varias formas. Una forma es el tiempo. Si su tiempo es demasiado lento (blando para pedir prestado a Pasquele), o demasiado rápido, puede romper las expectativas y distraer la atención del usuario. Del mismo modo, si su relajación está desalineada con la marca o la experiencia general, esto también puede afectar negativamente las expectativas y la fluidez.

A lo que quiero abrirlo es a un mundo de oportunidades cuando se trata de un movimiento relajado. Hay literalmente un número infinito de "facilidades" que usted como diseñador puede crear e implementar en sus proyectos. Todas estas facilidades tienen su propia respuesta de expectativa que desencadenan en los usuarios.

Para resumir: ¿cuándo usar la relajación? Siempre.

Puede obtener más información sobre mi hipótesis de relajación en mi artículo, "La ironía de la usabilidad y el movimiento lineal".

Principio 2: Compensación y retraso

Define las relaciones y jerarquías de objetos al introducir nuevos elementos y escenas.

Offset & Delay es el segundo de los dos únicos Principios de UX in Motion influenciados por los Principios de animación de Disney, en este caso de "Seguimiento y acción superpuesta".

Sin embargo, es importante tener en cuenta que la implementación, aunque similar en ejecución, difiere en propósito y resultado. Mientras que los Principios de Disney dan como resultado ‘animaciones más atractivas’, los Principios de Animación de UI resultan en experiencias más utilizables.

La utilidad de este principio es que conscientemente prepara al usuario para el éxito al "decirle" al usuario algo sobre la naturaleza de los objetos en la interfaz. La narrativa en la referencia anterior es que los dos objetos superiores están unidos y el objeto inferior está separado. Quizás los dos objetos superiores podrían ser una imagen y un texto no interactivos, mientras que el objeto inferior es un botón.

Incluso antes de que el usuario registre cuáles son estos objetos, el diseñador ya le ha comunicado, a través del movimiento, que los objetos están de alguna manera "separados". Esto es extremadamente poderoso.

Crédito: InVision

En el ejemplo anterior, el botón de acción flotante (FAB) se transforma en elementos de navegación de encabezado compuestos por tres botones. Debido a que los botones están 'desplazados' unos de otros temporalmente, terminan admitiendo la usabilidad a través de su 'separación'. Dicho de otra manera, el diseñador está usando el tiempo para decir, incluso antes de que el usuario registre cuáles son los objetos, que los objetos están separados . Esto tiene el efecto de decirle al usuario, completamente independiente del diseño visual, parte de la naturaleza de los objetos en la interfaz.

Para mostrarle mejor cómo funciona esto, le mostraré un ejemplo que rompe el principio de compensación y retraso.

Crédito: Jordi Verdu

En el ejemplo anterior, el diseño visual estático nos dice que hay iconos sobre un fondo. La presunción es que los íconos están separados entre sí y hacen cosas diferentes. Sin embargo, la moción contradice esto.

Temporalmente, los iconos se agrupan en filas y se comportan como un solo objeto. Sus títulos también se agrupan en filas, y también se comportan como un solo objeto. El movimiento le dice al usuario algo más que lo que ven sus ojos. En este caso, podemos decir que el comportamiento temporal de los objetos en la interfaz no admite la usabilidad.

Principio 3: Crianza de los hijos

Crea relaciones jerárquicas espaciales y temporales al interactuar con múltiples objetos.

La crianza de los hijos es un principio poderoso que "relaciona" los objetos en la interfaz de usuario. En el ejemplo anterior, la propiedad "escala" y "posición" del objeto superior o "hijo" se emparenta con la propiedad "posición" del objeto inferior o "padre".

La paternidad es la vinculación de las propiedades del objeto con otras propiedades del objeto. Esto crea relaciones y jerarquías de objetos de manera que admitan la usabilidad.

La crianza de los hijos también permite a los diseñadores coordinar mejor los eventos temporales en la interfaz de usuario, mientras se comunica a los usuarios la naturaleza de las relaciones de objeto.

Recuerde que las Propiedades del objeto incluyen lo siguiente: Escala, Opacidad, Posición, Rotación, Forma, Color, Valor, etc. Cualquiera de estas Propiedades se puede vincular a cualquier otra Propiedad para crear momentos sinérgicos en la Experiencia del usuario.

Crédito: Andrew J Lee, Frank Rapacciuolo

En este ejemplo de arriba a la izquierda, la propiedad "eje y" del elemento "cara" es el "hijo" a la propiedad "eje x" del padre indicador redondo. Cuando el elemento indicador redondo se mueve a lo largo del eje horizontal, su elemento "secundario" se mueve horizontal y verticalmente (mientras está enmascarado: otro principio).

El resultado es un marco narrativo temporal jerárquico que ocurre todo al mismo tiempo. Es de destacar que el objeto "caras" funciona como una serie de "bloqueos" en el sentido de que, en cada número, la "cara" es total y no parcialmente visible. El usuario experimenta esto sin problemas, aunque podemos hacer la afirmación de que hay un sutil "truco de usabilidad" en este ejemplo.

La crianza de los hijos funciona mejor como una interacción "en tiempo real". A medida que el usuario manipula directamente los objetos de la interfaz, el diseñador se comunica al usuario, a través del movimiento, cómo se vinculan los objetos y la relación entre ellos.

La crianza se produce en 3 formas: "crianza directa" (ver dos ejemplos anteriores, "crianza diferida" y "crianza inversa", ver más abajo).

Crianza diferida (Crédito: AgenceMe) y Crianza inversa (Crédito: AgenceMe)

Principio 4: Transformación

Crea un estado continuo de flujo narrativo cuando cambia la utilidad del objeto.

Ya se ha escrito mucho sobre el principio de UX in Motion "transformación". De alguna manera, es el más obvio y penetrable de los principios de animación.

La transformación es la más perceptible, en gran parte porque se destaca. Un botón "enviar" que cambia de forma para convertirse en una barra de progreso radial y finalmente cambia de forma para convertirse en una marca de verificación de confirmación es algo que notamos. Llama nuestra atención, cuenta una historia y se completa.

Crédito: Colin Garven

Lo que Transformación hace es pasar sin problemas al usuario a través de los diferentes estados de UX o "es" (como en este es un botón, esta es una barra de progreso radial, esta es una marca de verificación) que finalmente produce el resultado deseado. El usuario ha sido atraído a través de estos espacios funcionales hasta el destino final.

La transformación tiene el efecto de "fragmentar" momentos clave cognitivamente separados en la experiencia del usuario en una serie continua y continua de eventos. Esta uniformidad da como resultado una mejor conciencia del usuario, retención y seguimiento.

Principio 5: cambio de valor

Crea una relación narrativa dinámica y continua cuando el sujeto de valor cambia.

Los objetos de interfaz basados ​​en texto, es decir, números y texto, pueden cambiar sus valores. Este es uno de esos conceptos "evasivos obvios".

Los cambios de texto y número son tan comunes que nos pasan de largo sin que les demos distinción y rigor para evaluar su papel en el apoyo a la usabilidad.

Entonces, ¿qué experimenta el usuario cuando cambian los valores? En las experiencias de los usuarios, los 12 Principios de UX in Motion son oportunidades para apoyar la usabilidad. Las tres oportunidades aquí son conectar al usuario con la realidad detrás de los datos, el concepto de agencia y la naturaleza dinámica de los propios valores.

Veamos el ejemplo de un panel de usuario.

Cuando los objetos de interfaz basados ​​en valores se cargan sin "cambio de valor", lo que esto transmite al usuario es que los números son objetos estáticos. Son como signos pintados que muestran un límite de velocidad de 55 mph.

Los números y valores son representaciones de cosas que están sucediendo en la realidad. Esa realidad podría ser el tiempo, los ingresos, los puntajes de los juegos, las métricas comerciales, el seguimiento de la condición física, etc. Lo que distinguimos a través del movimiento es que el "sujeto de valor" es dinámico y los valores reflejan algo de ese conjunto de valores dinámicos.

Esta relación no solo se pierde con objetos estáticos compuestos visualmente de valores, sino que también se pierde otra oportunidad más profunda.

Cuando empleamos representaciones de sistemas dinámicos en forma de valores basados ​​en el movimiento, se activa una especie de "neurofeedback". Los usuarios, que comprenden la naturaleza dinámica de sus datos, ahora pueden causar la alteración de esos valores y están facultados para convertirse en agentes. Cuando los valores son estáticos, hay menos conexión con la realidad detrás de los valores, y los usuarios pierden su agencia.

Crédito: Barthelemy Chalvet, Gal Shir, Desconocido

El Principio de cambio de valor puede ocurrir tanto en eventos en tiempo real como no en tiempo real. En eventos en tiempo real, el usuario está interactuando con los objetos para cambiar los valores. En eventos que no son en tiempo real, como cargadores y transiciones, los valores cambian sin la intervención del usuario para reflejar una narrativa dinámica.

Principio 6: Enmascaramiento

Crea continuidad en un objeto de interfaz o grupo de objetos cuando la utilidad está determinada por qué parte del objeto o grupo se revela u oculta.

El acto de enmascarar las preguntas puede considerarse como una relación entre la forma del objeto y su utilidad.

Debido a que los diseñadores están familiarizados con el "enmascaramiento" en el contexto del diseño estático, nos corresponde traer distinción al Principio de UX in Motion "Enmascarar" tal como ocurre a tiempo, como un acto y no como un estado.

Mediante el uso temporal de regiones reveladoras y ocultas de un objeto, la utilidad transita de manera continua y sin interrupciones. Esto también tiene el efecto de preservar el flujo narrativo.

Crédito: Anish Chandran

En el ejemplo anterior, la imagen del encabezado cambia la forma y la posición delimitadoras, pero no el contenido, y se convierte en un álbum. Esto tiene el efecto de cambiar lo que es el objeto, al tiempo que conserva el contenido dentro de la máscara, un truco bastante bueno. Esto ocurre en tiempo no real, como una transición, que se activa después de que un usuario toma una acción.

Recuerde, los Principios de Animación UI ocurren temporalmente y apoyan la usabilidad a través de la continuidad, la narrativa, la relación y las expectativas. En la referencia anterior, si bien el objeto en sí permanece sin cambios, también tiene límites y ubicación, y estos dos factores determinan qué es el objeto.

Principio 7: Superposición

Crea una relación narrativa y espacial de objetos en la llanura visual cuando los objetos en capas dependen de la ubicación.

Overlay admite la usabilidad al permitir a los usuarios utilizar propiedades de ordenamiento de tierras planas para superar la falta de jerarquías no espaciales.

Para aterrizar un poco el avión, Overlay permite a los diseñadores usar el movimiento para comunicar objetos dependientes de la ubicación que existen detrás o delante de otros en un espacio no 3D.

Crédito: Bady, Javi Pérez

En el ejemplo de la izquierda, el objeto de primer plano se desliza hacia la derecha para revelar la ubicación de los objetos de fondo adicionales. En el ejemplo de la derecha, toda la escena se desliza hacia abajo para revelar contenido y opciones adicionales (mientras se usa el Principio de compensación y retraso para comunicar la individualidad de los objetos fotográficos).

Hasta cierto punto, como diseñadores, la idea de "capas" es tan obvia como para ser evidente. Diseñamos con capas y el concepto de capas está profundamente internalizado. Sin embargo, debemos tener cuidado de distinguir entre el proceso de "hacer" versos "usar".

Como diseñadores que están continuamente involucrados en el proceso de "fabricación", estamos íntimamente familiarizados con todas las piezas del objeto (incluidas las piezas ocultas) que estamos diseñando. Sin embargo, como usuario, esas piezas no visibles están, por definición y práctica, ocultas tanto visual como cognitivamente.

El principio de superposición permite a los diseñadores comunicar la relación entre las capas posicionadas del "eje z" y, al hacerlo, promover la orientación espacial a sus usuarios.

Principio 8: Clonación

Crea continuidad, relación y narrativa, cuando se originan y salen nuevos objetos.

Cuando se crean nuevos objetos en escenas actuales (y a partir de objetos actuales), es importante contar narrativamente su apariencia. En este manifiesto, defiendo con fuerza la importancia de crear un marco narrativo para el origen y la partida del objeto. Los desvanecimientos de opacidad simple tienden a no lograr este resultado. El enmascaramiento, la clonación y la dimensionalidad son tres enfoques basados ​​en la usabilidad para producir narrativas fuertes.

Crédito: Jakub Antalík, Jakub Antalík, Desconocido

En los tres ejemplos anteriores, se crean nuevos objetos a partir de los héroes existentes durante el tiempo en que la atención del usuario se centra en esos objetos. Este enfoque doble: dirigir la atención y luego dirigir el ojo a través de la creación de un nuevo objeto clonado, tiene el fuerte efecto de comunicar una cadena de eventos clara e inequívoca: esa acción 'x' tiene el resultado 'y' de La creación de nuevos objetos secundarios.

Principio 9: oscurecimiento

Permite a los usuarios orientarse espacialmente en relación con objetos o escenas que no están en la jerarquía visual primaria.

Similar a los Principios de enmascaramiento de UX in Motion, Obscuration vive como un fenómeno tanto estático como temporal.

Esto puede ser confuso para los diseñadores que no tienen experiencia en pensar temporalmente, es decir, los momentos entre momentos. Los diseñadores suelen diseñar pantalla a pantalla o tarea a tarea. Piense en Obscuration como el acto de ser oscurecido y no el estado de ser oscurecido. Un diseño estático representa el estado de estar oculto. Introducir el tiempo nos da el acto de oscurecer un objeto.

Crédito: Virgil Pana, Apple

De los dos ejemplos anteriores, podemos ver que el oscurecimiento, que se ve como objetos transparentes o superposiciones, también es una interacción temporal que involucra múltiples propiedades en el tiempo.

Varias técnicas comunes de esto implican efectos de desenfoque y una lección de transparencia general del objeto. Se informa al usuario de un contexto no primario adicional en el que está operando: que existe otro mundo, por así decirlo, "detrás" de su jerarquía de objetos principal.

El oscurecimiento permite a los diseñadores compensar un solo campo de visión unificado, o "vista objetiva", en las experiencias de los usuarios.

Principio 10: Paralaje

Crea una jerarquía espacial en el plano visual cuando los usuarios se desplazan.

"Parallax", como Principio de UX in Motion, describe diferentes objetos de interfaz que se mueven a diferentes velocidades.

Parallax permite al usuario enfocarse en acciones y contenido primario mientras mantiene la integridad del diseño. Los elementos de fondo "retroceden" perceptualmente y cognitivamente para el usuario durante un evento Parallax. Los diseñadores pueden usar Parallax para separar el contenido inmediato de contenido ambiental o de apoyo.

Crédito: Austin Neill, Michael Sevilla

El efecto que esto tiene en el usuario es definir claramente, durante la duración de la interacción, las diversas relaciones de objeto. Los objetos en primer plano, u objetos que se mueven "más rápido", aparecen para el usuario como "más cerca". Del mismo modo, los objetos de fondo u objetos que se mueven "más lento" se perciben como "más alejados".

Los diseñadores pueden crear estas relaciones, usando el tiempo mismo, para decirle al usuario qué objetos en la interfaz tienen mayor prioridad. Por lo tanto, tiene sentido empujar el fondo o los elementos no interactivos más "hacia atrás".

El usuario no solo percibe que los objetos de la interfaz ahora tienen una jerarquía más allá de lo que se determina en el diseño visual, sino que esta jerarquía ahora se puede aprovechar para que el usuario capte la naturaleza de la experiencia del usuario antes de ser consciente del diseño / contenido.

Principio 11: Dimensionalidad

Proporciona un marco narrativo espacial cuando se originan y salen nuevos objetos.

Crítico para las experiencias del usuario es el fenómeno de la continuidad, así como el sentido de ubicación.

La dimensionalidad proporciona una forma poderosa de superar la no lógica plana de las Experiencias del usuario.

Los humanos son notablemente expertos en el uso de marcos espaciales para navegar tanto en el mundo real como en experiencias digitales. Proporcionar referencias de origen y salida espacial ayuda a reforzar los modelos mentales de dónde se encuentran los usuarios en la experiencia de usuario.

Además, el Principio de dimensionalidad supera la paradoja de estratificación en la llanura visual en la que los objetos que carecen de profundidad existen en el mismo plano pero ocurren como "delante" o "detrás" de otros objetos.

La dimensionalidad se presenta de tres maneras: dimensionalidad de origami, dimensionalidad flotante y dimensionalidad de objeto.

La dimensionalidad de Origami puede considerarse en términos de objetos de interfaz tridimensional "plegables" o "articulados".

Ejemplos de dimensionalidad de origami (Crédito: Eddie Lobanovskiy, Virgil Pana)

Debido a que varios objetos se combinan en estructuras de "origami", todavía se puede decir que los objetos ocultos "existen" espacialmente aunque no sean visibles. Esto hace que la experiencia del usuario sea un evento espacial continuo en el que el usuario navega y crea un contexto operativo tanto en el modelo de interacción como en el comportamiento temporal de los objetos de la interfaz.

La dimensionalidad flotante proporciona a los objetos de interfaz un origen y una salida espacial, lo que hace que los modelos de interacción sean intuitivos y altamente narrativos.

Ejemplo de dimensionalidad flotante (Crédito: Virgil Pana)

En el ejemplo anterior, la dimensionalidad se logra mediante el uso de "tarjetas" en 3D. Esto proporciona un marco narrativo sólido que respalda el diseño visual. La narrativa se extiende al "voltear" las tarjetas para acceder a contenido adicional e interactividad. La dimensionalidad puede ser una forma poderosa de introducir nuevos elementos de manera que minimice la brusquedad.

La dimensionalidad del objeto da como resultado objetos dimensionales con verdadera profundidad y forma.

Ejemplos de dimensionalidad de objetos (Crédito: Issara Willenskomer, Creativedash)

Aquí, varias capas 2D están dispuestas en el espacio 3D para formar objetos dimensionales verdaderos. Su dimensionalidad se revela durante los momentos de transición en tiempo real y no en tiempo real. La utilidad de Object Dimensionality es que los usuarios desarrollan una gran conciencia de la utilidad del objeto basada en ubicaciones espaciales no visibles.

Principio 12: Dolly & Zoom

Conserva la continuidad y la narrativa espacial al navegar por los objetos y espacios de la interfaz.

Dolly y Zoom son conceptos fílmicos que se refieren al movimiento de objetos relevantes para la cámara, y el tamaño de la imagen en sí misma en el cuadro cambia suavemente de un disparo largo a un primer plano (o viceversa).

En ciertos contextos, es imposible saber si un objeto está haciendo zoom, si se está moviendo hacia la cámara en el espacio 3D, o si la cámara se está moviendo hacia el objeto en el espacio 3D (ver las referencias a continuación). Los siguientes tres ejemplos ilustran los posibles escenarios.

¿La capa se desplaza, hace zoom o la cámara se mueve?

Como tal, es apropiado tratar las instancias de "dollying" y "zoom" como separadas pero similares, ya que involucran elementos continuos y transformaciones escénicas, y cumplen los requisitos de los Principios de UX in Motion: admiten la usabilidad a través del movimiento.

Las dos imágenes de la izquierda son pequeñas, mientras que la imagen de la derecha está haciendo zoom

Dolly es un término cinematográfico y se aplica al movimiento de la cámara hacia o desde un sujeto (también se aplica al movimiento de "seguimiento" horizontal, pero es menos relevante en un contexto de usabilidad).

Crédito: Apple

Espacialmente en UX, este movimiento podría referirse a un cambio en la perspectiva de los espectadores o a la perspectiva que permanece estática mientras el objeto cambia de posición. El principio Dolly admite la usabilidad a través de la continuidad y la narrativa, haciendo una transición perfecta entre los objetos de la interfaz y los destinos. Dolly también puede incorporar el Principio de dimensionalidad, lo que resulta en una experiencia más espacial, más profunda y comunica al usuario áreas adicionales o contenido que está "al frente" o "detrás" de la vista actual.

Zoom se refiere a eventos en los que ni la perspectiva ni el objeto se mueven espacialmente, sino que el objeto en sí está escalando (o nuestra vista está disminuyendo, lo que resulta en un agrandamiento de la imagen). Esto comunica al espectador que los objetos adicionales de la interfaz están "dentro" de otros objetos o escenas.

Crédito: Apple

Esto permite transiciones sin interrupciones, tanto en tiempo real como no en tiempo real, que admiten la usabilidad. Esta uniformidad empleada en el principio Dolly & Zoom es bastante poderosa cuando se trata de crear modelos mentales espaciales.

Si llegaste hasta aquí, ¡felicidades! Esa fue una bestia de un manifiesto. Espero que todos los gifs se hayan cargado para ti y no hayan matado tu navegador. También realmente espero que tenga algo de valor para usted y algunas nuevas herramientas y apalancamiento en sus proyectos interactivos.

Te animo a que aprendas más sobre cómo puedes comenzar a usar el movimiento como herramienta de diseño para admitir la usabilidad.

Enchufe final: si está interesado en que yo dirija un taller de movimiento y usabilidad para su equipo, haga clic aquí para obtener más información: https://uxinmotion.net/creating-usability-with-motion-workshop/

Este manifiesto no hubiera sido posible sin la contribución generosa y paciente y los comentarios constantes de Kateryna Sitner de Amazon, ¡gracias! Un agradecimiento especial a Alex Chang por su lluvia de ideas e insistencia en que aterrice el avión, Bryan Mamaril en Microsoft por su ojo de águila, Jeremey Hanson por sus notas de edición, Eric Braff por ser el loco gurú del movimiento de la interfaz de usuario que es, Rob Girling en Artefact por su Creí en mí hace todos esos años, Matt Silverman por su charla inspiradora sobre el movimiento de la interfaz de usuario en la conferencia After Effects, Bradley Munkowitz por ser un compañero de cuarto increíble y por inspirarme en la interfaz de usuario, Pasquale D'Silva por sus increíbles artículos sobre el movimiento, Rebecca Ussai Henderson por su increíble artículo sobre la coreografía de la interfaz de usuario, Adrian Zumbrunnen por sus increíbles contribuciones al tema de la interfaz de usuario y el movimiento, Wayne Greenfield y Christian Brodin por ser mis hermanos intelectuales y siempre empujándome a subir de nivel, y todos ustedes miles de animadores de interfaz de usuario que mantienen produciendo gifs inspiradores.