Le funzionalità CSS e UI si riferiscono a nuove funzionalità e sintassi CSS che ti consentono di ridurre o sostituire soluzioni JavaScript personalizzate o alcuni hack CSS e aiutarti a scrivere codice migliore e più semplice. L'adozione di funzionalità CSS moderne consente agli sviluppatori di:
- Riduci i tempi di sviluppo.
- Migliora l'efficienza, la leggibilità e la manutenibilità del codice.
- Migliorare le prestazioni.
- Crea interfacce utente belle, semplici, efficienti e accessibili.
In questa serie di case study, scopri come diversi siti di e-commerce hanno adottato animazioni basate sullo scorrimento, transizioni di visualizzazione, l'API Popover, le query del contenitore e il selettore has(), nonché i vantaggi che hanno ottenuto.
Perché i siti di e-commerce dovrebbero utilizzare queste funzionalità?
In Six Steps for Justifying Better UX, Forrester Research mostra che un'interfaccia utente ben progettata può aumentare le conversioni fino al 200%. Gli utenti sembrano associare la qualità del design alla fiducia, dato che il 94% dei consumatori cita il design come il motivo principale per cui abbandonano o non si fidano di un sito web. Per questo motivo, i siti di e-commerce trarranno particolare vantaggio da queste funzionalità CSS e UI. Le canalizzazioni di conversione devono essere il più agevoli possibile, in modo che gli utenti possano completare la propria attività in modo facile e sicuro. Le interazioni adattabili e la navigazione fluida possono fornire un buon feedback visivo all'utente e aggiungere piacere ed espressione al percorso complessivo.
Queste funzionalità sono state progettate per essere facili da usare e possono essere implementate principalmente in CSS con un minimo di JavaScript. Aiutano a creare esperienze di e-commerce straordinarie senza dover ricorrere a librerie di terze parti o a JavaScript personalizzato per creare la stessa funzionalità. L'utilizzo di meno JavaScript può anche migliorare il rendimento: queste esperienze saranno più fluide e reattive.
Le funzionalità dell'interfaccia utente web possono essere utilizzate in tutte le parti del percorso dell'utente. Ecco alcuni esempi reali:
| Funzionalità/azienda | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animazioni basate sullo scorrimento | Carrello | Pagina della scheda di prodotto (PLP) | Pagina dei dettagli del prodotto (PDP) |
| Visualizza transizioni | Accedi | PDP | PDP |
| Popup | - | - | PDP |
| Query sui container | Home | - | PDP |
| :has() | - | PLP | PDP |
Questo valore può essere visualizzato anche come canalizzazione di conversione:
I seguenti case study illustrano in che modo le aziende hanno implementato queste funzionalità e i vantaggi che hanno scoperto.
- Animazioni basate sullo scorrimento
- Visualizza transizioni
- API Popup
- Query sui container
- Selettore:has()
Un ringraziamento speciale a Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme e Rachel Andrew per i loro feedback e la revisione di questa serie di articoli.