Die CSS- und UI-Funktionen beziehen sich auf neue CSS-Funktionen und die neue Syntax, mit denen Sie benutzerdefinierte JavaScript-Lösungen oder einige CSS-Hacks reduzieren oder ersetzen können und die Ihnen helfen, besseren und einfacheren Code zu schreiben. Die Einführung moderner CSS-Funktionen ermöglicht Entwicklern Folgendes:
- Reduzieren Sie die Entwicklungszeit.
- Codeeffizienz, Lesbarkeit und Verwaltbarkeit verbessern
- Leistung verbessern
- Erstellen Sie ansprechende Benutzeroberflächen, die nahtlos, effizient und barrierefrei sind.
In dieser Reihe von Fallstudien erfahren Sie, wie bei verschiedenen E-Commerce-Websites scrollgesteuerte Animationen, View-Übergänge, die Popover API, Containerabfragen und der has()-Selektor verwendet wurden und welche Vorteile sich daraus ergeben.
Warum sollten E-Commerce-Websites diese Funktionen nutzen?
In Six Steps for Justifying Better UX zeigt Forrester Research, dass mit einer gut gestalteten Benutzeroberfläche die Anzahl der Conversions um bis zu 200 % gesteigert werden kann. Nutzer scheinen Designqualität mit Vertrauen in Beziehung zu setzen. 94% der Nutzer geben Design als Hauptgrund dafür an, dass sie eine Website verlassen oder ihr nicht trauen. Aus diesem Grund profitieren auch E-Commerce-Websites von diesen CSS- und UI-Funktionen. Conversion-Trichter müssen so reibungslos wie möglich gestaltet sein, damit Nutzer ihre Aufgabe einfach und sicher erledigen können. Responsive Interaktionen und eine nahtlose Navigation können ein gutes visuelles Feedback für die Nutzer bieten und das Ganze ansprechend und ausdrucksstark gestalten.
Diese Funktionen sind auf Nutzerfreundlichkeit ausgelegt und können größtenteils mit minimalem JavaScript-Code in CSS implementiert werden. Sie ermöglichen tolle E-Commerce-Erlebnisse, ohne auf Drittanbieterbibliotheken oder benutzerdefiniertes JavaScript zurückgreifen zu müssen, um dieselben Funktionen bereitzustellen. Wenn Sie weniger JavaScript verwenden, können Sie auch die Leistung steigern, da diese Vorgänge reibungsloser und reaktionsschneller sind.
Funktionen der Web-UI können in allen Phasen der User Journey verwendet werden. Hier sind einige Beispiele aus der Praxis:
| Funktion/Unternehmen | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Scrollbasierte Animationen | Einkaufswagen | Seite mit Produktinformationen | Seite mit Produktdetails |
| Übergänge ansehen | Anmeldung | Produktdetailseiten | Produktdetailseiten |
| Popover | - | - | Produktdetailseiten |
| Containerabfragen | Startseite | - | Produktdetailseiten |
| :has() | - | PLP | Produktdetailseiten |
Dies kann auch als Conversion-Trichter dargestellt werden:
In den folgenden Fallstudien wird beschrieben, wie Unternehmen diese Funktionen implementiert haben und welche Vorteile sie dabei herausgefunden haben.
Ein besonderer Dank an Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme und Rachel Andrew für Ihr Feedback und die Durchsicht dieser Artikelreihe.