Diseñar para la emoción con efectos de desplazamiento

1. Diseñar para la emoción
2. Sorpresa en cajas
3. Pruebas de accesibilidad
4. Agregar soporte táctil
5. Conclusión
   1. Otras lecturas

La interacción emocional es un componente importante, pero frecuentemente descuidado, que debe tenerse en cuenta en el diseño web. Crear un elemento sorpresa en las páginas web puede aumentar la participación de los visitantes sin ofuscar contenido importante, marginar a los visitantes móviles o poner en desventaja a los usuarios que requieren funciones de accesibilidad. Naturalmente, esto siempre debe equilibrarse con la necesidad de guiar a los usuarios a través del sitio web.

De los muchos factores que deben considerarse en el diseño web, la interacción emocional es un componente importante, pero frecuentemente descuidado. En el mundo real, experimentamos la interacción sensual del diseño todo el tiempo . Reflexione por un momento sobre el compromiso emocional de ponerse al volante de un potente automóvil de lujo: el acogedor abrazo del asiento del conductor, la experiencia táctil de pasar las manos por el cuero del volante, el sutil brillo reflejado en los controles.

No existe ningún requisito técnico para ninguno de estos detalles finamente elaborados: el vehículo funcionaría igual de bien sin ellos. Sin embargo, este enfoque singular en el compromiso sensual y emocional es lo que separa los productos de lujo de todos los demás y lo que inspira una profunda lealtad en los clientes.

Este impulso por el diseño emocional se puede descubrir en los lugares más sorprendentes . Tome la luz de encendido del Apple MacBook de última generación. La compañía merece crédito por ayudar a miles de usuarios a evitar enredos con los cables de alimentación a través del conector MagSafe, pero la intimidad emocional más profunda se mantiene en el más mínimo detalle: la luz de estado de energía en la parte frontal de la computadora portátil. Cuando está en modo de suspensión, la luz parpadea, y no al azar: lo hace 10 veces por minuto, la frecuencia respiratoria de un ser humano en reposo.

La frecuencia de parpadeo de la MacBook de Apple en modo de suspensión está dentro de la frecuencia respiratoria promedio de un adulto en reposo. (Fuente de la imagen: Michael Stillwell )

Para tomar otro ejemplo: la parte delantera de un automóvil no son dos faros y una parrilla. Es un rostro, uno con carácter y comunicación propios. Mire los automóviles y camionetas comercializados para madres de los suburbios, cuyas líneas tienden a ser redondas, curvas, acogedoras y amigables.

La parte delantera del vehículo a menudo demuestra el efecto neoténico: consideramos que los “ojos” (faros) que son más grandes que el cuerpo son lindos, seguros y adorables. Compare esto con la comunicación visual de los vehículos comercializados para hombres, particularmente los autos deportivos: esas líneas son angulares y agresivas, hasta los ojos rasgados.

Observe cómo el frente de un auto deportivo interactúa con usted a nivel emocional. (Fuente de la imagen: GabboT)

Diseñar para la emoción

Podemos esforzarnos por lograr el mismo compromiso emocional en los sitios web: una promesa de deleitar, sorprender y afectar a los usuarios sin recurrir a la manipulación ni ser demasiado empalagosos. Si bien el ámbito digital carece de muchas señales sensuales, es posible impartir una experiencia emocional a través de una cuidadosa selección de colores, trazos y tipografía.

Las transiciones CSS nos ayudan a hacer que las interacciones sean más humanas : en lugar de pasar de un estado a otro, podemos facilitar el movimiento de un elemento durante unos cientos de milisegundos para hacer que un sitio web parezca más atractivo. Paradójicamente, las mismas técnicas también pueden hacer que un sitio web parezca más rápido, especialmente si aprovechamos la oportunidad para precargar contenido.

Al crear este tipo de experiencias, debemos evitar los errores del pasado: la interacción debe animar al visitante a explorar el sitio web, pero nunca debe ocultar componentes importantes como la navegación. Las recompensas por la exploración deben tratarse como una bonificación, en lugar de una interacción requerida. Cualquier información compartida también debe ser accesible para aquellos que no tienen el tiempo o la capacidad para utilizar la interfaz.

Sorpresa en cajas

( Consulte la demostración en "Efecto de desplazamiento en imágenes desde diferentes direcciones usando CSS puro", en CodePen).

Una forma de diseñar para lograr sorpresa y estimulación emocional podría ser presentar diferentes paneles de información según la forma en que el usuario pasa el cursor sobre una imagen receptiva. Para este ejemplo, usaré una foto de la galaxia espiral NGC 1309, agregada a una página HTML5:

img src="ngc-1309.jpg"

(Tenga en cuenta que dejé intencionalmente el altvalor de la imagen en blanco. Volveremos a ese atributo en breve).

