Funkcje CSS i UI odnoszą się do nowych funkcji oraz składni CSS, które pozwalają zmniejszyć lub zastąpić niestandardowe rozwiązania JavaScript lub niektóre sposoby załamania kodu CSS, a także pomóc w pisaniu lepszego i prostszego kodu. Wprowadzenie nowoczesnych funkcji CSS umożliwia programistom:
- Skrócenie czasu programowania.
- Zwiększ wydajność kodu, jego czytelność i łatwość obsługi.
- Zwiększ skuteczność.
- Twórz atrakcyjne, wydajne i łatwo dostępne interfejsy użytkownika.
Z tej serii studiów przypadków dowiesz się, jak różne witryny e-commerce wykorzystują animacje wyświetlane na przewijaniu, przejścia widoku, interfejs Popover API, zapytania Container i selektor has(), a także korzyści, jakie dzięki temu odnoszą.
Dlaczego witryny e-commerce powinny korzystać z tych funkcji?
W publikacji S6 steps for Justizing Better UX firma Forrester Research pokazuje, że dobrze zaprojektowany interfejs może zwiększyć liczbę konwersji nawet o 200%. Wygląda na to, że użytkownicy wiążą jakość projektu z zaufaniem do 94% konsumentów, którzy twierdzą, że projekt jest głównym powodem rezygnacji z witryny lub budowania zaufania do niej. Dlatego właśnie witryny e-commerce będą czerpać korzyści z tych możliwości związanych z usługami porównywania cen i interfejsem użytkownika. Ścieżki konwersji muszą być jak najbardziej płynne, aby użytkownicy mogli łatwo i pewnie wykonać swoje zadanie. Elastyczne interakcje i płynna nawigacja mogą zapewnić użytkownikowi pozytywne wrażenia wizualne oraz wzbogacić całą podróż.
Funkcje te zostały zaprojektowane tak, by były łatwe w użyciu i można je wdrożyć głównie w CSS, przy minimalnym wykorzystaniu kodu JavaScript. Pomagają tworzyć niesamowite środowisko e-commerce bez konieczności korzystania z zewnętrznych bibliotek czy niestandardowego kodu JavaScript. Mniej JavaScriptu również może poprawić wydajność, czyli płynniejsze i bardziej responsywne działanie tych stron.
Funkcje interfejsu internetowego można wykorzystywać na wszystkich etapach ścieżki użytkownika. Oto kilka praktycznych przykładów:
| Funkcje/firma | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Animacje wyświetlane po przewinięciu | Koszyk | Strona z listą produktów | Strona ze szczegółami usługi |
| Wyświetlanie przejść | Zaloguj się | PDP | PDP |
| Popowet | - | - | PDP |
| Zapytania o kontenery | Strona główna | - | PDP |
| :has() (w języku angielskim) | - | plP | PDP |
Ten identyfikator może być także wyświetlany jako ścieżka konwersji:
W poniższych studiach przypadków pokazujemy, jak firmy wdrożyły te funkcje i jakie korzyści odkryły.
- Animacje wyświetlane po przewinięciu
- Wyświetlanie przejść
- Interfejs Popover API
- Zapytania o kontenery
- :has() – selektor
Prosimy o opinie Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme oraz Rachel Andrew za opinie i przejrzenie tej serii artykułów.