Las funciones de IU y CSS hacen referencia a nuevas funciones y sintaxis de CSS que te permiten reducir o reemplazar las soluciones personalizadas de JavaScript o algunos hackeos de CSS, además de ayudarte a escribir un código mejor y más simple. La adopción de funciones modernas de CSS les 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 eficientes, eficientes y accesibles.
En esta serie de casos de éxito, descubrirás cómo una variedad de sitios de comercio electrónico adoptaron animaciones basadas en desplazamientos, las transiciones de vistas, la API de Popover, las consultas de contenedores 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 Justification Better UX, Forrester Research muestra que una IU bien diseñada puede aumentar las conversiones hasta en un 200%. Los usuarios parecen correlacionar la calidad del diseño con la confianza, ya que el 94% de los consumidores afirma que el diseño es la razón principal por la que abandonan un sitio web o no confían en él. Por eso, los sitios de comercio electrónico se beneficiarán especialmente de estas funciones de IU y CSS. 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 deleite 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 asombrosas sin tener que recurrir a bibliotecas de terceros o JavaScript personalizado para crear la misma funcionalidad. El uso de menos JavaScript también puede mejorar el rendimiento, ya que hace que estas experiencias sean más fluidas y responsivas.
Las capacidades de la IU web se pueden usar en todas las partes del recorrido del usuario. A continuación, se muestran algunos ejemplos del mundo real:
| Función o empresa | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animaciones basadas en desplazamientos | Carrito | Página de la ficha de producto (PLP) | Página de detalles del producto (PDP) |
| Cómo ver las 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 basadas en desplazamientos
- Cómo ver las transiciones
- API de Popover
- Consultas de contenedores
- Selector:has()
Queremos saludar a Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme y Rachel Andrew por sus comentarios y opiniones sobre esta serie de artículos.