Los paneles informativos se crean a partir de cuatro spanelementos, con todo el grupo envuelto en una divetiqueta que incluye class:

div spanSpiral Galaxy NGC 1309/span spanApproximately 120 million light years from Earth/span spanHome to several Cephid variable stars/span spanMember of the Eridanus galactic cloud/span img src="ngc-1309.jpg"/div

Escribiremos el código de transición CSS sin prefijos de proveedores: Internet Explorer 10 no usa prefijos para la animación, Firefox ya no los requiere, Chrome no se queda atrás y una pieza de magia de JavaScript como -prefix-free de Lea Verou tomará Cuida los navegadores que todavía lo hacen.

.multi-hover { position: relative; font-family: Orbitron, sans-serif; max-width: 500px; line-height: 0;}.multi-hover img { max-width: 100%;}.multi-hover span { position: absolute; width: 100%; height: 100%; line-height: 1.5; font-weight: 100; text-align: center; box-sizing: border-box; font-size: 3em; transition: .3s linear; color: white; padding: 15%; opacity: 0;}

El CSS aprovecha la regla de que los elementos absolutamente posicionados dentro de contenedores relativos se transformarán en relación con su padre . Debido a que la imagen determina la altura y el ancho de div, los spanelementos siempre tendrán exactamente el mismo tamaño, protegidos de crecer aún más mediante el uso de box-sizing, max-widthy line-height: 0. En este ejemplo, estoy usando Orbitron de The League of Moveable Type como tipo de letra apropiado.

A continuación, ubique los spanelementos, de modo que cada uno quede justo sobre el borde interior de la imagen. Lo haremos escribiendo compensaciones de la contención diven porcentajes, para que todo siga respondiendo:

.multi-hover span:nth-child(1) { top: 0; left: 90%; background: hsla(0,70%,50%,0.6); } /* right panel */.multi-hover span:nth-child(2) { top: -90%; left: 0; background: hsla(90,70%,50%,0.6); } /* top panel */.multi-hover span:nth-child(3) { top: 0; left: -90%; background: hsla(180,70%,50%,0.6); } /* left panel */.multi-hover span:nth-child(4) { top: 90%; left: 0; background: hsla(270,70%,50%,0.6); } /* bottom panel */

Como verá en un momento, el orden de las declaraciones del panel es importante. El resultado se parece a esto: Todo sobre Hoteles

Elementos de tramo posicionados con texto. ( vista grande )

Para recortar los bordes exteriores de los paneles, utilice overflow: hiddenen el contenedor div:

.multi-hover { position: relative; overflow: hidden; font-family: Orbitron, sans-serif;

Ahora, el resultado aparece así:

Las secciones coloreadas que podemos ver por ahora funcionarán como las “áreas de impacto” de nuestros paneles. Aumentar el tamaño de estas áreas aumentará la capacidad del panel para responder a movimientos más rápidos y amplios del mouse, pero también aumentará la superposición entre ellas, haciendo más probable que se active un panel diferente al esperado.

Finalmente, ocultaremos los paneles por completo configurándolos opacityy 0moviéndolos hover, aprovechando el hecho de que los elementos transparentes aún responden a los eventos del mouse.

.multi-hover span { position: absolute; width: 100%; height: 100%; line-height: 1.5; font-weight: 100; z-index: 2; text-align: center; box-sizing: border-box; font-size: 3em; transition: .3s linear; color: white; padding: 15%; opacity: 0;}.multi-hover span:hover { opacity: 1;}.multi-hover span:nth-child(odd):hover { left: 0; z-index: 3;}.multi-hover span:nth-child(even):hover { top: 0; z-index: 3;}

Las declaraciones oddy evencolocan cada panel en el lado opuesto de la caja, colocándolos completamente sobre la imagen y completando el diseño. Tenga en cuenta que este patrón de interfaz requiere un movimiento exploratorio del mouse desde el exterior de la caja hacia adentro para activar cada panel; alternativamente, se podría crear un modelo de exploración completamente “en caja” reduciendo el número z-indexde :hoverestados a 1.

Pruebas de accesibilidad

Hacer invisibles los paneles plantea la cuestión de la accesibilidad. Los usuarios con visión parcial podrían ver e interactuar con los paneles, pero los usuarios ciegos obviamente no.

Los lectores de pantalla tratan ese contenido como verdaderamente “invisible” (dejándolo, por lo tanto, sin leer), dependiendo del contexto; el contenido configurado display: nonenormalmente no se lee, por ejemplo. Sin embargo, la opacidad no desencadena este comportamiento. En una Mac, puedes probar esto fácilmente activando VoiceOver y haciendo que lea la página que hemos creado en el navegador:

• Command + F5para iniciar VoiceOver,
• Control + Option + Apara leer el contenido de la página web,
• Command + F5para detener VoiceOver.

Escuchará la spanlectura del contenido en el orden en que aparece en la página; lo único que falta es una descripción de la imagen al final:

divspanSpiral Galaxy NGC 1309/spanspanApproximately 120 million light years from Earth/spanspanHome to several Cephid variable stars/spanspanMember of the Eridanus galactic cloud/spanimg src="ngc-1309.jpg" alt="Photograph of NGC 1309"/div

Tenga en cuenta que esto sólo trata los aspectos visuales de la accesibilidad. Hay otras áreas importantes (cognitiva, motora y del lenguaje) que no abordaré en este ejemplo por razones de espacio, pero que han sido detalladas por otros autores de Smashing Magazine.

Agregar soporte táctil

La mayoría de los dispositivos móviles que dependen de interfaces táctiles no admiten un estado puro de "desplazamiento": un elemento está "en contacto" o no. Con raras excepciones, no se registra la punta del dedo justo encima de la pantalla de un dispositivo móvil. Los navegadores móviles pueden interpretar un toque breve como un evento de desplazamiento, pero este comportamiento no es perfectamente predecible. Como tal, nuestra interfaz no funcionará en la mayoría de las tabletas o teléfonos, al menos tal como existe actualmente.

Para resolver este problema, agregaremos un poco de JavaScript (a través de jQuery) a la página:

script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/scriptscriptfunction is_touch_device() { return !!('ontouchstart' in window) || !!('onmsgesturechange' in window);};$(document).ready(function() { if (is_touch_device()) { $('span').unbind('mousenter mouseleave touchend touchstart'); $('span').bind('touchstart', function() { $('span').removeClass('hover'); $(this).addClass('hover'); }); }});/script

JavaScript aplica una clase de hovera cualquier spanelemento que se toque. Entonces, solo necesitamos modificar nuestras declaraciones CSS para que esto sea classequivalente al :hoverevento:

.multi-hover span:hover { opacity: 1; }.multi-hover span:nth-child(odd):hover { left: 0; z-index: 3; }.multi-hover span:nth-child(odd).hover { left: 0; z-index: 1; }.multi-hover span:nth-child(even):hover { top: 0; z-index: 3; }.multi-hover span:nth-child(even).hover { top: 0; z-index: 1; }}

