Las capacidades de CSS y la IU se refieren a nuevas funciones y sintaxis de CSS que te permiten reducir o reemplazar soluciones de JavaScript personalizadas o algunos hacks de CSS, y te ayudan a escribir un código mejor y más simple. La adopción de funciones modernas de CSS permite a los desarrolladores hacer lo siguiente:
- Reduce el tiempo de desarrollo.
- Mejora la eficiencia, la legibilidad y el mantenimiento del código.
- Mejora el rendimiento.
- Crea interfaces de usuario atractivas que sean fluidas, eficientes y accesibles.
En esta serie de casos de éxito, descubre cómo una variedad de sitios de comercio electrónico adoptaron animaciones impulsadas por el desplazamiento, transiciones de vista, la API de Popover, consultas de contenedor y el selector has(), y los beneficios que obtuvieron al hacerlo.
¿Por qué los sitios de comercio electrónico deberían usar estas funciones?
En Six Steps for Justifying Better UX, Forrester Research muestra que una IU bien diseñada puede aumentar las conversiones hasta en un 200%. Al parecer, los usuarios correlacionan la calidad del diseño con la confianza, ya que el 94% de los consumidores citan el diseño como el motivo principal para abandonar un sitio web o desconfiar de él. Por eso, los sitios de comercio electrónico se beneficiarán especialmente de estas capacidades de CSS y IU. Los embudos de conversión deben ser lo más sencillos posible para que los usuarios puedan completar su tarea con facilidad y confianza. Las interacciones responsivas y la navegación fluida pueden proporcionar buenos comentarios visuales para el usuario y agregar placer y expresión al recorrido general.
Estas funciones se diseñaron para que sean fáciles de usar y se pueden implementar principalmente en CSS con un mínimo de JavaScript. Ayudan a crear experiencias de comercio electrónico increíbles sin tener que recurrir a bibliotecas de terceros ni a JavaScript personalizado para crear la misma funcionalidad. Usar menos JavaScript también puede brindarte un aumento del rendimiento, lo que hace que estas experiencias sean más fluidas y responsivas.
Las funciones de la IU web se pueden usar en todas las partes del recorrido del usuario. Estos son algunos ejemplos del mundo real:
| Función/Empresa | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animaciones impulsadas por el desplazamiento | Carrito | Página de la ficha del producto (PLP) | Página de detalles del producto (PDP) |
| Ver transiciones | Acceder | PDP | PDP |
| Ventana emergente | - | - | PDP |
| Consultas de contenedores | Página principal | - | PDP |
| :has() | - | PLP | PDP |
Esto también se puede mostrar como un embudo de conversión:
En los siguientes casos de éxito, se comparte cómo las empresas implementaron estas funciones y los beneficios que descubrieron.
- Animaciones impulsadas por el desplazamiento
- Ver transiciones
- API de popover
- Consultas de contenedores
- Selector:has()
Mención especial a Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme y Rachel Andrew por sus comentarios y revisión de esta serie de artículos.