CSS- en UI-mogelijkheden verwijzen naar nieuwe CSS-functies en syntaxis waarmee u aangepaste JavaScript-oplossingen of sommige CSS-hacks kunt verminderen of vervangen en u kunt helpen betere en eenvoudigere code te schrijven. Door moderne CSS-functies toe te passen, kunnen ontwikkelaars:
- Verkort de ontwikkeltijd.
- Verbeter de code-efficiëntie, leesbaarheid en onderhoudbaarheid.
- Prestatie verbeteren.
- Creëer prachtige gebruikersinterfaces die naadloos, efficiënt en toegankelijk zijn.
In deze reeks casestudy's leert u hoe diverse e-commercesites scrollgestuurde animaties, weergavetransities, de Popover API, Container Queries en de has() selector hebben overgenomen, en welke voordelen zij hiervan hebben ondervonden.
Waarom zouden e-commercesites deze functies moeten gebruiken?
In zes stappen om een betere UX te rechtvaardigen laat Forrester Research zien dat een goed ontworpen gebruikersinterface het aantal conversies tot wel 200% kan verhogen. Gebruikers lijken ontwerpkwaliteit in verband te brengen met vertrouwen, waarbij 94% van de consumenten aangeeft dat design de belangrijkste reden is om een website te verlaten of te wantrouwen. Dit is de reden waarom e-commercesites vooral zullen profiteren van deze CSS- en UI-mogelijkheden. Conversietrechters moeten zo wrijvingsloos mogelijk zijn, zodat gebruikers hun taak gemakkelijk en vol vertrouwen kunnen voltooien. Responsieve interacties en naadloze navigatie kunnen de gebruiker goede visuele feedback geven en vreugde en expressie toevoegen aan de algehele reis.
Deze functies zijn ontworpen om eenvoudig te gebruiken en kunnen grotendeels in CSS worden geïmplementeerd met minimaal JavaScript. Ze helpen geweldige e-commerce-ervaringen te creëren zonder dat u uw toevlucht hoeft te nemen tot bibliotheken van derden of aangepast JavaScript om dezelfde functionaliteit te creëren. Het gebruik van minder JavaScript kan u ook een prestatieverbetering opleveren: waardoor deze ervaringen soepeler en responsiever worden.
Web UI-mogelijkheden kunnen in alle delen van het gebruikerstraject worden gebruikt. Hier zijn een paar voorbeelden uit de echte wereld:
| Functie/Bedrijf | rode bus | BeleidBazaar | Tokopedia |
|---|---|---|---|
| Scrollgestuurde animaties | Winkelwagen | Productvermeldingspagina (PLP) | Pagina met productdetails (PDP) |
| Overgangen bekijken | Log in | PDP | PDP |
| Pop-over | - | - | PDP |
| Containerquery's | Thuis | - | PDP |
| :heeft() | - | PLP | PDP |
Dit kan ook worden weergegeven als een conversietrechter:
De volgende casestudies laten zien hoe bedrijven deze functies hebben geïmplementeerd en welke voordelen ze hebben ontdekt.
Speciale oproep aan Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme en Rachel Andrew voor uw feedback en beoordeling van deze reeks artikelen.