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 eleganti, 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 loro 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 utilizzo minimo di JavaScript. Aiutano a creare esperienze di e-commerce straordinarie senza dover ricorrere a librerie di terze parti o 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 per aver recensito questa serie di articoli.