Cómo agregar toques de magia a tus interacciones

Cada vez que un usuario hace algo con su diseño, se crea una interacción. Algunas interacciones, como los clics, pasan casi desapercibidas para el usuario. Pero otras interacciones incluyen un poco de magia que hace que el usuario quiera jugar con el diseño aún más.

Hay una línea delgada entre una interacción que tiene el toque de magia y otra que puede ser completamente abrumadora. Las interacciones más mágicas son un poco inesperadas, simples, crean una respuesta emocional y hacen que el usuario quiera usarla de nuevo.

Interacciones con la magia

La magia es "una cualidad que hace que algo parezca retirado de la vida cotidiana, especialmente de una manera que deleita".

Lo que hace que una interacción sea realmente mágica es que anticipa lo que el usuario va a hacer a continuación. ¿El diseño casi se mueve contigo? O tal vez solo un paso por delante de usted, para hacer exactamente lo que quiere solo un segundo derramado antes de que incluso haya tomado esa decisión.

Para diseñar este tipo de interfaz interactiva, debe conocer a sus usuarios excepcionalmente bien. Tendrá que investigar sus hábitos y patrones antes de pensar en los efectos visuales o las interacciones. Y una vez que tenga esos datos, puede hacer una lluvia de ideas sobre cómo crear esas conexiones.

Entonces, ¿qué hace que una interacción sea mágica? ¿Cómo lo defines? La mejor descripción proviene de un trabajo académico, Interacciones mágicas con información para razonamiento visual:

Algunos ejemplos incluyen:

  1. Haciendo clic y arrastrando un dibujo de un personaje de dibujos animados que responde "inteligentemente" cambiando su postura en respuesta directa a la entrada del usuario, entendiendo cómo moverse por arte de magia;
  2. Navegar datos de video haciendo clic directamente en los caracteres del video en lugar de usar un control deslizante;
  3. Golpear los dispositivos móviles para transferir archivos; y
  4. Seleccionando nubes de puntos 3D solo dibujando un lazo 2D.

Todas estas interacciones tienen "el poder de influir aparentemente en el curso de los eventos mediante el uso de fuerzas misteriosas o sobrenaturales" y "una cualidad que hace que algo parezca eliminado de la vida cotidiana, especialmente de una manera que deleite": dos propiedades tomadas directamente de la definición de la palabra magia.

Animacion inteligente

Las animaciones están en todas partes. Parece que casi todos los sitios web tienen algo en movimiento integrado, ya sea un videoclip o un efecto de desplazamiento o cargando divot. Este movimiento tiene sentido. El movimiento atrapa el ojo de forma natural y proporciona un momento de interacción que también puede servir como una distracción mientras el sitio se carga completamente o funciona en segundo plano.

Un tipo de interacción inteligente podría ser una foto en movimiento o un cinemagraph. Esta técnica combina acción fija y en vivo con movimientos o movimientos sutiles de manera que los usuarios quieran profundizar en el diseño. (Puede obtener más información sobre la tendencia en nuestra publicación en fotos que cobran vida).

Las animaciones más inteligentes son más que simples movimientos: el usuario quiere hacer algo y encuentra que en realidad es funcional. Este tipo de interacción está comenzando a ocurrir con frecuencia en el comercio electrónico, donde los usuarios desean experimentar o ver. Un producto desde todos los ángulos. Qantas Airlines, arriba, está haciendo lo mismo con un diseño de sitio web que permite a los usuarios ver dentro de sus aviones y ver las opciones de asientos y más. (Haga clic en este sitio web, se sorprenderá de todas las cosas que puede ver y se siente muy real).

Clickability directo

Muy a menudo aterrizas en un sitio web y los elementos en los que haces clic no hacen nada. Con una capacidad de clics más directa, más elementos son objetos que lo llevan a nuevos elementos, etc. para crear una red de clics y enlaces y rutas que el usuario puede tomar. El flujo tiene una calidad perfecta que hace que estas interacciones de clics sean deseables.

Todavía no hay suficiente de estas interacciones, pero cuando las encuentras son muy divertidas. El sitio web de la película, Sing, es un gran ejemplo. (Debe hacer clic alrededor). Cada elemento está diseñado para que el sitio web se sienta como una extensión interactiva de la película. Puede hacer clic en casi cualquier cosa y algo sucederá. Combina eso con el aspecto de dibujos animados y realmente se siente mágico.

Golpes y hápticos

Mientras que a los académicos les encantó la magia del "golpe", Más usuarios aman la magia de los hápticos. Puede facilitar las interacciones con su reloj (nunca me pierdo una llamada) para jugar un juego que se siente más intuitivo gracias al movimiento. Los golpes pueden ser reales o percibidos, como en el juego Konterball, dependiendo del tipo de dispositivo.

En muchos de estos casos, el diseño web de escritorio utiliza el movimiento que perciben los usuarios, pero en los teléfonos, relojes o dispositivos de realidad virtual hay un elemento háptico.

El diseño web, que hasta ahora ha sido virtualmente virtual, cobra vida con las interacciones táctiles. Espere más interfaces que toque y el circuito de retroalimentación se cerrará con una respuesta física del dispositivo.

Perspectiva dimensional

Las líneas entre las dimensiones comienzan a difuminarse. Mientras que las pantallas son un paisaje bidimensional, más diseños están creando mundos tridimensionales. Los usuarios todavía actúan con movimientos 2D sin embargo. Es un concepto extraño y casi alucinante.

Pero luego intacto con el sitio web de esta manera.

Verás la magia.

Campo Alle Comete, arriba, cuenta una historia que es mágica, en esencia, pero también interactiva. Arrastre el mouse en líneas rectas alrededor de la pantalla para ver cómo cambia y se mueve el mundo. Y no parece haber ninguna regla. El movimiento ocurre en la dirección y velocidad que elijas. ¿La mejor parte de esta experiencia de cuento de hadas? Es probable que haga clic y juegue durante varios minutos antes de darse cuenta de lo que el sitio web está tratando de mostrar. (Es para el vino.)

Conclusión

Entonces, ¿qué hace que una interacción sea mágica? Debe ser anticipatorio y hacer exactamente lo que el usuario quiere de la manera en que el usuario desea que suceda.Debería ser interesante y un poco diferente. Y debe ser lo suficientemente simple como para que no haya confusión.

Finalmente, la verdadera magia sucede cuando el usuario responde con una sonrisa o con una sensación de deleite o satisfacción. La magia es un vínculo humano, sin la sensación de los usuarios, es solo otro truco de diseño.