Krypton Solid

Lleve UX al siguiente nivel agregando ‘Delight’

Lleve UX al siguiente nivel agregando ‘Delight’

Los sitios web están diseñados para realizar una función y comunicarse con sus usuarios. Pero más allá de esto, los sitios web también pueden ser atractivos, emocionantes e incluso divertidos de usar.

Agregar interés visual a un sitio ayuda a mantener nuestro compromiso con él, ya sea por tipografía, gráficos o fotografía. Pero creo que también existe la posibilidad de que los elementos de interacción proporcionen estimulación visual y retroalimentación, incluso deleiten al usuario. En este artículo argumentaré que agregar algunos efectos para divertir, sorprender y emocionar a sus usuarios puede mejorar sus sitios web y aplicaciones y hacer que los usuarios regresen.

Deleite

El diseño de sitios web es a menudo un tema seco, cargado de jerga UX y recorridos de usuarios de Arquitectura de la información. Pero, ¿por qué no debería haber algo de diversión en el camino? Agregar deleite a un sitio es una excelente manera de hacer que un sitio no solo sea más humano, sino que también lo haga único.

Voy a acotar mi definición de deleite aquí diciendo que es la adición de no requerido funcionalidad.

Con esto quiero decir que no es una parte esencial de la función del sitio. Sin embargo, puede tener un efecto poderoso en la forma en que se percibe y se experimenta el sitio. De hecho, me atrevería a decir que la forma en que maneja los elementos estrictamente innecesarios de la interfaz de usuario es tan importante como la tipografía y otros elementos visuales a la hora de establecer el tono de un sitio web.

Una interacción gratuita

En un artículo para Cooper Journal, Chris Noessel llama a «Una interacción libre» un patrón de diseño «que le da al software una sensación más humana».

Parte de esto es el reconocimiento de que los humanos son criaturas inquietas a menudo propensas a repetir pequeñas acciones. Tradicionalmente, con bolígrafo y papel, hacíamos garabatos o retraíamos continuamente los bolígrafos. Soy un hilandero empedernido, por ejemplo.

Las personas a menudo llevan esta inquietud a la navegación web, a menudo desplazándose hacia arriba y hacia abajo, seleccionando fragmentos de texto o repitiendo acciones.

El patrón One Free Interaction abarca esta necesidad humana innata de tocar el violín, creando elementos interactivos que dan resultados inesperados o agradables. ¿Necesitas un ejemplo? Intente colocar el cursor sobre el logotipo ‘W’ de Web Designer Depot en la parte superior de esta página.

Como dice Noessel, las interacciones libres se ubican fuera del desempeño de la tarea y, en cambio, se ubican en los espacios intermedios. Pero son poderosos para dar forma a nuestra respuesta emocional a los sitios que usamos.

Efectos de desplazamiento

Como se dijo anteriormente, uno de los «movimientos inquietos» más comunes es desplazarse hacia arriba y hacia abajo, por lo que los sitios que agregan interés visual cuando se desplazan suelen ser encantadores.

El sitio de una página para Nizo La aplicación de fotografía de Image Mechanics presenta componentes de cámara ‘Knolled’ que se mueven hacia adentro a medida que se desplaza hacia abajo y hacia afuera a medida que se desplaza hacia abajo. Si eres como yo, pasarás bastante tiempo desplazándote hacia arriba y hacia abajo, jugando con la hermosa interfaz. (Sin embargo, no contenga la respiración esperando a que se lance la aplicación).

El uso de efectos de paralaje en el desplazamiento también agrega placer, creando la ilusión de profundidad. Me encanta la chico tímido sitio web, donde los efectos de desplazamiento coinciden perfectamente con el tono y el estilo visual del sitio.

boycoy_01

Me sorprende que no haya más sitios web con efectos de desplazamiento horizontal, dado que el desplazamiento lateral es un tema tan común en el diseño de juegos. Pero un buen ejemplo es el Nintendo Mario Kart sitio que analiza la historia del juego a lo largo de 20 años de consolas de Nintendo.

mariokart_01

