Le funzionalità CSS e dell'interfaccia utente fanno riferimento a nuove funzionalità e sintassi CSS che consentono di ridurre o sostituire le soluzioni JavaScript personalizzate o alcuni hacker CSS e ti aiutano a scrivere codice migliore e più semplice. L'adozione di funzionalità CSS moderne consente agli sviluppatori di:
- Ridurre i tempi di sviluppo.
- Migliora l'efficienza, la leggibilità e la gestibilità del codice.
- Migliorare le prestazioni.
- Crea splendide interfacce utente che siano senza interruzioni, efficienti e accessibili.
In questa serie di case study, scoprirai in che modo vari siti di e-commerce hanno adottato animazioni con scorrimento, visualizzazioni delle transizioni, l'API Popover, query relative al container e il selettore has(). Scopri i vantaggi ottenuti in questo modo.
Perché i siti di e-commerce dovrebbero utilizzare queste funzionalità?
In Six Steps for Justification Better UX, Forrester Research mostra che una UI ben progettata può aumentare le conversioni fino al 200%. Sembra che gli utenti mettano in relazione la qualità del design con la fiducia con il 94% dei consumatori, che indica che il design è il motivo principale per cui hanno abbandonato un sito web o non ne hanno più fiducia. Questo è il motivo per cui i siti di e-commerce trarranno vantaggio soprattutto da queste funzionalità di CSS e di interfaccia utente. Le canalizzazioni di conversione devono essere il più agevoli possibile, in modo che gli utenti possano completare le proprie attività in modo semplice e sicuro. Le interazioni adattabili e la navigazione fluida possono fornire un buon feedback visivo per l'utente, nonché 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 codice JavaScript minimo. Consentono di creare esperienze di e-commerce fantastiche senza dover ricorrere a librerie di terze parti o codice JavaScript personalizzato per creare la stessa funzionalità. L'utilizzo di meno JavaScript può anche migliorare le prestazioni, rendendo queste esperienze 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 con scorrimento | Carrello | Pagina della scheda di prodotto (PLP) | Pagina dei dettagli del prodotto |
| Visualizza transizioni | Accesso | pagina dei dettagli del prodotto | pagina dei dettagli del prodotto |
| Popover | - | - | pagina dei dettagli del prodotto |
| Query container | Home | - | pagina dei dettagli del prodotto |
| :has() | - | PLP | pagina dei dettagli del prodotto |
Questa opzione può essere visualizzata 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.
Un ringraziamento speciale a Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme e Rachel Andrew per il tuo feedback e la tua revisione di questa serie di articoli.