Kaliop Poland
Jak poprawić UX w Magento 2

Jak poprawić UX w Magento 2

W ramach nowej wersji Magento zmieniono wiele funkcjonalności, poprawiając odczucia związane z obcowaniem z produktami, zarówno po stronie użytkownika, jak i administratora sklepu. Kluczowym elementem tej zmiany było utworzenie nowej skórki domyślnej o nazwie Luma. Skórka ta implementuje dominujące trendy, skupiając się na implementacji RWD oraz poprawiając User Experience. Jej twórcom nie udało się jednak uniknąć kilku błędów.

Magento Luma - wady ukryte

W tym artykule przedstawione zostaną najbardziej rzucające się w oczy błędy, które można zobaczyć w sklepach działających na tym oprogramowaniu, wraz z przykładowymi rozwiązaniami. Należy pamiętać, że User Experience ma ogromny wpływ na to, czy użytkownik zdecyduje się na powrót na daną witrynę, a co za tym idzie na kolejne zakupy. Zakupy w Sieci są reklamowane jako te, które nie frustrują - nie burzmy więc tej wizji niedostosowanym sklepem internetowym.

Kafelki

Stronie głównej poświęcono wiele uwagi, starając się wprowadzić nowoczesny i  czytelny wygląd. Osiągnięto to przez zastosowanie coraz bardziej popularnych statycznych kafelków. Ich przewaga nad dynamicznymi “karuzelami” jest taka, że informacja jest cały czas widoczna i klient nie musi starać się do niej dotrzeć. Kafelki również poprzez zastosowane ułożenie, pozwalają na wymuszenie konkretnego kierunku podążania wzrokiem.

 Pomimo tych zalet, rozwiązanie zastosowane w Magento posiada pewną wadę - niezbyt dobrze działa w trybie responsywnym. Wynika to z faktu, że część kafelków jest innej szerokości z racji zastosowanych grafik - skutkuje to tym, że strona nie skaluje się dobrze na ekranie urządzenia, wymuszając na użytkowniku jej przewijanie od lewej do prawej.

Najprostszym rozwiązaniem tego problemu jest przygotowanie kafli dedykowanych dla urządzeń mobilnych - o stałej szerokości lub z grafikami o dostosowanym rozmiarze.

Produkty promowane

Kolejnym elementem strony głównej, który został poddany istotnemu liftingowi jest lista produktów promowanych. W porównaniu z Magento 1, zastosowano większe zdjęcia produktów oraz wyświetlanie ich w dwóch rzędach, po 5 produktów w każdym.

Powoduje to, że sekcja ta jest bardziej wyeksponowana i klient na pewno zwróci na nią uwagę. Aczkolwiek, w sytuacji gdy liczba produktów jest niepodzielna przez pięć, i wynosi na przykład 7, w dolnym rzędzie po prawej stronie znajduje się biały, niezagospodarowany obszar. Obszar ten przyciąga wzrok użytkownika i powoduje, że nie skupia się on na ważniejszych informacjach.

Do najprostszych rozwiązań można zaliczyć ograniczenie liczby wyświetlanych elementów do 5 lub wyświetlenie zawsze parzystej liczby elementów w dwóch wierszach - na przykład po 2 lub po 3. Bardziej zaawansowanym rozwiązaniem jest zainstalowanie rozszerzenia do Magento, które wyświetli produkty w postaci dynamicznej listy, co jednak wiąże się z ograniczeniem widoczności części elementów.

Nawigacja

Na górnej belce strony umieszczona jest nawigacja - jest to miejsce zgodne z oczekiwaniami użytkownika. Zawarte są w niej kategorie, wraz z podkategoriami, umożliwiające przeglądanie zawartości sklepu. Problem jest jednak w tym, że nic nie wskazuje na to, że dana kategoria zawiera zagnieżdżone podkategorie i użytkownik jest zmuszony do nawigowania “na ślepo” - dopiero najechanie na pozycję w menu wyświetli drzewko z podkategoriami.

W celu wyeliminowania tej niedogodności, do menu można dodać element graficzny, jasno wskazujący na strukturę kategorii. Powszechnie wykorzystuje się do tego grot strzałki, wskazujący w prawo lub w dół, w zależności od tego w którą stronę menu się rozwija. Często spotykane jest także zastąpienie standardowego mechanizmu menu, rozwiązaniami bardziej rozbudowanymi, jak na przykład MegaMenu. Są to rozszerzenia, które przynoszą również dodatkowe korzyści, na przykład możliwość eksponowania w menu produktów promowanych.

Wyświetlanie komunikatów

W ramach Lumy położono nacisk na to, aby strona była przejrzysta i podzielona na odrębne sekcje, z których każda czemuś służy. Jednak przy projektowaniu naruszono zasadę dotyczącą wyświetlania komunikatów użytkownikowi - w przypadku gdy użytkownik wywołuje jakąś akcję, komunikat na jej temat powinien zostać wyświetlony blisko miejsca jej wywołania.

Tymczasem kliknięcie w przycisk dodaj do koszyka, spowoduje wyświetlenie informacji o statusie u góry strony - jeżeli użytkownik nie widzi tego fragmentu strony, przeoczy komunikat i może spowodować to jego frustrację.

Rozwiązaniem jest przeniesienie miejsc wyświetlania komunikatów jak najbliżej miejsc wywołania akcji. Skutek będzie taki, że użytkownik będzie czuł, że ma kontrolę nad tym, co robi na stronie.

Autor:
Daniel Cisek, senior developer, Kaliop Poland