CSS- und UI-Funktionen beziehen sich auf neue CSS-Funktionen und ‑Syntax, mit denen Sie benutzerdefinierte JavaScript-Lösungen oder einige CSS-Hacks reduzieren oder ersetzen und besseren und einfacheren Code schreiben können. Durch die Verwendung moderner CSS-Funktionen können Entwickler:
- Entwicklungszeit reduzieren.
- Codeeffizienz, Lesbarkeit und Wartbarkeit verbessern
- Optimieren Sie die Leistung.
- Erstellen Sie ansprechende Benutzeroberflächen, die nahtlos, effizient und barrierefrei sind.
In dieser Reihe von Fallstudien erfahren Sie, wie verschiedene E-Commerce-Websites scrollgesteuerte Animationen, Ansichtsübergänge, die Popover API, Containerabfragen und die has()-Auswahl implementiert haben und welche Vorteile sie dadurch erzielt haben.
Warum sollten E-Commerce-Websites diese Funktionen verwenden?
In der Studie Sechs Schritte zur Begründung einer besseren UX zeigt Forrester Research, dass eine gut gestaltete Benutzeroberfläche die Anzahl der Conversions um bis zu 200 % steigern kann. Nutzer scheinen die Designqualität mit Vertrauen in Verbindung zu bringen. 94% der Verbraucher geben an, dass das Design der Hauptgrund dafür ist, dass sie eine Website verlassen oder ihr nicht vertrauen. Daher profitieren vor allem E-Commerce-Websites von diesen CSS- und UI-Funktionen. Conversion-Trichter müssen so reibungslos wie möglich sein, damit Nutzer ihre Aufgabe einfach und sicher erledigen können. Responsive Interaktionen und eine nahtlose Navigation können dem Nutzer gutes visuelles Feedback geben und der gesamten User Journey Ausdruck verleihen.
Diese Funktionen sind einfach zu verwenden und können größtenteils in CSS mit minimalem JavaScript implementiert werden. Sie helfen dabei, hervorragende E-Commerce-Plattformen zu erstellen, ohne auf Drittanbieterbibliotheken oder benutzerdefiniertes JavaScript zurückgreifen zu müssen, um dieselben Funktionen zu erstellen. Wenn Sie weniger JavaScript verwenden, kann sich das auch positiv auf die Leistung auswirken: Die Nutzung wird flüssiger und reaktionsschneller.
Web-UI-Funktionen können in allen Phasen des Kaufprozesses verwendet werden. Hier sind einige Beispiele aus der Praxis:
| Funktion/Unternehmen | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Scroll-basierte Animationen | Einkaufswagen | Seite mit Produkteintrag (Product Listing Page, PLP) | Seite mit Produktdetails (Product Details Page, PDP) |
| Übergänge ansehen | Anmelden | PDP | PDP |
| Pop-up | - | - | PDP |
| Containerabfragen | Startseite | - | PDP |
| :has() | - | PLP | PDP |
Das kann auch als Conversion-Trichter dargestellt werden:
In den folgenden Fallstudien erfahren Sie, wie Unternehmen diese Funktionen implementiert haben und welche Vorteile sie dadurch erzielt haben.
Ein besonderer Dank geht an Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme und Rachel Andrew für ihr Feedback und die Überprüfung dieser Artikelreihe.