Tenga en cuenta que en la versión móvil, el panel extendido pasa “por debajo” del nivel de los que están retraídos, lo que permite tocarlos.

También podría ser una buena idea desactivar los controles de copia en los dispositivos portátiles. Esta no es una búsqueda inútil de DRM, sino una respuesta práctica al hecho de que tiempos de contacto prolongados en dispositivos móviles pueden generar mensajes de copia que podrían obstaculizar la interfaz de usuario:

.multi-hover span { -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none;}

Este patrón de exploración de la interfaz de usuario en un dispositivo móvil ahora puede describirse como "tocar en el borde". Esto podría mejorarse aún más aumentando la superposición de la posición original de los spanelementos en una @mediabúsqueda para proporcionar puntos de acceso más grandes, haciendo que los paneles sean más fáciles de activar, junto con más mejoras para los teléfonos inteligentes. Este código tampoco es la única forma de conseguir este efecto: Ana Tudor ha escrito una técnica alternativa utilizando transformaciones CSS y SASS .

Conclusión

Crear un elemento sorpresa en las páginas web puede aumentar la participación de los visitantes sin ofuscar contenido importante, marginar a los visitantes móviles o poner en desventaja a los usuarios que requieren funciones de accesibilidad. Naturalmente, esto siempre debe equilibrarse con la necesidad de guiar a los usuarios a través del sitio web: los visitantes sólo se sorprenderán de los efectos aquí descritos si exploran la página por sí mismos o si son conducidos a ella. Cuánto se debe guiar a los usuarios y cuántas oportunidades se les debe brindar para descubrir un placer por iniciativa propia es una cuestión central del diseño de la experiencia del usuario.

Otras lecturas

• La guía definitiva para diseñar enlaces web
• No solo bonito: incorporando emoción en sus sitios web
• Una guía definitiva para pseudoclases y pseudoelementos CSS
• Dale alma a tu sitio web con interacciones emocionalmente inteligentes

(al, ea, mrn)Explora más en

• Codificación
• CSS
• javascript
• jQuery
• Diseño emocional
• HTML

Tal vez te puede interesar:

1. Diseño de un cuadro de texto, íntegro
2. Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
3. Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
4. Componentes de diseño en React

Diseñar para la emoción con efectos de desplazamiento

Diseñar para la emociónSorpresa en cajasPruebas de accesibilidadAgregar soporte táctilConclusiónClase magistral de tipografía, con Elliot Jay Stocks Impl

programar

es

https://pseint.es/static/images/programar-disenar-para-la-emocion-con-efectos-de-desplazamiento-824-0.jpg

2024-05-20

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente