Funkcje CSS i UI odnoszą się do nowych funkcji i składni CSS, które umożliwiają ograniczenie lub zastąpienie niestandardowych rozwiązań JavaScript lub niektórych hacków CSS oraz ułatwiają tworzenie lepszego i prostszego kodu. Dzięki wdrożeniu nowoczesnych funkcji CSS deweloperzy mogą:
- Skrócenie czasu tworzenia.
- zwiększenie wydajności, czytelności i łatwości utrzymania kodu;
- Zwiększenie wydajności.
- Twórz piękne interfejsy, które są płynne, wydajne i dostępne.
Z tych serii badań klinicznych dowiesz się, jak różne witryny e-commerce wprowadziły animacje sterowane przez przewijanie, przejścia między widokami, interfejs API Popover, zapytania kontenera i selektor has() oraz jakie korzyści im to przyniosło.
Dlaczego witryny e-commerce powinny korzystać z tych funkcji?
W raporcie Six Steps for Justifying Better UX firma Forrester Research podaje, że dobrze zaprojektowany interfejs może zwiększyć liczbę konwersji nawet o 200%. Użytkownicy wydają się łączyć jakość projektu z zaufanym, ponieważ 94% konsumentów wskazuje, że źle zaprojektowana strona jest głównym powodem, dla którego ją opuszczają lub nie ufają jej. Dlatego z tych funkcji CSS i UI skorzystają przede wszystkim witryny e-commerce. Ścieżki konwersji muszą być jak najbardziej płynne, aby użytkownicy mogli łatwo i pewnie realizować swoje zadania. Interakcje z użytkownikiem oraz płynna nawigacja mogą zapewnić użytkownikowi dobrą informację zwrotną i dodać przyjemności oraz wyrazistości całej podróży.
Te funkcje zostały zaprojektowane tak, aby były łatwe w użyciu i można je zaimplementować głównie w CSS z minimalną ilością kodu JavaScript. Pomagają one tworzyć świetne doświadczenia w zakresie handlu elektronicznego bez konieczności korzystania z bibliotek innych firm lub niestandardowego kodu JavaScript w celu tworzenia tych samych funkcji. Korzystanie z mniejszej ilości kodu JavaScript może też zwiększyć wydajność: dzięki temu aplikacja będzie działać płynniej i szybciej reagować.
Funkcje interfejsu internetowego można stosować na wszystkich etapach ścieżki użytkownika. Oto kilka przykładów z życia:
| Funkcja/firma | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animacje sterowane przewijaniem | Koszyk | Strona z informacjami o produkcie (PLP) | Strona ze szczegółami produktu (PDP) |
| Wyświetlanie przejść | Zaloguj się | PDP | PDP |
| Wyskakujące okienko | - | - | PDP |
| Zapytania dotyczące kontenerów | Strona główna | - | PDP |
| :has() | - | PLP | PDP |
Dane te można też wyświetlić jako ścieżkę konwersji:
W tych studiach przypadku znajdziesz informacje o tym, jak firmy wdrożyły te funkcje i jakie korzyści dzięki temu uzyskały.
- Animacje wywoływane przez przewijanie
- Wyświetlanie przejść
- Popover API
- Zapytania dotyczące kontenerów
- :has()
Specjalne podziękowania dla Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme i Rachel Andrew za opinie i sprawdzenie tej serii artykułów.