El sitio polaco Triturar agrega capas de elementos gráficos que se integran a medida que se desplaza, una forma de alta tecnología de lograr una sensación de cuaderno de bocetos de baja fidelidad.

mashup_01

El rey de los sitios de efectos de desplazamiento es probablemente Acko. Aquí, el elemento de encabezado del sitio es un objeto de graffiti 3D animado. Es el logotipo animado llevado al siguiente nivel: inmersivo, interactivo, lúdico. Incluso hay logros para ‘desbloquear’ en la interfaz de usuario, aunque la gamificación es otro tema.

acko_01

Diseño para la emoción

Agregar placer a su sitio ayuda a crear una conexión emocional con un usuario. El poder de la emoción en el diseño es algo que apenas estamos empezando a comprender, pero ayuda a explicar por qué disfrutamos usando ciertos objetos y tenemos una conexión tan poderosa con ellos. Se aplica tanto al diseño de productos físicos como al diseño interactivo.

Creo que una razón importante por la que los productos de Apple son tan apreciados es que los usuarios se apegan emocionalmente a ellos, y hay muchos ejemplos de placer tanto en el hardware como en el software de Apple. Sé que a muchas personas les encanta tanto el desplazamiento de ‘goma elástica’ en Safari móvil iOS que, distraídamente, harán ping hacia arriba y hacia abajo.

OK por ‘mucha gente’ me refiero a mí, pero A Steve Jobs le encantó lo suficiente como para patentarlo, y ha formado parte del litigio de Apple contra Samsung.

Aaron Walter, en su libro Diseñar para la emoción, analiza la forma en que los sitios web exitosos atraen las emociones de los usuarios dándoles personalidad. Agregar elementos que deleiten al usuario es una forma muy poderosa de hacer esto. En pocas palabras, preferimos herramientas que nos deleiten, por lo que también es bueno para los negocios.

El placer no es un truco

Agregar deleite no significa agregar efectos intencionales como un truco. Los efectos están ahí para ayudar a dar forma a la personalidad del sitio. No tienen que ser juguetones o extravagantes (aunque pueden serlo si esa es la personalidad que quieres transmitir), pueden ser sutiles y comedidos si se adapta mejor al personaje. Echa un vistazo a pictet.com. Me encanta la forma en que la barra de búsqueda se desvanece cuando haces clic en el enlace de búsqueda: evita que el campo de texto de búsqueda sea un elemento dominante, hasta que lo pidas. Es sutil y elegante, y se adapta perfectamente al tono del sitio, una empresa suiza de servicios financieros.

pictet_01

A veces, los efectos son tan sutiles que es posible que ni siquiera los note. ¿Sabía, por ejemplo, que el control de volumen del BBC iPlayer sube a 11? Es un pequeño guiño a Spinal Tap.

No exageres

Agregar demasiadas interacciones inesperadas puede ser contraproducente, creando una exageración visual. A menos que esté tratando de crear un entorno hipercinético similar a un juego, demasiados efectos visuales, con volteretas, ventanas emergentes, whizzbangs y bombas extravagantes por todas partes, restarán valor a cualquier compromiso significativo con el contenido. Eche un vistazo al LEDbow sitio por ejemplo. Técnicamente es brillante pero no creo que se comunique de manera efectiva. Están pasando demasiadas cosas.

ledbow_01

Marque el deleite

Me encantan los sitios que tratan la pantalla como un visor o una superficie en lugar de un visor de páginas. Las capas que se mueven a diferentes velocidades crean profundidad e interés. Los elementos que se mueven hacia su posición llaman la atención sobre ellos.

El movimiento hace que la experiencia sea más inmersiva, pero tenga en cuenta que este tipo de interactividad por sí misma no equivale a un mayor compromiso.

Agregar placer hace que los sitios sean más humanos y también más táctiles, involucrando nuestra necesidad de cerebro de mono de jugar y jugar mientras pensamos y aprendemos. La próxima vez que cree un sitio, piense en cómo puede crear algo único para deleitar a sus usuarios.

¿Diseñas para la emoción? ¿Cómo agrega deleite a un sitio? Háznoslo saber en los comentarios.

Deja un comentario