Magento 2 Luma na start, czyli co z tym UX i jak go poprawić

###Magento 2

Skoro trafiłeś na EHANDELmag.com to istnieje duże prawdopodobieństwo, że robisz zakupy w internecie. Być może zamierzasz również uruchomić sklep na Magento 2. A może już taki posiadasz, ale nie spełnia on oczekiwań twoich lub twoich klientów... Poniżej przedstawimy wam zaledwie 4 kroki, dzięki którym nie tylko unikniecie katastrofy, ale zdobędziecie zadowolonych klientów i nie wydacie majątku na uruchomienie własnego e-sklepu.

Wróćmy na chwilę do roku 2015. Miało wtedy miejsce ważne wydarzenie na rynku systemów e-commerce - wydana została wersja beta Magento 2, jednego z najpopularniejszych sklepów internetowych. W ramach nowej wersji oprogramowania odświeżono większość mechanizmów widocznych dla użytkownika oraz skupiono się na RWD, czego owocem jest domyślna skórka do Magento, zwana Magento Luma. I chociaż jest ona dużym krokiem naprzód w kwestii UX w porównaniu z tym, co oferowano wcześniej, to jednak sama w sobie nie jest pozbawiona wad. W niniejszym artykule pokrótce omówimy gdzie popełniono błędy oraz jak można je łatwo naprawić.

###Luma i jej kłopoty

####Kafelki

Klienci coraz chętniej robią zakupy w internecie za pośrednictwem kanału mobile. Z Raportu E-Commerce Standard 2016 wynika, że 17% firm działających w branży e-commerce generuje sprzedaż w kanale mobilnym na poziomie od 10 do 20%. Kolejne 12% firm powyżej tego poziomu. Nic więc dziwnego, że 23% sklepów planuje stworzenie aplikacji mobilnej do obsługi swoich klientów. Warto więc z równą powagą myśleć o wszystkich kanałach dystrybucji asortymentu e-sklepu.

Pierwsze w oczy rzucają się zmiany dotyczące strony głównej sklepu. Zrezygnowano z wszechobecnych w internecie karuzelek, na rzecz statycznych kafelków. Decyzja ta oparta została o liczne badania na temat zachowań internautów - z jednej strony automatyczna zmiana zawartości karuzelki utrudnia odczyt informacji, z drugiej niewielka część użytkowników samodzielnie się przez nią przeklikuje. Zastosowane kafelki, poprzez swoje ułożenie, wspierają naturalny kierunek podążania wzrokiem oraz są prostsze dla użytkownika.

To jednak nie oznacza, że zaimplementowano je perfekcyjnie - nawet w najnowszej wersji cierpią one na bolączki w trybie responsywnym. Kafelki są różnej szerokości, część z nich po prostu nie mieści się na ekranie, zmuszając użytkownika do scrollowania od lewej do prawej, chcąc zapoznać się z ukrytymi informacjami. Najprostszym sposobem na uniknięcie tego problemu jest przygotowanie dodatkowej wersji kafli na urządzenia mobilne, które będą stałej szerokości lub pozbawione pięknego, rozciągającego tła.

Dzięki proponowanym zabiegom i unowocześnieniu aplikacji na urządzeniach mobilnych zmniejszy się liczba użytkowników, którzy nie tylko porzucają swoje koszyki, ale nigdy więcej nie wracają do danego sklepu. Wszystkie zmiany jakie wprowadzane są w e-sklepie mają przecież jedno, najważniejsze zadanie. Dzięki nim firma ma mieć rzesze zadowolonych klientów, którzy z przyjemnością będą wracać na kolejne zakupy.

####Produkty promowane

Istotna różnica pomiędzy wersjami występuje również w kwestii prezentacji produktów promowanych, bądź najlepiej się sprzedających. O ile mechanizm ten był dostępny również w wersji 1.x, tak tutaj uległ zmianie sposób ich wyświetlania - zdjęcia produktów są większe i wyświetlają się w dwóch rzędach, po 5 produktów w każdym. Problem z tą funkcjonalnością pojawia się, gdy wyświetlamy tam liczbę produktów niepodzielną przez 5 - na przykład 8. Z prawej strony wyświetlona jest wtedy biała, pusta przestrzeń, co utrudnia utrzymanie wzroku na ważnych elementach. Skutecznym rozwiązaniem jest ustawienie limitu wyświetlanych produktów na 5. Inna propozycja rozwiązania tego problemu to doinstalowanie modułu do Magento (darmowego lub za niewielką jednorazową opłatą), który zmieni statyczne rzędy w bardziej dynamiczne. Zajmą one mniej miejsca i pozwolą na swobodobniejszy dobór liczby elementów.

####Nawigacja

W ramach umieszczonej na górze nawigacji umieszczone są różne kategorie i podkategorie. Wszystko byłoby dobrze, gdyby nie fakt, że nic nie wskazuje czy dana podkategoria zawiera subkategorie. W ramach przykładowej instalacji sklepu, sytuacja taka ma miejsce w ramach struktury Woman > Tops - ta podkategoria zawiera jeszcze cztery inne, jednak nic na to nie wskazuje.

Skutecznym rozwiązaniem byłoby dodanie elementu, który wskazywałby, że dana pozycja zawiera podmenu - często wykorzystuje się do tego grot strzałki wskazujący w prawo lub w dół. Warto rozważyć również możliwość zastąpienia standardowego menu rozwiązaniem znacznie nowocześniejszym, tzw. MegaMenu. Ten prosty zabieg nie tylko zwiększy atrakcyjność strony ale pozwoli również w widocznym i atrakcyjnym miejscu umieścić informacje o promocjach.

Dzięki intuicyjnej nawigacji użytkownik spędzi na stronie więcej czasu, dobrze zapozna się z opisem produktów i zasadami dokonywania płatności oraz dokona zakupu.

####Dodaj do koszyka

W omawianym przypadku, strona produktu jest bardzo przejrzysta i podzielona na czytelne sekcje. Jednak przy jej projektowaniu naruszono zasadę, żeby komunikaty dla użytkownika były wyświetlane w okolicy miejsca, w którym doszło do interakcji. Najlepszym tego przykładem jest przycisk dodawania do koszyka. Kliknięcie w niego spowoduje wyświetlenie komunikatu u góry strony - może on zostać przeoczony, jeżeli użytkownik nie znajduje się akurat na samej górze. Idealnym rozwiązaniem jest zmiana miejsca wyświetlania tego komunikatu. W przypadku koszyka zasada jest prosta: im mniej użytkownik musi klikać aby kupić produkt - tym lepiej. Co ciekawe, rozwiązania typu "AJAX" (dodawanie bez przeładowania strony) oraz widoczne komunikaty dadzą użytkownikowi poczucie kontroli nad tym co robi na stronie.

###Podsumowanie W artykule tym przedstawione zostały największe wady domyślnej skórki Magento, jeśli chodzi o kwestie user experience. Należy mieć je na uwadze, stawiając sklep w oparciu o tę technologię. Warto jednak pamiętać, że UX to szeroki wachlarz zagadnień, które mają wpływ na atrakcyjność e-sklepu. Przedstawione tutaj wskazówki są jedynie jednymi z pierwszych kroków, które warto zrobić przy uruchamianiu własnej platformy sprzedażowej.

Autorzy:

Daniel Cisek, senior developer - Kaliop Poland

Arkadiusz Tokarczyk, senior developer - Kaliop Poland