Os recursos de CSS e interface se referem a novos recursos e sintaxes de CSS que permitem reduzir ou substituir soluções JavaScript personalizadas ou algumas dicas de CSS, além de ajudar você a escrever códigos melhores e mais simples. A adoção de recursos modernos de CSS permite que os desenvolvedores:
- Reduza o tempo de desenvolvimento.
- Melhorar a eficiência, a legibilidade e a manutenção do código.
- Melhore o desempenho.
- Crie interfaces do usuário incríveis que sejam perfeitas, eficientes e acessíveis.
Nesta série de estudos de caso, você vai aprender como vários sites de e-commerce adotaram
animações de rolagem, transições de visualização, API Popover,
consultas de contêiner e o seletor has(), além dos benefícios resultantes disso.
Por que os sites de e-commerce devem usar esses recursos?
Em Seis etapas para justificar uma UX melhor, a Forrester Research mostra que uma interface bem projetada pode aumentar as conversões em até 200%. Os usuários parecem correlacionar a qualidade do design com a confiança: 94% dos consumidores considerando que o design é o principal motivo para deixar ou desconfiar de um site. É por isso que os sites de e-commerce se beneficiam especialmente desses recursos de CSS e interface. Os funis de conversão precisam ser o mais simples possível para que os usuários possam concluir as tarefas com facilidade e confiança. Interações responsivas e navegação perfeita podem fornecer um bom feedback visual para o usuário e adicionar alegria e expressão à jornada geral.
Esses recursos foram criados para serem fáceis de usar e podem ser implementados principalmente em CSS com o mínimo de JavaScript. Eles ajudam a criar experiências de e-commerce incríveis sem precisar recorrer a bibliotecas de terceiros ou JavaScript personalizado para criar a mesma funcionalidade. O uso de menos JavaScript também pode melhorar a performance, tornando essas experiências mais suaves e responsivas.
Os recursos da interface da Web podem ser usados em todas as partes da jornada do usuário. Aqui estão alguns exemplos reais:
| Recurso/empresa | redBus | PolicyBazaar | Tokopedia (link em inglês) |
|---|---|---|---|
| Animações de rolagem | Carrinho | Página de informações do produto (PLP) | Página de detalhes do produto (PDP) |
| Ver transições | Login | PDP | PDP |
| Popover (link em inglês) | - | - | PDP |
| Consultas de contêiner | Início | - | PDP |
| :has() (link em inglês) | - | LP | PDP |
Ele também pode ser exibido como um funil de conversão:
Os estudos de caso a seguir compartilham como as empresas implementaram esses recursos e os benefícios que descobriram.
- Animações orientadas por rolagem
- Ver transições
- API Popover (link em inglês)
- Consultas de contêiner
- Seletor:has()
Um agradecimento especial a Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme e Rachel Andrew pelo feedback e revisão desta série de artigos.